/* ===========================================================================
   DE COMPOSITIE VAN /matching

   Alleen wat deze pagina zelf nodig heeft. De basis, de bouwstenen, de kopbalk
   en de voet komen uit landing.css, dat hiervoor wordt gelinkt. De waarden uit
   landing-tokens.css, dat daar weer voor komt. Die volgorde is load-bearing.

   DE VORM EN WAAROM HIJ ZO IS
   Deze pagina is een tweeluik. Van boven tot onder loopt er een verticale grens
   door, links de snelle score en rechts de passing zonder score.

   Dat is geen versiering. De belangrijkste bewering van deze pagina is dat het
   bewust TWEE systemen zijn die nooit worden opgeteld. Een pagina die ze onder
   elkaar zet zegt visueel het tegenovergestelde: dan lijkt het een verhaal in
   twee hoofdstukken en gaat de lezer vanzelf een totaal zoeken. De vorm moet
   dezelfde scheiding maken als de code.

   De voorpagina gebruikt breedte voor haar producttekening en hoogte voor het
   ritme. /bewijs doet het omgekeerd. Deze pagina gebruikt de verticale as als
   grens. Drie pagina's, drie manieren om de ruimte te verdelen.
   =========================================================================== */

/* ---------- De opening ----------
   Geen hero met een productvenster ernaast: dat is de voorpagina. Hier alleen
   type, links uitgelijnd, met de kernzin ernaast op de rechterhelft. Wie hier
   komt weet al wat FranchiseHub is en zoekt de werking. */
.mt-opening{
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 78%);
  padding-top:calc(var(--r-sectie) + var(--r9));
  overflow:hidden;
}
.mt-opening-spread{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:end;
}
.mt-opening .titel-1{margin-top:var(--r5);max-width:15ch}
.mt-opening-zij{padding-bottom:6px}
.mt-opening-zij .lead{max-width:44ch}

/* De drie regels onder de opening. Datamoment: mono, klein, veel feit. Ze
   dragen het PROBLEEM en dat hoort niet in een alinea weggeschreven te worden;
   drie korte regels leest een bezoeker wel en een alinea niet. */
.mt-probleem{
  margin-top:clamp(38px,4.6vw,68px);padding-top:var(--r6);
  border-top:1px solid var(--rand);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);
}
.mt-probleem-vak .mono{color:var(--ink-400)}
.mt-probleem-vak p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--ink-600)}

/* ---------- Het tweeluik ----------
   De handtekening van deze pagina. De grens is een echte lijn over de volle
   hoogte van de sectie en geen rand van een kaart: het gaat om de scheiding en
   niet om twee dozen. Vandaar een pseudo-element op het raster en geen border
   op de kolommen, want een border op twee kolommen levert twee lijnen op die
   op een pixel na samenvallen. */
.mt-tweeluik{background:var(--wit);overflow:hidden}
.mt-tweeluik-kop{max-width:56ch}
.mt-tweeluik-kop .titel-2{margin-top:var(--r5);max-width:20ch}
.mt-tweeluik-kop .lead{margin-top:var(--r5)}
.mt-diptiek{
  position:relative;margin-top:clamp(40px,5vw,74px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,88px);
}
.mt-diptiek::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--rand-sterk) 8%,var(--rand-sterk) 92%,transparent);
}
.mt-kant{min-width:0;display:grid;gap:var(--r5);align-content:start}
.mt-kant-nr{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.18em;
  text-transform:uppercase;
}
.mt-kant-a .mt-kant-nr{color:var(--blauw-diep)}
.mt-kant-b .mt-kant-nr{color:var(--lila)}
.mt-kant-naam{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1.15}
.mt-kant-zin{font-size:var(--t-lg);line-height:1.6;color:var(--ink-600)}
.mt-kant-lijst{display:grid;gap:var(--r4);margin:0;padding:0;list-style:none}
.mt-kant-lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r3);align-items:baseline}
.mt-kant-lijst .mono{color:var(--ink-400);white-space:nowrap}
.mt-kant-lijst span:last-child{font-size:var(--t-md);line-height:1.55;color:var(--ink-700)}
/* De uitkomst van elk systeem, als het enige omkaderde in dit blok. Dat is
   waar de twee het meest verschillen: het ene geeft een getal, het andere
   weigert er een te geven. */
.mt-kant-uit{
  padding:var(--r4) var(--r5);border-radius:var(--rond);
  font-size:var(--t-md);line-height:1.55;
}
.mt-kant-a .mt-kant-uit{background:var(--blauw-zacht);border:1px solid var(--blauw-rand);color:var(--ink-900)}
.mt-kant-b .mt-kant-uit{background:var(--papier-lila);border:1px solid var(--lila-rand);color:var(--ink-900)}
.mt-kant-uit b{display:block;margin-bottom:4px}

