/* Live sinds 22-09-2026: dit is de bron voor de live pagina's.
   public/proef-v7 is de werkplaats voor de volgende ontwerpronde;
   een goedgekeurde ronde wordt hierheen gekopieerd. */
/* ===========================================================================
   FRANCHISEHUB ONTWERP V7, LAAG 3: COMPOSITIES

   Per pagina de indeling die de reviewer heeft vastgelegd. Het raster is
   overal hetzelfde: twaalf kolommen met 24 pixels ertussen vanaf 1024 pixels,
   zes kolommen met 20 ertussen van 600 tot 1023 en één kolom met 16 ertussen
   daaronder. Daardoor kunnen de composities verschillen terwijl hun randen op
   alle drie de pagina's blijven aansluiten.
   =========================================================================== */

.rij{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gat);align-items:start}
.rij-midden{align-items:center}
@media (max-width:1023px){ .rij{grid-template-columns:1fr} }

.sp4{grid-column:span 4}
.sp5{grid-column:span 5}
.sp6{grid-column:span 6}
.sp7{grid-column:span 7}
.sp8{grid-column:span 8}
.sp12{grid-column:span 12}
@media (max-width:1023px){
  .sp4,.sp5,.sp6,.sp7,.sp8,.sp12{grid-column:auto}
}

.kop-duo{margin-bottom:var(--sp-kop)}
.stapel{display:grid;gap:var(--sp-alinea)}

/* ===========================================================================
   DE VOORPAGINA
   Het meeste kleurcontrast en de grootste typografische variatie van de drie.
   =========================================================================== */

/* ---- Opening: zes kolommen tekst naast zes kolommen verslag ---- */
.opening-tekst{display:grid;gap:0}
.opening-tekst .titel-1{margin-top:22px;max-width:620px}
.opening-lead{margin-top:var(--sp-kopalinea);font-size:19px;line-height:1.6;max-width:56ch}
.opening-onder{
  margin-top:26px;display:grid;gap:10px;font-size:15px;color:var(--lees);
}
.opening-onder > span{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.opening-vink{color:var(--mint);font-weight:700}
/* Alleen dit ene bestaande woord krijgt kleur. Er komt geen markeervlak achter,
   want dat legde in versie 6 een vlak over de letters. */
.nadruk-woord{color:var(--roze-diep)}
/* Op telefoon staat het beeldkader onder de tekst. De rasterruimte van 16
   pixels is daar te krap tussen een leesblok en een vlak dat tot de
   schermranden loopt. */
@media (max-width:599px){ .opening-tekst{margin-bottom:12px} }
/* Onder 1280 pixels staat de opening onder elkaar: tekst boven, beeldkader
   eronder. Besluit van de eigenaar op 21-09. Met zes op zes kolommen werd het
   beeldkader tussen 1024 en 1279 pixels ongeveer 450 pixels smal en kwam het
   verslag krap in beeld. Onder 1024 stapelde het raster al; deze regel trekt
   dat door tot 1280. De rij-klasse staat alleen op de opening, zodat geen
   andere zes-op-zes-rij meeverandert. */
@media (max-width:1279px){
  .opening-rij{grid-template-columns:1fr}
  .opening-rij > .sp6{grid-column:auto}
}

/* ---- Drie ingangen ---- */
/* De kaarten rekken niet meer uit tot de langste (de kennisbank met haar
   lijst). Met gelijke hoogte stond in kaart 1 en 2 150 en 175 pixels leeg wit
   tussen tekst en link: precies het "blok met wit". Keuze A van de eigenaar
   op 22-09; de bovenkanten blijven gelijk en de links blijven onderaan hun
   eigen kaart. */
.ingangen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gat);align-items:start}
@media (max-width:1023px){ .ingangen-raster{grid-template-columns:1fr;gap:16px} }
.ingang-onderwerpen{display:grid;gap:10px;font-size:15px}
.ingang-onderwerpen li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}

/* ---- Het werk: vier gevulde werkkaarten in twee rijen ---- */
.werk-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat)}
@media (max-width:1023px){ .werk-raster{grid-template-columns:1fr} }
.werk-antwoorden{margin-top:var(--sp-kop);display:grid;grid-template-columns:1fr 1fr;gap:var(--gat)}
@media (max-width:1023px){ .werk-antwoorden{grid-template-columns:1fr} }

