/* 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, RONDE 2: BEELD, BEGELEIDING, SYSTEMEN EN MODELLEN

   WAAROM EEN EIGEN STIJLBLAD
   Ronde 2 voegt vier hoofdstukken toe aan de voorpagina terwijl een andere
   bouwer de drie bestaande stijlbladen naar de live site overzet. Alles wat
   nieuw is staat daarom hier, gebouwd op de tokens en bouwstenen van de drie
   lagen ervoor (kleurrollen, raster, kaarten, figuren, korrel). Er komt geen
   nieuwe kleur bij en geen nieuwe letter.

   DE BEWEGINGSREGELS
   Sinds 22-09 is er geen binnenkomst meer die inhoud verbergt: alles staat
   vanaf de eerste schildering op zijn plek (zie hoofdstuk 6 van
   ontwerp-vorm.css). Een reactie op bediening duurt hoogstens 220
   milliseconden, alleen transform en opacity, alles stil onder 900 pixels en
   bij de bewegingsvoorkeur (systeem of de knop Beweging uit). Een foto
   verschuift bij het scrollen hoogstens 8 pixels. De regels daarvoor staan
   onderaan.

   Geen SVG en geen canvas: alle lijnen, pijlpunten, stapels en figuren zijn
   CSS-vormen en verlopen.
   =========================================================================== */

/* ===========================================================================
   1. WAT FRANCHISEHUB DOET, het klikbare overzicht
   Links vijf onderdelen als lijst, rechts een toneel. Aanwijzen of focus kiest
   het toneel; de link springt naar het hoofdstuk. Onder 1024 pixels vervalt
   het toneel en draagt elk onderdeel een eigen kleurstrook, zodat de vijf ook
   op telefoon als één familie met de ingangen lezen.
   =========================================================================== */

.overzicht-raster{display:grid;grid-template-columns:5fr 7fr;gap:var(--gat);align-items:stretch}
@media (max-width:1023px){ .overzicht-raster{grid-template-columns:1fr} }

.overzicht-lijst{display:grid;gap:10px}
.overzicht-item{
  position:relative;background:var(--wit);
  border:2px solid var(--rand);border-radius:16px;overflow:hidden;
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel);
}
/* Het gekozen onderdeel krijgt de accentstrook links, dezelfde als bij een
   bewegend voorbeeld: 4 pixels randlila in rust, 6 pixels lila gekozen. */