/* De regel onder het tweeluik. Volle breedte, want hij geldt voor allebei en
   dat is precies het punt. */
.mt-nooit{
  margin-top:clamp(38px,4.4vw,64px);padding-top:var(--r6);
  border-top:2px solid var(--ink-900);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--r5) clamp(24px,4vw,64px);align-items:baseline;
}
.mt-nooit-zin{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1.25}
.mt-nooit p{font-size:var(--t-base);line-height:1.68;color:var(--ink-600)}

/* ---------- Systeem 1: de weging ----------
   De vijf gewichten als een echte balk van honderd. Een tabel met getallen zou
   hetzelfde zeggen en het niet laten zien; hier is te zien dat sector alleen al
   bijna een derde is. */
.mt-weging{background:var(--papier)}
.mt-weging-kop{max-width:58ch}
.mt-weging-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.mt-weging-kop .lead{margin-top:var(--r5)}
.mt-balk{
  margin-top:clamp(34px,4vw,54px);display:grid;
  grid-template-columns:30fr 22fr 22fr 14fr 12fr;gap:4px;
}
.mt-blok{
  border-radius:var(--rond-sm);padding:var(--r4) var(--r4) var(--r5);
  min-width:0;display:grid;gap:6px;align-content:start;
  background:var(--blauw-zacht);border:1px solid var(--blauw-rand);
}
/* Aflopend lichter, zodat de volgorde van gewicht ook zonder de getallen te
   zien is. De randen blijven gelijk: het verschil zit in het vlak en niet in
   de omtrek, anders leest de lichtste als uitgeschakeld. */
.mt-blok:nth-child(2){background:#e7eefd}
.mt-blok:nth-child(3){background:#eef3fe}
.mt-blok:nth-child(4){background:#f4f7ff}
.mt-blok:nth-child(5){background:var(--wit)}
.mt-blok-punten{
  font-size:var(--t-2xl);font-weight:700;color:var(--blauw-diep);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.mt-blok-naam{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.mt-blok-bij{font-size:var(--t-sm);line-height:1.5;color:var(--ink-600)}
.mt-weging-regels{
  margin-top:clamp(32px,3.8vw,52px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);
}
.mt-regel{border-left:3px solid var(--blauw);padding-left:var(--r5)}
.mt-regel h3{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.mt-regel p{margin-top:var(--r3);font-size:var(--t-base);line-height:1.68;color:var(--ink-600)}
.mt-regel p+p{margin-top:var(--r3)}
.mt-drempels{margin-top:var(--r4);display:flex;flex-wrap:wrap;gap:var(--r2)}

/* ---------- Systeem 2: de vier vormen ----------
   Onder elkaar en genummerd, want ze zijn een volgorde: vorm 1 kan de rest
   overbodig maken. Naast elkaar in vier kolommen zou suggereren dat ze
   gelijkwaardig zijn en dat zijn ze niet. */
.mt-vormen{background:var(--wit)}
.mt-vormen-kop{max-width:58ch}
.mt-vormen-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.mt-vormen-kop .lead{margin-top:var(--r5)}
.mt-vorm{
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(28px,3.2vw,44px);
  border-top:1px solid var(--rand);
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:var(--r5) clamp(24px,4vw,64px);align-items:start;
}
.mt-vorm-nr{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--lila);
}
.mt-vorm-naam{margin-top:var(--r3);font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1.15}
.mt-vorm-wat{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--ink-500);max-width:32ch}
.mt-vorm-lijf p{font-size:var(--t-base);line-height:1.7;color:var(--ink-600);max-width:70ch}
.mt-vorm-lijf p+p{margin-top:var(--r4)}
.mt-vorm-hard{
  margin-top:var(--r5);padding:var(--r4) var(--r5);
  border-radius:var(--rond-sm);background:var(--papier-lila);
  border:1px solid var(--lila-rand);
  font-size:var(--t-md);line-height:1.6;color:var(--ink-900);
}
.mt-vorm-hard b{color:var(--lila)}

/* De veto's, als twee kolommen codes met hun naam. Ze zijn de kern van vorm 1
   en ze staan nergens anders op de site. */
.mt-vetos{margin-top:var(--r5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r5) clamp(20px,3vw,44px)}
.mt-veto-groep .mono{color:var(--ink-400)}
.mt-veto-lijst{margin:var(--r3) 0 0;padding:0;list-style:none;display:grid;gap:7px}
.mt-veto-lijst li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--r3);align-items:baseline;font-size:var(--t-md);color:var(--ink-700)}
.mt-veto-code{font-family:var(--mono);font-size:var(--t-2xs);color:var(--roze);letter-spacing:.06em}

/* De vier botsingen. Elk een rij met de combinatie, wat er gebeurt en wanneer
   het zichtbaar wordt. Dat derde veld is wat deze tabel bruikbaar maakt: een
   botsing die pas in jaar twee opvalt is duurder dan een die meteen zichtbaar
   is en dat hoort erbij te staan. */
.mt-botsingen{margin-top:var(--r5);display:grid;gap:1px;background:var(--rand);border:1px solid var(--rand);border-radius:var(--rond-sm);overflow:hidden}
.mt-botsing{background:var(--wit);padding:var(--r4) var(--r5);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--r3) var(--r5);align-items:baseline}
.mt-botsing-kop{background:var(--papier)}
.mt-botsing-naam{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.mt-botsing-wat{font-size:var(--t-md);line-height:1.5;color:var(--ink-600)}
.mt-botsing-wanneer{font-family:var(--mono);font-size:var(--t-2xs);color:var(--amber);white-space:nowrap}
.mt-botsing-kop span{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}

/* De compensatietabel. Drie klassen, drie uitkomsten. De middelste is de
   interessante: deels, alleen onder een voorwaarde. */
.mt-klassen{margin-top:var(--r5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r4)}
.mt-klasse{padding:var(--r5);border-radius:var(--rond);border:1px solid var(--rand);background:var(--wit);display:grid;gap:var(--r3);align-content:start}
.mt-klasse-naam{font-size:var(--t-lg);font-weight:600;color:var(--ink-900)}
.mt-klasse-uit{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase}
.mt-klasse-ja .mt-klasse-uit{color:var(--mint)}
.mt-klasse-deels .mt-klasse-uit{color:var(--amber)}
.mt-klasse-nee{border-color:var(--roze-rand);background:var(--papier-roze)}
.mt-klasse-nee .mt-klasse-uit{color:var(--roze-diep)}
.mt-klasse p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-600)}

