/* ===========================================================================
   FRANCHISEHUB ONTWERP V7, DE GELEIDE ROUTE EN DE STATIONS VAN /matching

   WAAROM DIT BESTAND BESTAAT
   De eigenaar wil op de computer een pagina die je doorloopt in plaats van
   een lange lijst omlaag ("waarom zoveel competenties zo in een lijst? dit
   kan veel beter"). De reviewer legde daarvoor een begrensde vorm vast
   (ronde v7-scrollrichting-01): de tekst blijft een gewone pagina en alleen
   een vastgezet beeldvlak naast de tekst volgt een slingerpad langs de
   hoofdstukken. Op de telefoon blijft de pagina rustig verticaal.

   De bouw gaat in vier stappen, in de volgorde van de reviewer:
   1. /matching zonder beweging: groepsborden, vaste score, vier oordelen met
      een eigen vorm, een ingevuld document en een illustratie per station
   2. de route van Eisen via Score naar Beoordeling
   3. toetsenbord, ankers, minder beweging, vensterwissels en foutpaden
   4. de overige stations van /matching

   WAT HIER STAAT
   1. Het station: vijf kolommen leesinhoud naast zeven kolommen beeld
   2. De camera: één vastgezet beeldvlak over diezelfde zeven kolommen
   3. /matching: de vooruitblik, de groepsborden, de score, de vier
      oordelen, de grenzen, het ingevulde document en het rustige slot
   4. Smalle leeskolom: tabellen en paren stapelen op de breedte van de
      kolom en niet van het venster
   5. Afdrukken

   DE HARDE AFSPRAAK
   De ruimte voor het beeld staat altijd in de opmaak, met of zonder script.
   Het script zet alleen data-route-klaar en daarmee verschijnt de camera
   als losse laag BOVEN die ruimte. Er verandert dan geen kolombreedte en
   geen teksthoogte, dus het starten van de route verschuift niets. Zonder
   script of bij een fout blijven de beeldvakken effen en staat alle tekst
   op haar plek.

   Geen opacity op tekst of bediening, geen beginstand die op een script
   wacht, geen SVG en geen nieuwe kleur: alles gebruikt de tokens van
   ontwerp-basis.css.
   =========================================================================== */

/* ===========================================================================
   0. FOCUS EN ANKERS ONDER DE VASTE KOPBALK
   ontwerp-basis.css geeft elk element met een id ruimte boven zich
   (--anker-ruimte, de kopbalk plus 24 pixels). Een link of samenvatting
   zonder id kreeg die ruimte niet: bij terug tabben kwam de samenvatting van
   een groep met haar bovenrand op 21 pixels, onder de kopbalk (gemeten op
   1440). De ruimte staat daarom op deze pagina op de scrollcontainer zelf,
   zodat zij geldt voor elke sprong en elk element met focus. De ruimte op de
   ids gaat hier op nul, anders telt zij dubbel en komt een anker 200 pixels
   lager uit.
   =========================================================================== */
html{scroll-padding-top:var(--anker-ruimte,100px)}
[id]{scroll-margin-top:0}

/* ===========================================================================
   1. HET STATION
   Onder 1280 pixels staat alles onder elkaar: eerst de leesinhoud, daarna
   de illustratie van het station (vanaf 768 pixels, op de telefoon niet:
   daar blijft de pagina een rustige kolom en staat de betekenis al in de
   tekst). Vanaf 1280 staat de leesinhoud in vijf kolommen en de
   illustratie in de zeven kolommen ernaast. Dat is de stilstaande
   uitvoering; de camera van stap 2 neemt precies die zeven kolommen over.
   =========================================================================== */
.station-lees{min-width:0;container-type:inline-size}
.station-lees > * + *{margin-top:var(--sp-kop)}
.station-kop .alinea{margin-top:var(--sp-kopalinea)}

.station-beeld{display:none}
@media (min-width:768px){
  .station-beeld{
    display:block;position:relative;width:100%;max-width:760px;
    margin:var(--sp-kop) auto 0;aspect-ratio:760 / 562;
    border-radius:24px;overflow:hidden;background:var(--lila-papier);
    box-shadow:var(--schaduw-2);
  }
}
.station-doek{display:block;width:100%;height:100%}

@media (min-width:1280px){
  .station-rij{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    gap:var(--gat);align-items:start;
  }
  .station-lees{grid-column:1 / span 5;grid-row:1}
  .station-beeld{grid-column:6 / span 7;grid-row:1;margin:0;max-width:none}
}