.overzicht-item::before{
  content:'';position:absolute;left:14px;top:22px;bottom:22px;width:4px;
  border-radius:999px;background:var(--rand-lila);z-index:1;
  transition:width var(--duur) var(--soepel),background-color var(--duur) var(--soepel);
}
.overzicht-item[data-actief]{border-color:var(--blauw-rand);background:var(--papier)}
.overzicht-item[data-actief]::before{width:6px;background:var(--lila)}
.overzicht-link{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:18px 20px 18px 36px;text-decoration:none;color:var(--inkt);
}
.overzicht-link:hover .overzicht-titel,.overzicht-link:focus-visible .overzicht-titel{color:var(--blauw-diep)}
.overzicht-nr{
  width:36px;height:36px;border-radius:999px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;color:var(--lila-diep);
  border:1px solid var(--rand-lila);background:var(--wit);
  transition:background-color var(--duur) var(--soepel),color var(--duur) var(--soepel);
}
.overzicht-item[data-actief] .overzicht-nr{background:var(--lila);border-color:var(--lila);color:#fff}
.overzicht-tekst{display:grid;gap:4px;min-width:0}
.overzicht-titel{font-size:var(--t-onder);font-weight:600;line-height:1.2;color:var(--inkt)}
.overzicht-regel{font-size:15px;line-height:1.5;color:var(--lees)}
.overzicht-pijl{
  font-size:22px;line-height:1;color:var(--blauw-diep);
  transition:transform var(--duur) var(--soepel);
}
.overzicht-item[data-actief] .overzicht-pijl{transform:translateX(6px)}

/* De kleurstrook per onderdeel bestaat alleen onder 1024 pixels: daar is er
   geen toneel en dragen de vijf kaarten zelf hun kleur, in dezelfde bouw als
   de strook van een ingang (verloop naar de diepere toon, één vorm, korrel). */
.overzicht-strook{display:none;height:48px;position:relative;overflow:hidden}
.overzicht-strook::after{
  content:'';position:absolute;right:22px;top:6px;width:88px;height:56px;
  border-radius:var(--blob-b);background:var(--strook-vorm);
}
.overzicht-strook-blauw{background:linear-gradient(115deg,var(--mid-blauw),var(--mid-blauw-diep));--strook-vorm:rgba(52,85,212,.22)}
.overzicht-strook-lila{background:linear-gradient(115deg,var(--mid-lila),var(--mid-lila-diep));--strook-vorm:rgba(107,79,206,.20)}
.overzicht-strook-roze{background:linear-gradient(115deg,var(--mid-roze),var(--mid-roze-diep));--strook-vorm:rgba(194,42,114,.20)}
@media (max-width:1023px){
  .overzicht-strook{display:block}
  .overzicht-item::before{top:70px}
  .overzicht-item[data-actief]{background:var(--wit)}
}
@media (max-width:599px){
  .overzicht-link{padding:16px 16px 16px 32px;gap:12px}
  .overzicht-item::before{left:12px}
}

/* ---- Het toneel ----
   Vijf scenes op elkaar; alleen de gekozen is zichtbaar. Een scene wisselt in
   220 milliseconden (het is een reactie op bediening) met opacity en een
   verschuiving van 12 pixels. Het kaartje in elke scene is ondoorzichtig wit,
   dus er staat nooit een figuur achter tekst. */
/* Het toneel is even hoog als de lijst ernaast (stretch), minstens 480. */
.overzicht-toneel{
  position:relative;min-height:480px;align-self:stretch;
  border-radius:28px;background:var(--lila-licht);overflow:hidden;
}
@media (max-width:1023px){ .overzicht-toneel{display:none} }
.toneel-scene{
  position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--duur) var(--soepel),transform var(--duur) var(--soepel);
}
.toneel-scene[data-actief]{opacity:1;transform:none;pointer-events:auto}
.scene-decor{position:absolute;inset:0;overflow:hidden}
.scene-decor.korrel::before{z-index:3}
.scene-kaart{
  position:absolute;left:28px;bottom:28px;max-width:calc(100% - 56px);z-index:4;
  background:var(--wit);border:1px solid var(--rand);border-radius:16px;
  padding:16px 18px;box-shadow:var(--schaduw-2);display:grid;gap:10px;
}
.scene-kaart-kop{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lila-diep);
}
.scene-kaart-regel{font-size:15px;line-height:1.5;color:var(--lees)}
.scene-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-block;font-size:13px;line-height:1.4;padding:6px 11px;
  border-radius:999px;background:var(--blauw-licht);color:var(--inkt);
  border:1px solid var(--blauw-rand);
}
/* Vergelijking en score blijven twee aparte delen op het kaartje: er komt
   nergens één cijfer uit 22 kenmerken en 26 eisen. */
.scene-kaart-duo{grid-template-columns:1fr 1fr;gap:18px;width:calc(100% - 56px)}
.scene-kaart-deel{display:grid;gap:6px}

/* De maten van de figuren zijn afgestemd op een toneel van 760 bij 660: de
   lijst ernaast is zo hoog. De figuren vullen de bovenste twee derde, het
   kaartje staat onderaan. */

/* Scene 1, werving: de compositie van de opening, groter gezet. */
.scene-vorm-hoofd{
  left:24%;top:48px;width:66%;height:360px;border-radius:var(--blob-a);
  background:linear-gradient(135deg,var(--mid-blauw),var(--mid-lila));
}
.scene-vorm-tegen{left:5%;top:120px;width:32%;height:220px;border-radius:var(--blob-b);background:var(--mid-roze)}
.scene-vorm-contour{left:50%;top:80px;width:42%;height:230px;border-radius:var(--blob-b);border:3px solid var(--lila);opacity:.75}

/* Scene 2, matching: twee stapels van 22 en 26 balkjes naast elkaar, als
   herhalend verloop en dus zonder 48 losse elementen. Elk balkje is 8 pixels
   met 6 ertussen: 22 keer 14 is 308, 26 keer 14 is 364. De namen staan als
   losse elementen onder de stapels, op het effen lichtlila. */
