/* 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 1: GRONDSLAG

   WAAROM DIT BESTAND BESTAAT
   Versie 6 zette kleur, raster en typografie door elkaar met composities. Toen
   de reviewer de visuele taal vastlegde bleek niet terug te vinden waar een
   maat vandaan kwam. Hier staat daarom alleen wat op alle drie de pagina's
   gelijk is: kleurrollen, raster, ruimtemaat, typografische schaal, kopbalk,
   paginanavigatie, voet, knoppen en labels. Composities staan in laag 3.

   De schaal wisselt op vier punten: vanaf 1280, 1024 tot 1279, 600 tot 1023 en
   tot 599. Dat zijn de vier kolommen uit de typografietabel van de reviewer.
   =========================================================================== */

:root{
  /* ---- Kleuren met een rol. De drie middentinten zijn nieuw en dragen
         uitsluitend decoratie. Zij worden nooit tekstkleur. ---- */
  --wit:#ffffff;
  --papier:#f7f8fc;
  --blauw-licht:#dee7fd;
  --lila-licht:#e6e0fb;
  --lila-papier:#f2effd;
  --roze-licht:#fbdde9;

  --mid-blauw:#8fa5ec;
  --mid-lila:#b4a0e6;
  --mid-roze:#e9a6c5;
  /* Diepere tonen van de drie middentinten: de middentint met 30 procent van
     de verzadigde merkkleur erdoor, voor de verlopen op stroken. Een verloop
     tussen twee middentinten van verschillend hue zakt in het midden onder
     verzadiging 0,25 (gemeten: roze naar blauw 0,24, lila naar roze 0,24) en
     wordt daar grauw. Een verloop naar de diepere toon van dezelfde tint blijft
     verzadigd (0,39 tot 0,49) en leest als één kleur die dieper wordt. Geen
     nieuwe kleur: dezelfde toon die de vorm in een strook al had. */
  --mid-blauw-diep:#748de5;
  --mid-lila-diep:#9e88df;
  --mid-roze-diep:#dd81ac;

  --blauw:#3455d4;
  --blauw-diep:#2440ad;
  --lila:#6b4fce;
  --lila-diep:#54399f;
  --roze:#c22a72;
  --roze-diep:#9d1e5b;

  --inkt:#161a3d;
  --lees:#4b5175;

  --rand:#ced4ec;
  --rand-lila:#cfc4f6;
  /* De randtinten van de blauwe en de roze familie. Bestaande tokens uit
     landing-tokens.css; hier nodig sinds 22-09 omdat een kaart een rand in de
     tint van haar eigen familie draagt (kopstrook, cirkel, opbrengst en rand
     uit één familie). Geen nieuwe kleur, wel een nieuw token in dit blad. */
  --blauw-rand:#bccbfa;
  --roze-rand:#f4c0d6;
  /* De rand van een BEDIENING is een aparte kleur. De kaartrand #ced4ec haalt
     maar 1,47 tegen 1 op wit en dat is te weinig voor iets waar je op drukt.
     Deze haalt 3,72 op wit en 3,56 op neutraal papier. Gemeten, niet geschat. */
  --rand-bediening:#7d83a3;

  /* Mint en amber blijven uitsluitend status. Geen versiering. */
  --mint:#0f7a4d;
  --mint-papier:#e8f6ef;
  --mint-rand:#8fd2b4;
  --amber:#8a5a12;
  --amber-papier:#fdf2e3;
  --amber-rand:#ecc78c;

  /* De donkere band draagt alleen de voet. In de hoofdinhoud komt geen donker
     hoofdstuk: besluit van de eigenaar op 21-09. */
  --band:#141a3c;
  --band-zacht:#c9cfee;
  --band-rand:rgba(255,255,255,.16);

  --schaduw-2:0 14px 32px -22px rgba(22,26,61,.22);

  /* Twee ongelijke hoekparen uit het bestaande merkbestand. Zij geven de
     organische vormen hun handgezette karakter. */
  --blob-a:68% 32% 44% 56% / 40% 62% 38% 60%;
  --blob-b:34% 66% 58% 42% / 62% 36% 64% 38%;

  --duur:220ms;
  --duur-lang:420ms;
  --soepel:cubic-bezier(.22,.72,.28,1);

  --letter:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ---- Raster en ruimte, standaardwaarden gelden vanaf 1280 pixels ---- */
  --kant:56px;
  --gat:24px;
  --sp-sectie:72px;
  --sp-open:56px;
  --sp-compact:48px;
  --sp-kop:32px;
  --sp-kopalinea:20px;
  --sp-alinea:16px;
  --sp-actie:28px;
  /* Overgangsstroken. Tot 22-09 waren ze 64 en 48 pixels en op een schermafdruk
     van 1600 niet van een rechte grens te onderscheiden: een verloop van wit
     naar papierlila over 48 pixels is met het oog niets. Gemeten in de strook
     onder Het werk: 60 procent van de strook was nog puur wit. Daarom hoger,
     met een getrokken booglijn en een middenstop in het verloop, zie de
     regels bij .overgang hieronder. */
  --boog:80px;
  --verloop:96px;

  /* ---- Typografische schaal ---- */
  --t-open-voor:68px;
  --t-open-bewijs:60px;
  --t-open-crm:64px;
  --t-groot:44px;
  --t-kop:36px;
  --t-onder:28px;
  --t-kaart:22px;
  --t-rust:80px;
}

