/* ===========================================================================
   FRANCHISEHUB ONTWERP V7, OVERIGE PAGINA'S GROEP B

   WAAROM DIT BESTAND BESTAAT
   Op 22-09-2026 zag de eigenaar dat de nieuwe pagina's (/bewijs, /crm en de
   voorpagina) doorlinken naar pagina's in het oude ontwerp. Deze groep zet
   /samenwerken met zijn drie verdiepingen, de twee verdiepingen van /bewijs,
   de drie van /crm, /werken-bij en het formulier Demo aanvragen om naar
   versie 7. De inhoud van die pagina's is rijker dan die van /bewijs en /crm:
   matrices, tijdlijnen, rekenregels en vacatures. Daarvoor ontbraken
   bouwstenen in de drie ontwerpbladen.

   WAAROM EEN EIGEN BLAD
   ontwerp-basis.css, ontwerp-vorm.css en ontwerp-paginas.css zijn de live bron
   voor /bewijs en /crm en andere agents werken ermee. Een wijziging daar kan
   een gemeten pagina laten verschuiven. Alles wat deze groep extra nodig heeft
   staat daarom hier, NA die drie geladen, zodat het alleen aanvult.

   VASTE REGELS VOOR DIT BLAD
   Geen nieuwe kleur en geen nieuwe letter: alleen de tokens uit
   ontwerp-basis.css. Mint en amber alleen voor status. Geen SVG en geen
   canvas. Elke bouwsteen heeft het voorvoegsel ob- (overig, groep B), zodat
   hij nooit botst met een klasse uit de drie ontwerpbladen.
   =========================================================================== */

/* ===========================================================================
   1. AANVULLINGEN OP DE GRONDSLAG
   =========================================================================== */

/* De grondslag zet alleen ul op nul, niet ol. Een genummerde lijst die in de
   opmaak een volgorde draagt (het sprongmenu van /samenwerken, stappen,
   haltes) kreeg daardoor 40 pixels inspringing van de browser. */
ol.paginanav-lijst,
.ob-stappen,
.ob-haltes,
.ob-statussen,
.ob-routes,
.ob-grendels,
.ob-demolijst{margin:0;padding:0;list-style:none}

/* De kopmaat van /bewijs voor elke pagina van deze groep. De maat van de
   voorpagina (68 pixels op breed) is voor die ene grote opening; een kop als
   "Afscherming en rollen binnen een omgeving" loopt daarmee op drie regels. */
body[data-pagina] .titel-1.ob-kop{font-size:var(--t-open-bewijs)}

/* De inleiding onder de openingskop. De klasse heet lead omdat de test op de
   detailpagina's (tests/unit/detailpaginas.test.js) de inleiding herkent aan
   een alinea die met die klasse begint. De maat is die van .opening-lead. */
.lead{font-size:19px;line-height:1.6;max-width:56ch;color:var(--lees)}
.lead + .alinea{margin-top:var(--sp-alinea)}

/* Het opschrift boven een sectiekop is op deze pagina's een div (de test op
   de detailpagina's zoekt div.etiket). Als blok met inline-flex blijft het
   even breed als zijn tekst, net als de span op /bewijs. */
div.etiket{display:inline-flex}
/* In een kaart die als kolom is opgebouwd (werkkaart, ingang) rekte het
   opschrift uit tot de volle breedte van de kaart: gezien op 1600 bij Wat het
   oplevert. Het houdt hier de breedte van zijn tekst. */
.werkkaart > div.etiket,.ingang-lijf > div.etiket{align-self:flex-start}
div.etiket + .titel-2,
div.etiket + .titel-groot,
div.etiket + .titel-1,
div.etiket + .titel-3{margin-top:var(--sp-kopalinea)}

/* Het kruimelpad staat alleen op de verdiepingen. Daar staat het ook in de
   gestructureerde gegevens (BreadcrumbList): Astra ronde 01 wil dat blok
   alleen bij een zichtbaar kruimelpad, dus het pad blijft zichtbaar. */
.kruimels{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin-bottom:22px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lees);
}
.kruimels a{color:var(--blauw-diep);text-decoration:none;border-bottom:1px solid transparent}
.kruimels a:hover,.kruimels a:focus-visible{border-bottom-color:var(--blauw-diep)}
/* De huidige pagina heeft een lange naam. Zonder afbreken stak zij op 320
   pixels buiten het venster. */
.kruimels [aria-current]{overflow-wrap:anywhere;color:var(--lees)}

