/* 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, DEEL 2 EN 3 VAN DE LIVEGANG: BEELDPLEKKEN

   WAAROM EEN EIGEN STIJLBLAD
   Deel 2 en 3 voegen vier proefpagina's toe (kennisbank, talentenpool,
   locaties en financiering, vindbaarheid) en twee blokken op de voorpagina
   (de beweging en dag en nacht bereikbaar). Bijna alles daarin is gebouwd uit
   de bestaande bouwstenen van de lagen ervoor. Wat er echt nog ontbrak staat
   hier, apart van ontwerp-ronde2.css: dat blad is het werk van een andere
   ontwerper en een eigen blad houdt de twee bij een diff en bij de wissel naar
   live uit elkaar. Geen nieuwe kleur, geen nieuwe letter en geen SVG.

   WAT HIER STAAT
   1. De beeldplek: een sectie met links beeld en rechts tekst of andersom.
      Een nieuwe beeldset met echte formulelogo's volgt; de beelden in de
      opmaak zijn tijdelijke vulling uit beeld/. Het vak houdt een vaste
      verhouding van 3 bij 2, zodat een ander beeld van dezelfde verhouding
      erin past zonder dat de opmaak verschuift.
   2. De kopmaat van de vier dienstpagina's.
   3. Het slot van het merkblok op de voorpagina.
   =========================================================================== */

/* ===========================================================================
   1. DE BEELDPLEK
   Twee gelijke helften van zes kolommen, verticaal in het midden. Welke kant
   het beeld staat volgt de volgorde in de opmaak: eerst het beeld is links,
   eerst de tekst is rechts. Zo leest een schermlezer de pagina in dezelfde
   volgorde als het oog en is er geen tweede, omgekeerde variant nodig.
   Onder 1024 pixels staan beeld en tekst onder elkaar in diezelfde volgorde.
   =========================================================================== */

.beeldduo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gat);
  align-items:center;
}
.beeldduo > *{grid-column:span 6;min-width:0}
@media (max-width:1023px){
  .beeldduo{grid-template-columns:1fr;gap:24px}
  .beeldduo > *{grid-column:auto}
}

.beeldduo-beeld{margin:0}
/* Het vak draagt de verhouding, niet het beeld: zo blijft de plek even groot
   als een beeld nog laadt of later wordt vervangen. De tekst ernaast springt
   dan niet. De achtergrond is dezelfde lichte tint als de andere
   beeldvakken van ronde 2. */
.beeldduo-vak{
  position:relative;aspect-ratio:3/2;border-radius:28px;overflow:hidden;
  background:var(--lila-papier);
}
.beeldduo-vak img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:599px){ .beeldduo-vak{border-radius:20px} }
/* Geen bijschrift bij een foto: de regel voor .beeldduo-bijschrift is op
   22-09-2026 weggehaald op besluit van de eigenaar ("nooit zulke teksten bij
   foto's"). Dat gaat voor op strategie eis 7. */

/* De puntenlijst van de ingangskaart staat op 15 pixels: dat is kaarttekst.
   Naast een beeld van 648 pixels breed is het de hoofdtekst van de sectie en
   leest zij op die maat te klein; hier krijgt zij de leesmaat van de pagina. */
.beeldduo-tekst .ingang-onderwerpen{font-size:17px;gap:12px}
.beeldduo-tekst .ingang-onderwerpen .punt{margin-top:11px}

/* Een kaart binnen de tekstkolom (twee of drie korte punten) krijgt ruimte
   boven zich, gelijk aan die tussen alinea's en een blok. */
.beeldduo-tekst .uitlegkaart{margin-top:var(--sp-kop)}
@media (max-width:599px){ .beeldduo-tekst .uitlegkaart{margin-top:var(--sp-kopalinea)} }

/* ===========================================================================
   2. DE KOPMAAT VAN DE DIENSTPAGINA'S
   De maat van de voorpagina (68 pixels op breed) is voor die ene grote
   opening. De vier dienstpagina's volgen de maat van /bewijs: een stap
   kleiner, zodat een kop als "Locatie, financiering en businessplan" op
   breed op twee regels past en niet op drie.
   =========================================================================== */

body[data-pagina="kennisbank"] .titel-1,
body[data-pagina="talentenpool"] .titel-1,
body[data-pagina="locaties-en-financiering"] .titel-1,
body[data-pagina="vindbaarheid"] .titel-1{font-size:var(--t-open-bewijs)}

/* De inleiding van een dienstpagina heeft dezelfde leesmaat als op de
   voorpagina. Zonder deze regel stond zij op 17 pixels naast een kop van 60. */
.dienst-lead{font-size:19px;line-height:1.6;max-width:56ch}

/* Twee kolommen met elk een eigen kop (financiering en businessplan,
   zoekmachines en het systeem). Onder 1024 pixels staan zij onder elkaar met
   alleen de rastermaat ertussen: eindigt de eerste kolom op een onderstreepte
   link, dan plakte de volgende kop daar tegenaan (gezien op 390 pixels op
   22-09). Een modifier en geen wijziging van .werk-antwoorden zelf, zodat de
   gemeten voorpagina niet verschuift. */
@media (max-width:1023px){ .werk-antwoorden-ruim{row-gap:var(--sp-sectie)} }

/* ===========================================================================
   HERSTEL IN EEN HOOFDSTUK VAN RONDE 2: DE LIJST VAN "WAT FRANCHISEHUB DOET"
   De grondslag zet alleen ul op marge en inspringing nul, niet ol. De lijst
   van het overzicht is een ol en hield daardoor de standaard van de browser:
   40 pixels inspringing en een marge boven en onder. Gemeten op 22-09 op alle
   zes breedtes: de kaarten stonden 40 pixels rechts van de kop erboven en op
   1600 16 pixels lager dan het toneel ernaast. Hier hersteld en niet in
   ontwerp-ronde2.css, zodat het werk van die ronde onaangeroerd blijft; bij
   de wissel kan deze regel daar alsnog naartoe.
   =========================================================================== */

.overzicht-lijst{margin:0;padding:0;list-style:none}

/* ===========================================================================
   3. HET SLOT VAN HET MERKBLOK
   De gezamenlijke belofte staat gecentreerd onder de drie beloftekaarten,
   met de regel voor franchisegevers eronder. Zij is een zin en geen kop,
   dus geen kopelement en geen punt-regel; wel de maat van een kop, omdat
   zij op beide sites de vaste merkzin is.
   =========================================================================== */

.beweging-slot{margin-top:var(--sp-kop);text-align:center}
.beweging-belofte{
  font-size:var(--t-onder);font-weight:500;line-height:1.3;color:var(--inkt);
  max-width:34ch;margin:0 auto;
}
.beweging-slot .alinea{margin:var(--sp-kopalinea) auto 0}