@media (min-width:1024px) and (max-width:1279px){
  :root{
    --t-open-voor:60px; --t-open-bewijs:52px; --t-open-crm:56px;
    --t-groot:40px; --t-kop:34px; --t-onder:28px; --t-kaart:22px; --t-rust:72px;
  }
}

@media (min-width:600px) and (max-width:1023px){
  :root{
    --kant:32px; --gat:20px;
    --sp-sectie:56px; --sp-open:48px; --sp-compact:40px;
    --sp-kop:28px; --sp-kopalinea:20px; --sp-alinea:16px; --sp-actie:24px;
    --t-open-voor:52px; --t-open-bewijs:48px; --t-open-crm:48px;
    --t-groot:36px; --t-kop:32px; --t-onder:26px; --t-kaart:22px; --t-rust:56px;
  }
}

@media (max-width:599px){
  :root{
    --kant:20px; --gat:16px;
    --sp-sectie:40px; --sp-open:32px; --sp-compact:32px;
    --sp-kop:24px; --sp-kopalinea:16px; --sp-alinea:16px; --sp-actie:24px;
    --boog:32px; --verloop:40px;
    --t-open-voor:40px; --t-open-bewijs:40px; --t-open-crm:40px;
    --t-groot:30px; --t-kop:28px; --t-onder:24px; --t-kaart:20px; --t-rust:40px;
  }
}

/* Onder 360 pixels mag de openingskop kleiner. Dit raakt lopende tekst niet. */
@media (max-width:359px){
  :root{ --t-open-voor:36px; --t-open-bewijs:36px; --t-open-crm:36px; }
}

/* ===========================================================================
   GRONDSLAG
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}

/* ---- Geen scroll-behavior:smooth op html (22-09-2026) ----
   Tot 22-09 stond die regel hier. De browser past hem ook toe als hij na
   herladen de oude scrollplek terugzet en als iemand binnenkomt op een adres
   met een anker (/crm#demo). Gemeten: na herladen halverwege scrolde het
   venster zichtbaar van boven naar de oude plek, in ongeveer anderhalve
   seconde: de voorpagina op 1600 pixels en /samenwerken/afscherming-en-rollen
   op 390. Een binnenkomst met anker deed dat op elke gemeten pagina en
   breedte. Zonder de regel ging het direct. Zonder scripts bleef de beweging,
   dus zij kwam niet uit een script (out/website/v7-livegang/meting-herstelscroll-*).

   Soepel scrollen na een klik op een anker in de pagina doet ontwerp.js
   (hoofdstuk 5): dat zet de regel alleen voor die ene sprong aan. Zet hem hier
   niet terug, ook niet op html:focus-within; tests/unit/v7-scrollherstel.test.js
   bewaakt dat en ontwerp.js legt uit waarom focus-within niet werkt. */
html{ -webkit-text-size-adjust:100% }

/* ---- Ruimte boven een ankerdoel ----
   De kopbalk plakt bovenaan en is 76 pixels hoog (4 streep, 14 en 14
   binnenruimte, 44 knop). Een sprong naar een anker zette het doel tot 22-09
   tegen de bovenrand van het venster, dus ONDER de kopbalk: na een overgang
   begint de inhoud van een hoofdstuk maar 24 pixels (telefoon 16) onder zijn
   bovenrand en de eerste kop verdween erachter (bevinding van de reviewer op
   /bewijs#bron en /talentenpool#opvolging). Elk element met een id houdt nu
   de kophoogte plus leesruimte vrij. Dat geldt voor een klik op een interne
   link, een rechtstreeks geopend adres met een fragment en de overslaanlink.
   De stapknoppen van de reeks op de voorpagina rekenen hun scrollpositie
   zelf uit met scrollTo; daar doet deze regel niets aan. Dat klopt, want die
   houden al rekening met de kopbalk. */
