/*
Theme Name: Spectrum
Theme URI: https://spectrum-zorg.com
Description: Kindthema van Hello Elementor voor Spectrum Nissewaard. Hier staan de huisstijl, de bouwstenen en de bewegingen, zodat een update van het hoofdthema niets overschrijft.
Author: Websiet
Template: hello-elementor
Version: 2.0.0
Text Domain: spectrum-child
*/

/* ==========================================================================
   1. Huisstijl — overgenomen uit het logo en het plan
   ========================================================================== */

:root {
	/* Kleuren uit het logo: diep petrol en goudgeel. */
	--spx-merk: #16333B;
	--spx-merk-op: #0E2228;
	--spx-merk-licht: #2E7D74;
	--spx-mint: #9FCFC5;
	--spx-goud: #F1B434;
	--spx-goud-diep: #8A5D08;

	/* Papier en inkt. */
	--spx-bg: #FAFCFB;
	--spx-vlak: #FFFFFF;
	--spx-verdiept: #EEF3F2;
	--spx-zand: #F5EFE1;
	--spx-inkt: #152428;
	--spx-zacht: #46595E;
	--spx-lijn: #DAE4E2;
	--spx-op-merk: #FFFFFF;

	/* Vorm. */
	--spx-radius: 18px;
	--spx-radius-s: 12px;
	--spx-radius-l: 28px;
	--spx-schaduw: 0 1px 2px rgba(21, 36, 40, 0.05), 0 12px 32px -12px rgba(21, 36, 40, 0.16);
	--spx-schaduw-diep: 0 2px 4px rgba(21, 36, 40, 0.06), 0 28px 64px -20px rgba(21, 36, 40, 0.28);
	--spx-breedte: 1180px;

	/* Letters. */
	--spx-display: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
	--spx-sans: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

body {
	background: var(--spx-bg);
	color: var(--spx-inkt);
	font-family: var(--spx-sans);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--spx-display);
	color: var(--spx-merk);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.25rem, 2vw, 1.55rem); }

a { color: var(--spx-merk-licht); }
a:hover { color: var(--spx-goud-diep); }

::selection { background: var(--spx-goud); color: var(--spx-merk-op); }

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

/* ==========================================================================
   3. Bewegingen — alles luistert naar "liever minder beweging"
   ========================================================================== */

/* Leesbalk bovenin: hoe ver je op de pagina bent. */
.spx-leesbalk {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--spx-merk-licht), var(--spx-goud));
	z-index: 999;
	pointer-events: none;
}

/* Rustig binnenkomen bij het scrollen. */
[data-spx-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--spx-vertraging, 0ms);
}

[data-spx-reveal].is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-spx-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.spx-leesbalk { display: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   4. Bouwstenen
   ========================================================================== */

/* -- Opschrift boven een kop -- */
.spx-opschrift {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--spx-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--spx-goud-diep);
	margin: 0 0 14px;
}

.spx-opschrift::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--spx-goud);
	border-radius: 2px;
}

.spx-lead {
	font-size: clamp(1.08rem, 1.6vw, 1.25rem);
	color: var(--spx-zacht);
	max-width: 62ch;
	line-height: 1.6;
}

/* -- Kaart -- */
.spx-kaart {
	background: var(--spx-vlak);
	border: 1px solid var(--spx-lijn);
	border-radius: var(--spx-radius);
	padding: 30px 28px;
	box-shadow: var(--spx-schaduw);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	position: relative;
	overflow: hidden;
}

.spx-kaart:hover {
	transform: translateY(-4px);
	box-shadow: var(--spx-schaduw-diep);
	border-color: var(--spx-mint);
}

.spx-kaart h3 { margin: 0 0 10px; }
.spx-kaart p { margin: 0; color: var(--spx-zacht); }
.spx-kaart p + p { margin-top: 12px; }

.spx-kaart--merk {
	background: var(--spx-merk);
	border-color: transparent;
	color: var(--spx-op-merk);
}

.spx-kaart--merk h3 { color: #fff; }
.spx-kaart--merk p { color: #C6D6D4; }

.spx-kaart--zand { background: var(--spx-zand); border-color: #E8DCC2; }

.spx-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
	gap: 22px;
}

.spx-kaarten--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Genummerde bouwsteen. */
.spx-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--spx-zand);
	color: var(--spx-goud-diep);
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 16px;
	border: 1px solid #E8DCC2;
}

.spx-kaart--merk .spx-nummer { background: rgba(241, 180, 52, 0.16); color: var(--spx-goud); border-color: rgba(241, 180, 52, 0.3); }

/* -- Groot getal met teller -- */
.spx-getallen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 24px;
}