/* ===========================================================================
   2. DE CAMERA
   Eén laag over de hele route met daarin één vastgezet beeldvlak in de
   zeven beeldkolommen. Alleen het beeldvlak staat vast; de tekst scrolt
   gewoon. De laag is aria-hidden en laat de aanwijzer door: zij bevat geen
   bediening. Zij bestaat pas als het script de route werkelijk heeft
   gestart (data-route-klaar) en alleen vanaf 1280 bij 720 pixels.
   =========================================================================== */
.route{position:relative}
.route-camera{display:none}
@media (min-width:1280px) and (min-height:720px){
  .route[data-route-klaar] > .route-camera{
    display:block;position:absolute;inset:0;z-index:5;pointer-events:none;
  }
  /* De stilstaande illustraties houden hun ruimte en worden alleen
     onzichtbaar: zo verschuift er niets als de camera verschijnt of
     verdwijnt. */
  .route[data-route-klaar] .station-beeld{visibility:hidden}
}
/* Vangnet voor het moment tussen een wissel en het script: met minder
   beweging of met de knop Beweging uit is de camera er in geen geval. */
html[data-beweging="uit"] .route > .route-camera{display:none}
html[data-beweging="uit"] .route .station-beeld{visibility:visible}
@media (prefers-reduced-motion:reduce){
  .route > .route-camera{display:none}
  .route .station-beeld{visibility:visible}
}

.route-camera-rij{
  height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gat);
}
/* De bovenmaat is gelijk aan de bovenruimte van het eerste station, zodat
   het beeldvlak voor het vastzetten op dezelfde plek staat als de
   stilstaande illustratie. De leesrand ligt 24 pixels onder de kopbalk:
   hier de vaste --kop-hoogte uit ontwerp-basis.css, het script zet de
   gemeten maat direct op het beeldvlak. */
.route-camera-kolom{grid-column:6 / span 7;position:relative;padding:24px 0}
.route-vlak{
  position:sticky;top:calc(var(--kop-hoogte,76px) + 24px);
  width:100%;aspect-ratio:760 / 562;max-height:calc(100vh - var(--kop-hoogte,76px) - 48px);
  border-radius:24px;overflow:hidden;background:var(--lila-papier);
  box-shadow:var(--schaduw-2);
}
.route-doek{display:block;width:100%;height:100%}

/* ---- De bewegingsknop bij het begin van de route ----
   Op breed is een knop alleen in de voet niet goed bereikbaar. Dit derde
   exemplaar staat onder de vooruitblik en alleen waar de route kan draaien:
   breed en hoog genoeg met een fijne aanwijzer. ontwerp.js haalt hidden weg
   en houdt de tekst gelijk aan de andere twee. De knop staat op licht en
   krijgt daarom de bedieningsrand in plaats van de witte rand uit de voet. */
.route-beweging{display:none}
@media (min-width:1280px) and (min-height:720px) and (hover:hover) and (pointer:fine){
  /* De ruimte staat er altijd, ook voordat het script de knop toont: toen
     het tonen de ruimte pas maakte, schoof alles eronder 57 pixels omlaag
     (gemeten, layout-shift 0,0076 op 1440). De vaste hoogte houdt de knop
     ook bij de wissel naar de echte letter even hoog. */
  .route-beweging{display:flex;height:40px;margin-top:18px;visibility:hidden}
  .route-beweging:not([hidden]){visibility:visible}
  .route-beweging .beweging-knop{height:40px;display:inline-flex;align-items:center}
}
.route-beweging .beweging-knop{background:var(--wit);border-color:var(--rand-bediening);color:var(--inkt)}
.route-beweging .beweging-knop:hover,
.route-beweging .beweging-knop:focus-visible{border-color:var(--blauw-diep);color:var(--inkt)}
/* Met de systeemvoorkeur voor minder beweging kan de knop niets aanzetten
   en zegt hij dat; dan geen aanwijzer die een actie belooft. */
.beweging-knop[aria-disabled="true"]{cursor:default;border-style:dashed}

/* Een route begint na een overgangsstrook. De gewone regel .overgang-boog +
   .sectie raakt het eerste station niet meer, want de omhulling staat
   ertussen; deze regel houdt de ruimte erboven daarom even kort. */