:root{ --kop-hoogte:76px; --anker-ruimte:calc(var(--kop-hoogte) + 24px) }
@media (max-width:599px){ :root{ --anker-ruimte:calc(var(--kop-hoogte) + 16px) } }
[id]{scroll-margin-top:var(--anker-ruimte)}

body{
  margin:0;
  font-family:var(--letter);
  /* Hoofdtekst blijft 17 pixels met regelhoogte 1,65. */
  font-size:17px;
  line-height:1.65;
  color:var(--lees);
  background:var(--wit);
  /* Geen enkele pagina mag zijwaarts kunnen. Dit is een vangnet, geen
     oplossing: elke overloop wordt per element gemeten en bij de bron
     weggenomen. */
  overflow-x:clip;
}

img{max-width:100%;height:auto}

h1,h2,h3{color:var(--inkt);margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

a{color:var(--blauw-diep)}
a:hover{color:var(--blauw-diep)}

:focus-visible{
  outline:3px solid var(--blauw-diep);
  outline-offset:3px;
  border-radius:4px;
}

.visueel-verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--blauw-diep);color:#fff;padding:12px 20px;
  border-radius:0 0 10px 0;font-weight:600;text-decoration:none;
}
.overslaan:focus{left:0}

/* ===========================================================================
   RASTER EN SECTIES
   Kopbalk, paginanavigatie, hoofdinhoud en voet delen dezelfde buitenranden.
   De extra inspringing van de navigatie uit versie 6 is vervallen.
   =========================================================================== */

.binnen{
  width:100%;
  max-width:calc(1320px + var(--kant) * 2);
  margin:0 auto;
  padding-left:var(--kant);
  padding-right:var(--kant);
}

.rooster{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gat);
}
@media (max-width:1023px){ .rooster{grid-template-columns:repeat(6,1fr)} }
@media (max-width:599px){ .rooster{grid-template-columns:1fr} }

.sectie{
  --sp-boven:var(--sp-sectie);
  position:relative;
  padding-top:var(--sp-boven);
  padding-bottom:var(--sp-sectie);
}
.sectie-opening{--sp-boven:var(--sp-open)}
.sectie-compact{--sp-boven:var(--sp-compact);padding-bottom:var(--sp-compact)}

.vlak-wit{background:var(--wit)}
.vlak-papier{background:var(--papier)}
.vlak-blauw{background:var(--blauw-licht)}
.vlak-lila{background:var(--lila-licht)}
.vlak-lilapapier{background:var(--lila-papier)}
.vlak-roze{background:var(--roze-licht)}
.vlak-amber{background:var(--amber-papier)}

/* ---- De drie hoofdstukovergangen ----
   Een overgangsstrook vervangt een even groot deel van de ruimte boven het
   volgende hoofdstuk. Zij komt daar nooit bovenop en draagt nooit tekst. */
.overgang{position:relative}
.overgang-boog{height:var(--boog);background:var(--naar)}
/* De boog krijgt een getrokken lijn van 6 pixels in de middentint van het
   hoofdstuk erboven (--lijn per strook in de opmaak). Twee lichte tinten
   naast elkaar hebben een contrast van 1,04 en de boogvorm was daardoor
   onzichtbaar; de lijn maakt van de kleurstap een vorm. Het contourmotief uit
   de opening keert zo terug over de volle breedte. */
.overgang-boog > span{
  display:block;height:100%;background:var(--van);
  border-bottom:6px solid var(--lijn,var(--mid-blauw));
  border-bottom-left-radius:50% 100%;
  border-bottom-right-radius:50% 100%;
}
/* Het verloop loopt door een middenstop (--tussen, de randtint van de
   bestemmingsfamilie). Zonder die stop is wit naar papierlila een verschil
   van 13 niveaus en dus onzichtbaar; met de stop is het 48. */
.overgang-verloop{
  height:var(--verloop);
  background:linear-gradient(to bottom,var(--van) 0%,var(--tussen,var(--naar)) 55%,var(--naar) 100%);
}
/* De ondergrens van 24 pixels is gemeten en niet gekozen. Bij een boog van 64
   pixels boven een compact hoofdstuk bleef er nul ruimte over en raakte het
   regelvak van de eerste kop de strook. Er stond dan geen decoratie achter de
   letters, maar wel binnen hun regelvak. Dat leest ook zo. */