/* ---------- Wat er precies wordt gewogen ----------
   De zes strengen en de zes groepen voluit. Dit is de diepte die de voorpagina
   niet heeft: daar staan 22 en 26 als getal, hier staan de namen erachter. */
/* Het donkere vlak zelf komt uit .band-sectie in landing-gedeeld.css; deze
   sectie draagt die klasse in de HTML. Hier stond tot 02-09-2026 een eigen
   kopie van dezelfde vier declaraties plus een eigen .titel-2{color:#fff}.
   Dat is de drift die de splitsing van dat bestand heeft opgelost. */
.mt-raamwerk-kop{max-width:58ch}
.mt-raamwerk-kop .titel-2{margin-top:var(--r5);max-width:24ch}
.mt-raamwerk-kop .lead{margin-top:var(--r5)}
.mt-kolommen{
  margin-top:clamp(38px,4.4vw,64px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px);
}
.mt-kolom-kop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r3);
  padding-bottom:var(--r4);border-bottom:1px solid var(--band-rand);
}
.mt-kolom-tel{font-size:var(--t-h2);font-weight:700;color:#fff;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mt-kolom-naam{font-size:var(--t-lg);font-weight:600;color:#fff}
.mt-kolom-bij{margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);color:var(--band-lila);letter-spacing:.1em;text-transform:uppercase}
.mt-groep{margin-top:var(--r5)}
.mt-groep-naam{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--band-lila)}
.mt-groep-lijst{margin:var(--r3) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.mt-groep-lijst li{
  padding:6px 11px;border-radius:var(--rond-vol);
  border:1px solid var(--band-rand);background:rgba(255,255,255,.05);
  font-size:var(--t-sm);color:#fff;
}
/* Een competentie met een veto krijgt een stip erbij. Kleur alleen zou hier de
   enige drager zijn, dus de stip staat er als vorm naast en de betekenis staat
   voluit in de legenda eronder. */
.mt-groep-lijst li[data-veto]{border-color:var(--roze-rand);background:rgba(244,192,214,.14)}
.mt-groep-lijst li[data-veto]::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--roze-rand);margin-right:8px;vertical-align:1px;
}
.mt-raamwerk-voet{
  margin-top:clamp(30px,3.4vw,46px);padding-top:var(--r5);
  border-top:1px solid var(--band-rand);
  font-size:var(--t-md);line-height:1.65;color:var(--band-zacht);max-width:76ch;
}

/* ---------- Het gereconstrueerde oordeel ----------
   Geen schermafdruk. Een schermafdruk veroudert, schaalt niet mee naar een
   telefoon en kan niet in twee thema's. Dit is hetzelfde scherm, nagebouwd in
   opmaak, met dezelfde voorbeeldgegevens als op de voorpagina. */