/* Een tussenkop binnen een sectie, met de ruimte van een nieuw blok erboven. */
.ob-tussenkop{margin-top:calc(var(--sp-kop) * 1.5)}
.ob-tussenkop + .alinea{margin-top:var(--sp-kopalinea)}

/* Een rasterkolom van .rij mag smaller worden dan haar breedste vaste inhoud.
   Zonder deze regel groeide de kolom op 320 pixels mee met het controlevak
   van de robotcheck (304 pixels plus de rand van de kaart) tot 344 pixels en
   schoof de hele pagina 24 pixels opzij. Dit blad laadt alleen op de pagina's
   van deze groep, dus /bewijs en /crm merken er niets van. */
.rij > *{min-width:0}

/* ===========================================================================
   2. RASTERS
   Dezelfde breekpunten als de drie ontwerpbladen: onder 1024 pixels stapelen
   brede composities en onder 600 pixels staat alles in een kolom.
   =========================================================================== */

.ob-raster-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);align-items:start}
.ob-raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gat);align-items:start}
.ob-raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gat);align-items:start}
.ob-raster-gelijk{align-items:stretch}
@media (max-width:1023px){
  .ob-raster-2,.ob-raster-3{grid-template-columns:1fr}
  .ob-raster-4{grid-template-columns:1fr 1fr}
}
@media (max-width:599px){ .ob-raster-4{grid-template-columns:1fr} }
/* Een raster met veel korte kaarten (de bodem, de grendels) houdt tussen 600
   en 1023 pixels twee kolommen: een kolom zou er een lange strook van maken. */
/* Deze kaarten hebben geen link onderaan, dus gelijke hoogte per rij levert
   geen leeg wit tussen tekst en link op (de reden dat de ingangen op de
   voorpagina niet uitrekken). Ongelijke hoogtes lazen op 1600 als rommel. */