.overgang-boog + .sectie{padding-top:max(24px,calc(var(--sp-boven) - var(--boog)))}
.overgang-verloop + .sectie{padding-top:max(24px,calc(var(--sp-boven) - var(--verloop)))}
@media (max-width:599px){
  .overgang-boog + .sectie{padding-top:max(16px,calc(var(--sp-boven) - var(--boog)))}
  .overgang-verloop + .sectie{padding-top:max(16px,calc(var(--sp-boven) - var(--verloop)))}
}

/* ===========================================================================
   TYPOGRAFIE
   =========================================================================== */

.titel-1{font-size:var(--t-open-voor);font-weight:600;line-height:1.06;letter-spacing:-.02em}
body[data-pagina="bewijs"] .titel-1{font-size:var(--t-open-bewijs)}
body[data-pagina="crm"] .titel-1{font-size:var(--t-open-crm)}

.titel-groot{font-size:var(--t-groot);font-weight:600;line-height:1.12;letter-spacing:-.015em}
.titel-2{font-size:var(--t-kop);font-weight:500;line-height:1.16;letter-spacing:-.01em}
.titel-3{font-size:var(--t-onder);font-weight:500;line-height:1.2;letter-spacing:-.005em}
.titel-kaart{font-size:var(--t-kaart);font-weight:600;line-height:1.25}

.alinea{max-width:64ch}
.na-kop{margin-top:var(--sp-kopalinea)}
.na-alinea{margin-top:var(--sp-alinea)}
.na-blok{margin-top:var(--sp-kop)}

.mono{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lees);
}

.fragment{font-size:15px;line-height:1.6;color:var(--lees)}
.fragment-klein{font-size:13px;line-height:1.6;color:var(--lees)}

.etiket{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lila-diep);
  background:var(--wit);border:1px solid var(--rand-lila);
  border-radius:999px;padding:7px 16px;
}
.etiket-stip{width:8px;height:8px;border-radius:999px;background:var(--lila);flex:none}
.etiket-amber{color:#6f4a11;border-color:var(--amber-rand)}
.etiket-amber .etiket-stip{background:var(--amber)}

/* Het label boven elk verzonnen voorbeeld. Het is een ondoorzichtige pil, zodat
   er nooit decoratie doorheen leest. */
.label-rij{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;position:relative;z-index:2}
.label{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:#6f4a11;background:var(--amber-papier);
  border:1px solid var(--amber-rand);border-radius:999px;padding:5px 12px;
}
.label-intern{color:var(--lila-diep);background:var(--lila-papier);border-color:var(--rand-lila)}

/* ===========================================================================
   KNOPPEN EN LINKS
   De gevulde knop hield in versie 6 bij aanwijzen witte letters op een wit vlak
   over. Daarom staat elke toestand hier voluit: rust, aanwijzen, actief en
   focus houden allemaal witte letters op een donkerder blauw.
   =========================================================================== */

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--letter);font-size:15px;font-weight:600;line-height:1.2;
  padding:14px 22px;border-radius:12px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--duur) var(--soepel),
             border-color var(--duur) var(--soepel),
             color var(--duur) var(--soepel);
}
.knop-groot{font-size:17px;padding:16px 28px}
.knop-klein{font-size:14px;padding:10px 18px}

.knop-vol{background:var(--blauw);color:#fff;border-color:var(--blauw)}
.knop-vol:hover,.knop-vol:focus-visible,.knop-vol:active{
  background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff;
}

.knop-rand{background:var(--wit);color:var(--blauw-diep);border-color:var(--blauw)}
.knop-rand:hover,.knop-rand:focus-visible,.knop-rand:active{
  background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff;
}

.knoppenrij{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-actie)}

.verder{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blauw-diep);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--blauw);padding-bottom:2px;
}
.verder::after{content:'\2192';font-weight:400}
.verder:hover,.verder:focus-visible{color:var(--inkt);border-bottom-color:var(--inkt)}

/* ===========================================================================
   KOPBALK, MENU EN PAGINANAVIGATIE
   =========================================================================== */

.balk{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rand);
}
/* De merkstreep: 4 pixels blauw, lila, roze bovenaan de kopbalk. De kopbalk
   droeg geen merkkleur behalve het bolletje en de knop; op telefoon valt
   bovendien de paginanavigatie weg. Deze streep gaat op elke breedte mee. */