.spx-getal {
	border-top: 3px solid var(--spx-goud);
	padding-top: 18px;
}

.spx-getal__waarde {
	display: block;
	font-family: var(--spx-display);
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	font-weight: 700;
	line-height: 1;
	color: var(--spx-merk);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.spx-getal__label {
	display: block;
	margin-top: 8px;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--spx-inkt);
}

.spx-getal__uitleg {
	display: block;
	margin-top: 8px;
	font-size: 0.97rem;
	color: var(--spx-zacht);
	line-height: 1.55;
}

/* -- Voortgangsbalk -- */
.spx-balk {
	margin: 0 0 22px;
}

.spx-balk__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 8px;
	font-size: 0.98rem;
}

.spx-balk__naam { font-family: var(--spx-display); font-weight: 600; color: var(--spx-inkt); }
.spx-balk__cijfer { font-variant-numeric: tabular-nums; color: var(--spx-zacht); font-weight: 600; }

.spx-balk__spoor {
	height: 10px;
	border-radius: 999px;
	background: var(--spx-verdiept);
	overflow: hidden;
}

.spx-balk__vulling {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--spx-merk-licht), var(--spx-mint));
	width: 0;
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--spx-vertraging, 0ms);
}

.spx-balk--goud .spx-balk__vulling { background: linear-gradient(90deg, var(--spx-goud-diep), var(--spx-goud)); }
.spx-balk--merk .spx-balk__vulling { background: linear-gradient(90deg, var(--spx-merk), var(--spx-merk-licht)); }

.spx-balk__toelichting { margin: 8px 0 0; font-size: 0.95rem; color: var(--spx-zacht); }

/* Op donkere grond. */
.spx-op-donker .spx-balk__spoor { background: rgba(255, 255, 255, 0.12); }
.spx-op-donker .spx-balk__naam { color: #fff; }
.spx-op-donker .spx-balk__cijfer,
.spx-op-donker .spx-balk__toelichting { color: #AEC6C3; }

/* -- Tijdlijn -- */
.spx-tijdlijn {
	position: relative;
	margin: 0;
	padding: 0 0 0 44px;
	list-style: none;
}

.spx-tijdlijn::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--spx-lijn);
	border-radius: 2px;
}

.spx-tijdlijn__spoor {
	position: absolute;
	left: 13px;
	top: 10px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--spx-goud), var(--spx-merk-licht));
	height: 0;
	transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.spx-tijdlijn.is-zichtbaar .spx-tijdlijn__spoor { height: calc(100% - 20px); }

.spx-stap { position: relative; padding-bottom: 34px; }
.spx-stap:last-child { padding-bottom: 0; }

.spx-stap::before {
	content: '';
	position: absolute;
	left: -38px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--spx-vlak);
	border: 3px solid var(--spx-goud);
	box-shadow: 0 0 0 4px var(--spx-bg);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--spx-vertraging, 0ms);
	transform: scale(0.4);
}

.spx-tijdlijn.is-zichtbaar .spx-stap::before { transform: scale(1); }

.spx-stap__jaar {
	display: inline-block;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spx-goud-diep);
	background: var(--spx-zand);
	border: 1px solid #E8DCC2;
	border-radius: 999px;
	padding: 3px 12px;
	margin-bottom: 10px;
}

.spx-stap h3 { margin: 0 0 8px; }
.spx-stap p { margin: 0; color: var(--spx-zacht); }

/* -- Open en dicht (vragen) -- */
.spx-vraag {
	border: 1px solid var(--spx-lijn);
	border-radius: var(--spx-radius-s);
	background: var(--spx-vlak);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.spx-vraag[open] { border-color: var(--spx-mint); box-shadow: var(--spx-schaduw); }

.spx-vraag summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 56px 20px 24px;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--spx-merk);
	position: relative;
}

.spx-vraag summary::-webkit-details-marker { display: none; }

.spx-vraag summary::after {
	content: '';
	position: absolute;
	right: 24px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--spx-goud-diep);
	border-bottom: 2px solid var(--spx-goud-diep);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.spx-vraag[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.spx-vraag__antwoord { padding: 0 24px 22px; color: var(--spx-zacht); }
.spx-vraag__antwoord p { margin: 0 0 12px; }
.spx-vraag__antwoord p:last-child { margin-bottom: 0; }

/* -- Tabel -- */
.spx-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.spx-tabel caption {
	text-align: left;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--spx-merk);
	padding-bottom: 14px;
}

.spx-tabel th,
.spx-tabel td {
	padding: 11px 0;
	border-bottom: 1px solid var(--spx-lijn);
	text-align: left;
	vertical-align: top;
}

.spx-tabel td:last-child,
.spx-tabel th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-left: 18px;
}

