/* =====================================================================
   BLS Sports - stijl-2026
   Vervangt style.css. Zelfde merk (Montserrat, #1976D2), andere houding.

   Waarom een vervanging en geen laag eroverheen: de oude stijl bouwde
   "premium" op door dingen te stapelen. De hero had vijf lagen onder de
   tekst (foto, veldtekening, gloed, waas, fotomarquee), elke kaart zweefde,
   elke kop had een blauw woord erin, en er liep een stippenrail langs de
   rand. Optellen leest als amateur. Weglaten en de rest kloppend maken
   leest als vakwerk.

   Huisregels van dit blad, in volgorde van hardheid:

   - Blauw betekent "hier kun je iets doen". Nooit blauw als versiering,
     nooit een blauw woord in een kop. Per beeldscherm hooguit een enkel
     cijfer in blauw, als dat cijfer het bewijs is.
   - Hierarchie komt uit grootte en gewicht, niet uit kleur.
   - Een foto is een foto. Hooguit een verloop eroverheen, gemeten, aan de
     kant waar tekst staat. Geen tekening, gloed en waas erbij.
   - Een schaduw heeft altijd verschuiving en zachte vervaging. Nooit een
     harde offset.
   - Ondergrens leesbare tekst is 12px. Alle tekst haalt 4,5:1, grote tekst
     3:1. Gemeten, niet geschat.
   - Elk zelfstandig bedienbaar element haalt 44px raakoppervlak. Een link
     midden in een lopende zin houdt de tekstregel heel; die uitzondering
     staat ook zo in WCAG 2.5.8 en is de enige die dit blad maakt.
   - Regellengte broodtekst blijft onder 75 tekens. Let op: in Montserrat is
     1ch gelijk aan 1,27 echte tekens, dus --maat staat op 55ch. Reken die
     eenheid nooit als een teken.
   - Een verticaal ritme, sitebreed. Secties beginnen en eindigen op
     dezelfde maat, ook als de inhoud verschilt.
   - Een bewuste beweging: de hero komt bij het laden omhoog. Verder niets
     dat vanzelf beweegt.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* -- merk -- */
  --blauw:#1976D2;          /* de enige accentkleur, alleen voor actie */
  --blauw-d:#1257A0;        /* aanraken; haalt 4,5:1 op wit als tekst */
  --blauw-l:#5AA4F2;        /* alleen op donkere grond */
  --blauw-vlak:#EAF2FC;

  /* -- inkt en papier -- */
  --inkt:#0B0E14;           /* tekst en de donkere secties */
  --inkt-2:#151A24;         /* vlak binnen donker */
  --inkt-3:#212936;         /* rand binnen donker */
  --wit:#fff;
  --papier:#F5F6F8;         /* de lichte sectiegrond */
  --rand:#E3E6EC;
  --rand-sterk:#CBD2DC;
  --muted:#535B6A;          /* 7,0:1 op wit, 6,7:1 op papier */
  --muted-d:#98A1B0;        /* 7,5:1 op inkt */
  --op-donker:#D5DAE3;      /* broodtekst op inkt, 12,6:1 */

  /* -- semantisch -- */
  --groen:#2E7D32;--groen-t:#256428;--groen-vlak:#E9F4EA;
  --amber-t:#8A5200;--amber-vlak:#FDF3E3;

  /* -- ruimte, een schaal, sitebreed -- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;

  /* -- vorm -- */
  --r-xs:4px;--r-sm:8px;--r:14px;--r-lg:20px;--r-pill:999px;
  --raak:44px; --kop-h:76px;
  --maxw:1200px;
  --maat:55ch;              /* 70 tekens; 1ch = 1,27 teken in Montserrat */

  /* -- schaduw: altijd verschuiving plus vervaging -- */
  --sh-1:0 1px 2px rgba(11,14,20,.06),0 1px 1px rgba(11,14,20,.04);
  --sh-2:0 4px 12px -2px rgba(11,14,20,.10),0 2px 4px -3px rgba(11,14,20,.06);
  --sh-3:0 18px 40px -14px rgba(11,14,20,.24),0 6px 14px -8px rgba(11,14,20,.10);

  /* -- type -- */
  --t-2xs:12px;--t-xs:13px;--t-sm:14px;--t-md:16px;--t-lg:18px;
  --t-xl:clamp(21px,2.2vw,26px);
  --t-2xl:clamp(26px,3.2vw,34px);
  --t-3xl:clamp(32px,4.6vw,46px);
  --t-4xl:clamp(38px,6.4vw,66px);
  --w-normaal:400;--w-nadruk:600;--w-titel:700;--w-display:800;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-press:110ms;--t-hover:200ms;--t-traag:520ms;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
     scroll-padding-top:calc(var(--kop-h) + var(--s-4))}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--wit);color:var(--inkt);
  font-size:var(--t-md);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
svg{flex:0 0 auto}
::selection{background:var(--blauw);color:#fff}

/* De browser zelf mee laten kleuren. Een lichte site met een donkere
   scrollbar en een blauw-oplichtend formulierveld valt uit het geheel. */
:root{color-scheme:light;accent-color:var(--blauw)}

:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:var(--r-xs)}
.donker :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
.header :focus-visible{outline-color:var(--blauw-l)}

/* Een alinea die los in een container hangt is broodtekst en houdt zich
   aan de maat. :where() houdt het gewicht op nul: elke regel met een naam
   wint hiervan, dus dit breekt geen enkele bestaande uitzondering. */
:where(.container) > p{max-width:var(--maat)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
@media (min-width:768px){.container{padding:0 var(--s-6)}}

.skiplink{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--inkt);color:#fff;padding:var(--s-3) var(--s-5);
  font-weight:var(--w-titel);font-size:var(--t-sm);border-radius:0 0 var(--r-sm) 0;
}
.skiplink:focus{left:0}

/* ===================== typografie =====================
   De kop draagt de hierarchie zelf. Het blauwe woord binnen een kop is
   overal weggehaald: <b> in een kop is nu gewoon nadruk in dezelfde
   kleur, iets zwaarder. Dat werkt in een kop van twee regels net zo goed
   en het houdt blauw beschikbaar voor de knop ernaast. */
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.022em;font-weight:var(--w-display)}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);letter-spacing:-.014em}
h4{font-size:var(--t-lg);letter-spacing:-.01em}
h1 b,h2 b,h1 strong,h2 strong{font-weight:var(--w-display);color:inherit}
h3 b,h3 strong{font-weight:var(--w-display)}

.display{font-weight:var(--w-display)}
.lead{
  color:var(--muted);font-size:var(--t-lg);line-height:1.6;
  max-width:var(--maat);margin-top:var(--s-4);
}
.donker .lead,.hero .lead,.page-hero .lead{color:var(--muted-d)}
p{max-width:var(--maat)}
p+p{margin-top:var(--s-4)}
.noot{font-size:var(--t-sm);color:var(--muted);line-height:1.55;max-width:var(--maat)}
.donker .noot{color:var(--muted-d)}

/* Een label boven of onder een blok. Kleinkapitaal met letterafstand,
   nooit in blauw en nooit als opstapje naar een kop erboven. */
.tag,.uit-tag,.stap-num,.toon-teller,.fbc-merkje{
  display:inline-block;font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.donker .tag,.donker .stap-num,.hero .tag{color:var(--muted-d)}

/* Een verwijzing binnen lopende tekst hoort herkenbaar te zijn zonder
   dat de kleur alleen het werk doet. */
.fbc-alinea a,.ov-blok-tekst a,.noot a,p a{
  color:var(--blauw-d);font-weight:var(--w-nadruk);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rand-sterk);
  transition:text-decoration-color var(--t-hover) var(--ease);
}
.fbc-alinea a:hover,.ov-blok-tekst a:hover,.noot a:hover,p a:hover{
  text-decoration-color:var(--blauw-d);
}
.donker p a,.donker .noot a{color:var(--blauw-l);text-decoration-color:var(--inkt-3)}
.donker p a:hover,.donker .noot a:hover{text-decoration-color:var(--blauw-l)}

/* De veeg onder een verwijzing in de navigatie en de voet. */
.link-veeg{position:relative;transition:color var(--t-hover) var(--ease)}
.link-veeg::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-hover) var(--ease);
}
.link-veeg:hover::after,.link-veeg:focus-visible::after{transform:scaleX(1)}

/* ===================== knoppen =====================
   Drie soorten, meer niet: gevuld (de enige plek waar blauw vlak is),
   omlijnd, en stil. Alle drie halen 44px. */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--raak);padding:var(--s-3) var(--s-6);
  background:var(--blauw);color:#fff;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:var(--w-titel);letter-spacing:.005em;
  white-space:nowrap;text-align:center;
  transition:background var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease),
             transform var(--t-press) var(--ease),
             border-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease);
}
.knop:hover{background:var(--blauw-d);box-shadow:var(--sh-2)}
.knop:active{transform:translateY(1px);box-shadow:none}
.knop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.knop-groot{min-height:52px;padding:var(--s-4) var(--s-7);font-size:var(--t-md)}