.stapel{position:absolute;width:150px;border-radius:4px}
.stapel-22{
  left:12%;top:112px;height:308px;
  background:repeating-linear-gradient(to top,var(--mid-blauw) 0 8px,transparent 8px 14px);
}
.stapel-26{
  left:40%;top:56px;height:364px;
  background:repeating-linear-gradient(to top,var(--mid-lila) 0 8px,transparent 8px 14px);
}
.stapel-naam{
  position:absolute;top:432px;white-space:nowrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lila-diep);
}
.stapel-naam-22{left:12%}
.stapel-naam-26{left:40%}
.veto-pil{
  position:absolute;left:68%;top:120px;padding:8px 14px;border-radius:999px;
  background:var(--wit);border:1px solid var(--roze-rand);color:var(--roze-diep);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}

/* Scene 3, het systeem: de figuur van de CRM-opening. Sinds 22-09 zijn dat
   geen effen capsules met twee lijntjes meer maar organische vormen (zie de
   uitleg bij .capsule in ontwerp-vorm.css). Een platte vorm van 72 procent
   breed en 150 hoog werd met die hoeken een smalle lens; daarom zijn beide
   vormen hier hoger. Blauw en lila zonder roze of contour, zodat deze scene
   niet gaat lijken op scene 1. */
.scene-capsule-hoofd{
  left:8%;top:64px;width:62%;height:280px;z-index:1;
  background:linear-gradient(135deg,var(--mid-blauw),var(--mid-blauw-diep));
}
.scene-capsule-tegen{left:54%;top:150px;width:38%;height:210px;background:var(--mid-lila);z-index:0}

/* Scene 4, begeleiding: de enige foto op het toneel, zonder uitsnede in een
   3:2-vak over de volle breedte, zonder bijschrift (besluit eigenaar
   22-09-2026); het kaartje staat rechtsonder op zijn eigen witte vlak. */
.toneel-scene-begeleiding{
  display:grid;grid-template-rows:auto 1fr;gap:10px;padding:28px;align-content:start;
}
.scene-foto{aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:var(--lila-papier)}
.scene-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scene-kaart-los{left:auto;right:28px;max-width:46%}

/* Scene 5, marketing: de platen en de open boog van de bewijsopening. */
.scene-plaat-een{left:10%;top:120px;width:70%;height:250px;background:var(--mid-lila)}
.scene-plaat-twee{left:22%;top:70px;width:64%;height:250px;background:linear-gradient(120deg,var(--mid-blauw),var(--mid-lila))}
.scene-boog{left:30%;top:20px;width:44%;height:120px}

/* ===========================================================================
   2. ZO ZIJN MARKETING EN MATCHING GEKOPPELD, het schema
   Twee benoemde lagen, elk een licht vlak: Ons werk op papierlila (mensen),
   Het systeem op lichtblauw (het dossier). De hoofdlijn loopt van links naar
   rechts door de systeemlaag. Verbindingen zijn lijnen van 2 pixels in hun
   eigen rasterkolom of rasterrij, 4 pixels als zij bij het gekozen knooppunt
   horen, nooit achter tekst. Knooppunten zijn echte knoppen.

   WAAROM EEN RASTER MET ZEVEN KOLOMMEN
   Vier kolommen voor knooppunten en drie van 44 pixels ertussen voor de
   lijnen. Zo krijgt elke lijn een eigen cel en volgt zij vanzelf de hoogte
   van haar rij; niets hoeft met absolute posities te worden nagemeten.
   =========================================================================== */

.schema-legenda{display:grid;gap:6px;font-size:14px;color:var(--lees)}
.schema-legenda > span{display:inline-flex;align-items:center;gap:10px}
.legenda-stip{width:8px;height:8px;border-radius:999px;display:inline-block;flex:none}
.legenda-stip-werk{background:var(--roze)}
.legenda-stip-systeem{background:var(--blauw)}

