/* ===========================================================================
   FRANCHISEHUB, DE COMPOSITIE VAN /marketing-analytics

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

   DE VORM: EEN ZANDLOPER
   De vier eerdere verdiepingspagina's gebruiken elk iets anders. /matching is
   een tweeluik en gebruikt breedte als GRENS. /bewijs is een grootboek en
   gebruikt hoogte als VOLGORDE. /ai-assistent legt een horizontale grens dwars
   door de pagina. /crm is een trap van vijf overlappende treden. Deze pagina
   is geen van die vier en gebruikt als enige de breedte van de pagina zelf als
   VERHAALLIJN.

   De inhoudsbreedte loopt per sectie:

     opening        1320   alles nog open
     binnenkomst    1320   drie monden naast elkaar, het breedste punt
     vernauwing     1000   segmenten en reeksen, minder mensen
     taille          680   een kolom, een zin per lead
     verbreding     1180   drie consoles, van een traject veel metingen
     bodem          1320   volle breedte, de datakwaliteit
     rapport        1080   de coda: alles komt samen in een document

   WAAROM DIE VORM EN NIET VIJF SECTIES OP DEZELFDE BREEDTE
   Dit is het breedste onderwerp van de zeven pagina's: advertenties,
   segmenten, reeksen, drie consoles, groeicijfers en datakwaliteit. Op een
   gelijke breedte wordt dat een opsomming van functies en dan draagt de
   volgorde niets. De zandloper zegt wat er echt gebeurt: veel komt binnen,
   weinig blijft over en van dat weinige komen veel metingen. De laatste sectie
   is de coda: al die metingen gaan een keer per maand als een document de deur
   uit en daarom trekt de pagina daar terug samen tot een enkel object.

   DE BREEDTE STAAT ALTIJD ALS max-width OP .binnen
   Nooit als vaste marge of als negatieve marge. Dat is het verschil tussen een
   vorm die op een telefoon vanzelf verdwijnt en een document dat breder wordt
   dan het venster. Onder ongeveer 1100 pixels is elke sectie even breed als
   het venster en is de zandloper er simpelweg niet meer; de volgorde draagt
   het verhaal dan alleen.

   DE DOEKEN
   Zeven canvasvisualisaties, getContext('2d'), geen SVG en geen bibliotheek.
   Ze staan standaard op display:none en worden pas door het script zichtbaar
   gemaakt. Zonder JavaScript staat er dus geen leeg vak maar niets. De
   cijfers eronder dragen het verhaal dan alsnog volledig.

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

/* ---------------------------------------------------------------------------
   DE ZANDLOPER ZELF
   Alle andere regels in dit bestand zijn invulling; dit blok is de vorm.
   --------------------------------------------------------------------------- */
.ma-vernauwing .binnen{max-width:1000px}
.ma-taille .binnen{max-width:680px}
.ma-verbreding .binnen{max-width:1180px}
.ma-rapport .binnen{max-width:1080px}

/* ---------- De lat ----------
   Een haarlijn over de volle inhoudsbreedte met het nummer en de naam van de
   sectie erop. Hij bestaat om een reden: de zandloper is alleen te zien als er
   iets is dat de breedte laat zien. Zonder deze lijn merkt een bezoeker de
   vernauwing wel maar weet hij niet waaraan hij het merkt. */
.ma-lat{
  display:flex;align-items:center;gap:var(--r4);
  padding-bottom:var(--r3);margin-bottom:var(--r8);
  border-bottom:1px solid var(--rand-sterk);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);
}
.ma-lat-nr{color:var(--roze);font-weight:600}
.ma-lat-naam{color:var(--ink-700);font-weight:600}
/* --ink-300 stond hier eerst. Dat token is in landing-tokens.css met zoveel
   woorden gemarkeerd als uitsluitend decoratief: 3,72 op wit en 3,50 op
   papier, allebei onder de eis van 4,5. Gemeten op de echte pagina, niet
   geschat. Nu --ink-400, dat 5,20 haalt. */
.ma-lat-maat{margin-left:auto;color:var(--ink-400);text-align:right}
.ma-lat-licht{border-bottom-color:var(--band-rand-sterk);color:var(--band-zacht)}
.ma-lat-licht .ma-lat-nr{color:var(--band-lila)}
.ma-lat-licht .ma-lat-naam{color:#fff}
.ma-lat-licht .ma-lat-maat{color:var(--band-zacht)}

/* ---------------------------------------------------------------------------
   DE OPENING
   --------------------------------------------------------------------------- */
.ma-opening{background:var(--wit)}
.ma-opening-spread{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,90px);align-items:start;
}
.ma-opening .titel-1{margin-top:var(--r5);max-width:16ch}
.ma-opening .lead{margin-top:var(--r6);max-width:52ch}