.knop-ghost{background:none;color:var(--inkt);border-color:var(--rand-sterk)}
.knop-ghost:hover{background:var(--papier);border-color:var(--inkt);box-shadow:none}
.donker .knop-ghost,.hero .knop-ghost,.page-hero .knop-ghost{
  color:#fff;border-color:rgba(255,255,255,.34);
}
.donker .knop-ghost:hover,.hero .knop-ghost:hover,.page-hero .knop-ghost:hover{
  background:rgba(255,255,255,.10);border-color:#fff;
}

/* Bedoeld voor een donkere grond. Binnen een witte kaart op een lichte
   sectie viel hij weg: wit op wit met alleen het opschrift. Daar krijgt hij
   nu een omtrek; op donker blijft hij precies zoals hij was. */
.knop-licht{background:#fff;color:var(--inkt);border-color:var(--rand-sterk)}
.knop-licht:hover{background:var(--papier);border-color:var(--inkt);box-shadow:none}
.donker .knop-licht,.hero .knop-licht,.page-hero .knop-licht{border-color:transparent}
.donker .knop-licht:hover,.hero .knop-licht:hover,.page-hero .knop-licht:hover{
  background:var(--papier);border-color:transparent;box-shadow:var(--sh-2);
}

/* "Binnenkort". Uitgeschakeld hoort er uitgeschakeld uit te zien en niet
   te reageren op de muis, anders belooft het iets dat niet kan. */
.knop-soon,.knop[aria-disabled="true"]{
  background:var(--papier);color:var(--muted);border-color:var(--rand);
  cursor:not-allowed;box-shadow:none;
}
.knop-soon:hover,.knop[aria-disabled="true"]:hover{
  background:var(--papier);box-shadow:none;
}

@media (prefers-reduced-motion:reduce){
  .knop:active{transform:none}
  html{scroll-behavior:auto}
}

/* ===================== kop van de pagina ===================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
/* Boven een donkere hero staat de kop op de foto en is hij zelf niets.
   Zodra je scrolt wordt hij een echte balk. Geen pil in een balk: de
   balk is de vorm, de verwijzingen staan er los in. */
.header.scrolled{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--rand);box-shadow:var(--sh-1);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--s-4) var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}
@media (min-width:768px){.header-inner{padding:var(--s-4) var(--s-6)}}
.brand{display:flex;align-items:center;min-height:var(--raak)}
.brand img,.brand svg{
  height:38px;width:auto;
  transition:filter var(--t-hover) var(--ease);
}
/* Het logo is donker en de kop staat op elke pagina bovenop een donkere
   hero. Zolang de balk doorzichtig is keert het merkteken om naar wit;
   zodra de witte balk verschijnt komt het originele terug. Dat vraagt geen
   tweede bestand en houdt de twee versies dus per definitie gelijk. */
.header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}

.hoofdnav{display:none}
@media (min-width:1000px){
  .hoofdnav{display:flex;align-items:center;gap:var(--s-6)}
}
.hoofdnav a{
  display:inline-flex;align-items:center;min-height:var(--raak);
  font-size:var(--t-sm);font-weight:var(--w-nadruk);color:#fff;
  transition:color var(--t-hover) var(--ease);
}
.header.scrolled .hoofdnav a{color:var(--inkt)}
.hoofdnav a:hover{color:#fff}
.header.scrolled .hoofdnav a:hover{color:var(--blauw-d)}

/* De actieve pagina. Een lijntje eronder, niet een witte pil eromheen:
   een pil leest als knop en dit is geen knop maar een plaatsaanduiding. */
.hoofdnav a.actief{position:relative;font-weight:var(--w-titel)}
.hoofdnav a.actief::after{
  content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;
  background:currentColor;border-radius:1px;
}
/* FBC is een ander merk dan de rest van deze navigatie. Dat verschil is
   een scheiding, geen accent, dus het wordt een streepje en geen blauwe
   stip. Blauw blijft voorbehouden aan dingen waar je op kunt drukken. */
.fbc-nav{position:relative;margin-left:var(--s-2);padding-left:var(--s-5)}
.fbc-nav::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(255,255,255,.28);
}
.header.scrolled .fbc-nav::before{background:var(--rand-sterk)}

.header-acties{display:flex;align-items:center;gap:var(--s-3)}
.taal{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--raak);min-height:var(--raak);padding:0 var(--s-3);
  border:1px solid rgba(255,255,255,.30);border-radius:var(--r-pill);
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.06em;
  color:#fff;transition:background var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.taal:hover{background:rgba(255,255,255,.12);border-color:#fff}
.header.scrolled .taal{color:var(--inkt);border-color:var(--rand-sterk)}
.header.scrolled .taal:hover{background:var(--papier);border-color:var(--inkt)}

.portaal{
  display:none;align-items:center;min-height:var(--raak);padding:0 var(--s-3);
  font-size:var(--t-sm);font-weight:var(--w-nadruk);color:#fff;
}
@media (min-width:1000px){.portaal{display:inline-flex}}
.header.scrolled .portaal{color:var(--inkt)}

.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--raak);height:var(--raak);border-radius:var(--r-sm);color:#fff;
  transition:background var(--t-hover) var(--ease);
}
.menu-toggle:hover{background:rgba(255,255,255,.12)}
.header.scrolled .menu-toggle{color:var(--inkt)}
.header.scrolled .menu-toggle:hover{background:var(--papier)}
.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
@media (min-width:1000px){.menu-toggle{display:none}}

/* Het menu op smal. Volledig scherm, grote raakvlakken, en het sluit met
   een knop die zelf ook 44px haalt. */
.mobiel-menu{
  position:fixed;inset:0;z-index:300;background:var(--inkt);
  display:flex;flex-direction:column;padding:var(--s-5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease),
             visibility 0s linear var(--t-hover);
}
.mobiel-menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mobiel-sluit{
  align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;
  width:var(--raak);height:var(--raak);border-radius:var(--r-sm);color:#fff;
}
.mobiel-sluit:hover{background:var(--inkt-2)}
.mobiel-sluit svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.mobiel-menu a{
  display:flex;align-items:center;min-height:56px;
  color:#fff;font-size:var(--t-xl);font-weight:var(--w-titel);
  letter-spacing:-.014em;border-bottom:1px solid var(--inkt-3);
}
.mobiel-menu a:last-of-type{border-bottom:none}
.mobiel-menu .mobiel-cta{margin-top:auto;padding-top:var(--s-5);display:grid;gap:var(--s-3)}
.mobiel-menu .mobiel-cta a{
  min-height:var(--raak);font-size:var(--t-sm);border-bottom:none;
  justify-content:center;
}
/* De losse aanmeldbalk onderaan elke pagina. Hij pakte de menuopmaak
   hierboven en stond daardoor als volle balk onder de voet, op elke
   breedte. Hij blijft uit: op een telefoon draagt de kop zelf al een
   vaste Aanmelden-knop, dus dit was dezelfde oproep twee keer in beeld. */
.mobiel-cta{display:none}

/* ===================== hero =====================
   Een laag: de foto. Daarboven een verloop dat aan de tekstkant dekkend
   begint. Het verloop is gemeten: de lichtste tekst staat op minimaal
   4,5:1 tegen het donkerste punt van de foto eronder. De veldtekening,
   de gloed en de fotomarquee zijn weg. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(90vh,840px);display:flex;align-items:flex-end;
  padding:calc(var(--s-10) + var(--s-6)) 0 var(--s-8);
  background:var(--inkt);overflow:hidden;
}
.hero>.container,.page-hero>.container,.ov-hero>.container{width:100%}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* De foto is textuur, geen onderwerp. Op volle sterkte vocht hij met de kop
   om aandacht en won geen van beide. */
.hero .hero-bg{opacity:.46}
/* Vier gestapelde verlopen hieven elkaar grotendeels op: van rechtsboven
   blauw, van linksonder blauw, en er overheen twee zwarte lagen. Nu een
   lichtbron, laag links, achter de speler. Zwart is de grond, blauw is het
   enige licht, en het staat waar de kop staat. */
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(56% 48% at 17% 96%,rgba(25,118,210,.36) 0%,
                    rgba(25,118,210,.09) 48%,transparent 72%),
    linear-gradient(94deg,rgba(11,14,20,.96) 0%,rgba(11,14,20,.92) 44%,
                    rgba(11,14,20,.80) 74%,rgba(11,14,20,.72) 100%),
    linear-gradient(to top,rgba(11,14,20,.88) 0%,rgba(11,14,20,0) 44%);
}
/* De lichtbron ademt. Achttien seconden heen en terug, tien procent schaal:
   je ziet het niet gebeuren, je merkt alleen dat het beeld leeft. */
