/* ===========================================================================
   FRANCHISEHUB ONTWERP V7, DE OVERIGE PAGINA'S VAN GROEP A

   WAAROM EEN EIGEN STIJLBLAD
   /matching, /modules, /ai-assistent en /marketing-analytics met hun
   verdiepingen gaan naar versie 7 terwijl andere bouwers met de drie
   ontwerpbladen en de voorpagina bezig zijn. Die bladen blijven daarom
   onaangeroerd. Alles wat deze pagina's extra nodig hebben staat hier,
   gebouwd op de tokens en bouwstenen van de lagen ervoor: geen nieuwe
   kleur, geen nieuwe letter, geen SVG en geen afbeelding.

   WAT HIER STAAT
   1. Gedeeld: sprongmenu als genummerde lijst, kruimelpad, kopmaat,
      rasters, cijfertegels, rijenlijsten, stapregels, uitklapblok,
      verderleeskaarten en de batenkaarten
   2. /matching en zijn twee verdiepingen
   3. /modules
   4. /ai-assistent en zijn twee verdiepingen
   5. /marketing-analytics en zijn drie verdiepingen

   De maten volgen de vier breekpunten van ontwerp-basis.css: vanaf 1280,
   1024 tot 1279, 600 tot 1023 en tot 599.
   =========================================================================== */

/* ===========================================================================
   1. GEDEELD
   =========================================================================== */

/* Het sprongmenu is op deze pagina's een genummerde lijst met een kenmerk
   voor de bestaande test op de verdiepingspagina's. Die test controleert
   alleen een strook met data-fh-paginanav en een ol: zo blijft hij de
   sprongen van deze pagina's bewaken nu de oude strook verdwijnt. De
   grondslag zet alleen ul op marge nul, dus een ol hield zonder deze regel
   de inspringing van de browser. */
ol.paginanav-lijst{margin:0;padding:0;list-style:none}

/* De kopmaat van /bewijs en de dienstpagina's: een stap kleiner dan de
   voorpagina. De koppen van deze pagina's zijn vragen of lange zinnen en
   liepen op de voorpaginamaat op breed over drie regels. */
body[data-pagina="matching"] .titel-1,
body[data-pagina="matching-vier-toetsen"] .titel-1,
body[data-pagina="matching-weging-en-criteria"] .titel-1,
body[data-pagina="modules"] .titel-1,
body[data-pagina="ai-assistent"] .titel-1,
body[data-pagina="ai-assistent-mogelijkheden-en-grenzen"] .titel-1,
body[data-pagina="ai-assistent-persoonsgegevens-afschermen"] .titel-1,
body[data-pagina="marketing-analytics"] .titel-1,
body[data-pagina="marketing-analytics-consoles-en-rapport"] .titel-1,
body[data-pagina="marketing-analytics-herkomst-en-kosten"] .titel-1,
body[data-pagina="marketing-analytics-segmenten-en-reeksen"] .titel-1{font-size:var(--t-open-bewijs)}

/* Het etiket staat op deze pagina's soms als eigen blok boven de kop. Het
   blijft inline-flex zoals in de grondslag; deze regel zorgt alleen dat de
   kop eronder de gewone afstand krijgt en niet naast het etiket kruipt. */
div.etiket + .titel-1,
div.etiket + .titel-2{margin-top:var(--sp-kopalinea)}

/* ---- Het kruimelpad van een verdieping ----
   Een verdieping staat onder een moederpagina. Het pad is zichtbaar en
   daarom mag het BreadcrumbList-blok in de gestructureerde gegevens blijven
   staan: een zoekmachine krijgt alleen wat ook op het scherm staat. */
.kruimels{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--lees);margin-bottom:var(--sp-kopalinea);
}
.kruimels a{color:var(--blauw-diep);text-decoration:none;border-bottom:1px solid var(--blauw-rand)}
.kruimels a:hover,.kruimels a:focus-visible{border-bottom-color:var(--blauw-diep)}
.kruimels [aria-current="page"]{color:var(--inkt)}

/* De inleiding van een verdieping. .lead staat erbij voor de bestaande test
   op de detailpagina's (die zoekt de eerste p.lead); de maat komt van
   .opening-lead uit laag 3. */
p.lead.opening-lead{max-width:60ch}

/* ---- Rasters ----
   Twee, drie en vier gelijke kolommen die op kleinere schermen stapelen. Het
   raster van laag 3 (.rij) heeft twaalf kolommen en is bedoeld voor tekst
   naast tekst; kaarten van gelijke breedte lezen met een eigen raster
   eenvoudiger in de opmaak. */
.raster-2,.raster-3,.raster-4{display:grid;gap:var(--gat);align-items:start}
.raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster-rek{align-items:stretch}
@media (max-width:1023px){
  .raster-3{grid-template-columns:1fr}
  .raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){ .raster-2{grid-template-columns:1fr} }
@media (max-width:599px){ .raster-4{grid-template-columns:1fr} }

/* Een witte kaart in een raster gebruikt .werkdeel uit laag 3. Deze regels
   geven de titel en de alinea's erin de maat van een kaart. */
.werkdeel .titel-kaart{margin:0}
.werkdeel p{font-size:15px;line-height:1.6}
.werkdeel p + p{margin-top:0}

/* Een uitlegkaart met meer dan een alinea of een vetgedrukte aanloop. */
.uitlegkaart p + p{margin-top:var(--sp-alinea)}
.uitlegkaart b{color:var(--inkt)}

/* ---- Cijfertegels ----
   Een groot getal met een naam en een korte uitleg. Dit is geen grafiek:
   de getallen staan als tekst en er is geen as of schaal. Grafieken gaan op
   deze site altijd via canvas (vaste regel van de eigenaar). */