.ma-opening-zij{padding-top:clamp(0px,2vw,26px)}
/* De vijf stations als haarlijnen en niet als vijf omlijnde blokjes: dit is
   een route en geen keuzemenu. */
.ma-route{margin:var(--r5) 0 0;display:grid;gap:0}
.ma-route li{
  display:grid;grid-template-columns:auto minmax(0,.34fr) minmax(0,1fr);
  gap:var(--r3) var(--r4);align-items:baseline;
  padding:var(--r4) 0;border-top:1px solid var(--rand);
}
.ma-route li:last-child{border-bottom:1px solid var(--rand)}
.ma-route-nr{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400)}
.ma-route b{font-size:var(--t-base);font-weight:600;color:var(--ink-900)}
.ma-route span:not(.ma-route-nr){font-size:var(--t-md);line-height:1.55;color:var(--ink-500)}
.ma-opening-slot{margin-top:var(--r5);font-size:var(--t-md);line-height:1.65;color:var(--ink-500)}

/* ---------------------------------------------------------------------------
   01. BINNENKOMST, het breedste punt
   --------------------------------------------------------------------------- */
.ma-monding{background:var(--papier)}
.ma-monding-kop{max-width:70ch}
.ma-monding-kop .lead{margin-top:var(--r5)}

.ma-monden{
  margin-top:var(--r9);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r5);
}
.ma-mond{
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--rond-lg);
  padding:var(--r6);box-shadow:var(--schaduw-1);
}
/* De middelste mond is de advertentie en die is het onderwerp van deze sectie.
   Hij krijgt de accentrand, want drie identieke kaders zouden zeggen dat de
   drie bronnen hier even belangrijk zijn en dat is niet waar het over gaat. */
.ma-mond-aan{border-color:var(--roze-rand);background:var(--papier-roze);box-shadow:var(--schaduw-2)}
.ma-mond .mono{color:var(--ink-400)}
.ma-mond-aan .mono{color:var(--roze)}
.ma-mond-naam{margin-top:var(--r3);font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.ma-mond p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--ink-600)}

/* De drie monden lopen samen. Drie korte verticale streepjes, een horizontale
   verbinding en een langer streepje omlaag naar het midden. Puur decoratief en
   daarom aria-hidden; alle betekenis staat in de tekst. */
.ma-samenloop{position:relative;height:58px}
.ma-samenloop::before{
  content:"";position:absolute;left:16.667%;right:16.667%;top:24px;
  height:1px;background:var(--rand-sterk);
}
.ma-samenloop-been{position:absolute;top:0;width:1px;background:var(--rand-sterk)}
.ma-samenloop-been-links{left:16.667%;height:24px}
.ma-samenloop-been-rechts{left:83.333%;height:24px}
.ma-samenloop-been-midden{left:50%;height:58px;background:var(--roze-rand)}

.ma-binnenkomst-rij{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}

/* ---------- Het nagebouwde venster ----------
   Geen schermafdruk. Een afdruk veroudert, past zich niet aan de breedte aan
   en zou hier bovendien echte gegevens tonen. Dit is opgebouwd uit tekst. */
.ma-venster{
  background:var(--wit);border:1px solid var(--rand-sterk);border-radius:var(--rond-lg);
  padding:var(--r6);box-shadow:var(--schaduw-2);
}
.ma-venster-kop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r3);
  padding-bottom:var(--r4);border-bottom:1px solid var(--rand);
}
.ma-venster-kop .mono{color:var(--roze)}
.ma-venster-bij{margin-left:auto;font-size:var(--t-xs);color:var(--ink-400)}
.ma-velden{margin:0;display:grid;gap:0}
.ma-veld{
  display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  gap:var(--r4);align-items:baseline;
  padding:var(--r3) 0;border-bottom:1px solid var(--rand-zacht);
}
.ma-veld dt{font-size:var(--t-sm);color:var(--ink-400)}
.ma-veld dd{margin:0;font-size:var(--t-md);color:var(--ink-900);font-weight:500}
/* Een leeg veld is geen fout en krijgt daarom geen waarschuwingskleur, wel een
   eigen behandeling: het vierkantje ervoor is dezelfde vorm die elders op de
   site "niet ingevuld" betekent. Kleur is nooit de enige drager, de tekst
   zegt het er ook bij. */
.ma-veld-leeg dd{color:var(--ink-400);font-weight:400;display:flex;align-items:center;gap:var(--r2)}
.ma-venster-noot{margin-top:var(--r4);font-size:var(--t-xs);line-height:1.55;color:var(--ink-400)}

