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

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

: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-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);

	/* 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.2rem, 4.6vw, 3.5rem); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

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. Leesbalk
   ========================================================================== */

.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;
}

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

/* ==========================================================================
   4. 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; }

/* ==========================================================================
   5. Koptekst en voettekst — de schil
   ========================================================================== */

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

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

.elementor-location-footer { background: var(--spx-merk); color: #C6D6D4; }

/* ==========================================================================
   6. Formulier (Elementor Pro)
   ========================================================================== */

.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); }

/* ==========================================================================
   7. Kleine schermen
   ========================================================================== */

@media (max-width: 767px) {
	body { font-size: 17px; }
}

/* ==========================================================================
   9. De Elementor-widgets in de huisstijl zetten
   --------------------------------------------------------------------------
   De inhoud staat in gewone widgets, zodat alles in Elementor te bewerken is.
   De vormgeving staat hier, zodat bewerken de opmaak niet stuk maakt.
   ========================================================================== */

/* -- Sectiekop -- */

.e-con.spx-sectiekop {
	--gap: 0px;
	margin-bottom: 14px;
}

.spx-opschrift .elementor-heading-title {
	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);
}

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

.spx-sectiekop .spx-opschrift { margin-bottom: 12px; }
.spx-sectiekop .spx-titel { margin-bottom: 14px; }
.spx-titel .elementor-heading-title { max-width: 22ch; }

.spx-lead,
.spx-lead p {
	font-size: clamp(1.06rem, 1.5vw, 1.2rem);
	color: var(--spx-zacht);
	line-height: 1.6;
}

.spx-lead { max-width: 64ch; }

/* -- Lopende tekst -- */