.schema{
  display:grid;list-style:none;margin:0;padding:0 20px;
  grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);
  grid-template-rows:44px auto 112px 44px auto 72px auto;
}
.schema-laag{
  grid-column:1 / -1;margin:0 -20px;border-radius:24px;padding:14px 20px 0;
  position:relative;z-index:0;
}
.schema-laag-werk{grid-row:1 / 3;background:var(--lila-papier);border:1px solid var(--rand-lila)}
.schema-laag-systeem{grid-row:4 / 8;background:var(--blauw-licht)}
.schema-laagnaam{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lila-diep);
}

.knoop{position:relative;z-index:1;margin:0 0 20px;list-style:none}
.knoop-n1{grid-column:1 / 4;grid-row:2}
.knoop-n2{grid-column:5;grid-row:2}
.knoop-n3{grid-column:7;grid-row:2}
.knoop-s1{grid-column:1;grid-row:5}
.knoop-s2{grid-column:3;grid-row:5}
.knoop-s3{grid-column:5;grid-row:5}
.knoop-s4{grid-column:7;grid-row:5}
.knoop-f1{grid-column:5;grid-row:7}
.lijn-s1{grid-column:2;grid-row:5}
.lijn-s2{grid-column:4;grid-row:5}
.lijn-s3{grid-column:6;grid-row:5}
.lijn-aanvraag{grid-column:1;grid-row:3}
.lijn-terug{grid-column:3;grid-row:3;margin:0}
.lijn-formule{grid-column:5;grid-row:6}

/* De knop zelf. De rand is de bedieningskleur (3,72 tegen 1 op wit); de
   gekozen knop wordt diepblauw met witte letters, zoals elke ingedrukte
   bediening op deze site. */