/* ---- Rustmoment: compact en gecentreerd ---- */
.rust{padding-top:48px;padding-bottom:48px}
.rust-zin{
  font-size:var(--t-rust);font-weight:600;line-height:1.06;letter-spacing:-.025em;
  color:var(--inkt);max-width:1040px;margin:0 auto;text-align:center;
}
.rust-onder{max-width:64ch;margin:20px auto 0;text-align:center}

/* ---- Dossier: kop links, uitleg rechts, fragment over de volle breedte ---- */
.dossier-fragment{margin-top:32px}

/* ---- Voorbereiding: de echo-figuur in de lege ruimte onder de link ----
   Gemeten op 1600: 640 bij 260 pixels leeg roze onder de laatste regel van de
   linkerkolom. Een blauw-lila vorm met lila contour: middenblauw draagt op
   lichtroze (1,94), een roze vorm niet (1,55). */
.vrijvorm-voorbereiding{height:220px;margin-top:24px}
.vrijvorm-voorbereiding .vorm-a{
  left:0;top:20px;width:300px;height:190px;border-radius:var(--blob-a);
  background:linear-gradient(135deg,var(--mid-blauw),var(--mid-lila));
}
.vrijvorm-voorbereiding .vorm-b{
  left:200px;top:0;width:220px;height:140px;border-radius:var(--blob-b);
  border:3px solid var(--lila);opacity:.75;
}

/* ---- Wie het werk draagt: één brede gevulde kaart ---- */
.ervaringskaart-raster{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:1023px){ .ervaringskaart-raster{grid-template-columns:1fr;gap:24px} }

/* ===========================================================================
   DE BEWIJSPAGINA
   Een documentpresentatie: meer wit binnen de voorbeelden en een duidelijk
   verschil tussen het ontvangen verslag en de interne onderbouwing.
   =========================================================================== */

.bewijs-document{margin-top:var(--sp-kop)}

/* ---- De bronketen: drie kaarten met een verbinding die echt aansluit ---- */
.keten{position:relative;padding-top:32px}
.keten-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gat);align-items:start}
.keten-lijn{left:0;right:0;top:0;height:6px}
.keten-stap{
  position:relative;background:var(--wit);border:1px solid var(--rand);
  border-radius:20px;padding:24px;display:grid;gap:12px;
}
/* De korte verticale aansluiting van 12 pixels maakt de relatie tussen de lijn
   en de kaart zichtbaar. In versie 6 zweefde de lijn los boven de inhoud. */
.keten-stap::after{
  content:'';position:absolute;left:50%;top:-12px;width:3px;height:12px;
  background:var(--lila);transform:translateX(-50%);
}
.keten-nr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.keten-stap h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
@media (max-width:1023px){
  /* Onder 1024 pixels staan de stappen onder elkaar met een verticale lijn in
     een eigen strook van 16 pixels links van de kaarten. */
  .keten{padding-top:0;padding-left:32px}
  .keten-raster{grid-template-columns:1fr;gap:20px}
  .keten-lijn{left:6px;right:auto;top:12px;bottom:12px;width:6px;height:auto}
  .keten-lijn > i{width:6px;height:100%}
  .keten-stap::after{left:-20px;top:24px;width:20px;height:3px;transform:none}
}

/* ---- De twee statuspanelen blijven even groot binnen hun rij ---- */
.status-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);align-items:stretch}
@media (max-width:1023px){ .status-raster{grid-template-columns:1fr} }
.zeker-lijst{margin-top:18px}
.statuspaneel .fragment{margin-top:16px}

/* ---- De grens: brede inleiding met twee gekoppelde kaarten ---- */
.grens-paar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:var(--sp-kop)}
.grens-lijn{left:calc(50% - 28px);top:44px;width:56px;height:6px}
@media (max-width:1023px){
  .grens-paar{grid-template-columns:1fr;gap:40px}
  .grens-lijn{left:28px;top:auto;bottom:calc(50% - 20px);width:6px;height:40px}
  .grens-lijn > i{width:6px;height:0;transition:height var(--duur-lang) var(--soepel)}
  [data-accent-aan].grens-lijn > i{height:100%}
}
.grens-kaart{
  background:var(--wit);border:1px solid var(--amber-rand);border-radius:20px;padding:24px;
  display:grid;gap:10px;
}

/* ---- Wat het bewijst: één neutraal gevuld vlak ---- */
.bewijst-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);margin-top:var(--sp-kop)}
@media (max-width:599px){ .bewijst-kolommen{grid-template-columns:1fr} }

