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

   Alleen deze pagina laadt dit bestand. De basis, de bouwstenen, de kopbalk,
   het menupaneel, de voet, het donkere oppervlak en de twee slotblokken staan
   in landing-gedeeld.css en worden VOOR dit bestand geladen. De waarden staan
   in landing-tokens.css, dat daar weer voor komt. Die volgorde is load-bearing.

   DE VORM: DRIE BANEN MET WISSELS
   De vijf eerdere verdiepingspagina's gebruiken de ruimte elk anders.
   /matching is een tweeluik en gebruikt breedte als GRENS. /bewijs is een
   grootboek en gebruikt hoogte als VOLGORDE. /ai-assistent legt een
   horizontale snede door de pagina. /crm is een trap. /marketing-analytics is
   een zandloper en gebruikt de inhoudsbreedte zelf als verhaal.

   Deze pagina is geen van die vijf. Hier lopen drie banen van boven tot onder
   naast elkaar, doorsneden door vijf dwarsbalken. Er zijn dus twee leesrichtingen
   die tegelijk op de pagina staan: van boven naar beneden lees je een route
   helemaal uit, van links naar rechts vergelijk je de drie op dezelfde vraag.

   WAAROM DIE VORM EN NIET DRIE KAARTEN NAAST ELKAAR
   Drie kaarten zeggen: kies er een en de andere twee vervallen. Dat is precies
   de bewering die dit product NIET doet. De routes lopen over hetzelfde systeem
   en je kunt ertussen wisselen zonder iets te verliezen. Een vorm waarin de
   banen elkaar raken en waarin de dwarsbalken erdoorheen snijden zegt dat
   visueel, drie losse dozen zeggen het omgekeerde.

   HET VERSCHIL MET HET TWEELUIK VAN /matching
   Daar is de verticale lijn een GRENS: twee systemen die nooit worden opgeteld.
   Hier zijn de verticale lijnen juist bedoeld om overgestoken te worden en de
   sectie erna doet dat ook letterlijk, met de wissels. Dezelfde as, de
   tegenovergestelde betekenis.

   BEWUST GEEN VIERKANTJES OP DEZE PAGINA
   Het vierkantje ligt in de gedeelde laag vast als taal voor precies een ding
   waar een oordeel over gaat: een kenmerk, een eis, een bevinding. Een module
   die door ons wordt bediend is dat niet. De standen in de omgevingstabel zijn
   daarom labels met een woord erin en geen vakjes. Wie hier toch een vakje zet,
   maakt van de taal een decoratie.

   DE INSPRINGING EN DE KOLOMMEN STAAN IN FRACTIES, NIET IN PIXELS
   Elke kolombreedte is minmax(0,Nfr). De nul in die minmax is er niet voor de
   sier: zonder die nul is de minimale kolombreedte "auto" en duwt een lange
   ononderbroken naam de tabel breder dan het venster. Dat is precies de fout
   die een driekoloms raster makkelijk maakt.

   Contrast is doorgerekend op de echte DOM met de alphalagen erin verwerkt,
   niet geschat. Wie een kleur wijzigt, meet opnieuw.

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

/* ---------------------------------------------------------------------------
   1. DE OPENING
   Titel links, de drie banen als legenda rechts. De legenda is geen navigatie
   en bevat daarom geen links: een anker naar een sectie op deze pagina zou een
   kaal anker zijn en die staan hier niet, want ze breken zodra de kopbalk naar
   een andere pagina wordt gekopieerd.
   --------------------------------------------------------------------------- */
.sw-opening{
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 72%);
  padding-top:calc(var(--r-sectie) + var(--r8));
  overflow:hidden;
}
.sw-opening-spread{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,84px);align-items:start;
}
.sw-opening .titel-1{margin-top:var(--r5);max-width:13ch}
.sw-opening .lead{margin-top:var(--r6);max-width:52ch}
.sw-opening-bij{
  margin-top:var(--r5);max-width:52ch;
  font-size:var(--t-md);line-height:1.65;color:var(--ink-400);
}

.sw-opening-zij{
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--rand);border-radius:var(--rond-lg);
  background:var(--wit);box-shadow:var(--schaduw-2);
}
.sw-opening-zij .mono{color:var(--ink-400)}