.ma-binnenkomst-punten{display:grid;gap:var(--r6)}
.ma-punt{padding-top:var(--r5);border-top:1px solid var(--rand-sterk)}
.ma-punt-titel{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.ma-punt p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.65;color:var(--ink-600)}

.ma-slot{
  margin-top:var(--r9);padding-top:var(--r5);border-top:1px solid var(--rand-sterk);
  font-size:var(--t-base);line-height:1.7;color:var(--ink-600);max-width:76ch;
}

/* ---------------------------------------------------------------------------
   02. VERNAUWING
   --------------------------------------------------------------------------- */
.ma-vernauwing{background:var(--wit)}
.ma-vernauwing .lead{margin-top:var(--r5)}

/* Het inschrijfvenster. Het getal 41 gaat naar 34 en de zeven die eraf gaan
   staan er met hun reden onder. Dat is de hele bewering van deze sectie in
   een blok: stil verlies bestaat hier niet. */
.ma-inschrijving{
  margin-top:var(--r8);
  background:var(--papier-lila);border:1px solid var(--lila-rand);
  border-radius:var(--rond-lg);padding:var(--r6);
}
.ma-inschrijving-kop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r4);
  padding-bottom:var(--r4);border-bottom:1px solid var(--lila-rand);
  font-size:var(--t-md);color:var(--ink-700);
}
.ma-inschrijving-kop .mono{color:var(--lila)}
.ma-inschrijving-regel{
  display:flex;align-items:baseline;gap:var(--r4);margin-top:var(--r5);
  font-size:var(--t-base);color:var(--ink-600);
}
.ma-inschrijving-getal{
  font-family:var(--mono);font-size:var(--t-2xl);font-weight:600;
  color:var(--ink-900);line-height:1;
}
.ma-inschrijving-regel-uit .ma-inschrijving-getal{color:var(--lila)}
.ma-inschrijving-pijl{
  width:1px;height:26px;margin:var(--r3) 0 0 13px;background:var(--lila-rand);
}
.ma-overgeslagen{margin-top:var(--r5);display:grid;gap:0}
.ma-overgeslagen li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r4);
  align-items:baseline;padding:var(--r3) 0;border-top:1px solid var(--lila-rand);
  font-size:var(--t-md);color:var(--ink-600);
}
.ma-overgeslagen b{font-family:var(--mono);font-size:var(--t-base);color:var(--ink-900);min-width:2ch}
.ma-inschrijving .ma-venster-noot{color:var(--ink-500)}

.ma-regels{
  margin-top:var(--r9);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r7) var(--r8);
}
.ma-regel-kop{
  font-size:var(--t-base);font-weight:600;color:var(--ink-900);
  padding-bottom:var(--r3);border-bottom:1px solid var(--rand-sterk);
}
.ma-regel p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.65;color:var(--ink-600)}

/* ---------------------------------------------------------------------------
   03. DE TAILLE, het smalste punt
   --------------------------------------------------------------------------- */
.ma-taille{background:var(--papier-lila)}
.ma-taille .lead{margin-top:var(--r5)}

.ma-uitkomst{
  margin-top:var(--r8);
  background:var(--wit);border:1px solid var(--rand-sterk);
  border-radius:var(--rond);padding:var(--r5) var(--r6) var(--r5);
  box-shadow:var(--schaduw-2);
}
.ma-uitkomst-rij{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--r3) var(--r4);align-items:baseline;
  padding:var(--r4) 0;border-bottom:1px solid var(--rand-zacht);
}
.ma-uitkomst-rij .mono{color:var(--ink-400)}
.ma-uitkomst-stand{font-size:var(--t-md);color:var(--ink-600)}
/* Het woord dat teruggaat. Het staat in een chip zodat zichtbaar is dat dit
   een vaste waarde is en geen zin die iemand heeft getypt. */
.ma-uitkomst-woord{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  padding:4px 10px;border-radius:var(--rond-vol);white-space:nowrap;
  background:var(--papier-mint);border:1px solid var(--mint-rand);color:var(--mint);
}
.ma-uitkomst-woord-af{background:var(--papier-amber);border-color:var(--amber-rand);color:var(--amber)}

.ma-taille-punten{margin-top:var(--r8);display:grid;gap:var(--r5)}
.ma-taille-punten p{font-size:var(--t-base);line-height:1.75;color:var(--ink-600)}
.ma-taille-punten b{color:var(--ink-900);font-weight:600}

/* ---------------------------------------------------------------------------
   DE RETOURSTROOK
   Volle breedte en donker. Dit is de enige plek waar de leesrichting omkeert. Hij
   staat bewust tussen de taille en de verbreding: op die plek in het verhaal
   gaat het signaal terug naar de eerste sectie.
   --------------------------------------------------------------------------- */