/* ===========================================================================
   DE CRM PAGINA
   Horizontale ordening en compacte werkonderdelen. Het dossier draagt de
   opening over de volle inhoudsbreedte.
   =========================================================================== */

.crm-dossier{margin-top:32px}

/* ---- Het werkbord ---- */
.werkbord-kop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  margin-bottom:18px;
}
.werkbord-naam{font-size:var(--t-kaart);font-weight:600;color:var(--inkt);line-height:1.25}
.werkbord-soort{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.keuzerij{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.keuze{
  font-family:var(--letter);font-size:14px;font-weight:600;color:var(--inkt);
  background:var(--wit);border:2px solid var(--rand-bediening);border-radius:999px;
  padding:9px 18px;cursor:pointer;
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel),color var(--duur) var(--soepel);
}
.keuze:hover,.keuze:focus-visible{border-color:var(--blauw-diep)}
.keuze[aria-pressed="true"],.keuze[aria-selected="true"]{
  background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff;
}
/* ---- Het bord onder het werkbord ----
   Het hoofdstuk was 93 procent puur wit over 1203 pixels: drie witte
   werkdelen op neutraal papier. Het bord is één lichtblauw vlak waarop de
   drie witte werkdelen liggen; kop, labels en keuzerij staan bovenin op het
   effen lichtblauw. Het hoofdstuk zelf blijft neutraal papier (de tabel van
   de reviewer). De keuzeknoppen krijgen op het bord een merkblauwe rand: de
   bedieningsrand haalt op lichtblauw precies 3,00 en dat is te krap voor iets
   waar je op drukt; merkblauw haalt 4,99. De ingedrukte knop houdt zijn
   diepblauwe rand. Een witte kaart op kleur heeft geen grijze rand nodig en
   krijgt de bestaande schaduw 2 van de documenten. */
.werkbord-vlak{background:var(--blauw-licht);border-radius:28px;padding:24px}
.werkbord-vlak .keuze{border-color:var(--blauw)}
.werkbord-vlak .keuze:hover,.werkbord-vlak .keuze:focus-visible{border-color:var(--blauw-diep)}
.werkbord-vlak .keuze[aria-pressed="true"]{border-color:var(--blauw-diep)}
.werkbord-vlak .werkdeel{border-color:transparent;box-shadow:var(--schaduw-2)}
@media (max-width:599px){ .werkbord-vlak{border-radius:20px;padding:16px} }
/* De kaarten nemen hun eigen hoogte (align-items:start). Het gesprek staat
   over twee rijen en werd tot 22-09 uitgerekt tot de som van afspraak en
   vervolg: gemeten 205 pixels leeg wit onder de laatste regel. Nu eindigt de
   kaart bij haar inhoud en toont het bord daaronder zijn eigen lichtblauw. */
.werkbord{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.werkbord-gesprek{grid-column:span 7;grid-row:1 / span 2}
.werkbord-afspraak{grid-column:span 5}
.werkbord-vervolg{grid-column:span 5}
@media (max-width:1023px){
  .werkbord{grid-template-columns:1fr}
  .werkbord-gesprek,.werkbord-afspraak,.werkbord-vervolg{grid-column:auto;grid-row:auto}
}
.werkdeel{
  background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:24px;
  display:grid;gap:12px;align-content:start;
}
@media (max-width:599px){ .werkdeel{padding:16px} }
.werkdeel-titel{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}

.team-punten{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gat);margin-top:var(--sp-kop)}
@media (max-width:1023px){ .team-punten{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .team-punten{grid-template-columns:1fr} }
.team-punt b{display:block;color:var(--inkt);font-size:17px}
.team-punt span{display:block;font-size:15px;margin-top:6px}
.team-streep{width:44px;height:4px;border-radius:999px;background:var(--lila);margin-bottom:14px}

/* ---- Voortgang: historiekaart naast de geplande vervolgstap ---- */
.voortgang-raster{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gat)}
@media (max-width:1023px){ .voortgang-raster{grid-template-columns:1fr;gap:28px} }
.historiekaart{
  grid-column:span 4;background:var(--blauw-licht);border:1px solid var(--rand);
  border-radius:20px;padding:24px;
}
.vervolgstap{grid-column:span 8}
@media (max-width:1023px){ .historiekaart,.vervolgstap{grid-column:auto} }
.voortgang-lijn{left:calc(33.33% - 10px);top:50%;width:20px;height:6px}
@media (max-width:1023px){
  .voortgang-lijn{left:28px;top:auto;bottom:calc(50% - 14px);width:6px;height:28px}
  .voortgang-lijn > i{width:6px;height:0;transition:height var(--duur-lang) var(--soepel)}
  [data-accent-aan].voortgang-lijn > i{height:100%}
}
/* De historie leest als tijdlijn: een lijn van 2 pixels door de vier punten in
   de lege puntkolom van 20 pixels, nooit achter tekst. De huidige fase krijgt
   een witte ring zodat hij loskomt van de lijn. */
.historie{display:grid;gap:2px;position:relative}
.historie::before{content:'';position:absolute;left:5px;top:18px;bottom:18px;width:2px;background:var(--mid-blauw)}
.historie li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:10px 0;position:relative}
.historie-punt{
  width:12px;height:12px;border-radius:999px;background:var(--rand);margin-top:6px;display:block;
  position:relative;z-index:1;box-shadow:0 0 0 3px var(--blauw-licht);
}
.historie-nu .historie-punt{background:var(--blauw);box-shadow:0 0 0 3px var(--wit)}
.historie-naam{font-weight:600;color:var(--inkt);font-size:15px}
.historie-bij{font-size:13px;color:var(--lees)}