.overgang-boog + .route > .sectie:first-child{padding-top:max(24px,calc(var(--sp-boven) - var(--boog)))}
.overgang-verloop + .route > .sectie:first-child{padding-top:max(24px,calc(var(--sp-boven) - var(--verloop)))}
@media (max-width:599px){
  .overgang-boog + .route > .sectie:first-child{padding-top:max(16px,calc(var(--sp-boven) - var(--boog)))}
  .overgang-verloop + .route > .sectie:first-child{padding-top:max(16px,calc(var(--sp-boven) - var(--verloop)))}
}

/* ===========================================================================
   3. /matching
   =========================================================================== */

/* ---- De opening met de vooruitblik ----
   De vooruitblik vervangt de twee losse capsules. In de opmaak staat zij na
   het directe antwoord, zodat een lezer en een zoekmachine eerst de vraag
   en het antwoord krijgen. Vanaf 1024 pixels staat zij onder de kop, naast
   het antwoord. */
@media (min-width:1024px){
  .opening-route > .sp5{grid-row:1 / span 2}
  .opening-route > .opening-vooruitblik{grid-column:1 / span 7;grid-row:2}
}
.vooruitblik{
  list-style:none;margin:var(--sp-kop) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.vooruitblik a{
  display:grid;gap:6px;align-content:start;height:100%;
  padding:16px 16px 18px;background:var(--wit);
  border:2px solid var(--blauw-rand);border-radius:16px;
  color:var(--lees);text-decoration:none;
  transition:border-color var(--duur) var(--soepel);
}
.vooruitblik a:hover,.vooruitblik a:focus-visible{border-color:var(--blauw-diep)}
.vooruitblik-teken{display:block;position:relative;height:26px}
.vooruitblik-nr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--lila-diep)}
.vooruitblik-naam{font-weight:600;color:var(--inkt);font-size:17px;line-height:1.3}
.vooruitblik-wat{font-size:14px;line-height:1.5}
@media (max-width:599px){
  .vooruitblik{grid-template-columns:1fr;gap:8px}
  .vooruitblik a{grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:12px 14px}
  .vooruitblik-teken{display:none}
  .vooruitblik-nr{padding-top:3px}
  .vooruitblik-wat{grid-column:2}
}
/* De drie tekens: twee groepjes stippen, één balk in vijf gelijke delen en
   vier losse vakjes. Zuiver decoratie in een eigen strook boven de tekst;
   de gewichten zelf staan alleen in de tabel en in het canvas. */
.teken-inventaris::before,.teken-inventaris::after{
  content:'';position:absolute;top:2px;width:33px;height:22px;
  background-image:radial-gradient(circle,var(--mid-lila) 3px,transparent 3.5px);
  background-size:11px 11px;
}
.teken-inventaris::before{left:0}
.teken-inventaris::after{left:42px;background-image:radial-gradient(circle,var(--mid-blauw) 3px,transparent 3.5px)}
.teken-score::before{
  content:'';position:absolute;left:0;top:7px;width:92px;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--blauw) 0 18%,var(--wit) 18% 20.5%,var(--lila) 20.5% 38.5%,var(--wit) 38.5% 41%,var(--roze) 41% 59%,var(--wit) 59% 61.5%,var(--mid-lila) 61.5% 79.5%,var(--wit) 79.5% 82%,var(--mid-blauw) 82% 100%);
}
.teken-oordelen::before{
  content:'';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:4px;
  background:var(--lila);
  box-shadow:20px 0 0 var(--mid-lila),40px 0 0 var(--lila),60px 0 0 var(--mid-lila);
}

/* ---- De groepsborden van de inventaris ----
   Eén lang uitklapblok met twee lijsten van 22 en 26 werd twee borden met
   elk zes groepen. Bovenaan de vijf kernpunten, want die wegen het zwaarst.
   Elke groep is een eigen details-element: zonder script bedienbaar, met
   het toetsenbord te openen en meerdere tegelijk open. */