.knoop-knop{
  display:grid;gap:6px;width:100%;min-height:72px;padding:14px 16px;
  border-radius:14px;border:2px solid var(--rand-bediening);background:var(--wit);
  text-align:left;cursor:pointer;font-family:var(--letter);color:var(--inkt);
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel),color var(--duur) var(--soepel);
}
.knoop-knop:hover,.knoop-knop:focus-visible{border-color:var(--blauw-diep)}
.knoop-knop[aria-pressed="true"]{background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff}
.knoop-knop[aria-pressed="true"] .knoop-soort{color:#fff}
.knoop-knop[aria-pressed="true"] .knoop-titel{color:#fff}
.knoop-knop[aria-pressed="true"] .legenda-stip-systeem{background:#fff}
.knoop-knop[aria-pressed="true"] .legenda-stip-werk{background:var(--mid-roze)}
.knoop-soort{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lila-diep);
}
.knoop-titel{font-size:17px;font-weight:600;line-height:1.25;color:var(--inkt)}
.knoop-knop-klein{min-height:56px;padding:10px 14px}

/* De uitleg per knooppunt. Zonder script staat hij altijd open: dan is het
   schema een geordende lijst met dezelfde uitleg. Met script (html krijgt
   data-ronde2) staat de uitleg onder 1280 pixels direct onder het gekozen
   knooppunt en vanaf 1280 in het gedeelde paneel eronder. */
.knoop-uitleg{padding:12px 4px 4px;font-size:15px;line-height:1.6;color:var(--lees)}
html[data-ronde2] .knoop-uitleg{display:none}
@media (max-width:1279px){ html[data-ronde2] .knoop[data-actief] .knoop-uitleg{display:block} }
.schema-paneel{margin-top:24px}
html:not([data-ronde2]) .schema-paneel{display:none}
@media (max-width:1279px){ .schema-paneel{display:none} }

/* De lijnen. Een cel, een lijn van 2 pixels in het midden en een pijlpunt van
   twee randen (CSS, geen SVG). Gekozen: 4 pixels. */
.lijn{display:flex;align-items:center;justify-content:center;position:relative;list-style:none}
.lijn > i{display:block;position:relative;background:var(--lila);border-radius:999px}
.lijn > i::after{
  content:'';position:absolute;width:8px;height:8px;
  border-top:2px solid var(--lila);border-right:2px solid var(--lila);
}
.lijn-horizontaal > i{width:100%;height:2px}
.lijn-horizontaal > i::after{right:0;top:50%;transform:translateY(-50%) rotate(45deg)}
.lijn-verticaal{flex-direction:column}
.lijn-verticaal > i{width:2px;height:100%}
.lijn-verticaal > i::after{left:50%;bottom:0;transform:translateX(-50%) rotate(135deg)}
/* Twee lijnen lopen omhoog: de teruglijn (dossier naar campagnes) en de zijtak
   formulegegevens, die van onderaf bij de matching binnenkomt. Hun pijlpunt
   staat dus boven en niet onder. */
.lijn-omhoog > i::after,.lijn-formule > i::after{bottom:auto;top:0;transform:translateX(-50%) rotate(-45deg)}
.lijn[data-lijn-actief] > i{background:var(--lila-diep)}
.lijn-horizontaal[data-lijn-actief] > i{height:4px}
.lijn-verticaal[data-lijn-actief] > i,.lijn-omhoog[data-lijn-actief] > i{width:4px}
.lijn-naam{
  position:absolute;left:calc(50% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lila-diep);
  background:var(--wit);border:1px solid var(--rand-lila);border-radius:999px;padding:4px 10px;
}

/* De teruglijn is zelf een knooppunt: een lijn omhoog van het dossier naar de
   campagnes met een kleine knop erop. De knop is ondoorzichtig, dus de lijn
   loopt er niet achter een letter door. */
.knoop-terug{display:flex;align-items:center;justify-content:center}
.knoop-terug .lijn-verticaal{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center}
.knoop-terug .lijn-verticaal > i{width:2px;height:100%}
.knoop-terug[data-lijn-actief] .lijn-verticaal > i{width:4px;background:var(--lila-diep)}
.knoop-terug .knoop-knop{position:relative;width:auto;max-width:220px;z-index:1}
.knoop-terug .knoop-uitleg{position:absolute;left:0;right:0;top:100%}

/* Geen intekenen bij binnenkomst meer. Tot 22-09 stonden de lijnen op schaal
   nul tot een waarnemer het schema in beeld zag en groeiden zij daarna in 420
   milliseconden met tot 540 milliseconden vertraging. Bij herladen midden in
   het schema stond het dan zonder pijlen in beeld: de pijlen dragen hier de
   betekenis (wat waarheen loopt), dus dat is inhoud die wacht. Sinds 22-09
   staan de lijnen vanaf de eerste schildering getekend; de puls na een klik
   hieronder blijft, want dat is een reactie op bediening. */

/* De puls: één stip die na een klik langs de uitgaande lijn loopt, 220
   milliseconden, alleen transform. */
.lijn-puls{
  position:absolute;width:10px;height:10px;border-radius:999px;background:var(--blauw);
  left:0;top:50%;margin-top:-5px;opacity:0;pointer-events:none;
}
.lijn-verticaal .lijn-puls{left:50%;top:0;margin:0 0 0 -5px}
.lijn-puls[data-loopt]{opacity:1;transition:transform var(--duur) linear}

/* Vanaf 1280 breed; daaronder een verticale route in bronvolgorde, met de
   uitleg direct onder het gekozen knooppunt. De lagen worden koppen. */
@media (max-width:1279px){
  .schema{grid-template-columns:1fr;grid-template-rows:none;padding:0;gap:0}
  .schema-laag{grid-column:auto;grid-row:auto;margin:0;padding:8px 0 12px;background:none;border:0;border-radius:0}
  .schema-laag-systeem{margin-top:8px}
  .knoop,.lijn{grid-column:auto;grid-row:auto}
  .knoop{margin:0}
  .knoop-uitleg{padding:12px 4px 12px}
  .lijn{min-height:36px}
  .lijn-horizontaal > i{width:2px;height:100%}
  .lijn-horizontaal > i::after{right:auto;top:auto;left:50%;bottom:0;transform:translateX(-50%) rotate(135deg)}
  .lijn-horizontaal[data-lijn-actief] > i{height:100%;width:4px}
  .lijn-verticaal{min-height:36px}
  /* Naast de lijn past de naam op 320 pixels niet; zij staat dan op de lijn
     zelf op haar eigen ondoorzichtige vlak en de lijn wordt hoger. */
  .lijn-aanvraag,.lijn-formule{min-height:64px}
  .lijn-naam{left:50%;transform:translate(-50%,-50%)}
  /* In de verticale route staat de zijtak direct onder de matching (zie de
     bronvolgorde). De pijl wijst omhoog naar de matching en de tak springt
     32 pixels in, zodat de hoofdlijn eronder (naar het verslag) als hoofdlijn
     leest en niet als vervolg van de formulegegevens. */
  .lijn-formule,.knoop-f1{margin-left:32px}
  .lijn-formule > i::after{top:0;bottom:auto;transform:translateX(-50%) rotate(-45deg)}
  .knoop-terug{display:block;margin:12px 0}
  .knoop-terug .lijn-verticaal{display:none}
  .knoop-terug .knoop-knop{max-width:none;width:100%}
  .knoop-terug .knoop-uitleg{position:static}
}

.schema-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);margin-top:24px}
@media (max-width:767px){ .schema-extra{grid-template-columns:1fr} }
.schema-extra-kaart{
  background:var(--papier);border:1px solid var(--rand);border-radius:16px;padding:20px;
  display:grid;gap:8px;font-size:15px;line-height:1.6;
}
.schema-extra-kaart b{color:var(--inkt);font-size:17px}