.elementor-widget-text-editor p { margin: 0 0 13px; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor { color: var(--spx-zacht); }

/* -- Kaart -- */

.e-con.spx-kaart {
	--gap: 9px;
	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;
	align-content: start;
}

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

.e-con.spx-kaart .elementor-heading-title { font-size: clamp(1.15rem, 1.6vw, 1.32rem); }

.e-con.spx-kaart--merk { background: var(--spx-merk); border-color: transparent; }
.e-con.spx-kaart--merk .elementor-heading-title { color: #fff; }
.e-con.spx-kaart--merk .elementor-widget-text-editor { color: #C6D6D4; }
.e-con.spx-kaart--merk .elementor-icon-list-text { color: #C6D6D4; }

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

/* Het rondje met het nummer. */
.spx-nummer .elementor-heading-title {
	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;
	border: 1px solid #E8DCC2;
	margin-bottom: 6px;
}

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

/* -- Rooster -- */

.e-con.spx-raster { align-items: stretch; }

/* -- Teller -- */

.spx-teller .elementor-counter {
	border-top: 3px solid var(--spx-goud);
	padding-top: 16px;
	text-align: left;
}

.spx-teller .elementor-counter-number-wrapper {
	font-family: var(--spx-display);
	font-size: clamp(1.9rem, 3.8vw, 2.8rem);
	font-weight: 700;
	line-height: 1.04;
	color: var(--spx-merk);
	letter-spacing: -0.02em;
	justify-content: flex-start;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: baseline;
}

.spx-teller .elementor-counter-number-prefix {
	flex-grow: 0;
	text-align: left;
	padding-right: 0.12em;
	white-space: pre;
}

.spx-teller .elementor-counter-number-suffix {
	flex-grow: 0;
	text-align: left;
	font-size: 0.5em;
	font-weight: 600;
	padding-left: 0.3em;
	white-space: pre;
}

.spx-teller .elementor-counter-title {
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 0.97rem;
	color: var(--spx-inkt);
	text-align: left;
	margin-top: 9px;
	line-height: 1.4;
}

.spx-op-donker .spx-teller .elementor-counter-number-wrapper { color: #fff; }
.spx-op-donker .spx-teller .elementor-counter-title { color: #C6D6D4; }

/* -- Voortgangsbalk -- */

.spx-balkwidget .elementor-title {
	display: block;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--spx-inkt);
	margin-bottom: 9px;
	padding-right: 170px;
}

.spx-balkwidget .elementor-progress-wrapper {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--spx-verdiept);
	overflow: visible;
	box-shadow: none;
}

.spx-balkwidget .elementor-progress-bar {
	position: static;
	height: 10px;
	line-height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--spx-merk-licht), var(--spx-mint));
	transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	font-size: 0;
}

.spx-balkwidget--goud .elementor-progress-bar { background: linear-gradient(90deg, var(--spx-goud-diep), var(--spx-goud)); }

.spx-balkwidget .elementor-progress-text {
	position: absolute;
	right: 0;
	bottom: calc(100% + 13px);
	font-family: var(--spx-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--spx-zacht);
	white-space: nowrap;
	padding: 0;
	text-indent: 0;
}

.spx-balkwidget .elementor-progress-percentage { display: none; }

.spx-balktekst,
.spx-balktekst p {
	font-size: 0.95rem;
	color: var(--spx-zacht);
	line-height: 1.55;
}

.spx-balktekst { margin-top: -6px; }

.spx-op-donker .spx-balkwidget .elementor-title { color: #fff; }
.spx-op-donker .spx-balkwidget .elementor-progress-wrapper { background: rgba(255, 255, 255, 0.12); }
.spx-op-donker .spx-balkwidget .elementor-progress-text,
.spx-op-donker .spx-balktekst { color: #AEC6C3; }

/* -- Knoppen -- */

.e-con.spx-knoprij { --gap: 14px; align-items: center; }

.spx-knopwidget .elementor-button {
	border-radius: 999px;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1rem;
	padding: 15px 28px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
	border: none;
}

.spx-knopwidget--goud .elementor-button {
	background: var(--spx-goud);
	color: var(--spx-merk-op);
	box-shadow: 0 10px 24px -12px rgba(241, 180, 52, 0.9);
}

.spx-knopwidget--goud .elementor-button:hover,
.spx-knopwidget--goud .elementor-button:focus {
	background: #E0A420;
	color: var(--spx-merk-op);
	transform: translateY(-2px);
}

.spx-knopwidget--lijn .elementor-button {
	background: transparent;
	color: var(--spx-merk);
	box-shadow: inset 0 0 0 1.5px var(--spx-lijn);
}

.spx-knopwidget--lijn .elementor-button:hover,
.spx-knopwidget--lijn .elementor-button:focus {
	box-shadow: inset 0 0 0 1.5px var(--spx-merk-licht);
	color: var(--spx-merk-licht);
	transform: translateY(-2px);
}

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

/* -- Opsomming met vinkjes -- */

.spx-lijstwidget .elementor-icon-list-icon { width: 20px; }

.spx-lijstwidget .elementor-icon-list-icon i,
.spx-lijstwidget .elementor-icon-list-icon svg {
	color: var(--spx-merk-licht);
	fill: var(--spx-merk-licht);
	font-size: 12px;
	width: 13px;
	height: 13px;
}

.spx-lijstwidget .elementor-icon-list-text {
	color: var(--spx-zacht);
	font-size: 1rem;
	line-height: 1.5;
	padding-left: 8px;
}

.spx-op-donker .spx-lijstwidget .elementor-icon-list-text { color: #C6D6D4; }
.spx-op-donker .spx-lijstwidget .elementor-icon-list-icon i,
.spx-op-donker .spx-lijstwidget .elementor-icon-list-icon svg { color: var(--spx-goud); fill: var(--spx-goud); }

/* -- Beeld -- */

.spx-beeld .elementor-widget-container {
	border-radius: var(--spx-radius);
	overflow: hidden;
	border: 1px solid var(--spx-lijn);
	background: var(--spx-vlak);
	box-shadow: var(--spx-schaduw);
}

.spx-beeld figure.wp-caption { margin: 0; }

.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.widget-image-caption {
	padding: 16px 20px 18px;
	margin: 0;
	font-size: 0.95rem;
	font-style: normal;
	color: var(--spx-zacht);
	text-align: left;
	line-height: 1.55;
	background: var(--spx-vlak);
}

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

/* -- Vragen (accordeon) -- */

.spx-vragen .e-n-accordion-item {
	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-vragen .e-n-accordion-item[open] { border-color: var(--spx-mint); box-shadow: var(--spx-schaduw); }

.spx-vragen .e-n-accordion-item-title { padding: 19px 22px; gap: 14px; }

.spx-vragen .e-n-accordion-item-title-text {
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--spx-merk);
	line-height: 1.4;
}

.spx-vragen .e-n-accordion-item-title-icon { color: var(--spx-goud-diep); }
.spx-vragen .e-n-accordion-item-title-icon svg { width: 15px; height: 15px; fill: var(--spx-goud-diep); }
.spx-vragen .e-con.spx-antwoord { padding: 0 22px 20px; --gap: 0px; }

/* -- Noot -- */

.spx-noot,
.spx-noot p {
	font-size: 0.95rem;
	color: var(--spx-zacht);
	line-height: 1.6;
}

.spx-noot {
	border-left: 3px solid var(--spx-goud);
	padding: 4px 0 4px 18px;
}

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

/* -- Donkere secties -- */

.spx-op-donker .elementor-heading-title { color: #fff; }
.spx-op-donker .elementor-widget-text-editor { color: #C6D6D4; }
.spx-op-donker .spx-opschrift .elementor-heading-title { color: var(--spx-goud); }

/* -- Tabel in een tekstvak -- */

.elementor-widget-text-editor table.spx-tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.elementor-widget-text-editor table.spx-tabel th,
.elementor-widget-text-editor table.spx-tabel td { padding: 11px 0; border-bottom: 1px solid var(--spx-lijn); text-align: left; vertical-align: top; }
.elementor-widget-text-editor table.spx-tabel td:last-child,
.elementor-widget-text-editor table.spx-tabel th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 18px; }
.elementor-widget-text-editor table.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); }
.elementor-widget-text-editor table.spx-tabel tfoot 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); }

/* -- Twee kolommen -- */

.e-con.spx-kolom { --gap: 18px; align-content: start; }

/* -- Formulier -- */

.spx-formulier .elementor-field-group { margin-bottom: 6px; }

@media (max-width: 767px) {
	.e-con.spx-kaart { padding: 24px 22px; }
	.spx-balkwidget .elementor-title { padding-right: 0; }
	.spx-balkwidget .elementor-progress-text { position: static; display: block; margin-top: 8px; }
	.spx-knopwidget .elementor-button { padding: 13px 22px; font-size: 0.95rem; }
}

/* ==========================================================================
   10. Koptekst, voettekst, tijdlijn en de kleinere bouwstenen
   ========================================================================== */

/* -- Menu uit WordPress -- */

.e-con.spx-koprechts { --gap: 18px; }

.spx-menu .elementor-nav-menu--main .elementor-item {
	font-family: var(--spx-display);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--spx-inkt);
	padding: 6px 11px;
	fill: var(--spx-inkt);
}

.spx-menu .elementor-nav-menu--main .elementor-item::after {
	content: '';
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 2px;
	height: 2px;
	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 .elementor-nav-menu--main .elementor-item:hover,
.spx-menu .elementor-nav-menu--main .elementor-item:focus,
.spx-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--spx-merk);
	background: transparent;
}