.ma-retour{
  background:var(--band-diep);color:var(--band-zacht);
  padding:var(--r6) var(--r-kant);overflow:hidden;
}
.ma-retour-binnen{
  max-width:var(--breed);margin:0 auto;position:relative;
  display:flex;flex-direction:column;gap:var(--r4);
}
.ma-retour-lijn{
  position:relative;display:block;height:1px;background:var(--band-rand-sterk);
  overflow:hidden;
}
/* De vonk loopt van rechts naar links: tegen de leesrichting in, want dat is
   precies wat dit signaal doet. In rust (of bij prefers-reduced-motion, waar
   landing-gedeeld.css elke animatie uitzet) staat hij aan de rechterkant, dus
   aan het begin van zijn eigen weg. Geen halve stand. */
.ma-retour-vonk{
  position:absolute;top:0;right:0;width:22%;height:1px;
  background:linear-gradient(90deg,rgba(195,189,245,0),var(--band-lila));
  animation:maTerug 4.2s linear infinite;
}
@keyframes maTerug{
  0%{transform:translateX(0)}
  100%{transform:translateX(-460%)}
}
.ma-retour-tekst{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r4);
  font-size:var(--t-md);
}
.ma-retour-tekst .mono{color:#fff}
.ma-retour-bij{color:var(--band-zacht)}

/* ---------------------------------------------------------------------------
   04. VERBREDING
   --------------------------------------------------------------------------- */
.ma-verbreding{background:var(--wit)}
.ma-verbreding-kop{max-width:70ch}
.ma-verbreding-kop .lead{margin-top:var(--r5)}

/* De strook met kengetallen. Vijf tegels, waarvan er een bewust leeg is. */
.ma-strook{
  margin-top:var(--r8);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--rand-sterk);border-radius:var(--rond);overflow:hidden;
}
.ma-tegel{
  padding:var(--r5);background:var(--wit);
  border-right:1px solid var(--rand);
  display:flex;flex-direction:column;gap:var(--r2);
}
.ma-tegel:last-child{border-right:0}
.ma-tegel b{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1}
.ma-tegel span{font-size:var(--t-xs);line-height:1.45;color:var(--ink-500)}
/* De tegel zonder cijfer. Gestreept en niet grijs-uit: grijs leest als
   "uitgeschakeld" en dit is niet uitgeschakeld, dit is te weinig gemeten. */
.ma-tegel-leeg{
  background:repeating-linear-gradient(135deg,var(--papier) 0 6px,var(--wit) 6px 12px);
}
.ma-tegel-leeg b{color:var(--ink-400)}
.ma-strook-noot{margin-top:var(--r3);font-size:var(--t-xs);color:var(--ink-400)}

.ma-consoles{
  margin-top:var(--r9);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r7);
}
.ma-console{
  display:flex;flex-direction:column;gap:var(--r5);
  padding-top:var(--r5);border-top:2px solid var(--blauw);
}
.ma-console:nth-child(2){border-top-color:var(--roze)}
.ma-console:nth-child(3){border-top-color:var(--lila)}
.ma-console-kop .mono{color:var(--ink-400)}
.ma-console-naam{margin-top:var(--r2);font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.ma-console-kop p{margin-top:var(--r3);font-size:var(--t-sm);line-height:1.6;color:var(--ink-500)}
.ma-console-slot{font-size:var(--t-md);line-height:1.65;color:var(--ink-600)}
.ma-console-slot b{color:var(--ink-900);font-weight:600}

/* ---------- De doeken ----------
   Het vel staat op display:none tot het script het aanzet. Zonder JavaScript
   is er dus geen leeg kader te zien; de cijfers eronder blijven staan en die
   dragen het verhaal ook alleen. */
.ma-doek{margin:0}
.ma-doek-vel{display:none;width:100%;border-radius:var(--rond-sm)}
.ma-doek-aan .ma-doek-vel{display:block}

/* De cijfers bij een doek. Geen tabel maar een rij: het zijn labels bij een
   tekening en geen zelfstandig overzicht. */
.ma-cijfers{display:grid;gap:0;border-top:1px solid var(--rand)}
.ma-cijfers li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--r4);
  padding:7px 0;border-bottom:1px solid var(--rand-zacht);
  font-size:var(--t-sm);color:var(--ink-500);
}
.ma-cijfers b{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-900);font-weight:600}
.ma-cijfer-leeg b{color:var(--ink-400)}