.cijfertegels{display:grid;gap:var(--gat);grid-template-columns:repeat(var(--tegels,5),minmax(0,1fr))}
.cijfertegel{
  background:var(--wit);border:2px solid var(--blauw-rand);border-radius:20px;
  padding:22px;display:grid;gap:8px;align-content:start;
}
.cijfertegel-getal{
  font-size:var(--t-groot);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--inkt);
}
.cijfertegel-naam{font-weight:600;color:var(--inkt);font-size:17px;line-height:1.3}
.cijfertegel-bij{font-size:15px;line-height:1.55;color:var(--lees)}
.cijfertegel-lila{border-color:var(--rand-lila)}
.cijfertegel-roze{border-color:var(--roze-rand)}
.cijfertegel-leeg{border-style:dashed;border-color:var(--rand-bediening)}
@media (max-width:1279px){ .cijfertegels{grid-template-columns:repeat(min(var(--tegels,5),3),minmax(0,1fr))} }
@media (max-width:767px){ .cijfertegels{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:419px){ .cijfertegels{grid-template-columns:1fr} }

/* ---- De rijenlijst ----
   Genummerde onderdelen onder elkaar met een haarlijn ertussen: nummer links,
   kop en tekst rechts. Voor lijsten waarin de volgorde of de telling de
   bewering is (negen mogelijkheden, acht bewerkingen, vier vormen). */
.rijenlijst{margin:0;padding:0;list-style:none;display:grid}
.rijenlijst > li{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--gat);
  padding:28px 0;border-top:1px solid var(--rand);
}
.rijenlijst > li:last-child{border-bottom:1px solid var(--rand)}
.rijenlijst-nr{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--lila-diep);
  padding-top:6px;
}
.rijenlijst h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.rijenlijst-lijf{display:grid;gap:var(--sp-alinea);max-width:72ch}
.rijenlijst-lijf > * + *{margin-top:0}
.rijenlijst-soort{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lees)}
.rijenlijst-uit{
  font-size:15px;line-height:1.6;color:var(--lees);
  border-left:3px solid var(--rand-lila);padding-left:14px;
}
@media (max-width:599px){
  .rijenlijst > li{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .rijenlijst-nr{padding-top:0}
}

/* ---- De stapregel ----
   Een regel in een document met nummer, naam, wat er gebeurt en de
   uitkomst. Dit vervangt de vastgezette blokken van het oude ontwerp: de
   rij staat hier volledig en in één keer, zonder vastzetten tijdens het
   scrollen. Versie 7 zet geen onderdelen vast: ook de koppen van een
   vormblok en een verdieping scrollen gewoon mee (zie daar). */
.stapregel{
  display:grid;grid-template-columns:40px minmax(0,190px) minmax(0,1fr) auto;
  gap:16px;align-items:start;padding:12px 0;border-bottom:1px solid #eceff9;
  font-size:15px;line-height:1.55;
}
.stapregel:last-child{border-bottom:0}
.stapregel-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep);padding-top:2px}
.stapregel-naam{font-weight:600;color:var(--inkt)}
.stapregel-wat{color:var(--lees)}
.stapregel-uit{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;border-radius:999px;padding:4px 10px;
  background:var(--papier);border:1px solid var(--rand);color:var(--lees);
}
.stapregel-uit-vast{background:var(--mint-papier);border-color:var(--mint-rand);color:#0c6741}
.stapregel-uit-open{background:var(--amber-papier);border-color:var(--amber-rand);color:#6f4a11}
.stapregel-uit-lila{background:var(--lila-papier);border-color:var(--rand-lila);color:var(--lila-diep)}
/* Onder 768 pixels staan naam, wat en uitkomst onder elkaar in de tweede
   kolom. Alleen binnen een stapregel: het label komt ook los voor (bij de
   bewerkingen in de sluis) en daar zou een kolomplaatsing een tweede kolom
   in de omringende lijst openen. */
@media (max-width:767px){
  .stapregel{grid-template-columns:32px minmax(0,1fr);gap:4px 12px}
  .stapregel > .stapregel-naam,.stapregel > .stapregel-wat,.stapregel > .stapregel-uit{grid-column:2}
  .stapregel > .stapregel-uit{justify-self:start;margin-top:6px;white-space:normal}
}
.veld-voet{
  padding:16px 24px;border-top:1px solid var(--rand);background:var(--papier);
  font-size:15px;line-height:1.6;
}
.veld-voet b{color:var(--inkt)}
@media (max-width:599px){ .veld-voet{padding:14px 16px} }

/* ---- Het uitklapblok ----
   Een lange lijst die de hoofdtekst niet mag verdringen staat achter een
   gewone details-knop: zonder script, met het toetsenbord bedienbaar en met
   de volledige tekst in de opmaak. */
.uitklap{
  background:var(--wit);border:2px solid var(--rand-lila);border-radius:20px;
  margin-top:var(--sp-kop);
}
.uitklap > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-weight:600;color:var(--inkt);font-size:17px;
}
.uitklap > summary::-webkit-details-marker{display:none}
.uitklap > summary::after{
  content:'+';font-family:var(--mono);font-size:22px;line-height:1;color:var(--lila-diep);
  width:36px;height:36px;border-radius:999px;border:2px solid var(--rand-bediening);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.uitklap[open] > summary::after{content:'\2212'}
.uitklap > summary:hover::after,.uitklap > summary:focus-visible::after{border-color:var(--blauw-diep)}
.uitklap-lijf{padding:0 24px 24px}
@media (max-width:599px){
  .uitklap > summary{padding:16px}
  .uitklap-lijf{padding:0 16px 16px}
}

/* ---- De verderleeskaarten ----
   De ingangskaart van laag 2 met een titel die geen kop is: in de oude
   opmaak was dit een div en een extra kop zou de koppenstructuur van de
   pagina veranderen. */
.ingang-titel{font-size:var(--t-kaart);font-weight:600;line-height:1.25;color:var(--inkt)}
.ingang-lijf .fragment{font-size:15px}

/* ---- De batenkaarten ----
   Twee kaarten naast elkaar: wat het de franchisegever en wat het de
   kandidaat oplevert. De strook in de kleur van de eigen familie, de lijst
   met een stip per punt zoals de ingangen op de voorpagina. */
.baat-lijst{display:grid;gap:16px;margin-top:var(--sp-kopalinea)}
.baat-lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.6}
.baat-lijst li .punt{margin-top:9px}
.baat-lijst b{color:var(--inkt)}
.ingang-roze .punt{background:var(--roze)}
.ingang-blauw .punt{background:var(--blauw)}

/* ---- Een tabel met een kolom meer ----
   De toegangstabel van laag 3 geeft de eerste kolom 24 procent. Bij drie
   tekstkolommen van gelijke inhoud hoort een gelijke verdeling. */
.tabel-gelijk tbody th{width:auto}
.tabel-gelijk th,.tabel-gelijk td{width:33.33%}
.tabel-smal th:last-child,.tabel-smal td:last-child{width:16%;white-space:nowrap}
@media (max-width:767px){ .tabel-smal td:last-child{white-space:normal} }
.tabelvlak + .tabelvlak{margin-top:var(--sp-kop)}
/* Onder 768 pixels verbergt laag 3 de kopregel voor het oog en houdt hem voor
   een schermlezer. De cellen erin hielden hun breedte en staken daardoor
   onzichtbaar tot 190 pixels buiten het venster (gemeten per element op 320
   en 390). Hier krimpen ze mee in hun verborgen vak. */
@media (max-width:767px){
  .toegang-tabel thead tr,
  .toegang-tabel thead th{display:block;width:1px;height:1px;padding:0;overflow:hidden}
}
/* Een tabel van twee korte kolommen (naam en getal) past ook op 320 pixels.
   Als groepen onder elkaar werd zij vijf keer zo lang zonder dat er iets
   beter leesbaar werd, dus zij houdt haar gewone vorm. */
@media (max-width:767px){
  .tabel-vast thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .tabel-vast thead tr{display:table-row;width:auto;height:auto;overflow:visible}
  .tabel-vast thead th{display:table-cell;width:auto;height:auto;overflow:visible;padding:12px 16px}
  .tabel-vast tbody tr{display:table-row;padding:0}
  .tabel-vast tbody th,.tabel-vast tbody td{display:table-cell;padding:12px 16px;margin-top:0}
  .tabel-vast tbody td::before{content:none}
}

/* Een kleine merktekst achter een regel in een lijst, bijvoorbeeld de vijf
   kernpunten tussen de 26 eisen. Woord en rand, geen kleur alleen. */
.lijst-merk{
  display:inline-block;margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#6f4a11;background:var(--amber-papier);
  border:1px solid var(--amber-rand);border-radius:999px;padding:2px 8px;vertical-align:1px;
}

/* De sectie die direct op de kopbalk volgt krijgt ruimte voor het
   kruimelpad; een verdieping heeft geen beeldkader in de opening. */
.opening-verdieping{padding-bottom:var(--sp-compact)}

/* Een link die als losse regel onder een blok staat. */
.verder-rij{margin-top:var(--sp-kop);display:flex;flex-wrap:wrap;gap:12px 28px}
/* Een mailadres heeft geen spatie om op af te breken en liep op 320 pixels
   buiten het actievlak. Hier mag het midden in het woord breken. Inline in
   plaats van inline-flex: een lange link over twee regels zette de pijl
   anders los aan de rechterrand (gezien op 390). */
.verder-breek,.verder-rij .verder{display:inline;overflow-wrap:anywhere;line-height:1.8}
.verder-breek::after,.verder-rij .verder::after{margin-left:8px}
.verder-rij{align-items:baseline}

/* ===========================================================================
   2. /matching EN ZIJN VERDIEPINGEN
   =========================================================================== */

/* De vrije figuur onder de kop van de opening is sinds 22-09 weg. Het waren
   twee effen capsules (blauw en lila) die los onder de kop zweefden; op de
   live site lazen ze als een kapot schuifje (melding van de eigenaar via de
   regie). De opmaak blijft staan omdat een andere bouwer in de HTML werkt;
   deze regel haalt het blok uit de opmaak, met zijn ruimte. De opening zelf
   verandert niet van hoogte: de rechterkolom is hoger. */
.vrijvorm-matching{display:none}
@media (min-width:1024px){ .vrijvorm-matching{display:none} }

/* De twee lijsten van 22 en 26 in het uitklapblok. */
.inventaris{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat)}
@media (max-width:767px){ .inventaris{grid-template-columns:1fr} }
.inventaris-kop{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--rand-lila);margin-bottom:8px}
.inventaris-tel{font-size:var(--t-groot);font-weight:600;line-height:1;color:var(--inkt);letter-spacing:-.02em}
.inventaris-naam{font-weight:600;color:var(--inkt)}
.inventaris-groep{padding:12px 0;border-bottom:1px solid #eceff9}
.inventaris-groep:last-child{border-bottom:0}
.inventaris-groepnaam{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.inventaris-groep ul{margin-top:6px;display:grid;gap:4px;font-size:15px;line-height:1.5;color:var(--inkt)}

/* Het oefenvoorbeeld van de score in het beeldkader van /crm. De tabel
   staat in een wit document en houdt zijn vier groepen op 390 pixels. */
.kader-matching{--kader-strook:64px;--decor-hoogte:210px;margin-top:var(--sp-kop)}
@media (max-width:599px){ .kader-matching{--kader-strook:40px;--decor-hoogte:120px} }
.voorbeeld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:767px){ .voorbeeld-paar{grid-template-columns:1fr} }
.voorbeeld-kant{background:var(--papier);border:1px solid var(--rand);border-radius:12px;padding:16px;font-size:15px;line-height:1.6}
.voorbeeld-kant .verslag-veldnaam{display:block;margin-bottom:6px}
.veld-lijf .tabelvlak{border-radius:12px}
.voorbeeld-uitkomst{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  background:var(--blauw-licht);border-radius:12px;padding:16px;
}
.voorbeeld-score{font-size:var(--t-groot);font-weight:600;line-height:1;color:var(--inkt);letter-spacing:-.02em}
.voorbeeld-uitkomst p{font-size:15px;line-height:1.6;flex:1 1 280px}

/* De vier oordelen: vier werkkaarten in één familie. Het nummer staat in de
   cirkel, de naam in de kop. */
.oordelen{margin-top:var(--sp-kop)}
.oordelen .werkkaart h3{margin-top:18px}

/* De drie manieren waarop ontbrekende informatie zichtbaar wordt, op het
   amberen vlak van de grens zoals op /bewijs. */
.geval-nr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#6f4a11}
.grens-kaart p{font-size:15px;line-height:1.6}
/* Een grenskaart in een raster van gelijke hoogte: zonder deze regel verdeelde
   het raster in de kaart de extra hoogte over de regels en zakte de tekst
   van de kortere kaarten los van hun nummer. */
.raster-rek > .grens-kaart{align-content:start}
.vraag-kop{font-size:var(--t-onder);font-weight:500;line-height:1.25;color:var(--inkt)}
@media (max-width:1023px){ .vraag-kop{margin-top:12px} }

/* Het lege beoordelingsdocument: vier kolommen zonder inhoud. De regels
   krijgen hoogte zodat het leest als een formulier om in te vullen. */
.leeg-document td{height:52px}
.leeg-document th{width:25%}
@media (max-width:767px){
  .leeg-document td{height:auto;min-height:0}
  .leeg-document tbody td::after{
    content:'';display:block;height:26px;margin-top:6px;border-bottom:1px dashed var(--rand-bediening);
  }
}

/* ---- De verdiepingen van /matching ---- */

/* De toetsenbank: de statusregels van laag 2 in een wit document, met het
   nummer en de vraag onder de naam. Kleur is nooit de enige drager: de
   uitkomst staat er als woord. */
.veld .regel b{color:var(--inkt)}
.regel-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep);margin-right:10px}
.regel-vraag{display:block;color:var(--lees);font-size:15px;margin-top:2px}

