/* ACMP-CGPM: animaties en startpagina versie 8 (28-10-2026). Hoort bij js/animatie.js, js/lenis.min.js, templates/Page.ss en
   templates/App/Pages/Layout/HomePage.ss (zie PATCH.md).
   - Klassen op <html>: ac-js = JavaScript aan (slider en videospeler) en ac-laad = geen prefers-reduced-motion en geen
     zoekrobot (de animatie van kop en menu bij het laden), beide uit het headscript in Page.ss, voor de eerste weergave;
     ac-anim (verschijnen bij het scrollen) zet animatie.js pas nadat alles wat bij het laden al in beeld staat als klaar is
     gemarkeerd: niets wat de bezoeker al ziet wordt nog verborgen (versie 9). Zonder JavaScript en bij afdrukken is alles
     meteen zichtbaar.
   - Alleen op de startpagina's (nl, fr, en) verandert de opmaak: verticale marges (A), de knop "Schrijf u nu in!" (A), slider (B)
     en videospeler (C). Die regels hangen aan elementen die alleen de startpagina heeft (#maincontent.row, #homeslideshow,
     #mainvideo, #sign-up, #latestnews en #bottomblocks na #sign-up). Andere pagina's: alleen de animaties. Niets wordt groter:
     tekst, knoppen, beelden, de slider (1200 x 434 px) en de container (75rem) blijven zoals in het thema, ook op 4K.
   - Animaties: na het verschijnen krijgt een blok de klasse ac-af en geldt hier niets meer voor dat blok (gesplitste koppen
     worden weer gewone tekst): de eindtoestand is de opmaak zonder animatie. Alleen transform, opacity en clip-path bewegen
     (uitzondering: de onderlijn van tekstlinks, zie E). Geen layoutverschuiving.
   - Nooit op #sign-up zelf (vaste achtergrondfoto), nooit op de nieuwsblokken zelf (#latestnews .column): Foundation Equalizer
     meet die per rij met offset().top. Formulieren, de kaart (iframe) en eigen code (pensioenberekening) bewegen niet. */
:root{--ac-ease:cubic-bezier(.22,1,.36,1);--ac-y:32px;
  --ac-r1:1rem;--ac-r2:1.5rem;--ac-r3:2.5rem;--ac-r4:4.5rem;--ac-r5:6rem}
@media screen and (max-width:39.9375em){:root{--ac-y:20px;--ac-r3:2rem;--ac-r4:3rem;--ac-r5:4rem}}
@media screen and (min-width:2000px){:root{--ac-r4:5rem;--ac-r5:7rem}}