.ma-groei{
  margin-top:var(--r10);padding-top:var(--r7);border-top:1px solid var(--rand-sterk);
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);
}
.ma-groei-titel{margin-top:var(--r4);font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.ma-groei-tekst{display:grid;gap:var(--r4)}
.ma-groei-tekst p{font-size:var(--t-base);line-height:1.7;color:var(--ink-600)}

/* ---------------------------------------------------------------------------
   05. DE BODEM
   --------------------------------------------------------------------------- */
.ma-bodem-kop{max-width:70ch}
.ma-bodem-kop .titel-2{margin-top:var(--r5)}
.ma-bodem-kop .lead{margin-top:var(--r5)}

/* Het doek boven de lijst en niet ernaast. Naast elkaar was de tekstkolom
   ruim twee keer zo hoog als het doek en bleef er een leeg vlak van een paar
   honderd pixels onder de balken staan. Nu draagt het doek de volle breedte
   als samenvatting en staat de uitleg er in twee kolommen onder. */
.ma-bodem-rij{
  margin-top:var(--r9);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r8);
}
.ma-doek-donker{
  background:rgba(255,255,255,.035);border:1px solid var(--band-rand);
  border-radius:var(--rond);padding:var(--r4);
}
/* Zonder JavaScript zou hier een leeg kader overblijven en dat leest als een
   kapotte afbeelding. Het kader komt daarom pas mee met het vel. */
.ma-doek-donker{display:none}
.ma-doek-donker.ma-doek-aan{display:block}

.ma-kwaliteit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.ma-kwaliteit li{padding:var(--r5) 0;border-top:1px solid var(--band-rand)}
/* In twee kolommen staat de vijfde regel alleen in de linkerkolom. Een
   onderrand alleen daar zou scheef staan, dus krijgen de laatste twee er een. */
.ma-kwaliteit li:nth-last-child(-n+2){border-bottom:1px solid var(--band-rand)}
.ma-kwaliteit-kop{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--r4);
  font-size:var(--t-base);font-weight:600;color:#fff;
}
.ma-kwaliteit-kop b{font-family:var(--mono);font-size:var(--t-lg);color:var(--band-lila)}
.ma-kwaliteit p{margin-top:var(--r2);font-size:var(--t-md);line-height:1.6;color:var(--band-zacht)}
.ma-kwaliteit-actie{
  margin-top:var(--r3);display:inline-block;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--band-lila);
}
.ma-bodem-slot{
  margin-top:var(--r7);font-size:var(--t-md);line-height:1.7;color:var(--band-zacht);
  max-width:80ch;
}

/* ---------------------------------------------------------------------------
   06. HET RAPPORT, de coda

   De zandloper is bij de bodem klaar. Deze sectie hoort er als slot bij en
   trekt de pagina terug samen tot een enkel object: alles wat hierboven is
   gemeten gaat een keer per maand als document naar de formule.

   HET VEL IS EEN RECONSTRUCTIE EN GEEN SCHERMAFDRUK
   Om dezelfde reden als overal op deze site: een afdruk veroudert, schaalt
   niet mee met de breedte en zou echte gegevens tonen. Dit is opgebouwd uit
   tekst en uit vier canvassen, met verzonnen cijfers voor een verzonnen
   formule.

   DE STAPEL ZIT OP DE BOK EN NIET OP HET BLAD
   De twee vellen die eronder uitsteken zijn ::before en ::after van de bok.
   Zaten ze op het blad zelf, dan zouden ze achter de eigen witte achtergrond
   van dat blad verdwijnen en was de stapel alleen aan de randen te zien.

   ZONDER JAVASCRIPT STAAN ALLE VIER DE BLADEN ONDER ELKAAR
   Het script maakt er pas daarna een bladeraar van. De bedieningsknoppen
   staan daarom op display:none tot het script ze aanzet: een knop tonen die
   niets doet is erger dan geen knop.
   --------------------------------------------------------------------------- */
.ma-rapport{background:var(--papier)}
.ma-rapport-kop{max-width:70ch}
.ma-rapport-kop .titel-2{margin-top:var(--r5)}
.ma-rapport-kop .lead{margin-top:var(--r5)}

.ma-rapport-rij{
  margin-top:var(--r9);
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.ma-rapport-zij .mono{color:var(--ink-400)}
.ma-rapport-inhoud{margin-top:var(--r4);display:grid;gap:0}
.ma-rapport-inhoud li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r3);
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rand);
  font-size:var(--t-md);color:var(--ink-700);
}
.ma-rapport-inhoud span{font-family:var(--mono);font-size:var(--t-2xs);color:var(--roze)}
.ma-rapport-zij-tekst{margin-top:var(--r5);font-size:var(--t-md);line-height:1.65;color:var(--ink-500)}
.ma-rapport-slot{
  margin-top:var(--r8);padding-top:var(--r5);border-top:1px solid var(--rand-sterk);
  font-size:var(--t-md);line-height:1.7;color:var(--ink-500);max-width:82ch;
}