.ob-raster-veel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gat);align-items:stretch}
@media (max-width:1023px){ .ob-raster-veel{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .ob-raster-veel{grid-template-columns:1fr} }
/* Een laatste kaart die alleen op haar rij staat (zeven grendels in drie
   kolommen) liet twee derde van die rij leeg. Zij neemt dan de hele rij. */
@media (min-width:1024px){ .ob-raster-veel > .ob-vak:last-child:nth-child(3n+1){grid-column:1 / -1} }
@media (min-width:600px) and (max-width:1023px){ .ob-raster-veel > .ob-vak:last-child:nth-child(2n+1){grid-column:1 / -1} }
/* De tekst in zo'n brede kaart houdt de leesbreedte van een alinea. */
.ob-raster-veel > .ob-vak:last-child p{max-width:80ch}

.ob-na-blok{margin-top:var(--sp-kop)}

/* ===========================================================================
   3. KAARTEN
   =========================================================================== */

/* Het vak: een korte witte kaart met een streep in de tint van zijn familie.
   Twaalf vakken in een kleur lazen op 1600 als een grijs blok; de streep
   wisselt daarom blauw, lila en roze, dezelfde drie families als de
   werkkaarten op de voorpagina. */
.ob-vak{
  background:var(--wit);border:1px solid var(--rand);border-radius:20px;padding:24px;
  min-width:0;
}
@media (max-width:599px){ .ob-vak{padding:20px} }
.ob-vak-streep{display:block;width:44px;height:4px;border-radius:999px;background:var(--lila);margin-bottom:16px}
.ob-raster-veel > .ob-vak:nth-child(3n+1) .ob-vak-streep,
.ob-raster-4 > .ob-vak:nth-child(3n+1) .ob-vak-streep{background:var(--blauw)}
.ob-raster-veel > .ob-vak:nth-child(3n+3) .ob-vak-streep,
.ob-raster-4 > .ob-vak:nth-child(3n+3) .ob-vak-streep{background:var(--roze)}
/* Een statuskaart houdt haar statuskleur, ook waar het raster de strepen om
   en om kleurt: anders kreeg Actief (mint) of Onbekend (amber) een blauwe
   streep van zijn plek in de rij. */
.ob-raster-veel > .ob-vak.ob-vak-hard:nth-child(n) .ob-vak-streep,
.ob-raster-4 > .ob-vak.ob-vak-hard:nth-child(n) .ob-vak-streep{background:var(--mint)}
.ob-raster-veel > .ob-vak.ob-vak-nul:nth-child(n) .ob-vak-streep,
.ob-raster-4 > .ob-vak.ob-vak-nul:nth-child(n) .ob-vak-streep{background:var(--amber)}
/* Twee noten naast elkaar in een raster staan op dezelfde hoogte; de ruimte
   tussen twee noten onder elkaar geldt daar niet. */
.ob-raster-2 > .ob-let + .ob-let,.ob-raster-3 > .ob-let + .ob-let{margin-top:0}
/* Vette tekst die de kleur van een kop draagt, binnen een kaart. */
.ob-inkt{color:var(--inkt)}
.ob-vak h3{font-size:19px;font-weight:600;line-height:1.3}
.ob-vak p{font-size:15px;line-height:1.6;margin-top:10px}
.ob-vak p b{color:var(--inkt)}
.ob-vak > p:first-child{margin-top:0}
/* De ene regel die hard in code staat (Actief tegenover afgehaakt) krijgt de
   statuskleur van de status Actief waar hij over gaat. */
.ob-vak-hard{background:var(--mint-papier);border-color:var(--mint-rand)}
.ob-vak-hard .ob-vak-streep{background:var(--mint)}
.ob-vak-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;margin-bottom:14px;
  background:var(--lila);color:#fff;font-family:var(--mono);font-size:13px;
}
.ob-vak-let{margin-top:12px;padding-top:12px;border-top:1px solid #eceff9;font-size:14px;line-height:1.6;color:var(--lila-diep)}
/* Twee vakken die een paar vormen: het ene in de rand van zijn familie, het
   andere op papier omdat het gegeven daarin dicht blijft voor de buitenkant. */
.ob-vak-blauw{border:2px solid var(--blauw-rand)}
/* Onbekend is de status open, dus amber. */
.ob-vak-nul{background:var(--amber-papier);border-color:var(--amber-rand)}
.ob-vak-nul .ob-vak-streep{background:var(--amber)}
.ob-vak-nul .ob-mono{color:#6f4a11}
.ob-vak h3 + .ob-mono{display:block;margin-top:8px}
/* Een citaat in een tabelcel: dezelfde bouwsteen als in een document, zonder
   eigen regelafstand die de rij hoger maakt dan de buren. */
.ob-tabel .citaat{display:block;font-size:15px}
.ob-vak-dicht{background:var(--papier);border-style:dashed}
.ob-vak .ob-mono + p{margin-top:12px}
/* Een opschrift in een werkkaart zonder genummerde kop eronder. */
.werkkaart > .werkkaart-soort{display:block}

/* De noot: een uitlegkaart met een vette openingszin als eigen regel. */
.ob-let b:first-child{display:block;color:var(--inkt);font-size:17px;line-height:1.4;margin-bottom:8px}
.ob-let + .ob-let{margin-top:16px}
.uitlegkaart.ob-let{font-size:16px;line-height:1.65}
/* Een noot die los over de volle breedte staat, liep op 1600 uit tot regels
   van 150 tekens. Hij blijft links staan en houdt een leesbare breedte. */
.binnen > .uitlegkaart.ob-let{max-width:960px}

/* Een werkkaart in een raster van drie routes rekt niet uit: de kaart met
   de langste tekst bepaalt dan niet de hoogte van de andere twee. */
.werkkaart .ob-soort{margin-left:auto}
.werkkaart ul,.werkkaart ol{margin-top:14px}

/* Het vlak met een lijst van genummerde punten (de demo op /samenwerken). De
   lijst staat vanaf 1024 pixels naast de kop: over de volle breedte van 1320
   pixels werden de regels 150 tekens lang. */
.ob-demolijst{display:grid;gap:16px}
.ob-demolijst li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;font-size:15px;line-height:1.6}
.ob-demolijst b{display:block;color:var(--inkt);font-size:17px;line-height:1.4;margin-bottom:4px}

/* Een gewone lijst met stippen in lopende tekst: de stip is die van
   .werkblad-lijst, alleen op leesmaat. */
.ob-lijst{display:grid;gap:10px;margin-top:14px}
.ob-lijst li{position:relative;padding-left:22px;font-size:17px;line-height:1.6}
.ob-lijst li::before{
  content:'';position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:999px;background:var(--lila);
}
.ob-lijst-klein li{font-size:15px}
.ob-lijst-klein li::before{top:.66em}

/* ===========================================================================
   4. STAND, WIE EN LABELS
   Kleur draagt nooit alleen de betekenis: het woord staat er altijd bij.
   =========================================================================== */

.ob-stand{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.3;border-radius:999px;padding:5px 11px;border:1px solid;
}
.ob-stand-eigen{background:var(--blauw-licht);border-color:var(--blauw-rand);color:var(--blauw-diep)}
.ob-stand-mee{background:var(--lila-papier);border-color:var(--rand-lila);color:var(--lila-diep)}
.ob-stand-wij{background:var(--roze-licht);border-color:var(--roze-rand);color:var(--roze-diep)}
.ob-legenda{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

/* Mens of machine bij een halte: blauw is het werk, lila de onderbouwing. */
.ob-wie{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:4px 10px;
  background:var(--blauw-licht);color:var(--blauw-diep);border:1px solid var(--blauw-rand);
}
.ob-wie-machine{background:var(--lila-papier);color:var(--lila-diep);border-color:var(--rand-lila)}

/* Een klein opschrift in een cel of kaart. */
.ob-mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}

/* Een tekort op een kernpunt. Er is geen rood in versie 7; de statusregels
   kennen bevestigd (mint), open (amber), voorstel (lila) en leeg. Een tekort
   krijgt daarom de roze familie, met het woord Tekort erbij als drager. */
.regel-tekort{background:var(--roze-licht);border-color:var(--roze-rand)}
.regel-tekort .vak-tekort{background:var(--roze-diep)}
.regel-tekort .regel-stand{color:var(--roze-diep)}

/* ===========================================================================
   5. TABELLEN
   De tabellen gebruiken .tabelvlak en .toegang-tabel uit de compositielaag,
   inclusief de weergave per rij onder 768 pixels. Hier alleen wat een tabel
   met meer dan drie kolommen of met een label in de cel extra nodig heeft.
   =========================================================================== */

.ob-tabel td{min-width:0}
.ob-tabel .ob-stand{white-space:nowrap}
.ob-tabel-uit{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--lila-diep);white-space:nowrap}
.ob-tabel-uit-nul{color:#6f4a11}
/* De kopregel op een smal scherm.
   Onder 768 pixels verbergt de compositielaag de kopregel met een absoluut
   geplaatste thead van 1 pixel. Die thead vormde een eigen tabel die zo breed
   werd als zijn koppen: bij vier kolommen gemeten 441 pixels op een venster
   van 320. Hier stond daarom eerst thead{display:none}.
   HERSTELD 22-09-2026 (Astra v7-geheel-01 deel 3, bevinding 25): display:none
   haalt de kolomkoppen ook uit de toegankelijkheidsboom. Een opschrift uit
   CSS (data-kop) is geen vervanging voor de relatie tussen kolomkop en cel.
   De kopregel blijft nu bestaan voor een schermlezer en is alleen voor het
   oog weg. De overloop lossen we op zoals groep A in ontwerp-overig-a.css:
   de rij en de koppen krimpen mee in hun verborgen vak van 1 pixel, zodat de
   verborgen kopregel nergens meer breed wordt.
   De tabellen zelf dragen daarnaast expliciete rollen (table, row,
   columnheader, rowheader, cell). Een tabel waarvan de weergave met CSS wordt
   omgezet naar blokken verliest in sommige browsers anders haar
   tabelbetekenis; met de rollen blijft de koppeling tussen kop en cel staan,
   wat CSS ook doet. */
@media (max-width:767px){
  .ob-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ob-tabel thead tr,
  .ob-tabel thead th{display:block;width:1px;height:1px;padding:0;overflow:hidden}
  .ob-tabel-uit{white-space:normal}
  /* Het zichtbare opschrift per cel is alleen voor het oog. De tweede regel
     geeft het een lege tekst voor een schermlezer, die de echte kolomkop al
     noemt; een browser die die schrijfwijze niet kent slaat de regel over en
     houdt de eerste, zodat het opschrift nooit verdwijnt. */
  .ob-tabel tbody td::before{content:attr(data-kop);content:attr(data-kop) / ""}
}
/* Een tabel met vier kolommen (de omgeving op /samenwerken) past tussen 768
   en 1023 pixels niet: gemeten 773 pixels breed op een venster van 768. Tot
   1024 pixels wordt elke rij daarom een groep: de rij als kop en daaronder
   per kolom een regel met de naam links en de stand rechts. De kopregel is
   ook hier alleen voor het oog weg (zie hierboven). */
@media (max-width:1023px){
  .ob-tabel-breed thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ob-tabel-breed thead tr,
  .ob-tabel-breed thead th{display:block;width:1px;height:1px;padding:0;overflow:hidden}
  .ob-tabel-breed,.ob-tabel-breed tbody{display:block}
  .ob-tabel-breed tbody tr{display:block;padding:16px 0}
  .ob-tabel-breed tbody th{display:block;width:auto;padding:0 20px 6px}
  .ob-tabel-breed tbody td{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;
    margin-top:0;padding:6px 20px;
  }
  .ob-tabel-breed tbody td::before{
    content:attr(data-kop);content:attr(data-kop) / "";font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--lees);margin-bottom:0;
  }
}