.sw-legenda{margin-top:var(--r5);display:grid;gap:var(--r4)}
.sw-legenda li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--r2) var(--r4);align-items:baseline;
  padding-bottom:var(--r4);border-bottom:1px solid var(--rand-zacht);
}
.sw-legenda li:last-child{padding-bottom:0;border-bottom:0}
/* Het nummer staat in de linkerkolom en overspant de drie regels ernaast. Zo
   blijft de tekstkolom een echte kolom in plaats van drie losse regels die
   onder het cijfer door schuiven. */
/* --ink-400 en niet --ink-300. Het cijfer is aria-hidden en dus decoratie voor
   een schermlezer, maar het staat wel als tekst op het scherm en dan geldt de
   eis van 4,5. Gemeten op de echte DOM: --ink-300 haalde 3,72 en dat is de
   waarde waarvoor in landing-tokens.css staat dat hij nooit tekst mag dragen. */
.sw-legenda-nr{
  grid-row:1 / span 3;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--ink-400);padding-top:2px;
}
.sw-legenda b{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.sw-legenda-vorm{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);
}
.sw-legenda li > span:last-child{font-size:var(--t-md);line-height:1.6;color:var(--ink-500)}
.sw-legenda-uit b{color:var(--lila)}

.sw-opening-geld{
  margin-top:var(--r5);padding-top:var(--r4);border-top:1px solid var(--rand);
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-400);
}

/* ---------------------------------------------------------------------------
   2. DE SECTIEKOP
   Een keer opgeschreven in plaats van vier keer dezelfde drie declaraties.
   --------------------------------------------------------------------------- */
.sw-kop{max-width:62ch}
.sw-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.sw-kop .lead{margin-top:var(--r5)}
.sw-kop-licht .lead{color:var(--band-zacht)}

/* ---------------------------------------------------------------------------
   3. DE DRIE BANEN, de handtekening van deze pagina

   Een raster van drie kolommen. De koppen vormen de eerste rij, daarna volgt
   telkens een dwarsbalk over de volle breedte (grid-column:1/-1) met daaronder
   drie cellen. De verticale lijnen komen van de MIDDELSTE kolom, links en
   rechts. Twee kolommen met elk een eigen rand zouden twee lijnen op een pixel
   na op elkaar leggen en dat is op een scherm met een hoge dichtheid zichtbaar
   als een dikkere, vuile lijn.

   Het raster heeft bewust GEEN overflow:hidden. De middelste baankop steekt er
   met een negatieve bovenmarge bovenuit; dat is de enige plek waar de vorm
   zegt welke route het vaakst wordt gekozen zonder dat er "aanbevolen" bij
   hoeft te staan.
   --------------------------------------------------------------------------- */
.sw-banen{background:var(--wit)}
.sw-raster{
  position:relative;
  margin-top:calc(clamp(34px,4.4vw,60px) + var(--r7));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rand);border-radius:var(--rond-lg);
  background:var(--wit);box-shadow:var(--schaduw-2);
}

.sw-baan-kop{padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px)}
.sw-baan-kop .mono{color:var(--ink-400)}
.sw-baan-naam{
  margin-top:var(--r3);font-size:var(--t-xl);font-weight:600;
  color:var(--ink-900);letter-spacing:-.025em;line-height:1.15;
}
.sw-baan-vorm{
  margin-top:var(--r3);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
}
.sw-baan-kop p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.55;color:var(--ink-500)}

/* De verhoogde baan. De negatieve bovenmarge is precies var(--r7) en het
   raster houdt daar met zijn eigen bovenmarge rekening mee; anders schuift de
   kop over de sectiekop erboven heen. */
.sw-baan-kop.sw-b{
  position:relative;
  margin-top:calc(var(--r7) * -1);
  padding-top:calc(clamp(22px,2.4vw,30px) + var(--r7));
  border:1px solid var(--lila-rand);
  border-radius:var(--rond-lg) var(--rond-lg) 0 0;
  background:var(--papier-lila);
  box-shadow:var(--schaduw-3);
}
.sw-baan-kop.sw-b .sw-baan-naam{color:var(--lila)}
.sw-vlag{
  position:absolute;top:var(--r5);right:clamp(18px,2vw,26px);
  padding:4px 10px;border-radius:var(--rond-vol);
  background:var(--lila);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}