/* ===========================================================================
   3. BEGELEIDING VAN LOCATIE TOT OPENING
   Eerst de werktafel (beeld 02) met knoppen op de plek van de voorwerpen.
   Daarna de reeks: een plakkend beeldvak dat van foto wisselt naast zes
   stappen. Scrollen kiest de stap; nummers en tafelknoppen springen ernaartoe.
   =========================================================================== */

.route-tafel{position:relative;margin:0 0 var(--sp-kop)}
.route-tafel-beeld{
  position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;
  background:var(--lila-papier);
}
.route-tafel-beeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.02)}

/* De knoppen op de tafel. Elke knop staat op de onderrand van zijn voorwerp
   (--x en --y in procenten van het beeld) met een steel omlaag naar een
   ondoorzichtig wit naamvlak. De even knoppen hebben een langere steel,
   zodat de namen in twee rijen staan en elkaar op 768 pixels niet raken. */
.route-punten{position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;margin:0;padding:0;list-style:none}
/* Het punt zelf heeft geen maat: een vak van nul bij nul op de plek van het
   voorwerp, met de knop als flexkind op eigen breedte. Met een gewoon vak
   liep de opmaak van de twee rechtse punten op 768 pixels 2 en 24 pixels
   buiten het venster (gemeten per element), terwijl de verschoven knop zelf
   netjes binnen stond. Nu is het vak leeg en telt alleen de knop. */
.route-punt{position:absolute;left:var(--x);top:var(--y);width:0;height:0;display:flex}
.route-punt:nth-child(even){--steel:58px}
.route-punt-knop{
  display:flex;flex:none;flex-direction:column;align-items:center;gap:0;
  transform:translateX(-50%);background:none;border:0;padding:0;margin:0;
  cursor:pointer;text-decoration:none;font-family:var(--letter);
}
.route-punt-links .route-punt-knop{align-items:flex-start;transform:translateX(-8px)}
.route-punt-rechts .route-punt-knop{align-items:flex-end;transform:translateX(calc(-100% + 8px))}
.route-punt-stip{
  width:16px;height:16px;border-radius:999px;background:var(--wit);
  border:3px solid var(--blauw);box-shadow:0 0 0 3px rgba(255,255,255,.9);flex:none;
}
.route-punt-steel{width:2px;height:var(--steel,16px);background:var(--blauw);flex:none}
.route-punt-links .route-punt-stip,.route-punt-links .route-punt-steel{margin-left:0}
.route-punt-links .route-punt-steel{margin-left:7px}
.route-punt-rechts .route-punt-steel{margin-right:7px}
.route-punt-naam{
  white-space:nowrap;background:var(--wit);border:2px solid var(--rand-bediening);
  border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--inkt);
  transition:border-color var(--duur) var(--soepel);
}
.route-punt-knop:hover .route-punt-naam,.route-punt-knop:focus-visible .route-punt-naam{border-color:var(--blauw-diep)}
.route-punt-knop:focus-visible{outline:none}
.route-punt-knop:focus-visible .route-punt-naam{outline:3px solid var(--blauw-diep);outline-offset:3px}
/* .bijschrift-label (het label Illustratief beeld) en .route-bijschrift (het
   bijschrift onder de tafelfoto) zijn op 22-09-2026 weggehaald op besluit
   van de eigenaar: geen tekst bij foto's. */