/* ---------- De bok en de stapel ---------- */
.ma-blad-bok{position:relative}
/* De twee vellen eronder horen bij het blad en niet bij de hele bok. Zaten ze
   op de bok, dan liepen ze ook over de bedieningsknoppen heen en waren die
   niet meer aan te klikken. Dat is bij het meten gebeurd. */
.ma-blad-stapel{position:relative;padding-bottom:var(--r4)}
.ma-blad-stapel::before,.ma-blad-stapel::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:var(--r4);
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--rond-sm);
  pointer-events:none;
}
.ma-blad-stapel::before{transform:translate(7px,8px)}
.ma-blad-stapel::after{transform:translate(14px,16px);border-color:var(--rand-zacht)}

.ma-blad{
  position:relative;z-index:1;
  background:var(--wit);border:1px solid var(--rand-sterk);
  border-radius:var(--rond-sm);box-shadow:var(--schaduw-3);
}
.ma-blad-vel{padding:clamp(20px,3vw,38px)}

/* ---------- De kop van het document ---------- */
.ma-blad-kop{
  display:flex;flex-wrap:wrap;gap:var(--r4);justify-content:space-between;
  padding-bottom:var(--r5);border-bottom:2px solid var(--ink-900);
}
.ma-blad-merk{
  font-family:var(--letter);font-weight:700;font-size:var(--t-lg);
  letter-spacing:-.02em;color:var(--ink-900);
}
.ma-blad-eyebrow{
  margin-top:var(--r3);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--roze);
}
.ma-blad-formule{margin-top:var(--r3);font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.ma-blad-periode{margin-top:2px;font-size:var(--t-base);color:var(--ink-500)}
.ma-blad-kop-rechts{
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--r2);
  font-size:var(--t-xs);color:var(--ink-400);text-align:right;
}
.ma-blad-tag{
  padding:3px 9px;border-radius:var(--rond-vol);
  background:var(--blauw-zacht);border:1px solid var(--blauw-rand);color:var(--blauw-diep);
  font-size:var(--t-2xs);letter-spacing:.04em;
}

/* ---------- Een blad ----------
   De bladen staan standaard allemaal onder elkaar, gescheiden door een
   haarlijn. Zodra het script erbij komt wordt er een tegelijk getoond en
   verdwijnt die scheiding, want dan is er niets meer om van te scheiden. */
.ma-blad-pagina{padding-top:var(--r7)}
.ma-blad-pagina + .ma-blad-pagina{margin-top:var(--r7);border-top:1px dashed var(--rand-sterk)}
.ma-rapport-aan .ma-blad-pagina{display:none}
.ma-rapport-aan .ma-blad-pagina[data-ma-aan]{display:block}
.ma-rapport-aan .ma-blad-pagina + .ma-blad-pagina{margin-top:0;border-top:0}
/* Zonder deze ondergrens springt het kader bij elk blad naar een andere hoogte
   en dat leest als een pagina die opnieuw laadt in plaats van als bladeren. */
.ma-rapport-aan .ma-blad-vel{min-height:640px}

.ma-blad-sec{
  display:flex;align-items:center;gap:var(--r3);
  padding-bottom:var(--r2);border-bottom:1px solid var(--ink-900);
}
.ma-blad-sec:not(:first-child){margin-top:var(--r8)}
.ma-blad-secnr{
  width:20px;height:20px;flex:0 0 auto;border-radius:var(--rond-xs);
  background:var(--ink-900);color:#fff;
  font-family:var(--mono);font-size:var(--t-2xs);
  display:flex;align-items:center;justify-content:center;
}
.ma-blad-sectitel{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-900);font-weight:600;
}
.ma-blad-sub{margin-top:var(--r4);font-size:var(--t-md);line-height:1.65;color:var(--ink-500);max-width:74ch}

.ma-blad-titel{
  margin-top:var(--r7);font-size:var(--t-lg);font-weight:600;
  color:var(--ink-900);letter-spacing:-.015em;
}
.ma-blad-voet{
  margin-top:var(--r4);padding-top:var(--r3);border-top:1px solid var(--rand-zacht);
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-500);
}

/* ---------- De kengetallen op blad 1 ---------- */
.ma-blad-kpis{
  margin-top:var(--r5);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rand);border-radius:var(--rond-sm);overflow:hidden;
}
.ma-blad-kpi{
  padding:var(--r4);display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--rand);border-bottom:1px solid var(--rand);
}
.ma-blad-kpi:nth-child(3n){border-right:0}
.ma-blad-kpi:nth-last-child(-n+3){border-bottom:0}
.ma-blad-kpi span{font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.ma-blad-kpi b{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);line-height:1.1;letter-spacing:-.02em}
.ma-blad-kpi i{font-style:normal;font-size:var(--t-xs);color:var(--ink-400)}