/* De dwarsbalk. Hij snijdt door alle drie de banen heen en dat is het punt:
   dit is een vraag die voor elke route hetzelfde is. */
.sw-dwars{
  grid-column:1 / -1;
  padding:var(--r5) clamp(18px,2vw,26px);
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);
  background:var(--papier);
}
.sw-dwars-naam{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.sw-dwars p{margin-top:var(--r2);font-size:var(--t-md);line-height:1.55;color:var(--ink-400);max-width:70ch}

.sw-cel{padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px)}
.sw-cel p{font-size:var(--t-md);line-height:1.65;color:var(--ink-500)}
.sw-cel p + p{margin-top:var(--r4)}
.sw-cel.sw-b{
  border-left:1px solid var(--lila-rand);border-right:1px solid var(--lila-rand);
  background:var(--papier-lila);
}
/* Het routelabel in de cel is er voor de gestapelde weergave onder 880px. Daar
   staat een cel los onder een dwarsbalk en is zonder label niet te zien bij
   welke route hij hoort. Boven die breedte staat de route in de kolomkop en is
   het label ruis. */
.sw-cel-route{display:none;color:var(--ink-400)}

.sw-punten{display:grid;gap:var(--r3);margin-top:var(--r2)}
.sw-punten li{
  position:relative;padding-left:var(--r5);
  font-size:var(--t-md);line-height:1.55;color:var(--ink-500);
}
/* Geen opsommingsteken uit de browser: dat staat op de regel in plaats van
   ervoor zodra een punt over twee regels loopt. Deze streep staat op de eerste
   regel en blijft daar. */
.sw-punten li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:1px;background:var(--ink-300);
}
.sw-cel.sw-b .sw-punten li::before{background:var(--lila)}

.sw-vorm{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--r3);
}
.sw-cel .knop{margin-top:var(--r5)}

/* ---------------------------------------------------------------------------
   4. DE WISSELS
   Op het donkere oppervlak, want dit is de bewering waar de pagina om draait
   en niet nog een opsomming. Van en naar staan naast elkaar met een spoor
   ertussen; de uitleg loopt eronder over de volle breedte.
   --------------------------------------------------------------------------- */
.sw-wisselbaan{margin-top:clamp(34px,4.4vw,60px);display:grid;gap:var(--r5)}
.sw-wissel{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--r4);align-items:center;
  padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--band-rand);border-radius:var(--rond-lg);
  background:rgba(255,255,255,.045);
}
.sw-wissel .mono{color:var(--band-lila)}
.sw-wissel-van b,.sw-wissel-naar b{
  display:block;margin-top:var(--r2);
  font-size:var(--t-lg);font-weight:600;color:#fff;letter-spacing:-.02em;
}
.sw-wissel-naar{text-align:right}

/* Het spoor tussen de twee. Twee streepjes met de pijl ertussen in plaats van
   een doorlopende lijn met de pijl erbovenop: die tweede vorm heeft een
   dekkende achtergrond onder de pijl nodig en die kleur moet dan met de hand
   gelijk worden gehouden aan het paneel eronder. Bij de eerste wijziging van
   de paneelkleur staat er dan een blokje in een andere tint. */
.sw-wissel-spoor{display:flex;align-items:center;gap:var(--r2);color:var(--band-lila)}
.sw-wissel-spoor::before,.sw-wissel-spoor::after{
  content:"";display:block;width:clamp(14px,3vw,40px);height:1px;
  background:var(--band-rand-sterk);
}
.sw-wissel-pijl{font-size:var(--t-xl);line-height:1}