/* ===========================================================================
   6. RIJEN IN EEN DOCUMENT (het sleutelbord en het grootboek)
   Een samenvatting van zeven of acht regels in een wit document. Het oude
   ontwerp zette deze regels een voor een neer terwijl je scrolde; versie 7
   kent die vastgezette weergave niet en toont ze gewoon allemaal.
   =========================================================================== */

.ob-rijen{display:grid}
.ob-rij{
  display:grid;grid-template-columns:40px minmax(0,1.1fr) minmax(0,1.5fr) auto;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid #eceff9;font-size:15px;line-height:1.5;
}
.ob-rij:last-child{border-bottom:0}
.ob-rij-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep)}
.ob-rij-naam{font-weight:600;color:var(--inkt)}
.ob-rij-wat{color:var(--lees)}
.ob-rij-uit{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep);text-align:right}
.ob-rij-dicht{color:#6f4a11}
@media (max-width:767px){
  .ob-rij{grid-template-columns:32px minmax(0,1fr);row-gap:4px}
  .ob-rij-wat,.ob-rij-uit{grid-column:2;text-align:left}
}
/* Het grootboek heeft een kolom met wie de halte zet (een pil) tussen de
   naam en de stand. */
.ob-rij-wie{grid-template-columns:40px minmax(0,1.1fr) 104px minmax(0,1.4fr);align-items:center}
@media (max-width:767px){
  .ob-rij-wie{grid-template-columns:32px minmax(0,1fr);align-items:baseline}
  .ob-rij-wie > :nth-child(3),.ob-rij-wie > :nth-child(4){grid-column:2}
}
.ob-rijen-voet{margin-top:6px;padding-top:14px;border-top:1px solid var(--rand);font-size:15px;line-height:1.6}
.ob-rijen-voet b{color:var(--inkt)}

/* ===========================================================================
   7. STAPPEN EN HALTES
   =========================================================================== */

/* Zeven stappen van een overstap: twee kolommen vanaf 1024 pixels. */
.ob-stappen{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);align-items:start}
@media (max-width:1023px){ .ob-stappen{grid-template-columns:1fr} }
.ob-stap{background:var(--wit);border:2px solid var(--rand-lila);border-radius:20px;padding:28px;min-width:0}
@media (max-width:599px){ .ob-stap{padding:20px} }
.ob-stap-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ob-stap-uit{margin-left:auto}
.ob-stap h3{margin-top:18px;font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.ob-stap p{margin-top:12px;font-size:15px;line-height:1.6}
/* Het achtste vak in het raster van zeven stappen: wat er wel verandert. Het
   is geen stap maar de uitkomst, dus papierlila in plaats van wit. */
.ob-stap-slot{background:var(--lila-papier)}
.ob-stap-slot p{font-size:17px;color:var(--inkt)}

/* Acht haltes als tijdlijn. De lijn loopt door de kolom van de nummers en
   nooit achter tekst, net als de historie op /crm. */
/* De tijdlijn houdt de breedte van een leesblok: over de volle 1320 pixels
   bleef in elke kaart rechts een leeg vlak naast de tekst staan. */
.ob-haltes{position:relative;display:grid;gap:18px;max-width:1040px}
.ob-haltes::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--rand-lila)}
.ob-halte{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.ob-halte-stip{
  position:relative;z-index:1;width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blauw);color:#fff;font-family:var(--mono);font-size:13px;
  box-shadow:0 0 0 4px var(--wit);
}
.ob-halte-machine .ob-halte-stip{background:var(--lila)}
.ob-halte-lijf{background:var(--wit);border:1px solid var(--rand);border-radius:20px;padding:22px 24px;min-width:0}
@media (max-width:599px){ .ob-halte-lijf{padding:18px} }
.ob-halte-kop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ob-halte-kop h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.ob-halte-lijf p{margin-top:12px;font-size:15px;line-height:1.6}
.ob-halte-lijf p b{color:var(--inkt)}
/* Wat er op dat moment in het dossier staat: een regel uit het dossier en
   dus in de lettersoort van een document. */