.spx-menu .elementor-nav-menu--main .elementor-item:hover::after,
.spx-menu .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); }

.spx-menu .elementor-menu-toggle {
	color: var(--spx-merk);
	background: transparent;
	border: 1px solid var(--spx-lijn);
	border-radius: 10px;
	padding: 9px;
}

.spx-menu .elementor-nav-menu--dropdown {
	background: var(--spx-vlak);
	border: 1px solid var(--spx-lijn);
	border-radius: var(--spx-radius-s);
	box-shadow: var(--spx-schaduw-diep);
	overflow: hidden;
}

.spx-menu .elementor-nav-menu--dropdown .elementor-item {
	font-family: var(--spx-display);
	color: var(--spx-inkt);
	padding: 14px 18px;
}

/* -- Logo in de koptekst -- */

.spx-koplogo .elementor-shortcode { line-height: 0; }

/* -- Voettekst -- */

.spx-voetlogo .elementor-shortcode { line-height: 0; display: inline-block; margin-bottom: 14px; }

.spx-voet .elementor-widget-text-editor,
.spx-voet .elementor-widget-text-editor p { color: #AEC6C3; font-size: 0.97rem; }

.spx-voet h4.elementor-heading-title {
	font-family: var(--spx-display);
	color: #fff;
	font-size: 1.02rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.spx-voet a { color: #E8EFEE; text-decoration: none; transition: color 0.2s ease; }
.spx-voet a:hover { color: var(--spx-goud); }

.spx-voetlinks .elementor-icon-list-icon { display: none; }
.spx-voetlinks .elementor-icon-list-text { color: #E8EFEE; font-size: 0.97rem; padding-left: 0; }
.spx-voetlinks .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--spx-goud); }

.spx-voetnoot,
.spx-voetnoot p {
	font-size: 0.86rem;
	color: #8FA8A6;
	line-height: 1.6;
}

.spx-voetnoot {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* -- Tijdlijn -- */

.e-con.spx-tijdlijn {
	position: relative;
	padding-left: 42px;
	--gap: 0px;
}

.e-con.spx-tijdlijn::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(180deg, var(--spx-goud), var(--spx-merk-licht));
	border-radius: 2px;
}

.e-con.spx-stap {
	position: relative;
	padding-bottom: 32px;
	--gap: 7px;
}

.e-con.spx-stap:last-child { padding-bottom: 0; }

.e-con.spx-stap::before {
	content: '';
	position: absolute;
	left: -36px;
	top: 8px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--spx-goud);
	border: 4px solid var(--spx-goud);
	box-shadow: inset 0 0 0 3px #fff;
}

.spx-stapjaar .elementor-heading-title {
	display: inline-block;
	font-family: var(--spx-display);
	font-weight: 600;
	font-size: 0.78rem;
	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;
}

/* -- Leus en merkje -- */

.spx-leus .elementor-heading-title {
	font-family: var(--spx-display);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--spx-goud-diep);
}