.hero-overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 38% at 22% 90%,rgba(90,164,242,.26) 0%,transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
  .hero-overlay::after{
    animation:ademen 18s var(--ease) infinite alternate;will-change:transform,opacity;
  }
}
@keyframes ademen{
  from{transform:scale(.92);opacity:.5}
  to{transform:scale(1.08);opacity:1}
}
/* De oude decoratielagen bestaan nog in de opmaak van sommige pagina's.
   Ze horen niet in dit ontwerp thuis. */
.hero-pitch,.hero-glow,.foto-banner,.scroll-hint,.dotnav{display:none}

.hero-grid{position:relative;display:grid;gap:var(--s-8)}
@media (min-width:1000px){
  /* De foto liep over de onderrand het beeld uit. Dat leest niet als een
     keuze maar als een afgesneden foto: de speler loopt tegen de rand aan en
     je mist zijn voeten. Hij hangt nu boven de onderrand, met ruimte eronder.
     De ruimte zit op de hero zelf en niet meer op de tekstkolom, zodat tekst
     en foto op dezelfde lijn eindigen en er onder allebei evenveel lucht is. */
  .hero{padding-bottom:var(--s-9)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:var(--s-8);align-items:end}
  .hero-inner{padding-bottom:0}
}
.hero h1{color:#fff;max-width:15ch}
.hero .lead{max-width:44ch}

/* Een primaire actie. Er stonden twee even grote knoppen naast elkaar, dus
   koos de pagina niet en de bezoeker ook niet. */
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.hero-ctas .knop{flex:1 1 auto;min-width:180px}
@media (min-width:560px){.hero-ctas .knop{flex:0 0 auto;min-width:0}}
/* Onder 560px stonden er twee even brede knoppen boven elkaar: dezelfde
   maat, hetzelfde gewicht, dus opnieuw geen keuze. De tweede is nu een
   stille verwijzing; het raakvlak van 44px blijft staan. */
@media (max-width:559px){
  .hero-ctas{flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .hero .hero-ctas .knop-ghost{
    background:none;border-color:transparent;box-shadow:none;
    text-decoration:underline;text-underline-offset:6px;
    text-decoration-color:rgba(255,255,255,.42);
  }
  .hero .hero-ctas .knop-ghost:hover{
    background:none;border-color:transparent;text-decoration-color:#fff;
  }
}

/* De feitenband. Drie cijfers, gescheiden door een lijn en niet door een
   punt. Een van de drie mag blauw zijn; dat is het cijfer dat telt. */
.hero-feiten,.feitenband,.feiten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-5);margin-top:var(--s-8);
  padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.20);
}
.hero-feit,.feit,.feit-item{display:flex;flex-direction:column;gap:var(--s-1)}
/* Onder de 700px passen er twee naast elkaar en valt de derde eronder. Zo'n
   weesregel leest als een fout. Dan liever een kolom waarin cijfer en label
   op een regel staan: even hoog per feit, en samen lager dan de 2+1. */
@media (max-width:699px){
  .hero-feiten,.feitenband,.feiten{grid-template-columns:1fr;gap:var(--s-3)}
  /* Cijfer en label op een regel, maar de labels moeten onder elkaar
     beginnen. Met een rij per feit begon "VASTE GROEPSTRAINING" tachtig
     pixels verder naar rechts dan "TRAININGSVORMEN", simpelweg omdat
     "Zondag" breder is dan "4". Nu vormen alle zes de delen samen een
     raster van twee kolommen: de eerste kolom neemt de maat van het
     breedste cijfer en de labels lijnen wel uit. */
  .hero-feiten{
    grid-template-columns:auto minmax(0,1fr);align-items:baseline;
    column-gap:var(--s-4);row-gap:var(--s-3);
  }
  .hero-feit{display:contents}
  .feit{flex-direction:row;align-items:baseline;gap:var(--s-3)}
}
.hero-feit .n,.feit .n,.feit-item .n,.feit strong{
  font-size:var(--t-2xl);font-weight:var(--w-display);color:#fff;
  line-height:1.05;letter-spacing:-.028em;font-variant-numeric:tabular-nums;
}
.hero-feit:first-child .n{color:var(--blauw-l)}
.hero-feit .l,.feit .l,.feit-item .l,.feit span{
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-d);
}

/* De contactband onderaan de thuispagina deelde de selector met de feitenband
   in de hero. Op een lichte sectie betekende dat een witte scheidingslijn op
   papier (onzichtbaar) en h3 plus p zonder enkele regel: de losse iconen in
   die koppen kregen daardoor geen maat en renderden 556 bij 556 pixels zwart.
   De iconen zijn eruit, want naast het woord E-mail voegt een envelop niets
   toe. Deze band is een adresblok, geen cijferband. */
.sectie.licht .feitenband,.sectie:not(.donker) .feitenband{
  border-top-color:var(--rand);margin-top:var(--s-9);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-6);
}
.feitenband .feit-item h3{
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2);
}
.donker .feitenband .feit-item h3{color:var(--muted-d)}
.feitenband .feit-item p{
  font-size:var(--t-md);line-height:1.5;font-weight:var(--w-normaal);
}
.feitenband .feit-item p a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--rand);padding-bottom:1px}
.feitenband .feit-item p a:hover{border-bottom-color:var(--blauw)}

/* De rechterkolom op breed. Geen slagschaduw en geen zwevend kaartje midden
   in de band; hij staat onderaan uitgelijnd met de tekst ernaast. Wel vier
   ronde hoeken: een foto die met rechte hoeken tegen de onderrand eindigt
   leest als een fout in de uitsnede. */
.hero-beeld{display:none}
@media (min-width:1000px){
  .hero-beeld{
    display:block;margin:0;align-self:end;aspect-ratio:4/5;
    overflow:hidden;box-shadow:none;
    border-radius:var(--r-lg);
  }
  .hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
}

/* Een bewuste beweging: de hero komt bij het laden omhoog, in drie
   stappen. Verder beweegt er niets vanzelf op deze site. */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero-ctas,.hero-feiten,
  .page-hero h1,.page-hero p,.ov-hero h1,.ov-hero p{
    animation:opkomst var(--t-traag) var(--ease) both;
  }
  .hero .lead{animation-delay:70ms}
  .hero-ctas{animation-delay:140ms}
  .hero-feiten{animation-delay:210ms}
  .page-hero p,.ov-hero p{animation-delay:90ms}
  /* De foto schuift heel traag door zijn kader. Vierendertig seconden heen
     en terug: je ziet het pas als je even blijft kijken. Alleen transform,
     dus de compositor doet het werk en de pagina zelf blijft stil. */
  .hero-bg img{animation:beelddrift 34s var(--ease) infinite alternate;will-change:transform}
}
@keyframes opkomst{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes beelddrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(-1.6%,-1.4%,0)}
}

/* De kop van een binnenpagina spreekt nu dezelfde taal als de hero: een
   foto, een gemeten waas, tekst op de onderrand en op dezelfde marge als
   de tekst eronder. Hij stond eerst gecentreerd op een lege zwarte balk,
   met een verloop dat een foto afdekte die er niet eens was. */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--inkt);
  min-height:min(64vh,560px);display:flex;align-items:flex-end;
  padding:calc(var(--s-10) + var(--s-5)) 0 var(--s-9);
}
.page-hero .hero-bg{opacity:.56}
/* De lichtbron van de thuispagina staat op 96% hoogte, gemeten op een band
   van 840px. Op een kop van 560px valt hij precies op de snijlijn met de
   witte sectie eronder en leest hij als een blauwe veeg die iemand vergeten
   is af te maken. Hier staat hij hoger en dooft hij uit voor de onderrand. */