.sw-wissel-lijf{
  grid-column:1 / -1;margin-top:var(--r5);padding-top:var(--r5);
  border-top:1px solid var(--band-rand);
}
.sw-wissel-naam{font-size:var(--t-xl);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.25}
.sw-wissel-lijf p{margin-top:var(--r4);font-size:var(--t-base);line-height:1.7;color:var(--band-zacht);max-width:78ch}
.sw-wissel-mee{
  margin-top:var(--r5);padding:var(--r5);
  border:1px solid var(--band-rand);border-radius:var(--rond);
  background:rgba(0,0,0,.22);
}
.sw-wissel-mee .mono{color:#fff}
.sw-wissel-mee .sw-punten{margin-top:var(--r4)}
.sw-wissel-mee .sw-punten li{color:var(--band-zacht)}
.sw-wissel-mee .sw-punten li::before{background:var(--band-lila)}
/* De derde wissel gaat beide kanten op. Een tweede pijl zou dat zeggen, maar
   dan staat er een vorm die verder nergens terugkomt; een randaccent is genoeg
   en de kop eronder zegt het voluit. */
.sw-wissel-terug{border-color:var(--band-rand-sterk)}

/* ---------------------------------------------------------------------------
   5. DE OMGEVING
   Een in CSS opgebouwde reconstructie van het beheerscherm. Geen schermafdruk
   en geen venster op het echte systeem: op een publieke pagina hoort nooit een
   echte kandidaat of een echte formule te staan.
   --------------------------------------------------------------------------- */
.sw-omgeving{background:var(--papier);border-top:1px solid var(--rand)}
.sw-venster{
  margin-top:clamp(30px,4vw,52px);
  border:1px solid var(--rand-sterk);border-radius:var(--rond-lg);
  background:var(--wit);box-shadow:var(--schaduw-3);overflow:hidden;
}
.sw-venster-balk{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);
  padding:var(--r4) clamp(16px,2vw,24px);
  border-bottom:1px solid var(--rand);background:var(--papier);
  font-size:var(--t-md);color:var(--ink-500);
}
.sw-venster-balk b{color:var(--ink-900);font-weight:600}
.sw-venster-stip{
  width:8px;height:8px;border-radius:50%;background:var(--blauw);
  box-shadow:0 0 8px var(--blauw);flex:0 0 auto;
}
.sw-venster-bij{margin-left:auto;color:var(--ink-400)}

.sw-legende{
  display:flex;flex-wrap:wrap;gap:var(--r3);
  padding:var(--r4) clamp(16px,2vw,24px);
  border-bottom:1px solid var(--rand-zacht);
}

/* De drie standen. Kleur is nooit de enige drager: het woord staat er altijd
   voluit in, ook in de legenda hierboven. De drie kleurcombinaties zijn
   dezelfde als die van de bewijsregel in de gedeelde laag, zodat er geen
   vierde en vijfde betekenis van dezelfde tinten ontstaat. */
.sw-stand{
  display:inline-block;padding:3px 10px;border-radius:var(--rond-vol);
  border:1px solid var(--rand);background:var(--wit);
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
}
.sw-stand-eigen{background:var(--papier-mint);border-color:var(--mint-rand);color:var(--mint)}
.sw-stand-mee{background:var(--blauw-zacht);border-color:var(--blauw-rand);color:var(--blauw-diep)}
.sw-stand-wij{background:var(--papier-amber);border-color:var(--amber-rand);color:var(--amber)}

.sw-mat-kop,.sw-mat-rij{
  display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:var(--r3);align-items:center;
  padding:11px clamp(16px,2vw,24px);
}
.sw-mat-rij{border-top:1px solid var(--rand-zacht)}
.sw-mat-kop{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);
}
.sw-mat-naam{font-size:var(--t-md);line-height:1.45;color:var(--ink-700)}
.sw-mat-route{display:none;color:var(--ink-400)}

.sw-venster-voet{
  padding:var(--r5) clamp(16px,2vw,24px);
  border-top:1px solid var(--rand);background:var(--papier);
}
.sw-venster-voet p{font-size:var(--t-md);line-height:1.65;color:var(--ink-600);max-width:80ch}
.sw-venster-voet b{color:var(--ink-900);font-weight:600}
.sw-venster-let{margin-top:var(--r3) !important;font-size:var(--t-sm) !important;color:var(--ink-400) !important}

/* ---------------------------------------------------------------------------
   6. DE BODEM
   Over de volle breedte en in vier kolommen, dus juist NIET in de drie banen
   van hierboven. Dat is precies wat er wordt beweerd: dit verschilt niet per
   route.
   --------------------------------------------------------------------------- */