/* ---- Ondersteuning: een duidelijk omlijnd antwoord ---- */
.antwoordkaart{
  background:var(--wit);border:1px solid var(--rand);border-radius:20px;overflow:hidden;
}
/* De strook was 8 pixels lichtblauw en viel op 1600 niet op. Nu 48 pixels
   middenblauw met korrel. Tot 22-09 stond er een effen capsule in die als een
   uitgeschakelde knop las (dezelfde vorm die op /matching kapot oogde); nu
   dragen strook en vorm dezelfde bouw als de strook van een ingang: een
   verloop naar de diepere toon en één organische vorm in die toon. */
.antwoordkaart-strook{
  height:48px;display:block;position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--mid-blauw),var(--mid-blauw-diep));
}
.antwoordkaart-strook::after{
  content:'';position:absolute;right:22px;top:8px;width:96px;height:56px;
  border-radius:var(--blob-b);background:rgba(52,85,212,.22);
}
/* De echo-figuur onder de antwoordkaart is sinds 22-09 weg. Het waren twee
   effen capsules die los onder de kaart zweefden, dezelfde vorm die de
   eigenaar op /matching kapot zag ogen. De opmaak blijft staan omdat een
   andere bouwer in de HTML werkt; deze regel haalt het blok uit de opmaak,
   met zijn ruimte. De media-regel is nodig omdat .vrijvorm vanaf 1024 pixels
   zelf display:block zet. */
.vrijvorm-ondersteuning{display:none}
@media (min-width:1024px){ .vrijvorm-ondersteuning{display:none} }
.antwoordkaart-lijf{padding:24px;display:grid;gap:12px}
.antwoordkaart-vraag{font-size:20px;font-weight:600;line-height:1.3;color:var(--inkt)}

/* ---- Toegang: één witte tabel met een duidelijke kopregel ---- */
.tabelvlak{
  background:var(--wit);border:1px solid var(--rand);border-radius:20px;overflow:hidden;
}
.toegang-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.toegang-tabel caption{
  text-align:left;padding:18px 24px 0;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lees);
}
.toegang-tabel th,.toegang-tabel td{text-align:left;padding:14px 24px;vertical-align:top}
.toegang-tabel thead th{
  background:var(--blauw-licht);color:var(--inkt);font-size:13px;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}
.toegang-tabel tbody tr{border-top:1px solid var(--rand)}
.toegang-tabel tbody th{color:var(--inkt);font-weight:600;width:24%}
@media (max-width:767px){
  .toegang-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .toegang-tabel tbody tr{display:block;padding:20px 0}
  .toegang-tabel tbody th,.toegang-tabel tbody td{display:block;width:auto;padding:0 20px}
  .toegang-tabel tbody td{margin-top:10px}
  .toegang-tabel 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;
  }
  .toegang-tabel caption{padding:18px 20px 0}
}

/* ===========================================================================
   DE GEZAMENLIJKE AFSLUITING
   Alle drie de pagina's eindigen hetzelfde. De omvattende grote witte doos uit
   versie 6 is vervallen: het vervolgonderwerp staat gewoon op de
   hoofdstukachtergrond en het actievlak staat er los onder.
   =========================================================================== */

.slot-actie{margin-top:32px}
.actievlak .titel-groot{font-size:var(--t-groot)}
.actievlak .knoppenrij{margin-top:var(--sp-actie)}