.ma-blad-drie{
  margin-top:var(--r5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r5);
}
.ma-blad-drie span{display:block;font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.ma-blad-drie b{display:block;margin-top:var(--r2);font-size:var(--t-xl);font-weight:600;color:var(--ink-900)}

/* ---------- De tabel op blad 4 ----------
   De omhulling scrollt zelf zijwaarts. Zonder dat wordt op een smal venster de
   hele pagina breder dan het scherm en dat is de fout die een tabel het
   makkelijkst maakt. */
.ma-blad-tabelwrap{margin-top:var(--r5);overflow-x:auto}
.ma-blad-tabel{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--t-sm)}
.ma-blad-tabel th{
  text-align:left;padding:var(--r2) var(--r3);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400);font-weight:600;
  border-bottom:1px solid var(--ink-900);white-space:nowrap;
}
.ma-blad-tabel td{
  padding:var(--r3);color:var(--ink-700);
  border-bottom:1px solid var(--rand-zacht);vertical-align:middle;
}
.ma-blad-tabel td:first-child{font-family:var(--mono);color:var(--ink-900)}
/* De pil draagt de matchsterkte. Kleur is nooit de enige drager: het woord
   staat er altijd voluit in. */
.ma-blad-pil{
  display:inline-block;padding:2px 9px;border-radius:var(--rond-vol);
  font-size:var(--t-2xs);letter-spacing:.04em;white-space:nowrap;border:1px solid;
}
.ma-blad-pil-sterk{background:var(--papier-mint);border-color:var(--mint-rand);color:var(--mint)}
.ma-blad-pil-redelijk{background:var(--blauw-zacht);border-color:var(--blauw-rand);color:var(--blauw-diep)}
.ma-blad-pil-zwak{background:var(--papier-amber);border-color:var(--amber-rand);color:var(--amber)}
.ma-blad-pil-onbekend{background:var(--papier);border-color:var(--rand-sterk);color:var(--ink-500)}

.ma-blad-forecast{
  margin-top:var(--r5);padding:var(--r5);
  background:var(--papier-lila);border:1px solid var(--lila-rand);border-radius:var(--rond-sm);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r4);
}
.ma-blad-forecast b{font-size:var(--t-2xl);font-weight:600;color:var(--lila);letter-spacing:-.02em}
.ma-blad-forecast span{font-size:var(--t-md);color:var(--ink-600)}

/* Het doek binnen een blad. Iets minder ruimte eromheen dan bij de consoles:
   op papier staat een grafiek dichter tegen zijn kop aan. */
.ma-doek-blad{margin-top:var(--r4)}
.ma-cijfers-breed{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--r6)}
.ma-cijfers-breed li{border-bottom:1px solid var(--rand-zacht)}

/* ---------- De bediening ---------- */
.ma-blad-bediening{
  display:none;position:relative;z-index:2;margin-top:var(--r5);
  align-items:center;justify-content:center;gap:var(--r4);
}
.ma-rapport-aan .ma-blad-bediening{display:flex}
.ma-blad-knop{
  width:40px;height:40px;border-radius:var(--rond-vol);
  border:1px solid var(--rand-sterk);background:var(--wit);color:var(--ink-700);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--duur-kort) var(--soepel),border-color var(--duur-kort) var(--soepel);
}
.ma-blad-knop:active{background:var(--blauw-zacht);border-color:var(--blauw-rand)}
.ma-blad-knop[disabled]{opacity:.4;cursor:not-allowed}
.ma-blad-stippen{display:flex;align-items:center;gap:var(--r2)}
.ma-blad-stip{
  width:30px;height:30px;border-radius:var(--rond-vol);border:1px solid transparent;
  background:transparent;color:var(--ink-400);
  font-family:var(--mono);font-size:var(--t-2xs);
  display:flex;align-items:center;justify-content:center;
}
.ma-blad-stip[aria-selected="true"]{
  background:var(--ink-900);border-color:var(--ink-900);color:#fff;
}

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

   De omslagpunten van deze pagina, niet die van de kopbalk en de voet: die
   staan in landing-gedeeld.css.

   Boven 1100 is de zandloper te zien. Daaronder is elke sectie even breed als
   het venster en is de vorm er niet meer. Dat is geen verlies dat gerepareerd
   moet worden: op een smal venster is er geen breedte om iets mee te
   vertellen en draagt de volgorde het verhaal alleen.
   --------------------------------------------------------------------------- */