.borden-titel{font-weight:600;color:var(--inkt);font-size:17px}
.kernpunten{
  margin-top:14px;background:var(--amber-papier);border:1px solid var(--amber-rand);
  border-radius:16px;padding:14px 16px;
}
.kernpunten-kop{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6f4a11}
.kernpunten-lijst{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.kernpunten-lijst li{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  background:var(--wit);border:1px solid var(--amber-rand);border-radius:12px;
  padding:6px 12px;font-size:15px;line-height:1.4;color:var(--inkt);
}
.kernpunten-groep{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6f4a11}

.borden-paar{margin-top:14px;display:grid;gap:14px}
@container (min-width:440px){ .borden-paar{grid-template-columns:repeat(2,minmax(0,1fr))} }
.bord{background:var(--wit);border:2px solid var(--rand-lila);border-radius:20px;padding:16px 16px 8px;min-width:0}
.bord-formule{border-color:var(--blauw-rand)}
.bord .inventaris-kop{margin-bottom:4px}
.bord-formule .inventaris-kop{border-bottom-color:var(--blauw-rand)}
.groep + .groep{border-top:1px solid #eceff9}
.groep > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:10px 2px;font-weight:600;color:var(--inkt);font-size:15px;line-height:1.35;
}
.groep > summary::-webkit-details-marker{display:none}
.groep-naam{flex:1;min-width:0}
.groep-tel{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--lila-diep)}
.groep > summary::after{
  content:'+';flex:none;width:28px;height:28px;border-radius:999px;
  border:2px solid var(--rand-bediening);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:17px;line-height:1;color:var(--lila-diep);
}
.groep[open] > summary::after{content:'\2212'}
.groep > summary:hover::after,.groep > summary:focus-visible::after{border-color:var(--blauw-diep)}
.groep ul{padding:0 2px 12px;display:grid;gap:4px;font-size:15px;line-height:1.5;color:var(--inkt)}
.groep .lijst-merk{margin-left:6px}

/* ---- De score: een vast voorbeeld zonder decoratie eromheen ----
   Het kader kreeg zijn bovenstrook voor de decoratie; die decoratie is weg
   en daarmee ook de strook. Het kader houdt aan alle kanten dezelfde
   binnenruimte. */
.kader-matching{--kader-strook:var(--kader-zij)}

/* ---- De vier oordelen: vier velden met elk een eigen vorm ----
   Geen vier gelijke kaarten en geen meters: een overzicht van de
   kernpunten, drie standen van gevraagd tegenover bekend, twee werkwijzen
   die wel of niet botsen en drie klassen van tekorten. Er staat nergens een
   optelling. */