.sw-bodem{background:var(--wit)}
.sw-bodem-raster{
  margin-top:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rand);
  border:1px solid var(--rand);border-radius:var(--rond-lg);overflow:hidden;
}
/* De randen komen van de gap: één pixel achtergrond die tussen de vakken door
   schijnt. Een border per vak zou op elke binnengrens twee lijnen opleveren. */
.sw-bodem-vak{padding:clamp(20px,2.2vw,28px);background:var(--wit)}
.sw-bodem-vak h3{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1.25}
.sw-bodem-vak p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--ink-500)}

/* ---------------------------------------------------------------------------
   7. WAT HIER BEWUST NIET STAAT
   --------------------------------------------------------------------------- */
.sw-eerlijk{background:var(--papier);border-top:1px solid var(--rand)}
.sw-eerlijk-spread{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.sw-eerlijk .titel-2{margin-top:var(--r5);max-width:14ch}
.sw-eerlijk-lijst{display:grid;gap:var(--r5)}
.sw-eerlijk-vak{
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--rand);border-left:3px solid var(--roze-rand);
  border-radius:var(--rond);background:var(--wit);
}
.sw-eerlijk-vak h3{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.sw-eerlijk-vak p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.7;color:var(--ink-600)}

/* ---------------------------------------------------------------------------
   8. DE BREEDTES

   Drie breekpunten en elk lost iets anders op.
     1040px  de bodem gaat van vier naar twee kolommen; vier kolommen met een
             kop van drie woorden erin breken daaronder op elk woord af
      880px  de drie banen stapelen. Vanaf hier verschijnen de routelabels in
             de cellen, want de kolomkop staat dan te ver weg om nog te dragen
      760px  de omgevingstabel stapelt: naam boven, drie standen eronder, elk
             met de route ervoor
   --------------------------------------------------------------------------- */
@media (max-width:1040px){
  .sw-bodem-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:940px){
  .sw-opening-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .sw-opening .titel-1{max-width:none}
  .sw-eerlijk-spread{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
  .sw-eerlijk .titel-2{max-width:none}
}

@media (max-width:880px){
  .sw-raster{grid-template-columns:minmax(0,1fr);margin-top:clamp(30px,4vw,52px)}
  /* De verhoogde baan komt terug in de rij. Gestapeld zegt "hoger" niets meer
     en zou de kop alleen maar over de vorige heen leggen. */
  .sw-baan-kop.sw-b{
    margin-top:0;padding-top:clamp(22px,2.4vw,30px);
    border-radius:0;border-left:0;border-right:0;
  }
  .sw-baan-kop.sw-b .sw-vlag{position:static;display:inline-block;margin-top:var(--r4)}
  .sw-baan-kop + .sw-baan-kop{border-top:1px solid var(--rand)}
  .sw-cel.sw-b{border-left:0;border-right:0}
  .sw-cel + .sw-cel{border-top:1px solid var(--rand-zacht)}
  .sw-cel-route{display:block;margin-bottom:var(--r3)}
  .sw-wissel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--r3)}
}

@media (max-width:760px){
  .sw-mat-kop{display:none}
  .sw-mat-rij{grid-template-columns:minmax(0,1fr);gap:var(--r2);padding-top:var(--r4);padding-bottom:var(--r4)}
  .sw-mat-naam{font-weight:600;color:var(--ink-900)}
  .sw-mat-cel{display:flex;align-items:center;gap:var(--r3)}
  .sw-mat-route{display:block;flex:0 0 auto;min-width:11ch}
  .sw-venster-bij{margin-left:0}
}

@media (max-width:620px){
  .sw-bodem-raster{grid-template-columns:minmax(0,1fr)}
  /* Van en naar onder elkaar, met het spoor als een gedraaide pijl ertussen.
     Naast elkaar op een smal scherm worden het twee kolommen van vier tekens
     breed en dan breekt elke naam op elk woord af. */
  .sw-wissel{grid-template-columns:minmax(0,1fr);gap:var(--r3);justify-items:start}
  .sw-wissel-naar{text-align:left}
  .sw-wissel-spoor{transform:rotate(90deg);transform-origin:left center;margin-left:var(--r4)}
}

@media (max-width:420px){
  .sw-mat-route{min-width:0;width:100%}
  .sw-mat-cel{display:grid;gap:var(--r1);justify-items:start}
}