@media (max-width:1100px){
  .ma-consoles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r8)}
  /* Twee kolommen laten de derde alleen staan. Die krijgt de volle breedte in
     plaats van een halve, want een enkele smalle kolom naast leegte leest als
     een fout in de indeling. */
  .ma-console:nth-child(3){grid-column:1 / -1}
  .ma-strook{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ma-tegel{border-bottom:1px solid var(--rand)}
  .ma-tegel:nth-child(3n){border-right:0}
  .ma-tegel:nth-last-child(-n+2){border-bottom:0}
}

@media (max-width:960px){
  .ma-opening-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ma-opening .titel-1,.ma-opening .lead{max-width:none}
  .ma-binnenkomst-rij{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ma-bodem-rij{gap:var(--r7)}
  .ma-kwaliteit{grid-template-columns:minmax(0,1fr)}
  .ma-kwaliteit li:nth-last-child(-n+2){border-bottom:0}
  .ma-kwaliteit li:last-child{border-bottom:1px solid var(--band-rand)}
  .ma-groei{grid-template-columns:minmax(0,1fr);gap:var(--r5)}
  .ma-rapport-rij{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ma-cijfers-breed{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .ma-monden{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  /* De samenloop tekent drie monden die bij elkaar komen. Staan ze onder
     elkaar, dan komt er niets bij elkaar en is de tekening een lijn die niets
     zegt. Alleen het middelste been blijft over als verbinding omlaag. */
  .ma-samenloop{height:34px}
  .ma-samenloop::before,
  .ma-samenloop-been-links,
  .ma-samenloop-been-rechts{display:none}
  .ma-samenloop-been-midden{height:34px;left:calc(50% - 1px)}
  .ma-regels{grid-template-columns:minmax(0,1fr);gap:var(--r6)}
  .ma-consoles{grid-template-columns:minmax(0,1fr);gap:var(--r9)}
  .ma-console:nth-child(3){grid-column:auto}
  .ma-strook{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-tegel:nth-child(3n){border-right:1px solid var(--rand)}
  .ma-tegel:nth-child(2n){border-right:0}
  .ma-tegel:nth-last-child(-n+2){border-bottom:1px solid var(--rand)}
  .ma-tegel:last-child{border-bottom:0}
  .ma-blad-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-blad-kpi:nth-child(3n){border-right:1px solid var(--rand)}
  .ma-blad-kpi:nth-child(2n){border-right:0}
  .ma-blad-kpi:nth-last-child(-n+3){border-bottom:1px solid var(--rand)}
  .ma-blad-kpi:nth-last-child(-n+2){border-bottom:0}
  .ma-blad-drie{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  .ma-cijfers-breed{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* De stapel eronder valt weg. Op een smal venster is de bok bijna zo breed
     als het venster en dan duwen twee uitstekende vellen van veertien pixels
     het document tegen de rand aan. */
  .ma-blad-stapel::before,.ma-blad-stapel::after{display:none}
  .ma-blad-stapel{padding-bottom:0}
  .ma-rapport-aan .ma-blad-vel{min-height:0}
}

@media (max-width:560px){
  .ma-route li{grid-template-columns:auto minmax(0,1fr);gap:var(--r2) var(--r3)}
  .ma-route span:not(.ma-route-nr){grid-column:2}
  .ma-veld{grid-template-columns:minmax(0,1fr);gap:2px}
  .ma-uitkomst-rij{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .ma-uitkomst-woord{justify-self:start}
  .ma-kwaliteit-kop{flex-wrap:wrap;gap:var(--r2)}
  .ma-blad-kop{flex-direction:column}
  .ma-blad-kop-rechts{align-items:flex-start;text-align:left}
  .ma-cijfers-breed{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:430px){
  .ma-strook{grid-template-columns:minmax(0,1fr)}
  .ma-tegel{border-right:0;border-bottom:1px solid var(--rand)}
  .ma-tegel:last-child{border-bottom:0}
  .ma-lat{flex-wrap:wrap;gap:var(--r2) var(--r3)}
  /* De maat rechts valt weg zodra hij op een eigen regel zou belanden: hij is
     een bijschrift bij een vorm die op deze breedte niet meer bestaat. */
  .ma-lat-maat{display:none}
  .ma-venster,.ma-inschrijving{padding:var(--r5)}
  /* Naast het dossiernummer past de datum hier niet meer, dus valt hij op een
     eigen regel. Met margin-left:auto zou hij daar rechts gaan staan en dat
     leest als een tweede kolom die er niet is. */
  .ma-venster-bij{margin-left:0}
  .ma-uitkomst{padding:var(--r3) var(--r5)}
  .ma-blad-kpis{grid-template-columns:minmax(0,1fr)}
  .ma-blad-kpi{border-right:0;border-bottom:1px solid var(--rand)}
  .ma-blad-kpi:last-child{border-bottom:0}
  .ma-blad-bediening{gap:var(--r3)}
}