.oordeelvelden{display:grid;gap:16px}
@container (min-width:900px){ .oordeelvelden{grid-template-columns:repeat(2,minmax(0,1fr))} }
.oordeelveld{--nr:var(--lila);background:var(--wit);border:2px solid var(--rand-lila);border-radius:20px;padding:22px}
@media (max-width:599px){ .oordeelveld{padding:18px} }
.oordeelveld-kop{display:flex;align-items:center;gap:14px}
.oordeelveld h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.oordeelveld > p{margin-top:12px}
.oordeelveld-vorm{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.oordeelveld-vorm li{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--inkt);
  border-radius:10px;padding:6px 12px;
}
/* 1. De kernpunten: vijf vakken als overzicht. */
.vorm-kern li{background:var(--amber-papier);border:1px solid var(--amber-rand)}
.vorm-kern li::before{content:'';width:10px;height:10px;border:2px solid var(--amber);border-radius:3px;flex:none}
/* 2. Het niveau: drie standen, met vorm en woord en niet met kleur alleen. */
.vorm-niveau li{background:var(--papier);border:1px solid var(--rand)}
.vorm-niveau li::before{content:'';flex:none;border-radius:999px}
.vorm-niveau li:nth-child(1)::before{width:12px;height:12px;background:var(--mint)}
.vorm-niveau li:nth-child(2)::before{width:8px;height:8px;border:2px solid var(--amber);background:linear-gradient(90deg,var(--amber) 50%,transparent 50%)}
.vorm-niveau li:nth-child(3)::before{width:8px;height:8px;border:2px dashed var(--rand-bediening)}
/* 3. De aard: twee paren, het ene botst en het andere niet. */
.vorm-aard li{position:relative;padding-left:48px;background:var(--papier);border:1px solid var(--rand)}
.vorm-aard li::before,.vorm-aard li::after{content:'';position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:999px}
.vorm-aard li::before{left:10px;background:var(--mid-lila)}
.vorm-aard li:nth-child(1)::after{left:18px;background:var(--mid-roze);box-shadow:0 0 0 2px var(--roze)}
.vorm-aard li:nth-child(2)::after{left:27px;background:var(--mid-blauw)}
/* 4. Wat iemand nog kan leren: drie klassen, de laatste is nooit op te vangen. */
.vorm-klassen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.vorm-klassen li{justify-content:center;text-align:center;border:2px solid var(--lila);background:var(--wit)}
.vorm-klassen li:nth-child(1){border-style:dashed}
.vorm-klassen li:nth-child(3){background:var(--lila-diep);border-color:var(--lila-diep);color:#fff}
.oordeel-voorwaarde .alinea + .na-blok{margin-top:var(--sp-alinea)}

/* ---- Grenzen: drie gevallen met een eigen naam ----
   Onbekend en afwijkend lezen pas anders als ze een naam hebben. In de
   smalle leeskolom staan de drie onder elkaar (containerregel hieronder). */
.geval-naam{display:block;font-weight:600;color:var(--inkt);font-size:17px;line-height:1.3}

/* ---- Tweede methode: kop en tekst onder elkaar in het vergelijkvlak ---- */
.station-lees .vergelijkvlak .titel-2{max-width:none}

/* ---- Het beoordelingsdocument: een ingevuld voorbeeld over de breedte ---- */
.werkdocument{margin-top:var(--sp-kop)}
.werkdocument-noot{margin-top:12px;font-size:15px;color:var(--lees)}
.werkdocument .toegang-tabel td{color:var(--inkt)}
.werkdocument .open-gegeven{color:var(--lees);font-style:italic}
.werkdocument .toegang-tabel th,.werkdocument .toegang-tabel td{width:25%}
.leeg-exemplaar{margin-top:var(--sp-kop)}
.leeg-uitleg{margin-bottom:14px}
.leeg-afdruk{margin:0 0 16px}

/* ---- Het slot zonder losse capsules ----
   Eén hoofdactie op een effen vlak. De decoratiestrook boven in het
   actievlak vervalt en daarmee ook haar ruimte. */
.actievlak-rustig{--actie-strook:0px}

/* ===========================================================================
   4. DE SMALLE LEESKOLOM
   Vanaf 1280 pixels is de leeskolom vijf kolommen breed (472 tot 540
   pixels). Tabellen en paren volgen daar de breedte van de kolom en niet
   die van het venster: dezelfde regels als onder 768 pixels in
   ontwerp-paginas.css en ontwerp-overig-a.css, nu als containerregel. De
   tabel met twee korte kolommen (tabel-vast) houdt haar gewone vorm.
   =========================================================================== */
@container (max-width:640px){
  .station-lees .toegang-tabel:not(.tabel-vast) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .station-lees .toegang-tabel:not(.tabel-vast) thead tr,
  .station-lees .toegang-tabel:not(.tabel-vast) thead th{display:block;width:1px;height:1px;padding:0;overflow:hidden}
  .station-lees .toegang-tabel:not(.tabel-vast) tbody tr{display:block;padding:18px 0}
  .station-lees .toegang-tabel:not(.tabel-vast) tbody th,
  .station-lees .toegang-tabel:not(.tabel-vast) tbody td{display:block;width:auto;padding:0 20px}
  .station-lees .toegang-tabel:not(.tabel-vast) tbody td{margin-top:8px}
  .station-lees .toegang-tabel:not(.tabel-vast) tbody td::before{
    content:attr(data-kop);display:block;font-family:var(--mono);font-size:11px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--lees);margin-bottom:2px;
  }
  .station-lees .toegang-tabel:not(.tabel-vast) caption{padding:18px 20px 0}
  .station-lees .voorbeeld-paar{grid-template-columns:1fr}
  .station-lees .raster-3{grid-template-columns:1fr}
}

/* ===========================================================================
   5. AFDRUKKEN
   Alle tekst in gewone documentvolgorde. De beelden zijn een aanvulling en
   gaan niet mee. Het script zet de groepen voor het afdrukken open.
   =========================================================================== */
@media print{
  .route-camera,.station-beeld,.route-beweging,.leeg-afdruk{display:none !important}
  .station-rij{display:block}
  /* De afdrukknop bij het lege document drukt alleen dat document af
     (data-afdruk op html, gezet door het script). */
  html[data-afdruk="leeg"] body > :not(main){display:none !important}
  html[data-afdruk="leeg"] main > :not(#beoordelingsdocument){display:none !important}
  html[data-afdruk="leeg"] #beoordelingsdocument > .binnen > :not(.leeg-exemplaar){display:none !important}
  html[data-afdruk="leeg"] .leeg-exemplaar{border:0;margin:0}
  html[data-afdruk="leeg"] .leeg-exemplaar > summary{display:none}
  html[data-afdruk="leeg"] .leeg-uitleg{display:none}
}