.spx-tabel thead th {
	font-family: var(--spx-display);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spx-zacht);
	font-weight: 600;
	border-bottom-color: var(--spx-inkt);
}

.spx-tabel tfoot td,
.spx-tabel tr.is-totaal td {
	font-weight: 700;
	color: var(--spx-merk);
	border-bottom: none;
	border-top: 2px solid var(--spx-inkt);
	padding-top: 14px;
	font-family: var(--spx-display);
}

/* -- Jaarresultaat -- */
.spx-jaar {
	background: var(--spx-vlak);
	border: 1px solid var(--spx-lijn);
	border-radius: var(--spx-radius);
	padding: 26px;
	box-shadow: var(--spx-schaduw);
}

.spx-jaar__kop { font-family: var(--spx-display); font-weight: 600; color: var(--spx-zacht); font-size: 0.95rem; margin: 0 0 6px; }

.spx-jaar__saldo {
	font-family: var(--spx-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0 0 18px;
}

.spx-jaar__saldo.is-min { color: #A6472F; }
.spx-jaar__saldo.is-plus { color: var(--spx-merk-licht); }

.spx-jaar__regel {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.97rem;
	padding: 7px 0;
	border-top: 1px solid var(--spx-lijn);
	color: var(--spx-zacht);
}

.spx-jaar__regel b { color: var(--spx-inkt); font-variant-numeric: tabular-nums; font-weight: 600; }

/* -- Beeld -- */
.spx-beeld {
	border-radius: var(--spx-radius);
	overflow: hidden;
	background: var(--spx-verdiept);
	box-shadow: var(--spx-schaduw);
	border: 1px solid var(--spx-lijn);
}

.spx-beeld img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.spx-beeld:hover img { transform: scale(1.025); }

.spx-beeld figcaption {
	padding: 16px 20px 18px;
	font-size: 0.95rem;
	color: var(--spx-zacht);
	background: var(--spx-vlak);
	line-height: 1.55;
}

.spx-beeld figcaption b { color: var(--spx-merk); font-family: var(--spx-display); font-weight: 600; }

/* -- Knoppen -- */
.spx-knoppen { display: flex; gap: 14px; flex-wrap: wrap; }

.spx-knop {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	padding: 15px 28px;
	border-radius: 999px;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.spx-knop--goud { background: var(--spx-goud); color: var(--spx-merk-op); box-shadow: 0 10px 24px -12px rgba(241, 180, 52, 0.9); }
.spx-knop--goud:hover { background: #E0A420; color: var(--spx-merk-op); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(241, 180, 52, 0.95); }

.spx-knop--lijn { background: transparent; color: var(--spx-merk); box-shadow: inset 0 0 0 1.5px var(--spx-lijn); }
.spx-knop--lijn:hover { box-shadow: inset 0 0 0 1.5px var(--spx-merk-licht); color: var(--spx-merk-licht); transform: translateY(-2px); }

.spx-op-donker .spx-knop--lijn { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.spx-op-donker .spx-knop--lijn:hover { box-shadow: inset 0 0 0 1.5px var(--spx-goud); color: var(--spx-goud); }

/* -- Merkje / badge -- */
.spx-merkje {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--spx-vlak);
	border: 1px solid var(--spx-lijn);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--spx-zacht);
	font-family: var(--spx-display);
}

.spx-merkje::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--spx-goud);
	box-shadow: 0 0 0 4px rgba(241, 180, 52, 0.2);
}

.spx-risico {
	display: inline-block;
	font-family: var(--spx-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 11px;
	margin-left: 8px;
	vertical-align: middle;
}

.spx-risico--hoog { background: #FBE7E0; color: #A6472F; }
.spx-risico--midden { background: var(--spx-zand); color: var(--spx-goud-diep); }

/* -- Opsomming met vinkjes -- */
.spx-lijst { list-style: none; margin: 16px 0 0; padding: 0; }

.spx-lijst li {
	position: relative;
	padding: 0 0 0 30px;
	margin-bottom: 11px;
	color: var(--spx-zacht);
	line-height: 1.55;
}

.spx-lijst li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 8px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--spx-merk-licht);
	border-bottom: 2px solid var(--spx-merk-licht);
	transform: rotate(-45deg);
}

.spx-op-donker .spx-lijst li { color: #C6D6D4; }
.spx-op-donker .spx-lijst li::before { border-color: var(--spx-goud); }

/* -- Noot -- */
.spx-noot {
	font-size: 0.95rem;
	color: var(--spx-zacht);
	border-left: 3px solid var(--spx-goud);
	padding: 4px 0 4px 18px;
	margin: 0;
	line-height: 1.6;
}

.spx-op-donker .spx-noot { color: #AEC6C3; }

/* ==========================================================================
   5. Logo
   ========================================================================== */

.spectrum-logo { display: inline-flex; line-height: 1; }
.spectrum-logo__merk { display: block; }

.spectrum-logo__woord {
	font-family: var(--spx-display);
	font-weight: 600;
	display: block;
	line-height: 1;
}

.spectrum-logo__plaats {
	font-family: var(--spx-display);
	font-weight: 500;
	display: block;
	line-height: 1;
}

.spectrum-logo__regel {
	font-family: var(--spx-sans);
	display: block;
	line-height: 1;
}

/* ==========================================================================
   6. Koptekst en voettekst
   ========================================================================== */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(250, 252, 251, 0.88);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--spx-lijn);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}

.elementor-location-header.is-geplakt { box-shadow: 0 10px 30px -22px rgba(21, 36, 40, 0.5); }

.elementor-location-header .e-con-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
}