/* Een vorm of onderdeel met de kop links en de uitleg rechts, zoals de
   artikelen van de oude pagina. Een haarlijn scheidt de blokken. */
.vormblok{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gat);
  padding-top:var(--sp-compact);margin-top:var(--sp-compact);border-top:1px solid var(--rand);
}
@media (max-width:1023px){ .vormblok{grid-template-columns:1fr;gap:var(--sp-kopalinea)} }
.vormblok-kop{display:grid;gap:10px;align-content:start}
/* Hier stond tot 22-09-2026 position:sticky voor de kop vanaf 1024 pixels.
   Die regel deed niets: de kop is een gridkind dat de hele rij vult
   (gemeten 2519 pixels hoog tegen 109 pixels inhoud), dus plakken kon hij
   nergens. Astra (v7-geheel-01 deel 2 bevinding 28) zag de tegenspraak met
   "versie 7 zet niets vast". De regel is weggehaald zodat stijlblad en
   beschrijving hetzelfde zeggen; wat de bezoeker ziet verandert niet.
   Wil het ontwerp de kop toch laten plakken, dan is align-self:start op de
   kop nodig; top:96px valt dan onder de kopbalk van 74 pixels. */
.vormblok-nr{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.vormblok-naam{font-size:var(--t-onder);font-weight:500;line-height:1.2}
.vormblok-wat{font-size:17px;line-height:1.6;color:var(--lees);max-width:40ch}
.vormblok-lijf{display:grid;gap:var(--sp-alinea);max-width:760px}
.vormblok-lijf > .raster-2,.vormblok-lijf > .raster-3,.vormblok-lijf > .tabelvlak,
.vormblok-lijf > .uitlegkaart,.vormblok-lijf > div{margin-top:8px;margin-bottom:8px}

/* Leerbaar en basis als merk in de compensatietabel: dezelfde statustinten
   als de drie klassen erboven, met het woord erbij. */
.merk-klasse{
  display:inline-block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:2px 8px;font-weight:500;
}
.merk-leerbaar{background:var(--mint-papier);border:1px solid var(--mint-rand);color:#0c6741}
.merk-basis{background:var(--amber-papier);border:1px solid var(--amber-rand);color:#6f4a11}
.toegang-tabel .vetocode{margin-left:6px;font-weight:400}

/* De drie klassen en het vergelijkingspaar: statuspanelen met de uitkomst
   als woord boven de naam. */
.statuspaneel .titel-kaart{margin-top:6px;color:var(--inkt)}
.statuspaneel-vast .klasse-uit{color:#0c6741}
.statuspaneel-open .klasse-uit{color:#6f4a11}
.statuspaneel-leeg .klasse-uit{color:var(--lees)}

/* De tien veto's in twee kolommen met hun code. */
.vetolijst{display:grid;gap:8px;margin-top:10px}
.vetolijst li{display:grid;grid-template-columns:44px 1fr;gap:10px;font-size:15px;line-height:1.5;color:var(--inkt)}
.vetocode{font-family:var(--mono);font-size:12px;color:var(--lila-diep);padding-top:2px}

/* De vijf niveaus als rij woorden, ieder met een rand. */
.woordrij{display:flex;flex-wrap:wrap;gap:8px}
.woord{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--wit);border:1px solid var(--rand-lila);color:var(--lila-diep);
  border-radius:999px;padding:5px 12px;
}
/* De drempel van sterk krijgt de merkkleur van het werk zelf; de andere
   twee blijven lila. Het woord draagt de betekenis, de kleur alleen nadruk. */
.woord-blauw{border-color:var(--blauw-rand);color:var(--blauw-diep);background:var(--blauw-licht)}

/* De drie klassen van een tekort: mint, amber en papier als status,
   met het woord erbij. */
.klasse-uit{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.statuspaneel-leeg{background:var(--papier);border:1px solid var(--rand)}
.kopstrook-leeg{--strook-kleur:var(--rand)}
.statuspaneel p{margin-top:10px;font-size:15px;line-height:1.6}

/* Het vergelijkingspaar: dezelfde kandidaat bij twee formules. */
.paar-naam{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lees)}

/* ===========================================================================
   3. /modules
   =========================================================================== */

/* ---- De plattegrond ----
   Vier blokken naast elkaar in de verhouding van hun aantal modules (4, 3,
   5 en 4): de breedte van een verdieping zegt hoeveel erin zit. Elk blok
   draagt de kleur van zijn familie. Een tegel in lila is een module die
   alleen op deze pagina wordt beschreven, zoals de leeswijzer eronder
   uitlegt. Dit is navigatie en geen grafiek. */
.plattegrond{margin:var(--sp-kop) 0 0;background:var(--wit);border-radius:28px;padding:24px}
.plattegrond-kop{display:block;margin-bottom:16px}
.plattegrond-vlak{display:grid;grid-template-columns:4fr 3fr 5fr 4fr;gap:16px;align-items:start}
@media (max-width:1279px){ .plattegrond-vlak{grid-template-columns:1fr 1fr} }
@media (max-width:599px){
  .plattegrond{padding:16px;border-radius:20px}
  .plattegrond-vlak{grid-template-columns:1fr}
}
.plattegrond-blok{display:grid;gap:8px;border-radius:16px;padding:12px;background:var(--papier);border:2px solid var(--rand)}
.plattegrond-blauw{border-color:var(--blauw-rand);background:var(--blauw-licht)}
.plattegrond-lila{border-color:var(--rand-lila);background:var(--lila-papier)}
.plattegrond-roze{border-color:var(--roze-rand);background:var(--roze-licht)}
.plattegrond-blokkop{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-weight:600;color:var(--inkt);text-decoration:none;padding:4px 4px 8px;
}
.plattegrond-blokkop:hover,.plattegrond-blokkop:focus-visible{color:var(--blauw-diep)}
.plattegrond-reeks{font-size:11px}
.tegel{
  display:flex;align-items:center;gap:10px;background:var(--wit);border:1px solid var(--blauw-rand);
  border-radius:10px;padding:10px 12px;font-size:15px;font-weight:500;color:var(--inkt);text-decoration:none;
  transition:border-color var(--duur) var(--soepel);
}
.tegel:hover,.tegel:focus-visible{border-color:var(--blauw-diep)}
.tegel-nr{font-family:var(--mono);font-size:11px;color:var(--lila-diep)}
.tegel-diep{background:var(--lila-licht);border-color:var(--rand-lila)}

.leeswijzer{margin-top:var(--sp-kop)}
.leeswijzer-kop{margin-bottom:12px}
.leeswijzer-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.6}
.leeswijzer-item b{color:var(--inkt);display:block}
.leeswijzer-merk{width:28px;height:20px;border-radius:6px;margin-top:3px;display:block}
.leeswijzer-merk-kort{background:var(--wit);border:1px solid var(--blauw-rand)}
.leeswijzer-merk-diep{background:var(--lila-licht);border:1px solid var(--rand-lila)}

/* ---- De verdiepingen ----
   Links de naam en het nummerbereik, rechts de cellen. Vanaf 1024 pixels
   blijft de kop staan terwijl de cellen langslopen: op een kaart moet je
   zien waar je bent. Daaronder staat de kop boven de cellen. */
.verdieping{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gat);
  padding-top:var(--sp-compact);margin-top:var(--sp-compact);border-top:1px solid var(--rand);
}
.verdieping:first-child{padding-top:0;margin-top:0;border-top:0}
@media (max-width:1023px){ .verdieping{grid-template-columns:1fr;gap:var(--sp-kopalinea)} }
.verdieping-kop{display:grid;gap:10px;align-content:start}
/* Ook hier stond een sticky-regel die om dezelfde reden niets deed; zie
   .vormblok-kop hierboven. */
.verdieping-reeks{font-size:12px;color:var(--lila-diep)}
.verdieping-zin{font-size:17px;line-height:1.6;color:var(--lees)}
.cellen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gat);align-items:start}
@media (max-width:767px){ .cellen{grid-template-columns:1fr} }
.cel-breed{grid-column:1 / -1}
.cel .werkkaart-kop h3{margin-top:0;font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.cel p{font-size:15px;line-height:1.6}
.werkkaart.cel p.cel-lead{font-size:17px;color:var(--inkt)}
.werkkaart.cel p.cel-link{margin-top:18px}
.cel-punten{display:grid;gap:10px;margin-top:14px}
.cel-punten li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:15px;line-height:1.6}
.werkkaart.cel p.cel-onderschrift{font-size:13px;color:var(--lees);border-top:1px solid var(--rand);padding-top:12px;margin-top:18px}