/* 0. Vloeiend scrollen (Lenis 1.3.26, zelf gehost, alleen muis/trackpad op de computer): de nodige regels uit lenis.css */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* De vaste achtergrondfoto van het blok Lid worden (#sign-up, background-attachment: fixed in het thema) wordt bij scrollen
   via JavaScript (Lenis) elk beeld opnieuw getekend en sprong een beeld lang (flikkermeting 28-10-2026). Met Lenis komt de foto
   daarom op een vast gepositioneerd pseudo-element dat door clip-path binnen het blok blijft: zelfde beeld (de foto blijft
   staan terwijl de pagina erover schuift), maar op de compositor, zonder hertekenen. */
html.lenis #sign-up{position:relative;isolation:isolate;clip-path:inset(0);background-image:none}
html.lenis #sign-up::before{content:"";position:fixed;inset:0;z-index:-1;background:url("../images/bg_sign_up.jpg") no-repeat left top/cover;pointer-events:none;will-change:transform} /* will-change: de laag bestaat vanaf het begin, anders was ze een beeld lang zwart als het blok in beeld kwam */

/* A. Startpagina: ruimer en consequent verticaal ritme (schaal --ac-r1 tot --ac-r5: 1, 1,5, 2,5, 4,5 en 6 rem; op gsm kleiner,
      vanaf 2000 px iets ruimer), meer lucht boven en onder elk blok en rond koppen en tekst, gelijke marges rond de inhoud en
      het nieuws. Alleen verticale ruimte: breedtes, lettergrootte, kleuren, lettertypen en volgorde blijven gelijk. */
#maincontent.row{padding-top:var(--ac-r4);padding-bottom:var(--ac-r3)}
#maincontent.row>.columns>:is(h1,h2,h3){margin-top:var(--ac-r3);margin-bottom:var(--ac-r1)}
#maincontent.row>.columns>:is(h1,h2,h3):first-child{margin-top:0}
#maincontent.row>.columns>p{margin-bottom:var(--ac-r1)}
#maincontent.row>.columns>hr{margin:var(--ac-r3) auto}
#mainvideo{padding-top:var(--ac-r2);padding-bottom:var(--ac-r4)}
#sign-up{padding-top:var(--ac-r5);padding-bottom:var(--ac-r5)}
#sign-up>.row>.columns>h1{margin:0 0 var(--ac-r2)}
#latestnews{padding-top:var(--ac-r5);padding-bottom:var(--ac-r4)}
#latestnews>.row>.columns>h2{margin-bottom:0}
#latestnews>.row>.columns>hr{margin:var(--ac-r2) auto var(--ac-r3)}
#latestnews>.row>.column{margin-bottom:var(--ac-r2)}
@media screen and (min-width:40em){#latestnews div h4{margin-bottom:var(--ac-r1)}}
#sign-up~#bottomblocks{padding-top:var(--ac-r2);padding-bottom:var(--ac-r5)}
#sign-up~#bottomblocks>.row>.columns>hr{margin:0 auto var(--ac-r3)}
#sign-up~#bottomblocks .bottom-block-left h3{margin-top:var(--ac-r1)}
@media screen and (max-width:39.9375em){#sign-up~#bottomblocks .bottom-block-left{margin-bottom:var(--ac-r3)}}

/* De knop "Schrijf u nu in!" (blok Lid worden, alleen op de startpagina's): gewone knopgrootte, leesbare maar rustige tekst,
   ruimere binnenmarge. Zelfde kleur, link en hover (vulling, zie E). */
#sign-up a.button{padding:1rem 2.25rem;margin:0}
#sign-up a.button h1{font-size:1.3rem;line-height:1.2;margin:0;letter-spacing:.01em}
@media screen and (min-width:40em){#sign-up a.button h1{font-size:1.5rem}}

/* Brede schermen: niets verandert (versie 8, beslissing van de eigenaar): container 75rem, slider 1200 x 434 px, tekst, knoppen en
   beelden precies zoals op een gewone desktop, met wit eromheen. */

/* B. Slider (startpagina): animatie.js maakt van de bxSlider-lijst een eigen slider (ac-slider): vaste verhouding 1200:434
      (geen verspringen bij het laden), crossfade, trage zoom, onderschrift met maskreveal, voortgangslijn, stippen, pijlen bij
      hover, pauzeknop, vegen op gsm. Zonder JavaScript: zoals vroeger. */
/* De ruimte naast en rond de slider is wit op alle breedtes (het thema had een lichtgrijze band, #e3e4e4), ook in de sliderbox
   zelf zolang een foto laadt (versie 7, wens van de eigenaar). */
#homeslideshow{background:#fff}
html.ac-js #homeslideshow>.row{position:relative}
html.ac-js #homeslideshow ul.bxslider,html.ac-js #homeslideshow ul.ac-slider{position:relative;aspect-ratio:1200/434;overflow:hidden;margin:0;padding:0;list-style:none;background:#fff}
html.ac-js #homeslideshow ul.bxslider>li{position:absolute;inset:0}
html.ac-js #homeslideshow ul.bxslider>li:not(:first-child){visibility:hidden}
html.ac-js #homeslideshow ul.bxslider img{opacity:0} /* voor animatie.js de lijst overneemt: geen beeld-zonder-bron-icoontje een beeld lang (flikkermeting) */
.ac-slider>li{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.1s}
.ac-slider>li.is-actief{opacity:1;visibility:visible;z-index:1;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 0s}
/* de vorige dia blijft dekkend onder de nieuwe tot die volledig in beeld is (geen witte of grijze flits tijdens de wissel) */
.ac-slider>li.is-weg{opacity:1;visibility:visible;z-index:0}
.ac-slider>li>a{display:block;height:100%}
.ac-slider img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transition:opacity .4s ease-out} /* een foto komt zacht in beeld zodra ze geladen is (animatie.js zet is-geladen), geen plotse verschijning */
.ac-slider img.is-geladen{opacity:1}
.ac-dia-tekst{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 1em;background:rgba(107,101,0,.5);color:#fff;font-family:OrderLt-Regular,"OrderLt vervanger kapitaal",sans-serif;text-transform:uppercase;text-align:center;font-size:1rem;line-height:1.6;pointer-events:none}
@media screen and (min-width:40em){.ac-dia-tekst{font-size:2rem}}
.ac-dia-tekst .ac-w{display:inline-block}
.ac-slider-paneel{position:absolute;top:.75rem;right:.75rem;z-index:2;display:flex;align-items:center;gap:.125rem;padding:.125rem .375rem;border-radius:999px;background:rgba(54,51,0,.6)}
.ac-slider-paneel button,.ac-pijl{margin:0;padding:0;border:0;background:none;color:#fefefe;cursor:pointer;-webkit-appearance:none;appearance:none}
.ac-stip{position:relative;width:1.75rem;height:1.75rem}
.ac-stip::before{content:"";position:absolute;left:.25rem;right:.25rem;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(254,254,254,.45)}
.ac-stip[aria-current=true]::before{background:#fefefe}
.ac-pauze{width:1.75rem;height:1.75rem;display:grid;place-items:center}
.ac-pauze svg,.ac-pijl svg{width:1rem;height:1rem;display:block;fill:currentColor;pointer-events:none}
.ac-slider-voortgang{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(254,254,254,.22);pointer-events:none}
.ac-slider-voortgang i{position:absolute;inset:0;background:#fefefe;transform:scaleX(0);transform-origin:0 50%}
.ac-pijl{position:absolute;top:50%;z-index:2;width:2.75rem;height:2.75rem;margin-top:-1.375rem;border-radius:50%;background:rgba(54,51,0,.6);display:grid;place-items:center;opacity:0;transition:opacity .35s ease-out,background-color .25s ease-out}
.ac-pijl.vorige{left:.75rem}
.ac-pijl.volgende{right:.75rem}
.ac-pijl:focus-visible,.ac-slider-paneel button:focus-visible{opacity:1;outline:2px solid #fefefe;outline-offset:2px;box-shadow:0 0 0 4px #363300}
@media (hover:hover){
#homeslideshow>.row:hover .ac-pijl{opacity:1}
.ac-pijl:hover{background:rgba(54,51,0,.85)}
.ac-slider-paneel button:hover{color:#fff}
}
@media (hover:none){.ac-pijl{display:none}}
@media screen and (max-width:39.9375em){
.ac-slider-paneel{top:.375rem;right:.375rem;padding:0 .125rem;gap:0}
.ac-stip{width:1.5rem;height:1.5rem}
.ac-stip::before{left:.3125rem;right:.3125rem;height:2px;margin-top:-1px}
.ac-pauze{width:1.5rem;height:1.5rem}
.ac-pauze svg{width:.75rem;height:.75rem}
}
@media (prefers-reduced-motion:no-preference){
.ac-slider img{transform:scale(1);transform-origin:50% 50%}
.ac-slider>li.is-actief img,.ac-slider>li.is-weg img{transform:scale(1.06);transition:transform 7.6s cubic-bezier(.33,.1,.3,1),opacity .4s ease-out}
.ac-slider-wrap.speelt .ac-slider-voortgang i{animation:ac-voortgang var(--ac-duur,6.5s) linear forwards}
.ac-slider-wrap.is-gepauzeerd .ac-slider-voortgang i{animation-play-state:paused}
.ac-dia-tekst .ac-w{transform:translate3d(0,105%,0);clip-path:inset(0 -.2em 100% -.2em)}
.ac-slider>li.is-actief .ac-dia-tekst .ac-w{transform:none;clip-path:inset(-.35em -.2em -.35em -.2em);transition:transform .9s var(--ac-ease) var(--ac-w,0ms),clip-path .9s var(--ac-ease) var(--ac-w,0ms)}
}
@media (prefers-reduced-motion:reduce){
.ac-slider>li,.ac-slider>li.is-actief,.ac-slider img{transition:none}
}
@keyframes ac-voortgang{to{transform:scaleX(1)}}

/* C. Videospeler (startpagina): animatie.js zet de video in een eigen speler (ac-speler) in de huisstijl: poster met grote
      afspeelknop, daarna een smalle balk (afspelen/pauze, voortgang met tijd, geluid, volledig scherm) die na een paar
      seconden zonder beweging verdwijnt. Zelfde plaats en maat (16:9) als de vorige speler. */
.ac-speler{position:relative;width:100%;aspect-ratio:16/9;background:#0a0a0a;overflow:hidden;color:#fefefe;font-family:"Hind Madurai","Hind Madurai vervanger",sans-serif}
.ac-speler:not(.is-gestart){background:#fff} /* tot de video start: wit, zodat er geen zwart vak flitst voor het posterbeeld er is */
.ac-speler video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ac-speler:fullscreen{aspect-ratio:auto}
.ac-speler:fullscreen video{object-fit:contain}
.ac-speler button{margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.ac-speler svg{display:block;fill:currentColor;pointer-events:none}
/* de grote afspeelknop precies in het midden (inset 0 + margin auto; de selector moet sterker zijn dan .ac-speler button, die
   margin 0 zet: in versie 4 tot 6 stond de knop daardoor een halve knop te ver naar rechtsonder) */
.ac-speler .ac-groot{position:absolute;inset:0;margin:auto;width:5.25rem;height:5.25rem;border-radius:50%;background:rgba(40,38,0,.72)!important;box-shadow:0 0 0 2px rgba(254,254,254,.9),0 12px 32px -10px rgba(0,0,0,.6);display:grid;place-items:center;transition:transform .45s var(--ac-ease),background-color .25s ease-out,opacity .3s ease-out}
.ac-groot svg{width:1.75rem;height:1.75rem;margin-left:.25rem}
.ac-speler.is-gestart .ac-groot{opacity:0;pointer-events:none}
.ac-balk{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.5rem;padding:1.75rem .75rem .5rem;background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,0));transition:opacity .35s ease-out,transform .35s var(--ac-ease)}
.ac-speler:not(.is-gestart) .ac-balk{opacity:0;pointer-events:none}
.ac-speler.is-rustig .ac-balk{opacity:0;transform:translate3d(0,6px,0);pointer-events:none}
.ac-speler.is-rustig{cursor:none}
.ac-balk button{width:2.25rem;height:2.25rem;flex:none;display:grid;place-items:center;border-radius:6px}
.ac-balk button svg{width:1.125rem;height:1.125rem}
.ac-tijd{flex:none;font-size:.8125rem;line-height:1;font-variant-numeric:tabular-nums;opacity:.9;min-width:5.5em;text-align:center}
.ac-voortgang{flex:1;min-width:3rem;height:1.25rem;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;--p:0%}
.ac-voortgang::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fefefe var(--p),rgba(254,254,254,.3) var(--p))}
.ac-voortgang::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fefefe var(--p),rgba(254,254,254,.3) var(--p))}
.ac-voortgang::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fefefe;border:0}
.ac-voortgang::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fefefe;border:0}
.ac-speler :focus-visible{outline:2px solid #fefefe;outline-offset:2px;box-shadow:0 0 0 4px #363300}
.ac-speler .ac-groot:focus-visible{outline-offset:3px}
@media (hover:hover){
.ac-balk button:hover{background:rgba(254,254,254,.14)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.ac-groot:hover{transform:scale(1.06);background:rgba(107,101,0,.95)!important}
}
@media (prefers-reduced-motion:reduce){
.ac-groot,.ac-balk{transition:none}
}
@media screen and (max-width:39.9375em){
.ac-speler .ac-groot{width:4rem;height:4rem}
.ac-groot svg{width:1.375rem;height:1.375rem}
.ac-balk{gap:.25rem;padding:1.25rem .375rem .25rem}
.ac-tijd{min-width:0;font-size:.75rem}
}

@media screen and (prefers-reduced-motion:no-preference){

/* D1. Bij het laden, een keer: het logo rolt af, de ondertitel en de menu-items komen rustig gespreid binnen.
       De inhoud wacht daar niet op. Na de animatie geldt weer de gewone opmaak (fill-mode backwards). */
html.ac-laad header .columns:first-child>a>img{animation:ac-afrollen 1.1s var(--ac-ease) .05s backwards}
html.ac-laad header h5{animation:ac-op .9s var(--ac-ease) .45s backwards}
html.ac-laad nav .top-bar-left>.menu>li{animation:ac-zak .8s var(--ac-ease) .25s backwards}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(2){animation-delay:.31s}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(3){animation-delay:.37s}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(4){animation-delay:.43s}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(5){animation-delay:.49s}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(6){animation-delay:.55s}
html.ac-laad nav .top-bar-left>.menu>li:nth-child(n+7){animation-delay:.61s}
html.ac-laad nav .top-bar-right,html.ac-laad nav .title-bar{animation:ac-vervaag .9s var(--ac-ease) .6s backwards}

/* D2. Tekstblokken verschijnen bij het scrollen: fade en verschuiving naar boven, binnen een groep na elkaar
       (vertraging --ac-d per blok zet animatie.js). Deze lijsten samen = de lijst S in animatie.js. */
html.ac-anim #maincontent>.row>.columns>:is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,table,figure,article.nieuwsitem):not(.ac-in,.ac-af,.ac-kop),
html.ac-anim #maincontent>.row>.columns>article:not(.nieuwsitem)>:is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,table,figure):not(.ac-in,.ac-af,.ac-kop),
html.ac-anim #maincontent.row>.columns>:is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,table,figure):not(.ac-in,.ac-af,.ac-kop),
html.ac-anim #blocklijst>.column:not(.ac-in,.ac-af),
html.ac-anim #paginabeelden>.column:not(.ac-in,.ac-af),
html.ac-anim #stafflist>.column:not(.ac-in,.ac-af),
html.ac-anim #SearchResults>article:not(.ac-in,.ac-af),
html.ac-anim #sign-up>.row>.columns>*:not(.ac-in,.ac-af,.ac-kop),
html.ac-anim #latestnews>.row>.columns>h2:not(.ac-in,.ac-af,.ac-kop),
html.ac-anim #latestnews>.row>.column>.row:not(.ac-in,.ac-af),
html.ac-anim #latestnews>.row>.column>p>.button:not(.ac-in,.ac-af),
html.ac-anim #bottomblocks>.row>.columns>.bottom-block-left:not(.ac-in,.ac-af){opacity:0;transform:translate3d(0,var(--ac-y),0)}
html.ac-anim .ac-in{will-change:opacity,transform;transition:opacity .9s var(--ac-ease) var(--ac-d,0ms),transform 1s var(--ac-ease) var(--ac-d,0ms)}

/* D3. Koppen: animatie.js zet elk woord tijdelijk in een span (de tekst blijft dezelfde, selecteerbare HTML) en geeft per
       regel een vertraging (--ac-w). Elk woord schuift van achter een onzichtbare lijn omhoog: de verschuiving en de
       clip-path lopen samen, zodat het zichtbare deel altijd boven de onderrand van de regel blijft. Na afloop gewone tekst. */
html.ac-anim .ac-kop .ac-w{display:inline-block;transform:translate3d(0,105%,0);clip-path:inset(0 -.2em 100% -.2em)}
html.ac-anim .ac-kop.ac-in .ac-w{transform:none;clip-path:inset(-.35em -.2em -.35em -.2em);transition:transform 1s var(--ac-ease) calc(var(--ac-d,0ms) + var(--ac-w,0ms)),clip-path 1s var(--ac-ease) calc(var(--ac-d,0ms) + var(--ac-w,0ms))}

/* D4. Stippellijnen tekenen zich van links naar rechts */
html.ac-anim #maincontent>.row>.columns>hr:not(.ac-in,.ac-af),
html.ac-anim #maincontent>.row>.columns>article:not(.nieuwsitem)>hr:not(.ac-in,.ac-af),
html.ac-anim #maincontent.row>.columns>hr:not(.ac-in,.ac-af),
html.ac-anim #latestnews>.row>.columns>hr:not(.ac-in,.ac-af),
html.ac-anim #bottomblocks>.row>.columns>hr:not(.ac-in,.ac-af){clip-path:inset(0 100% 0 0)}
html.ac-anim hr.ac-in{clip-path:inset(0);transition:clip-path 1.2s var(--ac-ease) var(--ac-d,0ms)}

/* D5. Beelden en video (versie 9, "mag sneller, minder opvallend"): kort en rustig verschijnen in ca. 0,5 s: een fade en een
       kleine wipe van onder (alleen de bovenste 8 % is eerst verborgen). Geen zoom meer: een beeld dat met transform geschaald
       wordt, wordt na de overgang opnieuw gerasterd (zichtbaar als een kleine scherptesprong), zonder transform niet.
       ac-beeld zet animatie.js op de beelden in een blok (paginabeelden, blokken, nieuws, banners); na afloop weer weg. */
html.ac-anim #maincontent>.row>.columns>img:not(.ac-in,.ac-af),
html.ac-anim #maincontent>.row>.columns>article:not(.nieuwsitem)>img:not(.ac-in,.ac-af),
html.ac-anim #maincontent.row>.columns>img:not(.ac-in,.ac-af),
html.ac-anim #mainvideo>.columns:not(.ac-in,.ac-af)>:is(video,.mejs-container,.ac-speler),
html.ac-anim .ac-beeld{opacity:0;clip-path:inset(8% 0 0)}
html.ac-anim img.ac-in,html.ac-anim #mainvideo>.columns.ac-in>:is(video,.mejs-container,.ac-speler),html.ac-anim .ac-in .ac-beeld{opacity:1;clip-path:inset(0);transition:opacity .45s ease-out calc(var(--ac-d,0ms) + var(--ac-b,0ms)),clip-path .55s var(--ac-ease) calc(var(--ac-d,0ms) + var(--ac-b,0ms))}
html.ac-anim .ac-in .ac-beeld{--ac-b:80ms}
/* het lipje onder de video zakt kort na de video uit */
html.ac-anim #mainvideo>.columns:not(.ac-in,.ac-af)>.text-center{clip-path:inset(0 0 100% 0)}
html.ac-anim #mainvideo>.columns.ac-in>.text-center{clip-path:inset(0);transition:clip-path .5s var(--ac-ease) calc(var(--ac-d,0ms) + .3s)}

/* D6. Banners onderaan: het blok komt omhoog met een zachte schaduw die meegroeit en weer wegsmelt als het blok landt;
       de foto wipet en zoomt (D5), daarna rolt het lipje af en komt de titel. De schaduw (::before, alleen opacity) heeft de
       vorm van de foto (570 x 285, dus 2:1) en is in rust onzichtbaar. */
html.ac-anim #bottomblocks .bottom-block-left{position:relative}
html.ac-anim #bottomblocks .bottom-block-left::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:2/1;box-shadow:0 20px 40px -16px rgba(30,28,0,.32);opacity:0;pointer-events:none;z-index:-1}
html.ac-anim #bottomblocks .bottom-block-left.ac-in::before{animation:ac-schaduw 1s var(--ac-ease) var(--ac-d,0ms) both}
html.ac-anim #bottomblocks .bottom-block-left:not(.ac-in,.ac-af)>a>.arrowdown{clip-path:inset(0 0 100% 0)}
html.ac-anim #bottomblocks .bottom-block-left.ac-in>a>.arrowdown{clip-path:inset(0);transition:clip-path .5s var(--ac-ease) calc(var(--ac-d,0ms) + .3s)}
html.ac-anim #bottomblocks .bottom-block-left:not(.ac-in,.ac-af)>a>h3{opacity:0;transform:translate3d(0,14px,0)}
html.ac-anim #bottomblocks .bottom-block-left.ac-in>a>h3{transition:opacity .6s var(--ac-ease) calc(var(--ac-d,0ms) + .35s),transform .7s var(--ac-ease) calc(var(--ac-d,0ms) + .35s)}

/* D7. Slider van de startpagina: subtiele parallax bij het scrollen. Elke dia zakt tot 12 % van zijn hoogte en groeit even
       veel vanaf de onderrand (translateY(12 %) met scale(1,12), oorsprong onderaan): de bovenrand blijft op zijn plaats, er komt
       nooit een gat. Bovenaan de pagina (scroll 0) staat alles op de gewone plaats. Waar de browser scroll-driven animations
       kent: in CSS (compositor). Anders zet animatie.js --ac-p (0 tot 1, alleen zolang de slider in beeld is). */
@supports (animation-timeline:view()){
html.ac-anim #homeslideshow{view-timeline:--ac-held block}
html.ac-anim #homeslideshow .ac-slider>li{transform-origin:50% 100%;animation:ac-parallax linear both;animation-timeline:--ac-held;animation-range:exit 0% exit 100%}
}
html.ac-anim.ac-parallax-js #homeslideshow .ac-slider>li{transform-origin:50% 100%;transform:translate3d(0,calc(var(--ac-p,0) * 12%),0) scale(calc(1 + var(--ac-p,0) * .12))}
}
@keyframes ac-afrollen{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes ac-op{from{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes ac-zak{from{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes ac-vervaag{from{opacity:0}}
@keyframes ac-schaduw{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@keyframes ac-parallax{to{transform:translate3d(0,12%,0) scale(1.12)}}

/* E. Muis erover (alleen met muis en zonder reduced motion; :where houdt deze regels zwakker dan de verschijnregels hierboven)
      - Knoppen: een donkere kleurvulling schuift van links naar rechts in (clip-path op ::before, achter de tekst) en een pijl
        schuift mee binnen; de tekst wijkt een klein stukje naar links (span ac-knoptekst, gezet door animatie.js).
      - Tekstlinks in de inhoud: een onderlijn tekent zich van links naar rechts. Uitzondering op "alleen transform, opacity
        en clip-path": background-size, omdat dat ook werkt voor een link over twee regels (alleen verf, geen layout).
      - Banners: de foto zoomt rustig in binnen zijn kader, het lipje rekt licht uit en de titel zakt een paar pixels.
      - Nieuwsblokken: het fotootje zoomt rustig in, de titel schuift licht op. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
:where(a,button).button:not(.dropdown):not(.disabled){position:relative;isolation:isolate}
:where(a,button).button:not(.dropdown):not(.disabled)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#383500;clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ac-ease);z-index:-1;pointer-events:none}
:where(a,button).button:not(.dropdown):not(.disabled):hover{background-color:#6b6500}
:where(a,button).button:not(.dropdown):not(.disabled):hover::before{clip-path:inset(0)}
:where(a,button).button:not(.dropdown):has(>.ac-knoptekst)::after{content:"";position:absolute;top:50%;right:.45em;width:.62em;height:.62em;margin-top:-.31em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23fefefe' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translate3d(-.4em,0,0);transition:opacity .3s ease-out .08s,transform .6s var(--ac-ease);pointer-events:none}
:where(a,button).button:not(.dropdown):has(>.ac-knoptekst):hover::after{opacity:1;transform:none}
:where(.button)>.ac-knoptekst{display:inline-block;transition:transform .6s var(--ac-ease)}
:where(.button:hover)>.ac-knoptekst{transform:translate3d(-.45em,0,0)}

:where(#maincontent) a:not([class]):not(:has(img)){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .6s var(--ac-ease),color .3s ease-out}
:where(#maincontent) a:not([class]):not(:has(img)):is(:hover,:focus-visible){background-size:100% 1px}

:where(#bottomblocks .bottom-block-left>a)>img:first-child{clip-path:inset(-2px);transition:transform 1s var(--ac-ease),clip-path 1s var(--ac-ease)}
:where(#bottomblocks .bottom-block-left>a:hover)>img:first-child{transform:scale(1.05);clip-path:inset(2.381%)}
:where(#bottomblocks .bottom-block-left>a)>.arrowdown{transform-origin:50% 0;transition:transform .7s var(--ac-ease)}
:where(#bottomblocks .bottom-block-left>a:hover)>.arrowdown{transform:scaleY(1.2)}
:where(#bottomblocks .bottom-block-left>a)>h3{transition:transform .7s var(--ac-ease),color .3s ease-out}
:where(#bottomblocks .bottom-block-left>a:hover)>h3{transform:translate3d(0,7px,0)}

:where(#latestnews>.row>.column) img{clip-path:inset(-2px);transition:transform 1s var(--ac-ease),clip-path 1s var(--ac-ease)}
:where(#latestnews>.row>.column:hover) img{transform:scale(1.05);clip-path:inset(2.381%)}
:where(#latestnews>.row>.column) h4{transition:transform .7s var(--ac-ease)}
:where(#latestnews>.row>.column:hover) h4{transform:translate3d(5px,0,0)}
}

/* F. Duidelijke focusrand voor toetsenbordgebruikers (het thema zette outline:0 op alle links en knoppen): wit binnenrandje en
      donkere olijfrand, zichtbaar op wit, op de olijfkleurige balken en op de donkere kop. Verschijnt meteen, zonder beweging. */
html a:focus-visible,html button:focus-visible,html [type=submit]:focus-visible,html [type=button]:focus-visible,html summary:focus-visible,html [tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid #363300;outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* G. Opstart zonder sprongen (versie 9, flikkermeting 28-10-2026). Drie sprongen uit het thema zelf, zichtbaar in de eerste
      tienden van een seconde na het laden, op elke pagina:
      - de cookiebalk (vast bovenaan) duwde via app.js de hele pagina 89 px naar beneden zodra JavaScript liep, en bij Weigeren
        of Toestaan sprong alles weer omhoog: de balk staat nu onderaan het venster en duwt niets meer;
      - de mobiele menubalk (.title-bar) stond een beeld lang boven het menu tot Foundation hem verborg (data-hide-for="large"):
        nu al in CSS verborgen vanaf de breedte "large" (64em);
      - de drie keuzelijsten van "Zoek een afgevaardigde" waren 23 px hoger tot select2 ze verving (de band sprong van 75 naar
        52 px): de gewone keuzelijsten staan nu vooraf op de maat van select2 (32 px, zonder marge eronder). */
#staffsearchform select{height:32px;margin-bottom:0;padding-top:.25rem;padding-bottom:.25rem}
/* Lettertypen zonder sprong: tot de webfonts er zijn (Hind Madurai van Google Fonts, OrderLt van het thema) tekent de browser
   de tekst in Arial of Helvetica, die breder zijn; bij het wisselen verspringt alle tekst (regels wikkelen anders, het label
   "Zoek een afgevaardigde" werd 3 in plaats van 2 regels, de band 16 px hoger). Een maatvaste vervangfont (size-adjust,
   gemeten op 28-10-2026: Hind Madurai 94,4 % en OrderLt 77,2 % van de breedte van Arial) maakt die wissel onzichtbaar. */
@font-face{font-family:"Hind Madurai vervanger";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:94.4%;ascent-override:98%;descent-override:40%;line-gap-override:0%}
@font-face{font-family:"OrderLt vervanger";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:77.2%;ascent-override:79%;descent-override:21%;line-gap-override:0%}
body{font-family:"Hind Madurai","Hind Madurai vervanger",sans-serif}
h1,h2,h3,h4,h5,h6{font-family:OrderLt-Regular,"OrderLt vervanger",sans-serif}
/* tekst in hoofdletters: daar is de verhouding kleiner (Hind Madurai 86,9 %, OrderLt 72,0 % van Arial) */
@font-face{font-family:"Hind Madurai vervanger kapitaal";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:86.9%;ascent-override:98%;descent-override:40%;line-gap-override:0%}
@font-face{font-family:"OrderLt vervanger kapitaal";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:72%;ascent-override:79%;descent-override:21%;line-gap-override:0%}
#staffsearchform #searchtext,#staffsearchform input[type=submit]{font-family:"Hind Madurai","Hind Madurai vervanger kapitaal",sans-serif}
#cookiesplease{top:auto!important;bottom:0!important;transform-origin:0 100%}
#cookiesplease.cookiesplease-hidden{transform:translate(0,100%)} /* de balk schuift na Toestaan of Weigeren naar beneden weg (het script schoof hem naar boven) */
header{padding-top:0!important}
@media screen and (min-width:64em){nav .title-bar{display:none}}
/* en omgekeerd op gsm en tablet: het uitgeklapte menu (#responsive-menu) stond een beeld lang open tot Foundation het inklapte;
   met JavaScript nu vooraf dicht (Foundation zet bij een tik op de menuknop zelf display:block als inline stijl) */
@media screen and (max-width:63.9375em){html.ac-js nav #responsive-menu{display:none}}

/* Herstel 28-10-2026: de slider krijgt een eigen stapelcontext, zodat de dia's (met hun eigen z-index voor de crossfade)
   nooit boven het uitklapmenu van de hoofdnavigatie (z-index 1) komen */
.ac-slider-wrap{isolation:isolate}
/* Herstel 2, 28-10-2026: de hele hoofdnavigatie (nav, kind van body) boven de inhoud. Tijdens de laad-animatie van de
   menu-items (transform en opacity) maakt elk item een eigen stapelcontext; zonder deze regel lag het submenu dan onder de slider */
body>nav{position:relative;z-index:10}