.ob-vast{
  margin-top:14px;background:var(--papier);border:1px solid var(--rand);border-radius:12px;
  padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--lees);
  overflow-wrap:anywhere;
}
.ob-vast b{color:var(--inkt);font-weight:500}

/* ===========================================================================
   8. DE WISSELS (samenwerken, drie routes)
   Het oude ontwerp zette deze sectie op een donkere band. De eigenaar besliste
   op 21-09 dat er in de hoofdinhoud geen donker hoofdstuk komt: hier liggen
   witte kaarten op lichtlila.
   =========================================================================== */

.ob-wissels{display:grid;gap:var(--gat)}
.ob-wissel{background:var(--wit);border-radius:20px;padding:28px;box-shadow:var(--schaduw-2);min-width:0}
@media (max-width:599px){ .ob-wissel{padding:20px} }
.ob-wissel-pad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:18px}
.ob-wissel-eind{
  display:inline-flex;align-items:baseline;gap:8px;border-radius:999px;padding:6px 14px;
  background:var(--lila-papier);border:1px solid var(--rand-lila);font-size:15px;
}
.ob-wissel-eind b{color:var(--inkt)}
.ob-wissel-pijl{color:var(--lila-diep);font-weight:600}
.ob-wissel h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.ob-wissel-lijf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gat);align-items:start}
.ob-wissel-lijf-los{grid-template-columns:minmax(0,1fr)}
.ob-wissel-lijf p + p{margin-top:var(--sp-alinea)}
@media (max-width:1023px){ .ob-wissel-lijf{grid-template-columns:minmax(0,1fr)} }
.ob-wissel-mee{background:var(--papier);border:1px solid var(--rand);border-radius:14px;padding:18px}