.page-hero .hero-overlay,.ov-hero .hero-overlay{
  background:
    radial-gradient(48% 60% at 12% 72%,rgba(25,118,210,.34) 0%,
                    rgba(25,118,210,.08) 46%,transparent 70%),
    linear-gradient(94deg,rgba(11,14,20,.94) 0%,rgba(11,14,20,.90) 46%,
                    rgba(11,14,20,.80) 76%,rgba(11,14,20,.74) 100%),
    linear-gradient(to top,rgba(11,14,20,.86) 0%,rgba(11,14,20,0) 52%);
}
.page-hero .hero-overlay::after,.ov-hero .hero-overlay::after{
  background:radial-gradient(36% 46% at 16% 68%,rgba(90,164,242,.24) 0%,transparent 70%);
}
.page-hero .hero-bg img{object-position:center 34%}
.page-hero .hero-bg-kop img{object-position:center 12%}
.page-hero h1{color:#fff;max-width:17ch}
.page-hero p{margin-top:var(--s-5);max-width:56ch;color:var(--op-donker);
  font-size:var(--t-lg);line-height:1.6}

/* De kop van over-ons staat links: daaronder begint lange leestekst en
   die start op dezelfde marge. */
.ov-hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--inkt);
  min-height:min(64vh,560px);display:flex;align-items:flex-end;
  padding:calc(var(--s-10) + var(--s-5)) 0 var(--s-9);
}
/* dwight-fbc.jpg is staand 1080x1350. Over een band van 1440x560 rendert die
   exact 1440 breed: er is geen horizontale speling, dus object-position kan
   Dwight niet onder de kop vandaan halen en 69% van de foto viel weg. Nu een
   tweedeling: tekst links op de donkere grond, portret rechts op ware
   verhouding. Het portret liep eerst tot precies op de onderrand van de
   hero en plakte daarmee aan de volgende sectie; nu hangt het erboven met
   48px lucht en is het rondom afgerond. */
.ov-hero{padding-bottom:0}
.ov-hero h1{color:#fff;max-width:15ch}
.ov-hero p{margin-top:var(--s-5);max-width:var(--maat);color:var(--op-donker);
  font-size:var(--t-lg);line-height:1.6}
.ov-hero-in{display:grid;gap:var(--s-7);align-items:end;padding-bottom:var(--s-9)}
.ov-hero-portret{margin:0;display:none}
@media (min-width:1000px){
  .ov-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.46fr);padding-bottom:0}
  .ov-hero-tekst{padding-bottom:var(--s-9)}
  .ov-hero-portret{
    display:block;align-self:end;aspect-ratio:4/5;overflow:hidden;
    border-radius:var(--r-lg);margin-bottom:var(--s-7);
  }
  .ov-hero-portret img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
}

/* ===================== sectie en ritme =====================
   Een maat voor alle secties. De oude site zette dit per sectie met de
   hand en dat is precies waarom de witruimte willekeurig aanvoelde. */
section{position:relative}
.sectie{padding:var(--s-9) 0}
@media (min-width:768px){.sectie{padding:var(--s-10) 0}}
.sectie.licht{background:var(--papier)}
.sectie.donker{
  background:var(--inkt);color:var(--op-donker);
  position:relative;isolation:isolate;overflow:hidden;
}
/* Geen gloed meer op de zwarte secties. De radiale vlek rechtsboven las als
   een vlek op het scherm in plaats van als licht; zwart blijft nu zwart. */
.sectie.donker h1,.sectie.donker h2,.sectie.donker h3,.sectie.donker h4{color:#fff}

.sectie-kop{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5);margin-bottom:var(--s-7);
}
.titelblok{max-width:56ch}
.sectie-kop .knop{flex:0 0 auto}

/* Een streep tussen twee blokken binnen een sectie. */
.vlak{padding:var(--s-7) 0;border-top:1px solid var(--rand)}
.donker .vlak{border-top-color:var(--inkt-3)}
.vlak:first-child{padding-top:0;border-top:none}

/* ===================== kaart, een bouwsteen =====================
   Een vorm voor alle kaarten op de site. De oude site had per sectie een
   eigen kaart: andere ronding, andere schaduw, andere rand. Daar komt
   "amateuristisch" vandaan, meer nog dan uit kleur. */
.kaart,.prijs-kaart,.methode-item,.rooster-kaart,.locatie-kaart,
.groei,.stap,.ov-kenmerk,.ov-schakel,.staffel-kaart{
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  box-shadow:var(--sh-1);
}
.donker .kaart,.donker .methode-item,.donker .ov-kenmerk,.donker .ov-schakel,
.donker .stap,.donker .staffel-kaart,.donker .groei,.donker .prijs-kaart,
.donker .rooster-kaart,.donker .locatie-kaart{
  background:var(--inkt-2);border-color:var(--inkt-3);box-shadow:none;
}
/* Wat op wit vanzelf goed stond en op zwart niet: papieren vlakken, de
   valse browserchrome en de lijsten om de foto's. */
.donker .groei-foto img,.donker .foto,.donker .veld-foto{background:var(--inkt-2)}
.donker .groei.licht .groei-foto img{background:var(--papier)}
.donker .toon-kaart{background:var(--inkt-2);border-color:var(--inkt-3)}
.donker .frame-top{background:var(--inkt);border-bottom-color:var(--inkt-3)}
.donker .frame-top::before{
  background:var(--inkt-3);box-shadow:13px 0 0 var(--inkt-3),26px 0 0 var(--inkt-3);
}
.donker .frame-url{background:var(--inkt-2);border-color:var(--inkt-3);color:var(--muted-d)}
.donker .rooster-rij{border-top-color:var(--inkt-3)}
.donker .rooster-rij .tijd{color:var(--muted-d)}
.donker .groei-tekst p,.donker .groei-tekst blockquote{color:var(--op-donker)}
.donker .ph{background:var(--inkt-2);border-color:var(--inkt-3)}
.donker .ph-in{color:var(--muted-d)}

/* De oude spot- en edge-effecten (een gloed die de muis volgt, een
   oplichtende rand) zijn uit. Ze zaten op tweeentwintig elementen en
   maakten van elke kaart een lichtbron. */
.spot,.edge,.edge-anim,.hv-rim{background-image:none}
.spot::before,.spot::after,.edge::before,.edge::after,.hv-rim::before{display:none}

/* ===================== teaser: tekst naast beeld ===================== */
.teaser{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:900px){
  .teaser{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8)}
  .teaser:has(.laptop){grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .teaser.omgekeerd>*:first-child,.teaser.gespiegeld>*:first-child{order:2}
}
.teaser-beeld,.teaser-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.teaser-beeld:has(.laptop){border-radius:0;overflow:visible;box-shadow:none;background:none}
.teaser-beeld img,.teaser-media img{width:100%;height:100%;object-fit:cover;display:block}
.teaser .knop{margin-top:var(--s-6)}

.mini-lijst{list-style:none;margin-top:var(--s-6);display:grid;gap:var(--s-3)}
.mini-lijst li,.mini li{
  position:relative;padding-left:calc(var(--s-3) + 6px);
  font-size:var(--t-md);line-height:1.55;color:var(--muted);max-width:var(--maat);
}
.donker .mini-lijst li,.donker .mini li{color:var(--op-donker)}
.mini-lijst li::before,.mini li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--rand-sterk);
}
.donker .mini-lijst li::before,.donker .mini li::before{background:var(--inkt-3)}

/* Het laptopscherm met de portaalvideo. Rand en scherm, geen glans. */
/* Een laptop, geen afgeronde doos: een dunne bezel om het scherm, een
   camerastip boven, een scharnierstreep onder en een taps voetstuk dat
   breder is dan het scherm. Het beeld zelf krijgt bijna alle ruimte. */
.laptop{
  display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 26px 44px rgba(11,14,20,.30));
}
.laptop-scherm{
  position:relative;width:96%;aspect-ratio:16/10;
  background:var(--inkt);border:1px solid var(--inkt-3);
  border-radius:12px 12px 3px 3px;padding:9px 9px 15px;
}
.laptop-scherm::before{
  content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--inkt-3);
}
.laptop-scherm::after{
  content:'';position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:46px;height:3px;border-radius:2px;background:var(--inkt-3);
}
.laptop-video{width:100%;height:100%;overflow:hidden;border-radius:2px;background:var(--inkt-2)}
.laptop-scherm video,.laptop-video video{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
}
/* Het voetstuk stak op 112% van het scherm buiten de kolom: bij 768px liep
   de pagina daardoor tien pixels breder dan het venster en kwam er een
   horizontale schuifbalk. Nu is de voet de buitenmaat en staat het scherm
   erbinnen; dat is ook hoe een laptop in het echt in elkaar zit. */
.laptop-voet{
  width:100%;height:11px;border-radius:0 0 11px 11px;
  background:linear-gradient(to bottom,var(--inkt-3) 0%,var(--inkt-2) 58%,var(--inkt) 100%);
}

/* ===================== prijzen =====================
   Drie gelijkwaardige keuzes, dus drie gelijke kaarten. De uitgelichte is
   niet zwart en niet groter; hij heeft een rand in de accentkleur en een
   label bovenin de kaart. Dat label hing eerst half buiten de hoek. */