.balk::before{
  content:'';display:block;height:4px;
  background:linear-gradient(90deg,var(--blauw),var(--lila),var(--roze));
}
.balk-rij{
  width:100%;max-width:calc(1320px + var(--kant) * 2);margin:0 auto;
  padding:14px var(--kant);
  display:flex;align-items:center;gap:24px;
}
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.merk-vorm{
  width:26px;height:26px;border-radius:var(--blob-a);flex:none;
  background:linear-gradient(135deg,var(--blauw),var(--lila));
}
/* Het echte logo, nooit een plaatsvervanger (vaste regel): .merk-vorm was het
   gekleurde blokje van de ontwerpweergave, .merk-beeld is het <img>-element
   met het echte merkteken dat daarvoor in de plaats komt. */
.merk-beeld{display:block;width:26px;height:26px;flex:none}
.merk-naam{font-weight:700;font-size:19px;letter-spacing:-.01em}

.menu{display:flex;gap:22px;margin-left:auto}
.menu a{
  color:var(--inkt);text-decoration:none;font-size:15px;font-weight:500;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.menu a:hover,.menu a:focus-visible{border-bottom-color:var(--blauw)}
.menu a[aria-current="page"]{border-bottom-color:var(--blauw)}

.balk-acties{display:flex;align-items:center;gap:12px;margin-left:16px}

.menu-knop{
  display:none;width:44px;height:44px;border-radius:12px;
  border:2px solid var(--rand-bediening);background:var(--wit);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-streep{
  position:relative;display:block;width:18px;height:2px;background:var(--inkt);
}
.menu-streep::before,.menu-streep::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:var(--inkt);
}
.menu-streep::before{top:-6px}
.menu-streep::after{top:6px}

@media (max-width:1023px){
  .menu{display:none}
  .menu-knop{display:inline-flex}
  /* Het menu duwt de acties naar rechts (margin-left:auto op .menu). Zodra
     het menu verborgen is duwt niets meer en bleef de menuknop op 390 pixels
     129 pixels van de rand hangen (gemeten op 22-09). Nu duwen de acties
     zichzelf. */
  .balk-acties{margin-left:auto}
}
@media (max-width:479px){
  .balk-acties .knop-klein{display:none}
}

.menupaneel{
  border:0;padding:0;max-width:440px;width:calc(100% - 32px);
  border-radius:20px;background:var(--wit);color:var(--lees);
  box-shadow:0 40px 90px -40px rgba(22,26,61,.5);
}
.menupaneel::backdrop{background:rgba(20,26,60,.5)}
.menupaneel-binnen{padding:24px}
.menupaneel-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.menupaneel-titel{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.menu-sluit{
  display:inline-flex;align-items:center;gap:8px;background:var(--wit);
  border:2px solid var(--rand-bediening);border-radius:10px;padding:8px 14px;cursor:pointer;
  font-family:var(--letter);font-size:14px;font-weight:600;color:var(--inkt);
}
.menu-sluit:hover,.menu-sluit:focus-visible{border-color:var(--blauw-diep)}
.menu-sluit-kruis{position:relative;width:12px;height:12px}
.menu-sluit-kruis::before,.menu-sluit-kruis::after{
  content:'';position:absolute;top:5px;left:0;width:12px;height:2px;background:var(--inkt);
}
.menu-sluit-kruis::before{transform:rotate(45deg)}
.menu-sluit-kruis::after{transform:rotate(-45deg)}
.menupaneel-lijst{display:grid;gap:2px}
.menupaneel-lijst a{
  display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;
  color:var(--inkt);text-decoration:none;font-weight:600;
}
.menupaneel-lijst a:hover,.menupaneel-lijst a:focus-visible{background:var(--blauw-licht)}
.menupaneel-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep)}
.menupaneel-voet{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

.paginanav{
  background:var(--papier);border-bottom:1px solid var(--rand);
  position:relative;z-index:30;
}
.paginanav-rij{
  width:100%;max-width:calc(1320px + var(--kant) * 2);margin:0 auto;
  padding:10px var(--kant);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.paginanav-titel{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lees);
}
.paginanav-lijst{display:flex;flex-wrap:wrap;gap:6px 18px}
.paginanav-lijst a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  color:var(--inkt);text-decoration:none;padding:4px 2px;
  border-bottom:2px solid transparent;
}
.paginanav-lijst a:hover,.paginanav-lijst a:focus-visible{border-bottom-color:var(--blauw)}
.paginanav-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep)}
@media (max-width:599px){ .paginanav{display:none} }