/* ===========================================================================
   9. DE DRIE BANEN MET ZES DWARSBALKEN (samenwerken, drie routes)
   Van boven naar beneden lees je een route, van links naar rechts vergelijk
   je de drie op dezelfde vraag. Elke dwarsbalk krijgt zijn kop over de volle
   breedte en daaronder drie cellen. Onder 1024 pixels staan de cellen onder
   elkaar en zegt het opschrift in elke cel welke route het is.
   =========================================================================== */

.ob-dwars{margin-top:var(--sp-sectie)}
/* De kop van een dwarsbalk volgt het raster van de drie cellen eronder: de
   vraag boven de eerste cel, de uitleg boven de tweede en derde. Met een eigen
   verdeling (5 op 7) begon de uitleg op 1600 midden in de tweede cel. */
.ob-dwars-kop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gat);align-items:baseline;margin-bottom:18px}
.ob-dwars-kop > .alinea{grid-column:span 2}
@media (max-width:1023px){
  .ob-dwars-kop{grid-template-columns:minmax(0,1fr);gap:8px}
  .ob-dwars-kop > .alinea{grid-column:auto}
}
.ob-dwars-kop h3{font-size:var(--t-onder);font-weight:500;line-height:1.2}
.ob-cel{
  background:var(--wit);border:1px solid var(--rand);border-top:4px solid var(--mid-blauw);
  border-radius:16px;padding:22px;min-width:0;
}
@media (max-width:599px){ .ob-cel{padding:18px} }
.ob-cel-lila{border-top-color:var(--mid-lila)}
.ob-cel-roze{border-top-color:var(--mid-roze)}
.ob-cel p{font-size:15px;line-height:1.6}
.ob-cel .ob-mono + p,.ob-cel p + p{margin-top:10px}
.ob-cel .ob-lijst{margin-top:10px}
.ob-cel .knop{margin-top:16px}
.ob-cel-vorm{margin-top:8px;font-weight:600;color:var(--inkt);font-size:17px}

/* ===========================================================================
   10. CIJFERS, TELLERS EN DREMPELS
   Een getal op een publieke pagina is hier altijd een systeemeigenschap (vier
   trajecten, twintig statussen) of uitdrukkelijk een voorbeeld. Het telt niet
   meer op bij het in beeld komen: dat deed het oude script en versie 7 heeft
   die beweging niet.
   =========================================================================== */

.ob-cijfer{background:var(--wit);border:1px solid var(--blauw-rand);border-radius:20px;padding:22px;min-width:0}
.ob-cijfer b{display:block;font-size:var(--t-groot);font-weight:600;line-height:1;color:var(--inkt);letter-spacing:-.015em}
.ob-cijfer span{display:block;margin-top:10px;font-size:15px;line-height:1.5}
.ob-cijfer p{margin-top:12px;font-size:15px;line-height:1.6}
.ob-cijfer-nul{background:var(--amber-papier);border-color:var(--amber-rand)}
.ob-cijfer-naam{display:block;margin-top:10px;font-weight:600;color:var(--inkt);font-size:17px;line-height:1.35}

/* ===========================================================================
   11. HET BORD (crm, bord en stilstand)
   =========================================================================== */