@media (max-width:599px){
  /* Op telefoon is het beeld te klein voor namen erop: de knoppen staan als
     rij onder het beeld. Nooit een zijwaarts scrollende rij. */
  .route-punten{position:static;aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .route-punt{position:static;width:auto;height:auto}
  .route-punt-knop,.route-punt-links .route-punt-knop,.route-punt-rechts .route-punt-knop{transform:none;flex-direction:row}
  .route-punt-stip,.route-punt-steel{display:none}
  .route-tafel-beeld{border-radius:20px}
}

.route-raster{display:grid;grid-template-columns:5fr 7fr;gap:var(--gat);align-items:start}
@media (max-width:1023px){ .route-raster{grid-template-columns:1fr;gap:20px} }

/* Het beeldvak plakt onder de kopbalk terwijl de stappen erlangs scrollen.
   De kopbalk is 76 pixels hoog (4 streep, 14 en 14 ruimte, 44 knop). */
.route-toneel{position:sticky;top:96px}
@media (max-width:1023px){ .route-toneel{top:88px;z-index:2;background:var(--wit);padding-bottom:8px} }
.route-beeld{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:var(--lila-licht)}
.route-foto{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--duur) var(--soepel);
}
.route-foto[data-actief]{opacity:1}
.route-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,50% 50%);transform:scale(1.03);
}
.route-stand{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-top:12px;font-size:13px;color:var(--lees);
}
.route-stand-tekst{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--inkt)}
.route-voortgang{
  flex:1 1 120px;height:4px;border-radius:999px;background:var(--rand-lila);
  position:relative;overflow:hidden;display:block;
}
.route-voortgang > i{
  position:absolute;inset:0;display:block;background:var(--lila);
  transform-origin:left center;transform:scaleX(.1667);
  transition:transform var(--duur) var(--soepel);
}
.route-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.route-nav-knop{
  min-width:44px;height:44px;border-radius:999px;padding:0 12px;
  border:2px solid var(--rand-bediening);background:var(--wit);
  font-family:var(--mono);font-size:13px;color:var(--inkt);cursor:pointer;
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel),color var(--duur) var(--soepel);
}
.route-nav-knop:hover,.route-nav-knop:focus-visible{border-color:var(--blauw-diep)}
.route-nav-knop[aria-pressed="true"]{background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff}

.route-stappen{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.route-stap{
  position:relative;padding:24px 20px 24px 68px;min-height:168px;
  border-radius:16px;border:2px solid transparent;
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel);
}
.route-stap[data-stap-actief]{border-color:var(--blauw-rand);background:var(--papier)}
.route-stap-nr{
  position:absolute;left:18px;top:24px;width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;color:var(--lila-diep);
  border:1px solid var(--rand-lila);background:var(--wit);
  transition:background-color var(--duur) var(--soepel),color var(--duur) var(--soepel);
}
.route-stap[data-stap-actief] .route-stap-nr{background:var(--lila);border-color:var(--lila);color:#fff}
@media (max-width:599px){
  .route-stap{padding:20px 16px 20px 60px;min-height:150px}
  .route-stap-nr{left:14px;top:20px}
}

/* ===========================================================================
   4. DRIE MODELLEN VAN EEN VESTIGING
   Het beeld in 16:9 zonder uitsnede in een wit kader; daarnaast drie
   gelijkwaardige keuzeknoppen die tegelijk de vergelijking zijn. Niets op het
   lege bord. Het label Ontwerpvoorbeeld staat bij de naam boven het beeld en
   op elke knop. Wisselen in 220 milliseconden met opacity en een kleine
   schaal; alleen het gekozen beeld laadt eerst (de andere twee zijn hidden
   tot zij worden gekozen of vooraf geladen).
   =========================================================================== */

.modellen-raster{display:grid;grid-template-columns:8fr 4fr;gap:var(--gat);align-items:start}
@media (max-width:1023px){ .modellen-raster{grid-template-columns:1fr;gap:20px} }

.model-kijker{background:var(--wit);border:1px solid var(--rand);border-radius:28px;padding:16px}
@media (max-width:599px){ .model-kijker{border-radius:20px;padding:12px} }
.model-stand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:4px 8px 14px}
.model-klant:empty{display:none}
.model-klant img{display:block;height:28px;width:auto}
.model-stand-tekst{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.model-stand-naam{font-size:var(--t-kaart);font-weight:600;line-height:1.25;color:var(--inkt)}
.model-beelden{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--lila-licht)}
.model-beeld{
  position:absolute;inset:0;opacity:0;transform:scale(1.02);
  transition:opacity var(--duur) var(--soepel),transform var(--duur) var(--soepel);
}
.model-beeld[data-actief]{opacity:1;transform:none}
.model-beeld[hidden]{display:none}
.model-beeld img{display:block;width:100%;height:100%;object-fit:contain}
.model-onder{margin-top:12px;padding:0 8px}

