/*
 * Ankers: waar een menu- of knoplink naar een sectie uitkomt (gedrag in js/00-ankers.js).
 *
 * --fm-anker-ruimte: de afstand tussen de onderkant van de header en het onderwerp van het doel (de eerste kop van de sectie,
 * of de bovenrand van de kaart of het vak). Dezelfde voor elk doel. De waarde volgt de ruimte tussen de twee kaarten in sectie 02
 * op tablet (24px) en gsm (20px, ook de zijmarge daar); zo landt For professionals zonder dat de onderrand van de kaart erboven
 * in beeld komt. Op desktop 48px, de binnenmarge van de container in het ontwerp: rustiger op een groot scherm en nog altijd
 * kleiner dan de ruimte boven de kaarten (57px) en de bovenpadding van elke sectie (128px), dus boven het onderwerp staat alleen
 * de achtergrond van de eigen sectie.
 */
:root { --fm-anker-ruimte: 48px; }
@media (max-width: 999px) {
	:root { --fm-anker-ruimte: 24px; }
}
@media (max-width: 690px) {
	:root { --fm-anker-ruimte: 20px; }
}

/* het onzichtbare ankerpunt dat het id van de sectie of kaart draagt; het script verschuift het met een transform */
body .fm-anker {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Salient zet op een lazy beeld (image_with_animation) tot het geladen is een inline hoogte volgens width/height van het bestand
 * (2:1, 1:1), terwijl de sectie-CSS een andere verhouding vraagt (03: 644/260, 06 op tablet, 09: 3/4). Na het laden kromp of groeide
 * de pagina (desktop 68px in 03, tablet tot 520px), en een ankerklik die vertrok voor de beelden binnen waren, kwam te hoog of te
 * laag uit. Zo heeft de plaatshouder meteen de hoogte van het geladen beeld. Na het laden (.loaded) verandert er niets.
 */
body .wpb_row.fm img.nectar-lazy:not(.loaded) { height: auto !important; }