/* ===========================================================================
   DE VOET
   De enige donkere plek op de pagina. Zij hoort niet bij de hoofdinhoud.
   =========================================================================== */

.voet{background:var(--band);color:var(--band-zacht);padding:64px 0 28px}
.voet-raster{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media (max-width:1023px){ .voet-raster{grid-template-columns:1fr 1fr;gap:32px} }
@media (max-width:599px){ .voet-raster{grid-template-columns:1fr;gap:28px} }
.voet p{font-size:15px;margin-top:14px;max-width:38ch}
.voet-merk{display:flex;align-items:center;gap:10px}
.voet-merk-naam{font-weight:700;font-size:19px;color:#fff}
.voet .mono{color:#fff}
.voet-lijst{display:grid;gap:8px;margin-top:14px}
.voet-lijst a,.voet-site{color:var(--band-zacht);font-size:15px;text-decoration:none;border-bottom:1px solid transparent}
.voet-lijst a:hover,.voet-lijst a:focus-visible,.voet-site:hover,.voet-site:focus-visible{color:#fff;border-bottom-color:#fff}
.voet-site{display:inline-block;margin-top:16px;font-weight:600}
.voet-onder{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--band-rand);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  font-size:14px;justify-content:space-between;
}
.voet-juridisch{display:flex;flex-wrap:wrap;gap:18px}
.voet-juridisch a{color:var(--band-zacht);text-decoration:none;border-bottom:1px solid transparent}
.voet-juridisch a:hover,.voet-juridisch a:focus-visible{color:#fff;border-bottom-color:#fff}
.voet :focus-visible{outline-color:#fff}

.beweging-knop{
  background:transparent;border:2px solid rgba(255,255,255,.45);border-radius:10px;
  color:var(--band-zacht);font-family:var(--letter);font-size:14px;font-weight:600;
  padding:8px 14px;cursor:pointer;
}
.beweging-knop:hover,.beweging-knop:focus-visible{border-color:#fff;color:#fff}
.menupaneel .beweging-knop{border-color:var(--rand-bediening);color:var(--inkt)}
.menupaneel .beweging-knop:hover,.menupaneel .beweging-knop:focus-visible{border-color:var(--blauw-diep);color:var(--inkt)}

/* ===========================================================================
   DE OVERGANG TUSSEN TWEE PAGINA'S
   Sinds 22-09-2026, op verzoek van de eigenaar: "pagina's die perfect inladen
   met een smooth transition".

   WELK PROBLEEM DIT OPLOST
   Tussen twee pagina's gebeurde niets: een witte flits en je stond ergens
   anders. De browser kan zelf tussen twee documenten overvloeien. Er wordt
   daarvoor niets onderschept: de navigatie blijft een gewone navigatie en de
   nieuwe pagina staat er al; dit loopt erna.

   WAAROM HIER
   De overgang loopt alleen als BEIDE documenten de at-regel dragen. Elke
   pagina in versie 7 laadt dit bestand, dus hier staat hij één keer voor
   allemaal. Een browser die de regel niet kent slaat hem over en laadt de
   pagina gewoon; er is geen tussenstand waarin iets leeg blijft.

   HOE
   Een overvloeier van 220 milliseconden van de hele pagina. De kopbalk heeft
   een eigen naam en staat stil: hij is op elke pagina gelijk en staat altijd
   bovenaan, dus zijn oude beeld valt weg en het nieuwe staat er meteen. Zo
   leest het als één site die van inhoud wisselt. De naam kopbalk is dezelfde
   als in de oude publieke laag (landing-gedeeld.css), zodat ook een overgang
   van een oude naar een nieuwe pagina de kopbalk stil laat staan.

   BEWEGING IS EEN KEUZE
   De opt-in staat binnen prefers-reduced-motion: no-preference. Met de knop
   Beweging uit (data-beweging op html, al voor het schilderen gezet door het
   blokje in de kop) speelt er niets: de pseudo-elementen van de overgang
   hangen aan html, dus dezelfde kenmerkselector raakt ze. De vertrekkende
   pagina slaat de overgang dan bovendien helemaal over (ontwerp.js).
   =========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:220ms;animation-timing-function:ease}

  .balk{view-transition-name:kopbalk}
  ::view-transition-group(kopbalk),
  ::view-transition-new(kopbalk){animation:none}
  ::view-transition-old(kopbalk){display:none}
}
html[data-beweging="uit"]::view-transition-group(*),
html[data-beweging="uit"]::view-transition-old(*),
html[data-beweging="uit"]::view-transition-new(*){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}