/* ---- De takenmatrix ----
   Een nagebouwd scherm in CSS, voor een schermlezer verborgen: de vier
   namen staan voluit in het onderschrift. Geen schermafdruk, want die
   veroudert en past zich niet aan een telefoonbreedte aan. */
.matrix{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:8px;margin-top:8px}
.matrix-as{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lees)}
.matrix-as-boven{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* De zij-as staat rechtop: alleen de woorden draaien, niet het raster.
   Met de draaiing op het raster zelf werden de twee rijen twee kolommen. */
.matrix-as-zij{grid-column:1;grid-row:2;display:grid;grid-template-rows:1fr 1fr;gap:8px}
.matrix-as-zij span{writing-mode:vertical-rl;transform:rotate(180deg)}
.matrix-as-zij span,.matrix-as-boven span{display:flex;align-items:center;justify-content:center}
.matrix-vlak{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.matrix-vak{border-radius:12px;padding:14px;display:grid;gap:8px;align-content:start;min-height:120px;border:1px solid var(--rand)}
.matrix-naam{color:var(--inkt)}
.matrix-taak{background:var(--wit);border-radius:8px;padding:6px 10px;font-size:13px;line-height:1.4;color:var(--inkt);border:1px solid var(--rand)}
.matrix-doen{background:var(--roze-licht);border-color:var(--roze-rand)}
.matrix-plannen{background:var(--blauw-licht);border-color:var(--blauw-rand)}
.matrix-delegeren{background:var(--lila-papier);border-color:var(--rand-lila)}
.matrix-later{background:var(--papier)}
@media (max-width:599px){
  .matrix{grid-template-columns:1fr}
  .matrix-as{display:none}
  .matrix-vlak{grid-column:1;grid-template-columns:1fr}
}

/* ---- De raakvlakken ----
   Welke module naar welke andere wijst staat als een regel boven de kop. */
.leiding-paar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--lila-diep);
}
.leiding-pijl{color:var(--lila)}
.dossier-slot{font-size:19px;color:var(--inkt);max-width:56ch}
.ingang-lijf .baat-lijst p{font-size:15px;line-height:1.6}