.ob-kolom{background:var(--wit);border:2px solid var(--blauw-rand);border-radius:20px;overflow:hidden;min-width:0}
.ob-kolom > .kopstrook{border-radius:18px 18px 0 0}
.ob-kolom-lijf{padding:20px 22px 22px}
.ob-kolom-kop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ob-kolom-kop b{font-size:var(--t-kaart);font-weight:600;color:var(--inkt);line-height:1.25}
.ob-statussen{display:grid;gap:2px}
.ob-statussen li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;
  padding:9px 0;border-bottom:1px solid #eceff9;font-size:15px;color:var(--inkt);
}
.ob-statussen li:last-child{border-bottom:0}
.ob-merk{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--lila-diep)}
.ob-st-uit .ob-merk{color:#6f4a11}
.ob-st-eind .ob-merk{color:#0c6741}

/* ===========================================================================
   12. VOORBEELDEN VAN BUITEN (crm, toegang van buiten)
   =========================================================================== */

.ob-cijferlijst{margin:0;display:grid;gap:8px}
.ob-cijferlijst > div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  padding-bottom:8px;border-bottom:1px solid #eceff9;font-size:15px;line-height:1.5;
}
.ob-cijferlijst > div:last-child{border-bottom:0;padding-bottom:0}
.ob-cijferlijst dt{color:var(--lees)}
.ob-cijferlijst dd{margin:0;color:var(--inkt);font-weight:500}
@media (max-width:599px){ .ob-cijferlijst > div{grid-template-columns:minmax(0,1fr);gap:2px} }
.ob-portaal-kop{font-size:19px;font-weight:600;color:var(--inkt);line-height:1.3}
.ob-keuzes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* Een knop in een verzonnen voorbeeld. Hij ziet eruit als de knop die de
   kandidaat ziet maar is een gewone tekst: je kunt er op deze pagina niets mee. */
.ob-nepknop{
  display:inline-block;border:2px solid var(--blauw);border-radius:999px;padding:6px 14px;
  font-size:14px;font-weight:600;color:var(--blauw-diep);background:var(--wit);
}
/* Drie tellers sinds 22-09-2026: het voorbeeld op /crm/toegang-van-buiten
   toont nu de drie tellingen die het startscherm van een franchisegever echt
   heeft (gekoppeld, in behandeling, geplaatst) in plaats van vier verzonnen
   (Astra v7-geheel-01 deel 3, bevinding 16). */
.ob-tellers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ob-teller{background:var(--blauw-licht);border-radius:14px;padding:14px}
.ob-teller b{display:block;font-size:30px;font-weight:600;line-height:1;color:var(--inkt)}
.ob-teller span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* ===========================================================================
   13. HET VERDER LEZEN EN HET SLOT
   Twee ingangskaarten (bouwsteen .ingang uit de vormlaag) en daaronder het
   actievlak, zoals elke pagina van versie 7 eindigt.
   =========================================================================== */

.ob-verder{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);align-items:stretch}
@media (max-width:1023px){ .ob-verder{grid-template-columns:1fr;gap:16px} }
.ob-verder .ingang-lijf h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.ob-verder .ingang-lijf p{font-size:15px;line-height:1.6}

/* ===========================================================================
   14. WERKEN BIJ
   =========================================================================== */

.ob-posities{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--sp-kop)}
@media (max-width:767px){ .ob-posities{grid-template-columns:1fr} }
.ob-positie{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  background:var(--wit);border:2px solid var(--blauw-rand);border-radius:16px;padding:16px 18px;
  text-decoration:none;color:var(--inkt);font-weight:600;line-height:1.35;
  transition:border-color var(--duur) var(--soepel);
}
.ob-positie:hover,.ob-positie:focus-visible{border-color:var(--blauw-diep);color:var(--inkt)}
.ob-positie::after{content:'\2192';grid-column:2;grid-row:1 / span 2;color:var(--blauw-diep);font-weight:400}
/* Op 22-09-2026 stond hier het salaris bij elke positie. De bedragen zijn van
   de pagina gehaald (besluit eigenaar, register F1); de regel eronder toont nu
   het niveau. Alleen de naam van de klasse veranderde, de opmaak niet. */
.ob-positie-niveau{grid-column:1;font-family:var(--mono);font-size:12px;letter-spacing:.04em;font-weight:500;color:var(--lees)}