.spx-merkje .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--spx-vlak);
	border: 1px solid var(--spx-lijn);
	border-radius: 999px;
	padding: 7px 17px;
	font-family: var(--spx-display);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--spx-zacht);
}

.spx-merkje .elementor-heading-title::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);
}

/* -- Exploitatiejaar -- */

.spx-jaarkop .elementor-heading-title {
	font-family: var(--spx-display);
	font-weight: 600;
	color: var(--spx-zacht);
	font-size: 0.95rem;
}

.spx-saldo .elementor-heading-title {
	font-family: var(--spx-display);
	font-size: clamp(1.45rem, 2.6vw, 1.95rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.spx-saldo--min .elementor-heading-title { color: #A6472F; }
.spx-saldo--plus .elementor-heading-title { color: var(--spx-merk-licht); }

.e-con.spx-jaar { --gap: 6px; }
.e-con.spx-jaar .spx-balkwidget { margin: 10px 0 4px; }

table.spx-tabel--klein td { padding: 7px 0; font-size: 0.96rem; }
table.spx-tabel--klein td:last-child { font-weight: 600; color: var(--spx-inkt); }

/* -- Risico en bedrag -- */

.spx-risico .elementor-heading-title {
	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;
}

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

.spx-bedrag .elementor-heading-title {
	font-family: var(--spx-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--spx-goud-diep);
}

/* -- Overig -- */

.spx-uitleg,
.spx-uitleg p { font-size: 0.97rem; color: var(--spx-zacht); line-height: 1.55; }

.e-con.spx-balken { --gap: 16px; }

.e-con.spx-kaart--groot { padding: 36px 38px; }

a.spx-mail { font-family: var(--spx-display); font-weight: 600; color: var(--spx-merk-licht); text-decoration: none; }
a.spx-mail:hover { color: var(--spx-goud-diep); }

.spx-tabelvak { width: 100%; }

@media (max-width: 880px) {
	.e-con.spx-header { flex-wrap: nowrap; }
	.spx-menu .elementor-nav-menu--main { display: none; }
}

@media (max-width: 767px) {
	.e-con.spx-tijdlijn { padding-left: 34px; }
	.e-con.spx-stap::before { left: -30px; }
	.e-con.spx-tijdlijn::before { left: 6px; }
	.e-con.spx-kaart--groot { padding: 26px 24px; }
}

/* -- Uitlijning van twee kolommen -- */

.e-con.spx-twee--midden { align-items: center; }

.e-con.spx-knoprij--rechts { justify-content: flex-end; }

@media (max-width: 880px) {
	.e-con.spx-knoprij--rechts { justify-content: flex-start; }
}

/* Het achtervoegsel van een teller mag niet loskomen van het getal. */
.spx-teller .elementor-counter-number-suffix { padding-left: 0.06em; }

/* -- Tabellen: alleen een lijn onder de regel, geen hokjes -- */

.elementor-widget-text-editor table.spx-tabel,
.elementor-widget-text-editor table.spx-tabel tr,
.elementor-widget-text-editor table.spx-tabel th,
.elementor-widget-text-editor table.spx-tabel td {
	border: 0;
	background: transparent;
}

.elementor-widget-text-editor table.spx-tabel th,
.elementor-widget-text-editor table.spx-tabel td { border-bottom: 1px solid var(--spx-lijn); }
.elementor-widget-text-editor table.spx-tabel thead th { border-bottom: 1px solid var(--spx-inkt); }
.elementor-widget-text-editor table.spx-tabel tfoot td { border-bottom: 0; border-top: 2px solid var(--spx-inkt); }
.elementor-widget-text-editor table.spx-tabel--klein tr:last-child td { border-bottom: 0; }

/* -- Keuzelijsten in het formulier -- */

.elementor-field-type-select .elementor-select-wrapper { width: 100%; }

.elementor-field-group select.elementor-field {
	width: 100% !important;
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2346595E' stroke-width='2'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 15px !important;
	color: var(--spx-inkt) !important;
}

.elementor-field-type-select .elementor-select-wrapper::before { display: none; }

.elementor-field-type-acceptance .elementor-field-option label {
	color: var(--spx-zacht);
	font-size: 0.97rem;
	line-height: 1.5;
}

/* -- Koptekst op kleine schermen -- */

@media (max-width: 880px) {
	.e-con.spx-header { gap: 10px; }
	.e-con.spx-koprechts { --gap: 10px; flex: 0 0 auto; }
	.spx-koplogo { flex: 0 0 auto; }
	.spx-koplogo .spectrum-logo__woord { font-size: 17px !important; }
	.spx-menu { flex: 0 0 auto; }
	.spx-knopwidget .elementor-button { padding: 11px 18px; font-size: 0.88rem; white-space: nowrap; }
}

@media (max-width: 420px) {
	.spx-koplogo .spectrum-logo__woord { font-size: 15px !important; }
	.spx-knopwidget .elementor-button { padding: 10px 14px; font-size: 0.8rem; }
}

/* De rechterkant van de koptekst mag niet de hele breedte opeisen. */
.e-con.spx-koprechts {
	width: auto !important;
	max-width: none;
	flex: 0 1 auto !important;
}

.spx-koplogo { flex: 0 0 auto; }

/* De knop in de koptekst mag niet platgedrukt worden. */
.e-con.spx-koprechts > .elementor-widget { flex: 0 0 auto; }

/* -- Voortgangsbalk op kleine schermen: het bedrag onder de balk -- */

@media (max-width: 767px) {
	.spx-balkwidget .elementor-title { padding-right: 0; }
	.spx-balkwidget .elementor-progress-wrapper { margin-bottom: 26px; }

	.spx-balkwidget .elementor-progress-text {
		position: absolute;
		top: calc(100% + 7px);
		bottom: auto;
		left: 0;
		right: auto;
		display: block;
		margin-top: 0;
		font-size: 0.88rem;
	}
}

/* De tekst boven de balk erft de regelhoogte van de balk; die moet ruimer. */
.spx-balkwidget .elementor-progress-text {
	line-height: 1.4;
	height: auto;
	overflow: visible;
	bottom: calc(100% + 10px);
}

@media (max-width: 767px) {
	.spx-balkwidget .elementor-progress-text { bottom: auto; }
}

/* ==========================================================================
   12. Twee talen
   ========================================================================== */

/* Blokken die bij één taal horen; de body-klasse bepaalt welke je ziet. */
.e-con.spx-taal { display: none !important; }

body.taal-nl .e-con.spx-taal--nl,
body.taal-en .e-con.spx-taal--en { display: var(--display, flex) !important; }

/* De taalwissel in de koptekst. */
.spx-taalwissel {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: var(--spx-display);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.spx-taalwissel a {
	color: var(--spx-zacht);
	text-decoration: none;
	padding: 5px 8px;
	border-radius: 8px;
	transition: color 0.2s ease, background 0.2s ease;
}

.spx-taalwissel a:hover { color: var(--spx-merk); background: var(--spx-verdiept); }
.spx-taalwissel a.is-nu { color: var(--spx-merk); background: var(--spx-verdiept); }

.spx-taalwissel a + a { position: relative; }
.spx-taalwissel a + a::before {
	content: '';
	position: absolute;
	left: -2px;
	top: 50%;
	width: 1px;
	height: 12px;
	margin-top: -6px;
	background: var(--spx-lijn);
}

.spx-voet .spx-taalwissel a { color: #AEC6C3; }
.spx-voet .spx-taalwissel a:hover,
.spx-voet .spx-taalwissel a.is-nu { color: var(--spx-goud); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 880px) {
	.spx-taalwissel { font-size: 0.76rem; }
	.spx-taalwissel a { padding: 4px 6px; }
}

/* Op heel smalle schermen nog wat compacter, zodat logo, menuknop,
   knop en taalwissel samen binnen de breedte blijven. */
@media (max-width: 420px) {
	.e-con.spx-koprechts { --gap: 8px; }
	.e-con.spx-header { gap: 8px; }
	.spx-taalwissel { font-size: 0.72rem; }
	.spx-taalwissel a { padding: 3px 5px; }
	.spx-knopwidget .elementor-button { padding: 9px 14px; font-size: 0.78rem; }
}

/* Het achtervoegsel plakt tegen het getal aan; de spatie staat waar hij
   hoort in de tekst zelf (" mln", " m"), niet in de opmaak. */
.spx-teller .elementor-counter-number-suffix { padding-left: 0; }

/* ==========================================================================
   13. Koptekst: niets mag platgedrukt worden
   ========================================================================== */

.e-con.spx-taal {
	width: auto !important;
	max-width: none;
	flex: 0 1 auto !important;
}

/* Menuknop, knop en taalwissel houden hun eigen breedte. */
.e-con.spx-koprechts .elementor-widget { flex: 0 0 auto; }

/* Het uitklapmenu over de volle breedte van de koptekst. */
.elementor-location-header .e-con.spx-header { position: relative; }

.spx-menu .elementor-nav-menu--dropdown {
	margin-top: 12px;
	border-radius: var(--spx-radius-s);
}

@media (max-width: 880px) {
	.spx-koplogo .spectrum-logo__merk { height: 24px !important; }
	.spx-koplogo .spectrum-logo__woord { font-size: 15px !important; }
	.spx-koplogo .spectrum-logo__plaats { font-size: 6.5px !important; }
	.elementor-location-header .e-con.spx-header { padding-top: 9px; padding-bottom: 9px; }
}

/* ==========================================================================
   14. Op mobiel staat de menuknop uiterst rechts
   --------------------------------------------------------------------------
   Volgorde wordt dan: logo · taalwissel · knop · menuknop. Op grote schermen
   verandert er niets: menu, knop, taalwissel.
   ========================================================================== */

@media (max-width: 880px) {
	.e-con.spx-koprechts .spx-wissel { order: -1; }
	.e-con.spx-taal .elementor-widget-nav-menu { order: 9; }
}

/* Niets in de koptekst mag krimpen, dus moet alles samen passen. */
@media (max-width: 880px) {
	.e-con.spx-taal { flex: 0 0 auto !important; }
	.e-con.spx-koprechts { --gap: 7px; }
	.e-con.spx-header { gap: 7px; }

	.spx-koplogo .spectrum-logo__woord { font-size: 14px !important; letter-spacing: 2px !important; }
	.spx-koplogo .spectrum-logo__plaats { font-size: 6px !important; letter-spacing: 2.2px !important; }

	.spx-knopwidget .elementor-button { padding: 9px 13px; font-size: 0.76rem; }

	.spx-taalwissel { font-size: 0.7rem; }
	.spx-taalwissel a { padding: 3px 4px; }
}

@media (max-width: 380px) {
	.spx-koplogo .spectrum-logo__woord { font-size: 12.5px !important; letter-spacing: 1.4px !important; }
	.spx-knopwidget .elementor-button { padding: 8px 11px; font-size: 0.72rem; }
}

/* ==========================================================================
   11. Beweging — rustiger en vloeiender dan de standaard van Elementor
   --------------------------------------------------------------------------
   Elementor schuift een element standaard honderd procent van zijn eigen
   hoogte omhoog, met een vlakke curve. Bij een kaart van vierhonderd pixels
   is dat een sprong van vierhonderd pixels; dat oogt schokkerig. Hieronder
   staan dezelfde animatienamen, maar met een korte afstand en een curve die
   aan het eind uitloopt.
   ========================================================================== */

.elementor-element.animated {
	animation-duration: 0.9s;
	animation-timing-function: cubic-bezier(0.19, 0.91, 0.28, 1);
	animation-fill-mode: both;
	backface-visibility: hidden;
}

.elementor-element.animated.fadeInUp { animation-name: spxOmhoog; }
.elementor-element.animated.fadeInDown { animation-name: spxOmlaag; }
.elementor-element.animated.fadeInLeft { animation-name: spxVanLinks; }
.elementor-element.animated.fadeInRight { animation-name: spxVanRechts; }
.elementor-element.animated.fadeIn { animation-name: spxVervagen; }

@keyframes spxOmhoog {
	from { opacity: 0; transform: translate3d(0, 28px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes spxOmlaag {
	from { opacity: 0; transform: translate3d(0, -22px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes spxVanLinks {
	from { opacity: 0; transform: translate3d(-26px, 0, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes spxVanRechts {
	from { opacity: 0; transform: translate3d(26px, 0, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes spxVervagen {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Een beeld komt binnen door heel licht uit te zoomen. `backwards` zorgt dat
   de animatie na afloop niets meer vasthoudt, zodat zweven blijft werken. */
.spx-beeld.animated img {
	animation: spxBeeldOpen 1.3s cubic-bezier(0.19, 0.91, 0.28, 1) backwards;
}

@keyframes spxBeeldOpen {
	from { transform: scale(1.07); }
	to { transform: scale(1); }
}

/* Kaarten en knoppen: iets tragere, zachtere overgang. */
.e-con.spx-kaart {
	transition: transform 0.45s cubic-bezier(0.19, 0.91, 0.28, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.e-con.spx-kaart:hover { transform: translate3d(0, -5px, 0); }

.spx-knopwidget .elementor-button {
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.35s cubic-bezier(0.19, 0.91, 0.28, 1), transform 0.35s cubic-bezier(0.19, 0.91, 0.28, 1);
}

.spx-beeld img { transition: transform 1.1s cubic-bezier(0.19, 0.91, 0.28, 1); }

/* De balken lopen wat rustiger vol. */
.spx-balkwidget .elementor-progress-bar { transition: width 1.5s cubic-bezier(0.19, 0.91, 0.28, 1); }

/* Koptekst krimpt een beetje zodra je gaat scrollen. */
.e-con.spx-header,
.spx-koplogo .spectrum-logo__merk,
.spx-koplogo .spectrum-logo__plaats {
	transition: padding 0.4s cubic-bezier(0.19, 0.91, 0.28, 1), height 0.4s cubic-bezier(0.19, 0.91, 0.28, 1), opacity 0.3s ease;
}

.elementor-location-header.is-geplakt .e-con.spx-header {
	padding-top: 6px;
	padding-bottom: 6px;
}

.elementor-location-header.is-geplakt .spx-koplogo .spectrum-logo__merk { height: 22px; }
.elementor-location-header.is-geplakt .spx-koplogo .spectrum-logo__plaats { opacity: 0; height: 0; overflow: hidden; margin: 0; }

/* Het beeld in de hero beweegt heel licht mee met het scrollen. */
.spx-beeld--hero img { will-change: transform; }

/* Binnen de pagina springen gaat glijdend. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Wie liever geen beweging ziet, krijgt alles meteen in de eindstand. */
@media (prefers-reduced-motion: reduce) {
	.elementor-element.animated,
	.spx-beeld.animated img {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.elementor-invisible { visibility: visible !important; }
	html { scroll-behavior: auto; }
}