.model-keuzes{display:grid;gap:12px}
@media (min-width:600px) and (max-width:1023px){ .model-keuzes{grid-template-columns:repeat(3,1fr)} }
.model-keuze{
  display:grid;gap:8px;align-content:start;min-height:48px;width:100%;
  padding:16px 18px;border-radius:16px;border:2px solid var(--rand-bediening);
  background:var(--wit);text-align:left;cursor:pointer;font-family:var(--letter);color:var(--inkt);
  transition:border-color var(--duur) var(--soepel),background-color var(--duur) var(--soepel);
}
.model-keuze:hover,.model-keuze:focus-visible{border-color:var(--blauw-diep)}
.model-keuze[aria-pressed="true"]{border-color:var(--blauw-diep);background:var(--blauw-licht)}
.model-keuze-kop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.model-keuze-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep)}
.model-naam{font-size:17px;font-weight:600;color:var(--inkt)}
.model-keuze-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#6f4a11;background:var(--amber-papier);border:1px solid var(--amber-rand);
  border-radius:999px;padding:3px 9px;
}
.model-keuze-kenmerk{font-size:15px;line-height:1.5;color:var(--lees)}
.model-noot{
  margin-top:4px;padding:16px 18px;border-radius:16px;
  background:var(--wit);border:1px solid var(--rand);
  font-size:15px;line-height:1.6;color:var(--lees);
}

/* ===========================================================================
   5. BEWEGING UIT
   Wie beweging uitzet, de systeemvoorkeur op minder beweging heeft of een
   venster onder 900 pixels gebruikt ziet elke toestand meteen: geen enkele
   overgang uit dit blad speelt dan. De parallax zet het script zelf uit.
   =========================================================================== */

html[data-beweging="uit"] .overzicht-item,
html[data-beweging="uit"] .overzicht-item::before,
html[data-beweging="uit"] .overzicht-nr,
html[data-beweging="uit"] .overzicht-pijl,
html[data-beweging="uit"] .toneel-scene,
html[data-beweging="uit"] .knoop-knop,
html[data-beweging="uit"] .lijn > i,
html[data-beweging="uit"] .lijn-puls,
html[data-beweging="uit"] .route-punt-naam,
html[data-beweging="uit"] .route-foto,
html[data-beweging="uit"] .route-voortgang > i,
html[data-beweging="uit"] .route-nav-knop,
html[data-beweging="uit"] .route-stap,
html[data-beweging="uit"] .route-stap-nr,
html[data-beweging="uit"] .model-beeld,
html[data-beweging="uit"] .model-keuze{transition:none}
html[data-beweging="uit"] .toneel-scene[data-actief]{transform:none}

@media (prefers-reduced-motion:reduce),(max-width:899px){
  .overzicht-item,.overzicht-item::before,.overzicht-nr,.overzicht-pijl,.toneel-scene,
  .knoop-knop,.lijn > i,.lijn-puls,.route-punt-naam,.route-foto,.route-voortgang > i,
  .route-nav-knop,.route-stap,.route-stap-nr,.model-beeld,.model-keuze{transition:none !important}
  .toneel-scene[data-actief]{transform:none}
}