.ob-vacature-zij{display:grid;gap:18px;align-content:start}
@media (min-width:1024px){ .ob-vacature-zij{position:sticky;top:96px} }
.ob-feiten{margin:0;display:grid;gap:10px;background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:18px}
.ob-feiten > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;font-size:15px;line-height:1.5}
.ob-feiten dt{color:var(--lees)}
.ob-feiten dd{margin:0;color:var(--inkt);font-weight:500}
/* Hier stonden .ob-salaris en zijn twee kindregels, het lichte vlak met de
   salarisindicatie in de zijkolom van een vacature. De bedragen zijn op
   22-09-2026 van /werken-bij gehaald (besluit eigenaar, register F1), dus die
   regels hadden niets meer om op te maken. Terug te halen uit de commit die
   ze weghaalde. */
.ob-vacature-tekst h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25;margin-top:var(--sp-kop)}
.ob-vacature-tekst h3:first-child{margin-top:0}
.ob-vacature-tekst > p{margin-top:12px;max-width:64ch}
.ob-vacature-tekst .uitlegkaart{margin-top:var(--sp-kop)}
.ob-vacature-tekst .uitlegkaart h3{margin-top:0}
.ob-vacature-tekst .uitlegkaart p{margin-top:10px}

/* ===========================================================================
   15. HET FORMULIER DEMO AANVRAGEN
   Een EJS-scherm van de app en geen statisch bestand. Velden, namen, actie,
   methode, CSRF en validatie blijven precies zoals ze waren; alleen de
   vormgeving is die van versie 7. Bedieningen krijgen de bedieningsrand
   (3,72 tegen 1 op wit) en niet de kaartrand (1,47), want je vult ze in.
   =========================================================================== */

.ob-formkaart{background:var(--wit);border-radius:20px;padding:28px;box-shadow:var(--schaduw-2)}
@media (max-width:599px){ .ob-formkaart{padding:20px} }
.ob-veld{margin-top:18px}
.ob-veld:first-of-type{margin-top:0}
.ob-veld > label,.ob-veld-naam{display:block;font-size:15px;font-weight:600;color:var(--inkt);margin-bottom:6px}
.ob-optioneel{font-weight:400;color:var(--lees)}
.ob-veld input[type=text],.ob-veld input[type=email],.ob-veld input[type=tel]{
  width:100%;font-family:var(--letter);font-size:16px;line-height:1.4;color:var(--inkt);
  background:var(--wit);border:2px solid var(--rand-bediening);border-radius:12px;padding:12px 14px;
  transition:border-color var(--duur) var(--soepel);
}
.ob-veld input:hover{border-color:var(--blauw-diep)}
.ob-veld input:focus-visible{border-color:var(--blauw-diep);outline:3px solid var(--blauw-diep);outline-offset:2px}
/* De geheimhoudingsverklaring blijft een scrollvak: de tekst is lang en hoort
   bij het akkoord eronder. Het vak kan de toetsenbordfocus krijgen, zodat ook
   wie geen muis gebruikt erin kan scrollen. */
.ob-nda{
  background:var(--papier);border:1px solid var(--rand);border-radius:12px;padding:14px 16px;
  max-height:180px;overflow-y:auto;font-size:14px;line-height:1.6;color:var(--lees);
}
.ob-nda p + p{margin-top:10px}
.ob-akkoord{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px}
.ob-akkoord input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blauw)}
.ob-akkoord label{font-size:15px;line-height:1.5;color:var(--inkt)}
.ob-verstuur{width:100%;margin-top:22px}
.ob-melding{border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.6;margin-bottom:18px;border:1px solid}
/* Een fout is een status die aandacht vraagt: amber. Een ontvangen aanvraag
   is bevestigd: mint. Dezelfde betekenis als op de statusregels. */
.ob-melding-fout{background:var(--amber-papier);border-color:var(--amber-rand);color:#6f4a11}
.ob-melding-goed{background:var(--mint-papier);border-color:var(--mint-rand);color:#0c6741}
.ob-terug{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 18px;font-size:15px}
.ob-terug a{color:var(--blauw-diep);font-weight:600;text-decoration:none;border-bottom:2px solid var(--blauw)}
.ob-terug a:hover,.ob-terug a:focus-visible{color:var(--inkt);border-bottom-color:var(--inkt)}
.ob-demostappen{display:grid;gap:14px;margin-top:var(--sp-kop)}
.ob-demostappen li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;font-size:17px;line-height:1.55}
.ob-demovoet{margin-top:var(--sp-kop);font-size:15px;line-height:1.6}
/* Het controlevak van de robotcheck is een vast blok van 304 pixels. Op een
   telefoon van 320 pixels is er in de kaart maar 240 over; daar wordt het
   vak verkleind in plaats van afgeknipt, zodat het nog te bedienen is. */
.ob-recaptcha{margin-top:18px}
@media (max-width:379px){ .ob-recaptcha{transform:scale(.78);transform-origin:0 0;height:62px} }