.spx-menu { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.spx-menu a {
	color: var(--spx-inkt);
	text-decoration: none;
	font-family: var(--spx-display);
	font-size: 0.95rem;
	font-weight: 500;
	position: relative;
	padding: 4px 0;
	transition: color 0.2s ease;
}

.spx-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--spx-goud);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.spx-menu a:hover { color: var(--spx-merk); }
.spx-menu a:hover::after,
.spx-menu a[aria-current='page']::after { transform: scaleX(1); }

.spx-menu__knop {
	background: var(--spx-goud);
	color: var(--spx-merk-op) !important;
	padding: 11px 22px !important;
	border-radius: 999px;
	font-weight: 600;
	transition: background 0.25s ease, transform 0.25s ease;
}

.spx-menu__knop::after { display: none !important; }
.spx-menu__knop:hover { background: #E0A420; transform: translateY(-1px); }

.elementor-location-footer { background: var(--spx-merk); color: #C6D6D4; }
.elementor-location-footer h4 { font-family: var(--spx-display); color: #fff; font-size: 1.02rem; margin: 0 0 12px; font-weight: 600; }
.elementor-location-footer a { color: #E8EFEE; text-decoration: none; transition: color 0.2s ease; }
.elementor-location-footer a:hover { color: var(--spx-goud); }

/* ==========================================================================
   7. Elementor bijsturen
   ========================================================================== */

.elementor-field-group .elementor-field {
	border: 1px solid var(--spx-lijn) !important;
	border-radius: var(--spx-radius-s) !important;
	padding: 14px 16px !important;
	background: var(--spx-vlak) !important;
	font-size: 16px !important;
	font-family: var(--spx-sans) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.elementor-field-group .elementor-field:focus {
	border-color: var(--spx-merk-licht) !important;
	box-shadow: 0 0 0 4px rgba(46, 125, 116, 0.16) !important;
	outline: none !important;
}

.elementor-field-label {
	font-family: var(--spx-display) !important;
	font-weight: 600 !important;
	color: var(--spx-merk) !important;
	font-size: 0.95rem !important;
}

.elementor-button[type='submit'] {
	background: var(--spx-goud) !important;
	color: var(--spx-merk-op) !important;
	border-radius: 999px !important;
	font-family: var(--spx-display) !important;
	font-weight: 600 !important;
	padding: 15px 30px !important;
	transition: background 0.25s ease, transform 0.25s ease !important;
}

.elementor-button[type='submit']:hover { background: #E0A420 !important; transform: translateY(-2px); }

/* ==========================================================================
   8. Kleine schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.spx-menu { gap: 16px; }
	.spx-menu a { font-size: 0.9rem; }
}

@media (max-width: 880px) {
	.elementor-location-header .e-con-inner { gap: 10px; }
	.spx-menu { width: 100%; justify-content: center; gap: 10px 18px; }
	.elementor-location-header .e-con-inner > .elementor-widget-shortcode { margin: 0 auto; }
}

@media (max-width: 767px) {
	body { font-size: 17px; }
	.spx-kaart { padding: 24px 22px; }
	.spx-tijdlijn { padding-left: 34px; }
	.spx-stap::before { left: -32px; }
	.spx-tijdlijn::before,
	.spx-tijdlijn__spoor { left: 8px; }
	.spx-menu a { font-size: 0.86rem; }
	.spx-menu__knop { padding: 10px 18px !important; font-size: 0.86rem; }
	.spx-knop { padding: 13px 22px; font-size: 0.95rem; }
	.spx-tabel { font-size: 0.94rem; }
	.spx-beeld figcaption { padding: 14px 16px 16px; font-size: 0.9rem; }
}

@media (max-width: 420px) {
	.spx-menu { gap: 8px 13px; }
	.spx-menu a { font-size: 0.8rem; }
}