.prijs-grid{display:grid;gap:var(--s-5);align-items:stretch}
@media (min-width:820px){.prijs-grid{grid-template-columns:repeat(3,1fr)}}
.prijs-kaart{
  display:flex;flex-direction:column;padding:var(--s-6);
  transition:box-shadow var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.prijs-kaart:hover{box-shadow:var(--sh-2)}
.prijs-kaart.uitgelicht{border-color:var(--blauw);box-shadow:var(--sh-2)}
.prijs-badge{
  align-self:flex-start;margin-bottom:var(--s-4);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);
  background:var(--blauw-vlak);color:var(--blauw-d);
  font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.07em;text-transform:uppercase;
}
/* Zonder label begint de kaart toch op dezelfde hoogte als een kaart met
   label. De reservering hangt aan het label zelf, niet aan .uitgelicht: bij
   de creditbundels heeft een niet-uitgelichte kaart er ook een, en die
   kreeg zo reservering plus label en stond 43px lager dan zijn buren. */
@media (min-width:820px){
  .prijs-kaart:not(:has(.prijs-badge))::before{
    content:"";display:block;height:27px;margin-bottom:var(--s-4);
  }
}
.prijs-kaart h3{font-size:var(--t-lg);margin-bottom:var(--s-1)}
.prijs-kaart .sub{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s-4)}
.prijs{
  font-size:var(--t-2xl);font-weight:var(--w-display);letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.prijs small{font-size:var(--t-sm);font-weight:var(--w-nadruk);color:var(--muted);letter-spacing:0}
.prijs-kaart .noot{margin-top:var(--s-1);font-size:var(--t-xs);color:var(--muted)}
.prijs-kaart ul{
  list-style:none;margin:var(--s-5) 0 var(--s-6);display:grid;gap:var(--s-3);
  border-top:1px solid var(--rand);padding-top:var(--s-5);
}
.prijs-kaart li{
  position:relative;padding-left:var(--s-6);
  font-size:var(--t-sm);line-height:1.5;color:var(--muted);
}
.prijs-kaart li::before{
  content:"";position:absolute;left:2px;top:.30em;width:12px;height:7px;
  border-left:2px solid var(--groen);border-bottom:2px solid var(--groen);
  transform:rotate(-45deg);
}
.prijs-kaart .knop{margin-top:auto;width:100%}

/* De prijsminiatuur op de thuispagina. */
.prijs-mini{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
@media (min-width:560px){.prijs-mini{grid-template-columns:repeat(3,1fr)}}
.prijs-chip{padding:var(--s-4);border:1px solid var(--rand);border-radius:var(--r-sm);background:var(--wit)}
.donker .prijs-chip{background:var(--inkt-2);border-color:var(--inkt-3)}
.prijs-chip.uit{border-color:var(--blauw)}
.prijs-chip .k,.uit-tag{
  display:block;font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.donker .prijs-chip .k{color:var(--muted-d)}
.uit-tag{color:var(--blauw-d);margin-bottom:var(--s-2)}
.donker .uit-tag{color:var(--blauw-l)}
.prijs-chip .v,.prijs-chip .p{
  display:block;margin-top:var(--s-2);font-size:var(--t-lg);
  font-weight:var(--w-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.prijs-mini-noot{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--muted);max-width:var(--maat)}
.donker .prijs-mini-noot{color:var(--muted-d)}

/* De staffel met creditbundels: zelfde kaart, drie kolommen. */
.staffel-grid{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
@media (min-width:820px){.staffel-grid{grid-template-columns:repeat(3,1fr)}}
.staffel-kaart{padding:var(--s-6);display:flex;flex-direction:column}
.staffel-kaart .knop{margin-top:auto;width:100%}

/* ===================== losse blokken ===================== */
.abo-noot{
  display:flex;gap:var(--s-5);align-items:flex-start;
  margin-top:var(--s-7);padding:var(--s-6);
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
}
.abo-noot svg{
  width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--muted);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.abo-noot h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.abo-noot p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:var(--maat)}
.abo-prijs{font-weight:var(--w-titel);color:var(--inkt)}

/* De proefband. Een uitnodiging, dus de enige plek buiten de knoppen waar
   het blauwe vlak groot mag zijn. */
.proef-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-6);margin-top:var(--s-7);padding:var(--s-7);
  background:var(--blauw);color:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.proef-tekst{max-width:var(--maat)}
.proef-band h3{color:#fff;margin-bottom:var(--s-2)}
.proef-band h3 b{color:#fff}
.proef-band p{color:rgba(255,255,255,.90);font-size:var(--t-sm);line-height:1.6;max-width:var(--maat)}
.proef-band .knop,.proef-band .knop-cta{
  background:#fff;color:var(--blauw-d);border-color:transparent;flex:0 0 auto;
}
.proef-band .knop:hover{background:var(--papier);color:var(--blauw-d)}

/* ===================== methode-onderdelen ===================== */
.methode-layout{display:grid;gap:var(--s-7)}
@media (min-width:960px){
  .methode-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:var(--s-8)}
}
.methode-beeld{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.methode-beeld img{width:100%;display:block}
.methode-lijst{list-style:none;display:grid;gap:var(--s-4)}
@media (min-width:640px){.methode-lijst{grid-template-columns:repeat(2,1fr)}}
.methode-item{padding:var(--s-5)}
.methode-item h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.methode-item p{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.donker .methode-item p{color:var(--op-donker)}

/* De trainer. De papieren stonden als doorlopende alinea onder de feiten:
   vijf opleidingen achter elkaar met puntkomma's, dus niets viel te
   scannen. Nu als lijst naast het portretverhaal, waar ze horen. */
.trainer-kop{display:grid;gap:var(--s-6);margin-bottom:var(--s-7)}
@media (min-width:900px){
  .trainer-kop{
    grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    gap:var(--s-8);align-items:start;
  }
  .diplomas{padding-left:var(--s-8);border-left:1px solid var(--inkt-3)}
}
.diplomas h3{
  font-size:var(--t-xs);font-weight:var(--w-nadruk);
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:var(--s-5);
}
.sectie.donker .diplomas h3{color:var(--muted-d)}
.diplomas ul{list-style:none;display:grid;gap:var(--s-4)}
.diplomas li{
  position:relative;padding-left:var(--s-5);
  font-size:var(--t-sm);line-height:1.55;color:var(--op-donker);
}
/* Een punt, geen streepje: streepjes lezen als en-dashes en die willen we
   nergens in beeld. */
.diplomas li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--blauw);
}
.diplomas li b{color:#fff;font-weight:var(--w-titel)}

/* De kenmerken van de methode. Dit blok stond op column-reverse met selectors
   .k/.v/.t/.sub die nergens op matchen: de opmaak is h3 plus p, dus elke
   alinea kwam boven zijn eigen kop en kreeg kop noch tekst typografie. */
.ov-kenmerken{
  display:grid;gap:var(--s-6) var(--s-8);margin-top:var(--s-8);
  padding-top:var(--s-7);border-top:1px solid var(--rand);
}
.donker .ov-kenmerken{border-top-color:var(--inkt-3)}
/* Twee kolommen, niet vier. Vier kolommen binnen de leesmaat gaven kolommen
   van 137 tot 203 pixels: twaalf tekens per regel. Het vijfde kenmerk is
   langer dan de rest en loopt over de volle breedte, zodat er geen weesvak
   naast blijft staan. */
@media (min-width:900px){
  .ov-kenmerken{grid-template-columns:1fr 1fr}
  .ov-kenmerk.breed{grid-column:1 / -1}
}
/* Blijft een kaart: .donker .ov-kenmerk staat op (0,2,0) en wint sowieso van
   een background:none op (0,1,0). Dan liever een kaart die klopt, met padding
   aan alle kanten in plaats van tekst tegen de rand. */
.ov-kenmerk{padding:var(--s-5)}
.ov-kenmerk h3{
  font-size:var(--t-md);font-weight:var(--w-titel);line-height:1.3;
  letter-spacing:-.01em;margin-bottom:var(--s-2);
}
.donker .ov-kenmerk h3{color:#fff}
.ov-kenmerk p{
  font-size:var(--t-sm);line-height:1.62;color:var(--muted);
  font-weight:var(--w-normaal);max-width:52ch;
}
.donker .ov-kenmerk p{color:var(--op-donker)}
/* Het vijfde kenmerk loopt over de volle breedte. Met een leesmaat van 52ch
   bleef de rechterhelft leeg; kop links en tekst rechts vult de kaart wel. */
@media (min-width:900px){
  .ov-kenmerk.breed{
    display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
    gap:var(--s-6);align-items:start;
  }
  .ov-kenmerk.breed h3{margin-bottom:0}
  .ov-kenmerk.breed p{max-width:62ch}
}

/* De stappen. Het nummer is een label, geen versiering: klein en grijs,
   boven de kop. */
.stappen-grid{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media (min-width:820px){.stappen-grid{grid-template-columns:repeat(3,1fr)}}
.stap{padding:var(--s-6)}
.stap-num{
  display:block;margin-bottom:var(--s-3);
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;
}
.donker .stap-num{color:var(--muted-d)}
.stap h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.stap p{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.donker .stap p{color:var(--op-donker)}

/* Rooster en locatie. */
.rooster-grid{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
@media (min-width:820px){.rooster-grid{grid-template-columns:repeat(2,1fr)}}
.rooster-kaart,.locatie-kaart{padding:var(--s-6)}
.rooster-kaart h3,.locatie-kaart h3{font-size:var(--t-lg);margin-bottom:var(--s-4)}
.rooster-rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) 0;border-top:1px solid var(--rand);font-size:var(--t-sm);
}
.rooster-rij:first-of-type{border-top:none;padding-top:0}
.rooster-rij .dag{font-weight:var(--w-titel)}
.rooster-rij .tijd{color:var(--muted);font-variant-numeric:tabular-nums}
.veld-foto{margin-top:var(--s-4);border-radius:var(--r-sm);overflow:hidden;position:relative}
.veld-foto img{width:100%;height:auto;display:block}
/* Het onderschrift stond zonder enkele regel onder de foto, in de
   standaardstijl van de browser. Het hoort op het beeld, want het benoemt
   wat je ziet. */
.veld-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-7) var(--s-5) var(--s-4);
  color:#fff;font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(11,14,20,.82) 0%,rgba(11,14,20,0) 100%);
}

/* ===================== portaalshow op de thuispagina =====================
   Vijf schermen die elkaar aflossen. De rail en de tellers blijven; de
   plank, de spiegeling en de gestapelde vensters zijn weg. Het portaal
   verkoopt zichzelf met een scherm, niet met een decorstuk. */
.toon{margin-top:var(--s-7)}
.toon-bedien{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-5)}
.toon-teller{
  font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums;
  margin-right:var(--s-3);
}
.donker .toon-teller{color:var(--muted-d)}
.toon-naam{
  display:inline-flex;align-items:center;min-height:var(--raak);padding:0 var(--s-4);
  border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:var(--w-nadruk);
  color:var(--muted);border:none;background:none;cursor:pointer;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.toon-naam:hover{background:var(--papier);color:var(--inkt)}
.donker .toon-naam{color:var(--muted-d)}
.donker .toon-naam:hover{background:var(--inkt-2);color:#fff}
.toon-naam.actief{background:var(--blauw-vlak);color:var(--blauw-d);font-weight:var(--w-titel)}
.donker .toon-naam.actief{background:rgba(25,118,210,.18);color:var(--blauw-l)}
.toon-volgende{margin-left:auto}
.toon-rail{position:relative}
/* site.js zet data-actief als attribuut, niet als klasse. Stond hier op
   .actief, en daardoor bleef elk tekstblok verborgen en viel de stapel uit
   elkaar: vijf schermen los onder elkaar, 5622px hoog. */
.toon-blokken{display:grid;margin-top:var(--s-5)}
.toon-blok{
  grid-area:1/1;max-width:var(--maat);opacity:0;transform:translateY(10px);
  pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.toon-blok[data-actief]{opacity:1;transform:none;pointer-events:auto}
.toon-blok h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.toon-blok p{font-size:var(--t-sm);line-height:1.62;color:var(--muted);margin:0}
.donker .toon-blok p{color:var(--muted-d)}
/* De stapel: het actieve scherm vooraan, de rest getrapt erachter en iets
   uitgebleekt. --p telt op vanaf het actieve scherm en komt uit site.js. */
.toon-stapel{
  --dx:14px;--dy:11px;position:relative;background:none;box-shadow:none;
  margin-top:var(--s-6);padding:calc(3 * var(--dy)) 0 0 calc(3 * var(--dx));
}
.toon-plank{position:relative;aspect-ratio:1904/1130;background:none;box-shadow:none}
.toon-plank .toon-kaart{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  overflow:hidden;border-radius:var(--r);border:1px solid var(--rand);
  background:var(--wit);box-shadow:var(--sh-3);z-index:calc(10 - var(--p,0));
  transform:translate(calc(min(var(--p,0),3) * var(--dx) * -1),
                      calc(min(var(--p,0),3) * var(--dy) * -1))
            scale(calc(1 - min(var(--p,0),3) * .04));
  transition:transform .75s var(--ease);
}
.toon-kaart::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--wit);opacity:calc(min(var(--p,0),3) * .22);
  transition:opacity .75s var(--ease);
}
.toon-kaart picture{display:block;flex:1 1 auto;min-height:0}
.toon-kaart img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
@media (max-width:719px){
  .toon-plank{aspect-ratio:390/882;max-width:318px;margin:0 auto}
  .toon-stapel{padding-right:calc(1.5 * var(--dx))}
}
@media (prefers-reduced-motion:reduce){
  .toon-kaart,.toon-kaart::after,.toon-blok{transition:none}
}
.portaal-functies{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.portaal-functies li{
  padding:var(--s-1) var(--s-3);border:1px solid var(--rand);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:var(--w-nadruk);color:var(--muted);
}
.donker .portaal-functies li{border-color:var(--inkt-3);color:var(--muted-d)}

/* De valse browserbalk boven het schermbeeld: drie stippen en een adres.
   Hij maakt duidelijk dat je naar een scherm kijkt, niet naar een plaatje. */
.frame-top{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);background:var(--papier);
  border-bottom:1px solid var(--rand);
}
.frame-top::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--rand-sterk);
  box-shadow:13px 0 0 var(--rand-sterk),26px 0 0 var(--rand-sterk);
  margin-right:26px;
}
.frame-url{
  flex:1 1 auto;min-width:0;padding:3px var(--s-3);background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r-pill);
  font-size:var(--t-2xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===================== teamband =====================
   Een foto over de volle breedte met tekst erop. Hetzelfde waas als in de
   hero, en om dezelfde reden: gemeten, aan de kant waar de tekst staat. */
.team-band{
  position:relative;isolation:isolate;display:grid;
  min-height:clamp(420px,44vw,620px);
}
/* Absoluut geplaatst telt de foto niet mee voor de rijhoogte. Nu bepaalt de
   band de hoogte en doet object-fit eindelijk zijn werk.
   De groep staat op 39 tot 62 procent van de bron. Met 70 procent viel op
   1920px alles boven 39,9 procent weg en werden de koppen afgesneden; 60
   procent toont 34 tot 77 procent, dus de hele groep plus gras eronder. */
.team-band>img{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;object-position:center 60%;
}
.team-band-tekst{
  grid-area:1/1;display:flex;align-items:flex-end;
  padding:var(--s-9) 0 var(--s-7);
  background:linear-gradient(to top,rgba(11,14,20,.88) 0%,rgba(11,14,20,.55) 46%,rgba(11,14,20,.18) 100%);
}
.team-band-tekst h2{color:#fff;max-width:18ch}
.team-band-tekst h2 b{color:#fff}
.team-band-tekst p{color:var(--op-donker);max-width:52ch;margin-top:var(--s-3)}


/* ===================== FBC-promo =====================
   Een tweede merk binnen het merk. Het merkje is een label, niet een kop:
   het staat naast de kop, niet erboven. */
/* Twee kolommen: tekst op leesbreedte links, portret rechts. Als enkele
   kolom stond de rechterhelft leeg en hing het blok als een dunne strook
   tussen de teamband en het aanmeldblok. */
.fbc-promo{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:900px){
  .fbc-promo{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:var(--s-9)}
}
.fbc-portret{
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--sh-3);background:var(--papier);
}
.fbc-portret img{width:100%;height:100%;object-fit:cover;display:block}
.fbc-merkje{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-sm);font-weight:var(--w-nadruk);color:var(--muted);
}
.donker .fbc-merkje{color:var(--muted-d)}
.fbc-merkje b{font-weight:var(--w-display);color:inherit;letter-spacing:.02em}
/* Zelfde reden: de vetgedrukte naam draagt het merk al, een blauwe stip
   ernaast is versiering. */
.fbc-merkje .punt{display:none}
.soon-badge{
  display:inline-flex;align-items:center;margin-left:var(--s-3);
  padding:2px var(--s-3);border-radius:var(--r-pill);
  border:1px solid var(--rand-sterk);
  font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.donker .soon-badge{border-color:var(--inkt-3);color:var(--muted-d)}
.fbc-promo-tekst{max-width:66ch}
.fbc-promo h2{margin-top:var(--s-4)}
.fbc-promo p{margin-top:var(--s-4);max-width:var(--maat)}
.fbc-promo .knop{margin-top:var(--s-6)}
.fbc-alinea{max-width:var(--maat);margin-top:var(--s-4)}

/* De vier niveaus. Vier gelijke labels op een rij; alleen het niveau dat
   nu bestaat is ingevuld, de rest is een omtrek. */
.fbc-badges{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.fbc-badge{
  display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-4);
  border:1px solid var(--rand-sterk);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:var(--w-titel);
  letter-spacing:.04em;color:var(--muted);
}
.donker .fbc-badge{border-color:var(--inkt-3);color:var(--muted-d)}
.fbc-badge.actief{background:var(--blauw);border-color:var(--blauw);color:#fff}

/* ===================== resultaten: toen en nu =====================
   Twee foto's van dezelfde speler, jaren uit elkaar, en het verhaal
   ernaast. Dat contrast is het bewijs; het hoeft geen kader met gloed. */
.groei-lijst{display:grid;gap:var(--s-8);margin-top:var(--s-7)}
.groei{display:grid;gap:var(--s-6);padding:var(--s-6)}
@media (min-width:900px){
  /* Gelijke helften. Op .85fr werden de twee foto's 204px breed en zag je van
     een gezicht niets meer; de tekst zat op 569px ruim boven de leesmaat. */
  .groei{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:start}
  .groei.gespiegeld .groei-fotos{order:2}
}
/* De resultatenpagina is licht. Eerder stond hier het ene verhaal open op een
   zwarte grond en kwam het volgende als witte kaart naar voren; dat leest als
   twee pagina's onder elkaar in plaats van een. Alle vier de verhalen krijgen
   nu dezelfde witte kaart op papier, en zwart doet alleen nog dienst als
   detail: de foto-band bovenaan, de knoppen, en de club onder elke naam. */
.groei{padding:var(--s-7)}

.groei-fotos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.groei.geen-toen .groei-fotos{grid-template-columns:1fr}
.groei-foto{position:relative;margin:0;display:grid;grid-template-rows:auto auto;background:none}
.groei-foto img{
  width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4;
  border-radius:var(--r-sm);background:var(--papier);
}
.groei.geen-toen .groei-foto img{aspect-ratio:4/3}
.groei-foto .bij,.bij{
  display:block;padding:var(--s-2) var(--s-3);
  font-size:var(--t-2xs);color:var(--muted);
}
/* Het bijschrift hoort onder de foto. Eroverheen dekt het net het stuk af
   waar je naar kijkt, en het leest als opschrift in plaats van onderschrift. */
.groei-foto .bij{
  position:static;padding:var(--s-2) 0 0;background:none;
  color:var(--muted);line-height:1.4;
}
.donker .groei-foto .bij{color:var(--muted-d)}

/* Het aanhalingsteken als los sierteken is weg. Een citaat herken je aan
   de zetting en de ondertekening, niet aan een grote krul erboven. */
.quote{display:none}
.groei-tekst p,.groei-tekst blockquote{
  font-size:var(--t-lg);line-height:1.62;max-width:var(--maat);
  color:var(--inkt);font-weight:var(--w-normaal);
}
.donker .groei-tekst p{color:var(--op-donker)}
.groei-naam{margin-top:var(--s-5);font-weight:var(--w-titel);font-size:var(--t-md)}
/* Het zwaarste accent van de pagina zit hier: waar de speler nu staat. Dat is
   de afloop van elk verhaal, dus dat is het enige wat echt zwart mag zijn. */
.groei-club{
  display:inline-block;margin-top:var(--s-3);padding:6px 12px;
  border-radius:var(--r-pill);background:var(--inkt);color:#fff;
  font-size:var(--t-2xs);font-weight:var(--w-titel);
  letter-spacing:.06em;text-transform:uppercase;
}
.donker .groei-club{background:var(--wit);color:var(--inkt)}
/* Stond met inline stijlen in de pagina en deelde zijn regel met .groei-naam,
   terwijl het een afsluitende band is en geen naam onder een citaat. */
.testimonial-signoff{
  margin-top:var(--s-9);padding-top:var(--s-7);text-align:center;
  border-top:1px solid var(--rand);
}
.donker .testimonial-signoff{border-top-color:var(--inkt-3)}
.testimonial-signoff img{height:40px;width:auto;display:inline-block}

/* ===================== over ons =====================
   Lange leestekst. Hier telt regellengte zwaarder dan waar dan ook:
   de kolom blijft onder de vijfenzeventig tekens, ook op een breed scherm. */
.ov-blok{padding:var(--s-8) 0}
.ov-blok+.ov-blok{border-top:1px solid var(--rand)}
.donker .ov-blok+.ov-blok{border-top-color:var(--inkt-3)}
.ov-blok-grid{display:grid;gap:var(--s-7)}
@media (min-width:960px){
  .ov-blok-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--s-8);align-items:start}
  .ov-blok-grid.spiegel>*:first-child,.ov-blok.spiegel .ov-blok-tekst{order:2}
  /* De spiegel wisselde alleen de volgorde, niet de kolombreedtes. Daardoor
     kreeg de tekst in een gespiegeld blok 410px en de foto 662px: precies
     omgekeerd aan de bedoeling. */
  .ov-blok.spiegel .ov-blok-grid,
  .ov-blok-grid.spiegel{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}
.ov-blok-tekst{max-width:var(--maat)}
.ov-blok-tekst h2{margin-bottom:var(--s-5)}
.ov-blok-tekst p+p{margin-top:var(--s-4)}
.ov-blok-foto{margin:0}
/* Geen position:sticky meer. De foto's liepen met de scroll mee terwijl de
   tekst ernaast doorliep; dat leest als een fout, niet als een effect. */
.ov-blok-foto-in{display:grid;gap:var(--s-3)}
/* Stond op de figure, terwijl het raster op .ov-blok-foto-in zit: de twee
   foto's kregen geen verhouding mee en stapelden tot een kolom van 1666px.
   Naast elkaar werden ze 199px breed en zag je geen gezicht meer. Dus onder
   elkaar, maar wel elk op de eigen staande verhouding. */
.ov-blok-foto-duo .foto{aspect-ratio:4/5}
.ov-blok-foto-duo .foto img{height:100%}
.ov-blok-foto .foto,.foto{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--papier);
}
.ov-blok-foto img,.foto img{width:100%;display:block;object-fit:cover}
.ov-kop{margin-bottom:var(--s-5)}
/* Alleen blokken die zelf tekst dragen krijgen de maat. .ov-verhaal is de
   omhulling om vier secties met een tweekolomsraster erin; die een maat
   geven perst het raster tot een derde van zijn breedte. */
.ov-stroom{max-width:var(--maat)}

/* De keten van drie schakels. Genummerd, want de volgorde is de inhoud. */
.ov-schakels{
  list-style:none;counter-reset:schakel;display:grid;gap:var(--s-4);
  margin:var(--s-6) 0 var(--s-5);
}
@media (min-width:760px){.ov-schakels{grid-template-columns:repeat(3,1fr)}}
.ov-schakel{counter-increment:schakel;padding:var(--s-5)}
.ov-schakel::before{
  content:counter(schakel);display:block;margin-bottom:var(--s-2);
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.09em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.donker .ov-schakel::before{color:var(--muted-d)}
.ov-schakel h3{font-size:var(--t-md);margin:0}
.ov-keten-noot{max-width:var(--maat);font-size:var(--t-sm);color:var(--muted);margin-top:var(--s-4)}
.donker .ov-keten-noot{color:var(--op-donker)}

.ov-fbc{padding-top:var(--s-7)}
.ov-fbc-kern{max-width:var(--maat);font-size:var(--t-lg);line-height:1.6}
.ov-fbc-noot{max-width:var(--maat);font-size:var(--t-sm);color:var(--muted);margin-top:var(--s-4)}
.donker .ov-fbc-noot{color:var(--op-donker)}

/* Het slotcitaat en de ondertekening. Het citaat stond onder het verhaal en
   las daardoor als een naschrift, terwijl het juist de zin is waar de
   alinea's op uitkomen. Vanaf 900px staat het ernaast, gescheiden door een
   haarlijn over de volle hoogte van het blok. */
.ov-slot{padding:var(--s-9) 0}
.ov-slot-grid{display:grid;gap:var(--s-7)}
@media (min-width:900px){
  .ov-slot-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    gap:var(--s-9);align-items:stretch;
  }
  .ov-slot-grid>.ov-citaat{
    margin-top:0;padding-left:var(--s-8);
    border-left:1px solid var(--inkt-3);
    display:flex;align-items:center;
  }
}
.ov-citaat{margin-top:var(--s-7)}
.ov-citaat blockquote{
  margin:0;font-size:var(--t-2xl);font-weight:var(--w-titel);
  line-height:1.28;letter-spacing:-.018em;max-width:30ch;
}
.ov-blok-tekst .ov-citaat{margin-bottom:var(--s-6)}
.ov-blok-tekst .ov-citaat blockquote{font-size:var(--t-xl);line-height:1.34}
.ov-citaat blockquote b{font-weight:var(--w-titel);color:inherit}
.donker .ov-citaat blockquote{color:#fff}
.ov-onderteken{
  display:flex;flex-direction:column;gap:2px;margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid var(--rand);max-width:44ch;
}
.donker .ov-onderteken{border-top-color:var(--inkt-3)}
.ov-naam{font-weight:var(--w-titel);font-size:var(--t-md)}
.ov-rol{font-size:var(--t-sm);color:var(--muted)}
.donker .ov-rol{color:var(--muted-d)}

/* ===================== aanmeldblok ===================== */
.aanmeld-cta{text-align:center;max-width:60ch;margin:0 auto}
.aanmeld-cta .lead{margin:var(--s-4) auto 0;max-width:52ch}
.aanmeld-knoppen{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-7);
}
/* De slotknoppen stonden op 52px en t-md, twee stuks even groot, gecentreerd
   op een verder lege witte sectie. Dat leest als een banner, niet als een
   actie. Op de gewone maat blijft de blauwe knop de primaire; hij hoeft niet
   groter te zijn dan de rest van de pagina om dat te zijn. */
.aanmeld-knoppen .knop-groot{
  min-height:var(--raak);padding:var(--s-3) var(--s-6);font-size:var(--t-sm);
}
.aanmeld-noot{margin-top:var(--s-5);font-size:var(--t-sm);color:var(--muted)}
.donker .aanmeld-noot{color:var(--op-donker)}

/* Het slot van de thuispagina bestond uit drie losse dingen onder elkaar: een
   tweede display-kop midden op de pagina, een knoppenpaar van 52px hoog, en
   daaronder een foto die nergens bij hoorde en op geen enkele rand uitlijnde.
   Nu is het een blok: de vraag en de actie links, het veld waar je komt te
   staan rechts, allebei tussen dezelfde boven- en onderrand. */
.aanmeld-slot{
  display:grid;gap:var(--s-6);margin-top:var(--s-8);padding:var(--s-6);
  background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;
}
.aanmeld-slot .aanmeld-cta{text-align:left;max-width:none;margin:0}
.aanmeld-slot .aanmeld-cta h2{font-size:var(--t-2xl)}
.aanmeld-slot .aanmeld-cta .lead{margin:var(--s-4) 0 0;max-width:44ch}
.aanmeld-slot .aanmeld-knoppen{justify-content:flex-start;margin-top:var(--s-6)}
.aanmeld-slot .veld-foto{margin:0}
@media (min-width:900px){
  /* Zonder padding op het blok zelf loopt de foto tot de rand van de kaart.
     Zo is dit slot niet nog een vierde gelijke witte kaart naast de drie
     stappen erboven, maar duidelijk het einde van de pagina. */
  .aanmeld-slot{
    grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    gap:0;padding:0;align-items:stretch;
  }
  .aanmeld-slot .aanmeld-cta{padding:var(--s-8);align-self:center}
  .aanmeld-slot .veld-foto{border-radius:0;height:100%}
  .aanmeld-slot .veld-foto img{height:100%;object-fit:cover}
}

/* ===================== beeld dat er nog niet is =====================
   De plaatsvervanger voor een foto die nog moet komen. Hij mag rustig
   zichtbaar zijn dat hij leeg is; hij mag alleen niet stuk lijken. */
.ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--papier);border:1px dashed var(--rand-sterk);border-radius:inherit;
}
.ph-in{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding:var(--s-4);text-align:center;color:var(--muted);
}
.ph-in svg{
  width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7;
}
.ph-in span{font-size:var(--t-xs);max-width:22ch;line-height:1.4}

/* ===================== voet =====================
   Vier kolommen tekst, daaronder een regel met het jaartal en de
   verwijzingen. De sociale iconen zijn tekeningen, geen letters. */
.footer{
  background:var(--inkt);color:var(--op-donker);
  padding:var(--s-9) 0 var(--s-6);margin-top:0;
}
.footer-grid{display:grid;gap:var(--s-7)}
@media (min-width:760px){
  .footer-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-8)}
}
.footer-merk img{height:34px;width:auto;display:block;filter:brightness(0) invert(1)}
.footer-merk p{
  margin-top:var(--s-4);font-size:var(--t-sm);line-height:1.65;
  color:var(--muted-d);max-width:44ch;
}
.footer h3{
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-d);margin-bottom:var(--s-4);
}
.footer ul{list-style:none;display:grid}
.footer li{font-size:var(--t-sm);line-height:1.5}
.footer address{font-style:normal;color:var(--muted-d);line-height:1.6}
.footer a{
  color:var(--op-donker);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--raak);
  transition:color var(--t-hover) var(--ease);
}
.footer a:hover{color:#fff}
.footer a:focus-visible{outline:2px solid var(--blauw-l);outline-offset:3px;border-radius:2px}

.footer-onder{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--inkt-3);
  font-size:var(--t-xs);color:var(--muted-d);
}
.footer-onder .mini{display:flex;gap:var(--s-5);margin-right:auto}
.footer-onder .mini a{font-size:var(--t-xs)}
.socials{display:flex;gap:var(--s-2)}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--raak);height:var(--raak);min-height:var(--raak);
  border-radius:50%;border:1px solid var(--inkt-3);
  transition:background var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.socials a:hover{background:var(--inkt-2);border-color:var(--muted)}