.mt-voorbeeld{background:var(--papier)}
.mt-voorbeeld-kop{max-width:58ch}
.mt-voorbeeld-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.mt-voorbeeld-kop .lead{margin-top:var(--r5)}
.mt-oordeel{
  margin-top:clamp(34px,4vw,54px);border-radius:var(--rond-xl);
  background:var(--wit);border:1px solid var(--rand);box-shadow:var(--schaduw-3);
  overflow:hidden;
}
.mt-oordeel-balk{
  padding:13px var(--r5);border-bottom:1px solid var(--rand-zacht);
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 100%);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r5);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);
}
.mt-oordeel-balk b{font-weight:400;color:var(--ink-700)}
.mt-oordeel-geen{
  margin-left:auto;color:var(--lila);letter-spacing:.12em;text-transform:uppercase;
}
.mt-oordeel-rijen{display:grid;gap:1px;background:var(--rand-zacht)}
.mt-oordeel-rij{
  background:var(--wit);padding:var(--r5);
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr) auto;
  gap:var(--r3) var(--r5);align-items:start;
}
.mt-oordeel-vorm{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.mt-oordeel-vorm span{display:block;margin-top:3px;font-family:var(--mono);font-size:var(--t-2xs);font-weight:400;color:var(--ink-400)}
.mt-oordeel-uit{font-size:var(--t-md);line-height:1.6;color:var(--ink-600)}
.mt-oordeel-stand{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;
  padding:5px 11px;border-radius:var(--rond-vol);white-space:nowrap;
  border:1px solid var(--rand-sterk);color:var(--ink-600);
}
.mt-stand-goed{border-color:var(--mint-rand);background:var(--papier-mint);color:var(--mint)}
.mt-stand-open{border-color:var(--amber-rand);background:var(--papier-amber);color:var(--amber)}
.mt-stand-stil{border-color:var(--rand-sterk);background:var(--papier);color:var(--ink-500)}
.mt-oordeel-bezwaar{
  padding:var(--r5);background:var(--papier-amber);border-top:1px solid var(--amber-rand);
  font-size:var(--t-md);line-height:1.6;color:var(--ink-700);
}
.mt-oordeel-bezwaar b{color:var(--amber)}
.mt-oordeel-mens{
  padding:var(--r4) var(--r5);border-top:1px solid var(--rand-zacht);background:var(--papier);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-600);
}
.mt-oordeel-stip{width:7px;height:7px;border-radius:50%;background:var(--lila);flex:0 0 auto}

/* ---------- Schermbreedtes ---------- */
@media (max-width:1080px){
  .mt-opening-spread{grid-template-columns:minmax(0,1fr);gap:var(--r6)}
  .mt-opening-zij{padding-bottom:0}
  .mt-vorm{grid-template-columns:minmax(0,1fr)}
  .mt-vorm-wat{max-width:52ch}
  .mt-oordeel-rij{grid-template-columns:minmax(0,1fr) auto}
  .mt-oordeel-uit{grid-column:1 / -1}
}
@media (max-width:940px){
  /* Het tweeluik kantelt. De grens gaat van verticaal naar horizontaal mee:
     een verticale lijn tussen twee gestapelde blokken zou nergens meer staan. */
  .mt-diptiek{grid-template-columns:minmax(0,1fr);gap:var(--r9)}
  .mt-diptiek::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--rand-sterk) 8%,var(--rand-sterk) 92%,transparent)}
  .mt-nooit{grid-template-columns:minmax(0,1fr)}
  .mt-kolommen{grid-template-columns:minmax(0,1fr)}
  .mt-klassen{grid-template-columns:minmax(0,1fr)}
  .mt-weging-regels{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .mt-probleem{grid-template-columns:minmax(0,1fr);gap:var(--r6)}
  /* De weegbalk wordt een kolom. Vijf blokken van 30 tot 12 procent op
     telefoonbreedte levert een kolom van veertig pixels op voor "Locatie" en
     dan staat elk woord op een eigen regel. De verhouding gaat dan verloren,
     dus komen de punten terug als getal vooraan de regel. */
  .mt-balk{grid-template-columns:minmax(0,1fr);gap:7px}
  .mt-blok{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:var(--r4);padding:var(--r4)}
  .mt-blok-punten{grid-row:span 2}
  .mt-botsing{grid-template-columns:minmax(0,1fr)}
  .mt-botsing-kop{display:none}
  .mt-vetos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .mt-oordeel-rij{grid-template-columns:minmax(0,1fr)}
  .mt-oordeel-stand{justify-self:start}
}