/* ===========================================================================
   4. /ai-assistent EN ZIJN VERDIEPINGEN
   =========================================================================== */

/* De drie vragen in de opening: een vraag als citaat met eronder wat je
   anders zou moeten doen. */
.vraagregel{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid #eceff9}
.vraagregel:last-child{padding-bottom:0;border-bottom:0}
.opening-lead + .knoppenrij{margin-top:var(--sp-actie)}
.titel-1 + .opening-lead{margin-top:var(--sp-kopalinea)}

/* Het rustmoment van laag 3 is gebouwd voor een zin van vier woorden. Deze
   zin heeft er tien en krijgt daarom de maat van een grote kop, zodat hij
   op een telefoon niet over vijf regels breekt. */
.rust-zin-klein{font-size:var(--t-groot);max-width:900px}

/* De velden die wel en niet overgaan: een lijst van naam en waarde in een
   wit document, twee kolommen op breed. */
.veldenlijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.veldenlijst > div{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid #eceff9;font-size:15px;line-height:1.5}
.veldenlijst dt{color:var(--lees)}
.veldenlijst dd{margin:0;color:var(--inkt);font-weight:500}
@media (max-width:767px){ .veldenlijst{grid-template-columns:1fr} }
@media (max-width:419px){ .veldenlijst > div{grid-template-columns:1fr;gap:2px} }

/* De telling onder de competentieniveaus, met de vier statusvakjes van
   laag 2 midden in de zin. */
.telling{font-size:15px;line-height:1.9}
.telling .vak-mini{display:inline-block;vertical-align:-2px;margin:0 2px 0 0}
.vak-bevestigd{background:var(--mint)}
.vak-voorstel{background:var(--lila)}
.vak-open{background:var(--amber)}
.vak-leeg{background:#7d83a3}

/* Een zekerheidslabel bij een bewerking in de sluis: exact, patroon of
   beste poging. */
.rijenlijst .stapregel-uit{justify-self:start}

/* De teller naast de inleiding: het getal draagt de bewering van de sectie
   (negen en geen tien) en staat daarom groot, maar als gewone tekst. */
.teller{display:flex;align-items:center;gap:16px}
.teller-getal{font-size:var(--t-rust);font-weight:600;line-height:1;color:var(--inkt);letter-spacing:-.03em}
.teller-bij{font-size:15px;line-height:1.5;color:var(--lees);max-width:30ch}

/* Een groep in een rijenlijst: de naam en het aantal boven de rijen. */
.groep{margin-top:var(--sp-kop)}
.groep-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px}
.groep-tel{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.rijenlijst-naam{font-size:var(--t-kaart);font-weight:600;line-height:1.25;color:var(--inkt)}
.cijfertegel-bij b{color:var(--inkt)}

/* De vier die nooit meegaan: per rij links wat het is en wat ermee
   gebeurt, rechts waarom. De reden is het onderwerp en krijgt de breedte. */
.regellijst{display:grid}
.regellijst-rij{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gat);
  padding:24px 0;border-top:1px solid var(--rand);
}
.regellijst-rij:last-child{border-bottom:1px solid var(--rand)}
.regellijst-rij > p{max-width:72ch}
.regellijst-wat{font-size:var(--t-kaart);font-weight:600;line-height:1.25;color:var(--inkt)}
.regellijst-hoe{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--lila-diep)}
@media (max-width:767px){ .regellijst-rij{grid-template-columns:1fr;gap:10px} }

/* ===========================================================================
   5. /marketing-analytics EN ZIJN VERDIEPINGEN
   =========================================================================== */

/* Het roze etiket: marketing is begeleiding naar buiten en draagt de roze
   familie, net als de roze ingangen. Laag 1 kent alleen het lila en het
   amberen etiket. */
.etiket-roze{color:var(--roze-diep);border-color:var(--roze-rand)}
.etiket-roze .etiket-stip{background:var(--roze)}

/* De acht stations van de weg in de opening. */
.route{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.route li{display:grid;grid-template-columns:32px minmax(0,150px) minmax(0,1fr);gap:12px;font-size:15px;line-height:1.5;align-items:baseline}
.route b{color:var(--inkt)}
.route-nr{font-family:var(--mono);font-size:12px;color:var(--roze-diep)}
@media (max-width:479px){
  .route li{grid-template-columns:32px minmax(0,1fr)}
  .route li > span:last-child{grid-column:2}
}

/* ---- De zandloper ----
   De tekst van de opening zegt dat de pagina onderweg smaller en daarna
   weer breder wordt. Dat blijft waar: de inhoud van elke sectie krijgt een
   eigen breedte, gecentreerd. Onder 1024 pixels valt de vorm weg, zoals de
   tekst ook zegt: daar is geen breedte om iets mee te vertellen. */
.zandloper{margin-left:auto;margin-right:auto}
@media (min-width:1024px){
  .zandloper-breed{max-width:100%}
  .zandloper-smal{max-width:1040px}
  .zandloper-taille{max-width:760px}
  .zandloper-verbreed{max-width:1180px}
}
/* Twee witte secties na elkaar: de tweede begint direct onder de eerste,
   anders stond er twee keer de ruimte van een hoofdstuk tussen. */
.sectie-vervolg{padding-top:0}
.ingang-breed .ingang-lijf{gap:16px}

/* Het station boven een sectie: nummer, naam en de maat van dat punt. */
.lat{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lat-nr{color:var(--roze-diep)}
.lat-naam{color:var(--inkt);font-weight:500}
.lat-maat{color:var(--lees)}

/* Een stapregel zonder nummer: naam, wat en uitkomst. */
.stapregel-drie{grid-template-columns:minmax(0,170px) minmax(0,1fr) auto}
.mono-naam{font-family:var(--mono);font-size:13px;font-weight:500}
@media (max-width:767px){
  .stapregel-drie{grid-template-columns:minmax(0,1fr)}
  .stapregel-drie > .stapregel-naam,.stapregel-drie > .stapregel-wat,.stapregel-drie > .stapregel-uit{grid-column:1}
}

/* De drie momenten die teruggaan naar de advertentie. */
.momenten{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.momenten li{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:20px;display:grid;gap:8px;font-size:15px;line-height:1.6}
.moment-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.moment-woord{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;background:var(--papier);border:1px solid var(--rand);color:var(--lees);
}
.moment-woord-vast{background:var(--mint-papier);border-color:var(--mint-rand);color:#0c6741}
.moment-bij{font-size:13px;color:var(--lees)}

/* Losse punten met een vetgedrukte aanloop, onder elkaar met een lijn. */
.puntenlijst{display:grid}
.puntenlijst > p{padding:14px 0;border-top:1px solid var(--rand);font-size:15px;line-height:1.6}
.puntenlijst > p:last-child{border-bottom:1px solid var(--rand)}
.puntenlijst b{color:var(--inkt)}

/* De retourstrook: de enige plek waar de leesrichting omkeert. Een roze
   band met een pijl naar links, compact en gecentreerd. */
.retour{text-align:center}
.retour-kop{display:inline-flex;align-items:center;gap:12px}
.retour-pijl{font-size:28px;line-height:1;color:var(--roze-diep)}
.retour-titel{color:var(--roze-diep);font-size:13px}
.retour-tekst{margin:12px auto 0;max-width:52ch;font-size:19px;line-height:1.55;color:var(--inkt)}

/* Een punt met een eigen titel en daaronder de uitleg, zoals in de oude
   opmaak: de titel is geen kop en krijgt geen punt. */
.puntenlijst > div{padding:14px 0;border-top:1px solid var(--rand);display:grid;gap:4px}
.puntenlijst > div:last-child{border-bottom:1px solid var(--rand)}
.puntenlijst > div p{font-size:15px;line-height:1.6}
.punt-titel{font-weight:600;color:var(--inkt)}

/* De drie monden: de advertentie is de mond waar deze pagina over gaat en
   krijgt de rand van de roze familie. */
.mond.mond-aan{border:2px solid var(--roze-rand);background:var(--roze-licht)}
/* Een kaarttitel die een alinea is (in de oude opmaak geen kop) houdt de
   kaartmaat; de alinearegel van .werkdeel zou hem anders op 15 pixels zetten. */
.werkdeel .titel-kaart,.werkdeel p.titel-kaart{color:var(--inkt);font-size:var(--t-kaart);line-height:1.25}

/* Een veldenlijst van één kolom in een smal document. Een leeg veld blijft
   als leeg zichtbaar. */
.veldenlijst-een{grid-template-columns:1fr}
.veldenlijst .veld-leeg dd{color:var(--lees);font-weight:400;font-style:italic}
.veldenlijst .vak-mini{display:inline-block;vertical-align:-2px;margin-right:8px}

/* Van antwoord naar veld: wat het formulier zegt, een pijl en wat het
   dossier ervan maakt. */
.vertaling{display:grid}
.vertaling li{
  display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid #eceff9;font-size:15px;line-height:1.5;
}
.vertaling li:last-child{border-bottom:0}
.vertaling-in{color:var(--inkt)}
.vertaling-pijl{color:var(--roze-diep);text-align:center}
.vertaling-uit{font-family:var(--mono);font-size:13px;color:var(--lila-diep)}
.vertaling-leeg .vertaling-uit{color:var(--lees)}
.vertaling .vak-mini{display:inline-block;vertical-align:-2px;margin-right:8px}
@media (max-width:599px){
  .vertaling li{grid-template-columns:minmax(0,1fr);gap:2px}
  .vertaling-pijl{display:none}
}

/* De kosten van één campagne: naam, bedrag en waarop het rust. Een regel
   zonder bedrag toont een streepje en geen nul. */
.kostenlijst{display:grid}
.kostenlijst li{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,140px) minmax(0,1fr);gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid #eceff9;
}
.kostenlijst li:last-child{border-bottom:0}
.kosten-naam{font-size:15px;color:var(--lees)}
.kosten-bedrag{font-size:var(--t-kaart);font-weight:600;color:var(--inkt)}
.kosten-bij{font-family:var(--mono);font-size:12px;color:var(--lees)}
.kosten-leeg .kosten-bedrag{color:var(--lees)}

/* Van segment naar inschrijving: twee getallen onder elkaar met een pijl,
   daaronder wie er werd overgeslagen en waarom, apart geteld. */
.inschrijving{display:grid;gap:6px;justify-items:start}
.inschrijving-regel{display:flex;align-items:baseline;gap:12px;font-size:15px;line-height:1.5}
.inschrijving-getal{font-size:var(--t-groot);font-weight:600;line-height:1;color:var(--inkt);min-width:2ch}
.inschrijving-uit .inschrijving-getal{color:var(--roze-diep)}
.inschrijving-pijl{font-size:22px;line-height:1;color:var(--lees);padding-left:10px}
.overgeslagen{display:grid;gap:6px;border-top:1px solid #eceff9;padding-top:14px}
.overgeslagen li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5}
.overgeslagen b{font-family:var(--mono);color:var(--inkt)}

/* ---- De consoles ----
   Per console een witte kaart met de naam, de tekening en de cijfers als
   tekst eronder. De tekening is canvas (vaste regel: grafieken nooit als
   SVG of via een bibliotheek), getekend door het bestaande script van deze
   pagina. */
.console{background:var(--wit);border:1px solid var(--rand);border-radius:20px;padding:24px;display:grid;gap:12px;align-content:start}
.console .titel-kaart{color:var(--inkt)}
.console-tekst,.console-slot{font-size:15px;line-height:1.6}
.console-slot b{color:var(--inkt)}
@media (max-width:599px){ .console{padding:16px} }
.cijferlijst{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;line-height:1.4}
.cijferlijst li{display:inline-flex;gap:6px;align-items:baseline}
.cijferlijst span{color:var(--lees)}
.cijferlijst b{font-family:var(--mono);color:var(--inkt);font-weight:500}
.cijfer-leeg b{color:var(--lees)}

/* De haken van /js/landing-marketing-analytics.js. Een doek staat verborgen
   tot het script het aanzet (ma-doek-aan): zonder script staan alleen de
   cijfers er, als gewone tekst. */
.ma-doek{margin:0}
.ma-doek-vel{display:none;width:100%;border-radius:12px}
.ma-doek-aan .ma-doek-vel{display:block}
/* Het doek van de datakwaliteit is getekend voor een donkere ondergrond
   (witte tekst, lichte balken). Het script blijft ongewijzigd, dus dit ene
   doek houdt de donkere kleur van de voet als eigen vlak. Zonder script is
   er geen tekening en dus ook geen donker vlak. */
.ma-doek-donker{display:none;background:var(--band);border-radius:20px;padding:20px}
.ma-doek-donker.ma-doek-aan{display:block}
.ma-doek-blad{margin-top:12px}

/* De drempel: twee grenzen met de onderwerpen die eronder vallen. */
.drempel-lijst{display:grid;gap:4px;margin-top:6px;font-size:15px;line-height:1.5}
.drempel-lijst li{padding-left:14px;position:relative}
.drempel-lijst li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:999px;background:var(--lila)}

/* De vijf velden van het datakwaliteitspaneel. */
.kwaliteit{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.kwaliteit li{background:var(--wit);border-radius:14px;padding:16px;display:grid;gap:6px;font-size:15px;line-height:1.55}
.kwaliteit-kop{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--inkt)}
.kwaliteit-kop b{font-family:var(--mono);font-weight:500}
.kwaliteit-actie{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lila-diep)}
@media (max-width:1023px){ .ma-doek-donker{margin-bottom:var(--gat)} }

/* ---- Het maandrapport ----
   Een wit document zoals het kandidaatverslag op /bewijs, met de bladeraar
   van het bestaande script eronder. Zonder script staan de vier bladen
   onder elkaar. */
.rapport-inhoud{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;color:var(--inkt)}
.rapport-inhoud li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.rapport-inhoud span{font-family:var(--mono);font-size:12px;color:var(--roze-diep);padding-top:3px}
.blad{padding:28px}
@media (max-width:599px){ .blad{padding:18px} }
.blad-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--roze-rand)}
.blad-merk{font-weight:700;color:var(--inkt)}
.blad-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lees);margin-top:4px}
.blad-formule{font-size:var(--t-kaart);font-weight:600;color:var(--inkt);margin-top:6px}
.blad-periode{font-size:15px}
.blad-kop-rechts{display:grid;gap:6px;justify-items:end;font-size:13px}
.blad-tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--rand);border-radius:999px;padding:3px 10px}
.ma-blad-pagina{display:grid;gap:10px;padding-top:18px}
.ma-blad-pagina + .ma-blad-pagina{border-top:1px dashed var(--rand);margin-top:18px}
.ma-rapport-aan .ma-blad-pagina{display:none;border-top:0;margin-top:0}
.ma-rapport-aan .ma-blad-pagina[data-ma-aan]{display:grid}
.blad-sec{display:flex;gap:10px;align-items:baseline;font-weight:600;color:var(--inkt);font-size:17px;margin-top:6px}
.blad-secnr{font-family:var(--mono);font-size:12px;color:#fff;background:var(--roze);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.blad-sub,.blad-voet{font-size:13px;line-height:1.6}
.blad-titel{font-size:15px;font-weight:600;color:var(--inkt);margin-top:6px}
.blad-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.blad-kpis-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.blad-kpis div{background:var(--papier);border-radius:10px;padding:10px;display:grid;gap:2px;font-size:12px}
.blad-kpis b{font-size:20px;color:var(--inkt)}
.blad-kpis i{font-style:normal;color:var(--lees)}
@media (max-width:479px){ .blad-kpis,.blad-kpis-drie{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cijferlijst-breed{gap:4px 10px}
.blad-tabelvlak{border-radius:12px}
.blad-tabel{font-size:13px}
.blad-tabel th,.blad-tabel td{padding:10px 14px}
.blad-pil{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;border:1px solid var(--rand)}
.blad-pil-sterk{background:var(--mint-papier);border-color:var(--mint-rand);color:#0c6741}
.blad-pil-redelijk{background:var(--blauw-licht);border-color:var(--blauw-rand);color:var(--blauw-diep)}
.blad-pil-zwak{background:var(--amber-papier);border-color:var(--amber-rand);color:#6f4a11}
.blad-pil-onbekend{background:var(--papier);color:var(--lees)}
.blad-forecast{display:flex;align-items:baseline;gap:12px}
.blad-forecast b{font-size:var(--t-groot);color:var(--inkt);line-height:1}
.ma-blad-bediening{display:none;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.ma-rapport-aan .ma-blad-bediening{display:flex}
.ma-blad-knop,.ma-blad-stip{
  font-family:var(--letter);font-weight:600;color:var(--inkt);background:var(--wit);
  border:2px solid var(--rand-bediening);border-radius:999px;min-width:40px;height:40px;cursor:pointer;
}
.ma-blad-knop:disabled{opacity:.4;cursor:default}
.ma-blad-stippen{display:flex;gap:8px}
.ma-blad-stip[aria-selected="true"]{background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff}
.ma-blad-knop:hover,.ma-blad-knop:focus-visible,.ma-blad-stip:hover,.ma-blad-stip:focus-visible{border-color:var(--blauw-diep)}

/* ---- De eindopmaak staat er vanaf de eerste weergave (22-09-2026) ----
   De doeken hierboven staan op display:none en het rapport zet zijn vier
   bladen onder elkaar, allebei tot landing-marketing-analytics.js het
   overneemt. Dat script draait pas na de eerste weergave. Bij herladen
   halverwege zag een bezoeker dus eerst die opmaak en sprong daarna alles op
   zijn plek: op 390 pixels een verschuiving van 0,6 in 6 van de 10 keer
   herladen, waarbij #consoles 600 pixels groeide, #bodem 266 en de pagina
   2297 pixels korter werd (Astra, live-controle-01 bevinding 11; meting in
   out/website/v7-livegang/meting-herlaadverschuiving-consoles-*).

   Met scripting:enabled weet het stijlblad dat het script gaat draaien en
   zet het diezelfde opmaak alvast neer: elk doek houdt zijn ruimte vast en
   het rapport toont meteen een blad met de bediening eronder. Het script
   verandert daarna niets meer aan de hoogte, dus er valt niets te springen.

   DE HOOGTES ZIJN DIE VAN HET SCRIPT. maakDoek() zet per doek een vaste
   hoogte in pixels; wijkt een getal hier af, dan springt de pagina alsnog.
   tests/unit/v7-ma-eerste-weergave.test.js houdt de twee gelijk.

   ZONDER SCRIPT VERANDERT ER NIETS. De mediavoorwaarde geldt dan niet: geen
   lege doeken, geen lege bediening en alle vier de bladen onder elkaar, met
   alle cijfers als gewone tekst. Een browser die scripting:enabled niet kent
   doet wat hij hiervoor deed. */
@media (scripting: enabled){
  .ma-doek-vel{display:block}
  .ma-doek-donker{display:block}
  #ma-doek-keten,#ma-doek-ratio,#ma-doek-duur{height:200px}
  #ma-doek-kwaliteit{height:210px}
  #ma-doek-instroom{height:190px}
  #ma-doek-score{height:180px}
  #ma-doek-financieel{height:160px}
  .ma-rapport:not(.ma-rapport-aan) .ma-blad-pagina ~ .ma-blad-pagina{display:none}
  .ma-rapport:not(.ma-rapport-aan) .ma-blad-bediening{display:flex}
}

@media (max-width:479px){
  .kostenlijst li{grid-template-columns:minmax(0,1fr) auto}
  .kosten-bij{grid-column:1 / -1}
}