.socials svg{width:18px;height:18px;fill:currentColor}

/* ===================== hulpklassen ===================== */
.grijs{background:var(--papier)}
.licht{background:var(--wit)}
.breed{max-width:none}
.u-wit-85{color:rgba(255,255,255,.85)}
.u-wit-66{color:var(--op-donker)}
.u-wit-55{color:var(--muted-d)}
.skiplink{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  padding:var(--s-3) var(--s-5);background:var(--blauw);color:#fff;
  border-radius:var(--r-sm);font-weight:var(--w-titel);font-size:var(--t-sm);
  transition:top var(--t-hover) var(--ease);
}
.skiplink:focus{top:var(--s-4)}

/* De verschijnbeweging bij het scrollen. Veertien pixels en een halve
   seconde: genoeg om te merken, te weinig om op te wachten. */
[data-reveal]{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(14px);
    transition:opacity var(--t-traag) var(--ease),transform var(--t-traag) var(--ease)}
  [data-reveal].in{opacity:1;transform:none}
  [data-reveal="1"]{transition-delay:60ms}
  [data-reveal="2"]{transition-delay:120ms}
  [data-reveal="3"]{transition-delay:180ms}
}

/* ===================== printen ===================== */
@media print{
  .header,.footer,.hero-bg,.hero-overlay,.knop,.dotnav,.team-band>img{display:none}
  body{background:#fff;color:#000}
  .sectie{padding:12pt 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ===================== hero: veldparallax (homepage) =====================
   Rijen eigen trainingsfoto's staan gekanteld in de diepte en trekken bij
   het scrollen recht tot een rustige fotomuur. De sectie is 260vh hoog:
   het beeld plakt een volledige viewport en de scrollstand stuurt de
   kanteling. Overflow moet clip zijn, hidden zou de sticky breken. */
.hero.hero-par{display:block;min-height:0;height:260vh;padding:0;overflow:clip}
.hero-par .plak{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;perspective:1100px}
.par-rijen{position:absolute;inset:-8vh -24vw;display:flex;flex-direction:column;
  justify-content:center;gap:2.4vh;transform-origin:center 42%;will-change:transform}
.par-rij{display:flex;gap:1.6vw;justify-content:center;will-change:transform}
.par-rij img{height:33vh;width:auto;flex:none;object-fit:cover;border-radius:14px;
  filter:brightness(.8)}
.par-kop{position:relative;z-index:2;text-align:center;max-width:640px;
  padding:64px 40px;will-change:transform;
  background:radial-gradient(closest-side,rgba(11,14,20,.88) 46%,rgba(11,14,20,0))}
.par-kop h1{max-width:none;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.04;
  letter-spacing:-.028em;font-weight:var(--w-display)}
.par-kop .lead{max-width:38ch;margin:14px auto 0}
.par-kop .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media (max-width:760px){
  .par-rij img{height:17vh;filter:brightness(.55)}
  .par-kop{padding:48px 22px}
}
/* Zonder beweging is de lange scrollbaan alleen maar leegte: dan is de
   hero gewoon een viewport hoog met de muur al recht. */
@media (prefers-reduced-motion:reduce){
  .hero.hero-par{height:auto;min-height:100vh}
  .hero-par .plak{position:relative}
}
@media print{
  .hero.hero-par{height:auto;min-height:0}
  .par-rijen{display:none}
}