/*
Theme Name: MEA Magazine
Theme URI: https://mijnelektrischeauto.nl
Author: Feeling Content
Description: Blokthema voor mijnelektrischeauto.nl. Voortgebouwd op het bestaande ontwerp (Work Sans koppen, Roboto broodtekst, blauw accent) en ingericht voor een nieuws- en kennissite over elektrisch rijden.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mea-magazine
Tags: blog, news, block-patterns, full-site-editing
*/

/* ---------- basis ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	overflow-x: clip;
}

/* ---------- kop met rubrieksbalk ---------- */
.mea-topbar {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.mea-nav a {
	text-decoration: none;
	font-weight: 500;
}

.mea-nav a:hover,
.mea-nav a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: .35em;
}

/* ---------- rubriekslabel boven een titel ---------- */
.mea-kicker,
.mea-kicker a {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--kop);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
}

.mea-kicker a:hover {
	text-decoration: underline;
}

/* ---------- artikelkaarten ---------- */
.mea-kaart {
	height: 100%;
}

.mea-kaart .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.mea-kaart .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.mea-kaart .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.mea-kaart-groot .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
}

/* ---------- meta-regel ---------- */
.mea-meta {
	color: var(--wp--preset--color--grijs);
	font-size: .85rem;
}

.mea-meta a {
	color: inherit;
}

/* ---------- artikeltekst ---------- */
.mea-artikel p,
.mea-artikel li {
	font-size: 1.075rem;
	line-height: 1.75;
}

.mea-artikel h2 {
	margin-top: 2.2em;
}

.mea-artikel h3 {
	margin-top: 1.8em;
}

.mea-artikel a {
	color: var(--wp--preset--color--link);
	text-underline-offset: .18em;
}

.mea-artikel figure figcaption {
	color: var(--wp--preset--color--grijs);
	font-size: .85rem;
}

.mea-artikel table {
	border-collapse: collapse;
	width: 100%;
}

.mea-artikel table th,
.mea-artikel table td {
	border: 1px solid var(--wp--preset--color--lijn);
	padding: .6em .8em;
	text-align: left;
}

.mea-artikel table th {
	background: var(--wp--preset--color--zacht);
	font-family: var(--wp--preset--font-family--kop);
}

/* tabellen mogen nooit de pagina laten schuiven */
.mea-artikel .wp-block-table {
	overflow-x: auto;
}

/* ---------- kernpunten-blok bovenaan een artikel ---------- */
.mea-kernpunten {
	background: var(--wp--preset--color--zacht);
	border-left: 4px solid var(--wp--preset--color--accent);
	padding: 1.25rem 1.5rem;
}

.mea-kernpunten p:first-child {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	margin-bottom: .5rem;
}

/* ---------- bronvermelding ---------- */
.mea-bronnen {
	border-top: 1px solid var(--wp--preset--color--lijn);
	font-size: .9rem;
	padding-top: 1rem;
}

.mea-bronnen li {
	margin-bottom: .35rem;
}

/* ---------- auteursblok ---------- */
.mea-auteur {
	background: var(--wp--preset--color--zacht);
	border-radius: 6px;
	padding: 1.5rem;
}

.mea-auteur img {
	border-radius: 50%;
}

/* ---------- transparantie-melding boven een partnerbijdrage ---------- */
.mea-partnermelding {
	background: var(--wp--preset--color--zacht);
	border: 1px solid var(--wp--preset--color--lijn);
	color: var(--wp--preset--color--grijs);
	font-size: .85rem;
	padding: .75rem 1rem;
}

/* ---------- FAQ-accordeon ---------- */
.mea-faq details {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding: 1rem 0;
}

.mea-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	list-style: none;
	padding-right: 2rem;
	position: relative;
}

.mea-faq summary::-webkit-details-marker {
	display: none;
}

.mea-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
	font-size: 1.4rem;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
}

.mea-faq details[open] summary::after {
	content: "\2212";
}

/* ---------- specificatietabel modelpagina ---------- */
.mea-specs {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--wp--preset--color--lijn);
	border: 1px solid var(--wp--preset--color--lijn);
}

.mea-specs > div {
	background: var(--wp--preset--color--wit);
	padding: 1rem;
}

.mea-specs dt {
	color: var(--wp--preset--color--grijs);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.mea-specs dd {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.35rem;
	font-weight: 700;
	margin: .2rem 0 0;
}

/* ---------- footer ---------- */
.mea-footer a {
	text-decoration: none;
}

.mea-footer a:hover {
	text-decoration: underline;
}

/* ---------- toegankelijkheid ---------- */
.skip-link {
	background: var(--wp--preset--color--tekst);
	color: #fff;
	left: -9999px;
	padding: .7rem 1rem;
	position: absolute;
	top: 0;
	z-index: 999;
}

.skip-link:focus {
	left: 0;
}

:where(a:focus-visible),
:where(button:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

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

/* =========================================================================
   Kleur per rubriek. Het label boven een titel verraadt meteen waar je bent.
   ====================================================================== */
.mea-kicker a[href*="/opladen/"]              { color: var(--wp--preset--color--laden) }
.mea-kicker a[href*="/kosten-en-belasting/"]  { color: var(--wp--preset--color--kosten) }
.mea-kicker a[href*="/modellen/"]             { color: var(--wp--preset--color--modellen) }
.mea-kicker a[href*="/accu-en-onderhoud/"]    { color: var(--wp--preset--color--accu) }
.mea-kicker a[href*="/nieuws/"]               { color: var(--wp--preset--color--nieuws) }

.mea-rubriek {
	border-bottom: 3px solid var(--rubriek, var(--wp--preset--color--accent));
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: .5rem;
}

.mea-rubriek h2 {
	font-size: 1.45rem;
	margin: 0;
}

.mea-rubriek h2::before {
	background: var(--rubriek, var(--wp--preset--color--accent));
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: .8em;
	margin-right: .55rem;
	vertical-align: -1px;
	width: 5px;
}

.mea-rubriek .mea-meer {
	color: var(--rubriek, var(--wp--preset--color--accent));
	font-family: var(--wp--preset--font-family--kop);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

.mea-rubriek .mea-meer:hover { text-decoration: underline }

.mea-r-opladen  { --rubriek: var(--wp--preset--color--laden) }
.mea-r-kosten   { --rubriek: var(--wp--preset--color--kosten) }
.mea-r-modellen { --rubriek: var(--wp--preset--color--modellen) }
.mea-r-accu     { --rubriek: var(--wp--preset--color--accu) }
.mea-r-nieuws   { --rubriek: var(--wp--preset--color--nieuws) }

/* =========================================================================
   Donkere kop op de voorpagina
   ====================================================================== */
.mea-hero {
	background: var(--wp--preset--gradient--nacht, #0B1033);
	border-radius: 14px;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.mea-hero::after {
	background: radial-gradient(circle at 78% 18%, rgba(48,79,254,.55), transparent 58%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mea-hero > * { position: relative; z-index: 1 }
.mea-hero h1 { color: #fff; letter-spacing: -.02em }
.mea-hero p  { color: #C7CEF2 }

.mea-hero__cijfers {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: rgba(255,255,255,.14);
	border-radius: 10px;
	overflow: hidden;
}

.mea-hero__cijfers > div {
	background: rgba(11,16,51,.72);
	padding: 1rem 1.15rem;
}

.mea-hero__cijfers dt {
	color: #A8B2E8;
	font-size: .74rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.mea-hero__cijfers dd {
	color: #fff;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: .2rem 0 0;
}

/* =========================================================================
   Zijkolom
   ====================================================================== */
.mea-met-zijkolom {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
	.mea-met-zijkolom { grid-template-columns: minmax(0,1fr) 320px }
}

.mea-zijkolom { align-self: start }

@media (min-width: 1000px) {
	.mea-zijkolom { position: sticky; top: 1.5rem }
}

.mea-widget {
	background: var(--wp--preset--color--zacht);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 10px;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.35rem;
}

.mea-widget h2 {
	font-size: .78rem !important;
	letter-spacing: .1em;
	margin: 0 0 .9rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
}

.mea-widget ul { list-style: none; margin: 0; padding: 0 }
.mea-widget li { border-top: 1px solid var(--wp--preset--color--lijn); padding: .55rem 0 }
.mea-widget li:first-child { border-top: 0; padding-top: 0 }

.mea-widget a {
	color: var(--wp--preset--color--inkt);
	font-size: .95rem;
	line-height: 1.35;
	text-decoration: none;
}

.mea-widget a:hover { color: var(--wp--preset--color--accent) }

/* model-lijstje met miniatuur */
.mea-widget--modellen li {
	align-items: center;
	display: grid;
	gap: .8rem;
	grid-template-columns: 64px 1fr;
}

.mea-widget--modellen img {
	aspect-ratio: 4 / 3;
	border-radius: 5px;
	object-fit: cover;
	width: 64px;
}

.mea-widget--modellen .mea-widget__cijfer {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
}

/* oproepkaart */
.mea-widget--cta {
	background: var(--wp--preset--gradient--nacht, #0B1033);
	border: 0;
	color: #fff;
}

.mea-widget--cta h2 { color: #A8B2E8 }
.mea-widget--cta p  { color: #D7DCF7; font-size: .92rem; margin: 0 0 1rem }

.mea-widget--cta .mea-cta-knop {
	background: #fff;
	border-radius: 6px;
	color: #0B1033;
	display: inline-block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	padding: .65rem 1.1rem;
	text-decoration: none;
}

.mea-widget--cta .mea-cta-knop:hover { background: #DDE3FF; color: #0B1033 }

/* =========================================================================
   Modellenstrook en modellenhub: liggende kaarten, twee naast elkaar.
   De bronfoto's lopen van 3:2 tot bijna 2:1, dus we kiezen een 16:10-kader.
   Dat ligt dicht bij de bron en snijdt lucht weg in plaats van de auto.
   ====================================================================== */
.mea-modelstrook,
.mea-modellijst {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin: 0 0 1rem;
}

@media (min-width: 760px) {
	.mea-modelstrook,
	.mea-modellijst { grid-template-columns: 1fr 1fr }
}

.mea-modelkaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 12px;
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.mea-modelkaart:hover,
.mea-modelkaart:focus-within {
	box-shadow: 0 12px 30px -20px rgba(15, 20, 36, .55);
	transform: translateY(-2px);
}

@media (min-width: 520px) {
	.mea-modelkaart { grid-template-columns: 40% 1fr }
	.mea-modelkaart--zonderbeeld { grid-template-columns: 1fr }
}

.mea-modelkaart__beeld {
	background: var(--wp--preset--color--zacht);
	display: block;
}

.mea-modelkaart__beeld img {
	aspect-ratio: 16 / 10;
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
	width: 100%;
}

.mea-modelkaart__body {
	display: block;
	min-width: 0;
	padding: 1rem 1.15rem 1.1rem;
}

/* zonder foto loopt de tekst over de hele breedte door */
.mea-modelkaart--zonderbeeld { grid-template-columns: 1fr }

.mea-modelkaart__naam {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: .7rem;
}

.mea-modelkaart__naam a {
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

.mea-modelkaart__naam a:hover { color: var(--wp--preset--color--accent) }

.mea-modelkaart__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem 1.15rem;
	margin-bottom: .6rem;
}

.mea-modelkaart__cijfers > span {
	color: var(--wp--preset--color--grijs);
	display: block;
	flex: 0 0 auto;
	font-size: .68rem;
	letter-spacing: .04em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
}

.mea-modelkaart__cijfers b {
	color: var(--wp--preset--color--inkt);
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
}

.mea-modelkaart__uitvoeringen {
	border-top: 1px solid var(--wp--preset--color--lijn);
	color: var(--wp--preset--color--modellen);
	display: block;
	font-size: .78rem;
	font-weight: 600;
	padding-top: .55rem;
	width: 100%;
}

/* op de hub linken we per uitvoering door */
.mea-modelkaart__uitvoeringen a {
	color: inherit;
	font-weight: 400;
	text-decoration: none;
}

.mea-modelkaart__uitvoeringen a:hover { text-decoration: underline }

/* =========================================================================
   Swipe-tool
   ====================================================================== */
.mea-swipe {
	background: var(--wp--preset--gradient--nacht, #0B1033);
	border-radius: 16px;
	color: #fff;
	margin: 2rem 0;
	padding: clamp(1.4rem, 4vw, 2.6rem);
}

.mea-swipe__label {
	color: #8FA0FF;
	font-family: var(--wp--preset--font-family--kop);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	margin: 0 0 .4rem;
	text-transform: uppercase;
}

.mea-swipe__titel {
	color: #fff !important;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	margin: 0 0 .6rem;
	max-width: 22ch;
}

.mea-swipe__intro { color: #C2CAF0; margin: 0 0 1.6rem; max-width: 48ch }

.mea-swipe__deck {
	height: 396px;
	margin: 0 auto;
	max-width: 340px;
	position: relative;
	touch-action: pan-y;
}

.mea-swipe__deck:focus-visible { outline: 2px solid #8FA0FF; outline-offset: 12px; border-radius: 14px }

.mea-swipe__leeg { color: #C2CAF0; padding-top: 3rem; text-align: center }

.mea-kaartje {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 40px -20px rgba(0,0,0,.75);
	cursor: grab;
	inset: 0;
	overflow: hidden;
	position: absolute;
	user-select: none;
}

.mea-kaartje:active { cursor: grabbing }

.mea-kaartje__beeld {
	background-position: center;
	background-size: cover;
	height: 232px;
	position: relative;
}

.mea-kaartje__merk {
	background: rgba(11,16,51,.82);
	border-radius: 4px;
	color: #fff;
	font-family: var(--wp--preset--font-family--kop);
	font-size: .7rem;
	font-weight: 600;
	left: .8rem;
	letter-spacing: .08em;
	padding: .25rem .55rem;
	position: absolute;
	text-transform: uppercase;
	top: .8rem;
}

.mea-stempel {
	border: 3px solid;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.5rem;
	font-weight: 800;
	opacity: 0;
	padding: .2rem .7rem;
	position: absolute;
	top: 1rem;
	text-transform: uppercase;
	transition: opacity .12s ease;
}

.mea-stempel--ja  { border-color: #00A867; color: #00A867; left: 1rem; transform: rotate(-14deg) }
.mea-stempel--nee { border-color: #DC2626; color: #DC2626; right: 1rem; transform: rotate(14deg) }
.mea-kaartje.is-ja  .mea-stempel--ja  { opacity: 1 }
.mea-kaartje.is-nee .mea-stempel--nee { opacity: 1 }

.mea-kaartje__body { padding: 1rem 1.1rem 1.2rem }

.mea-kaartje__body h3 {
	color: var(--wp--preset--color--inkt);
	font-size: 1.15rem;
	margin: 0 0 .7rem;
}

.mea-kaartje__feiten {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
}

.mea-kaartje__feiten dt {
	color: var(--wp--preset--color--grijs);
	font-size: .66rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.mea-kaartje__feiten dd {
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--kop);
	font-size: .95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: .1rem 0 0;
}

.mea-swipe__knoppen {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.4rem;
}

.mea-knop {
	background: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--kop);
	font-size: .95rem;
	font-weight: 700;
	padding: .7rem 1.5rem;
}

.mea-knop--nee { background: #fff; color: #DC2626 }
.mea-knop--ja  { background: #00A867; color: #fff }
.mea-knop:hover { filter: brightness(.94) }

.mea-swipe__teller {
	color: #A8B2E8;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
	min-width: 6ch;
	text-align: center;
}

.mea-swipe__uitslag {
	border-top: 1px solid rgba(255,255,255,.18);
	margin-top: 2rem;
	padding-top: 1.6rem;
}

.mea-swipe__uitslag h3 { color: #fff; font-size: 1.2rem; margin: 0 0 1rem }
.mea-swipe__uitslag p  { color: #C2CAF0 }
.mea-swipe__uitslag a  { color: #fff }

.mea-uitslag__lijst {
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	counter-reset: pos;
}

.mea-uitslag__lijst a {
	align-items: center;
	background: rgba(255,255,255,.08);
	border-radius: 8px;
	display: grid;
	gap: .7rem;
	grid-template-columns: 56px 1fr;
	padding: .5rem .7rem;
	text-decoration: none;
}

.mea-uitslag__lijst a:hover { background: rgba(255,255,255,.16) }
.mea-uitslag__lijst img { aspect-ratio: 4/3; border-radius: 5px; object-fit: cover; width: 56px }
.mea-uitslag__naam { color: #fff; display: block; font-family: var(--wp--preset--font-family--kop); font-weight: 700; font-size: .92rem }
.mea-uitslag__feit { color: #A8B2E8; display: block; font-size: .78rem; font-variant-numeric: tabular-nums }
.mea-uitslag__hint { font-size: .85rem }
.mea-knop--opnieuw { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff }

@media (max-width: 480px) {
	.mea-swipe__deck { height: 372px; max-width: 100% }
	.mea-kaartje__beeld { height: 208px }
}

/* =========================================================================
   Rekenmodules
   ====================================================================== */
.mea-tool {
	background: var(--wp--preset--gradient--nacht, #0B1033);
	border-radius: 14px;
	color: #fff;
	margin: 2rem 0;
	padding: clamp(1.3rem, 3.5vw, 2.2rem);
}

.mea-tool__label {
	color: #8FA0FF;
	font-family: var(--wp--preset--font-family--kop);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	margin: 0 0 .35rem;
	text-transform: uppercase;
}

.mea-tool__titel {
	color: #fff !important;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	margin: 0 0 .5rem;
}

.mea-tool__intro { color: #C2CAF0; margin: 0 0 1.4rem; max-width: 52ch }

.mea-tool__velden {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 1.4rem;
}

.mea-tool__velden label {
	color: #fff;
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: .9rem;
	font-weight: 600;
}

.mea-tool__hint {
	color: #98A3D8;
	display: block;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: .76rem;
	font-weight: 400;
	line-height: 1.35;
	margin: .15rem 0 .35rem;
}

.mea-tool input,
.mea-tool select {
	background: #fff;
	border: 0;
	border-radius: 6px;
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 1rem;
	padding: .6rem .7rem;
	width: 100%;
}

.mea-tool__grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: rgba(255,255,255,.16);
	border-radius: 10px;
	overflow: hidden;
}

.mea-tool__grid > div { background: rgba(11,16,51,.72); padding: 1rem 1.1rem }

.mea-tool__grid dt {
	color: #A8B2E8;
	font-size: .72rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.mea-tool__grid dd {
	color: #fff;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: .2rem 0 0;
}

.mea-tool__note {
	color: #C2CAF0;
	font-size: .92rem;
	margin: 1rem 0 0;
}

.mea-tool__disclaimer {
	border-top: 1px solid rgba(255,255,255,.16);
	color: #98A3D8;
	font-size: .82rem;
	margin: 1.4rem 0 0;
	padding-top: .9rem;
}

/* =========================================================================
   Oordeel: goed en minder goed naast elkaar
   ====================================================================== */
.mea-oordeel {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin: 1.5rem 0;
}

@media (min-width: 640px) {
	.mea-oordeel { grid-template-columns: 1fr 1fr }
}

.mea-oordeel__kolom {
	background: var(--wp--preset--color--zacht);
	border-radius: 10px;
	padding: 1.1rem 1.3rem 1.2rem;
}

.mea-oordeel__kolom h3 {
	font-size: .78rem !important;
	letter-spacing: .09em;
	margin: 0 0 .8rem !important;
	text-transform: uppercase;
}

.mea-oordeel__kolom:has(.mea-plus) { border-left: 4px solid var(--wp--preset--color--laden) }
.mea-oordeel__kolom:has(.mea-min)  { border-left: 4px solid var(--wp--preset--color--nieuws) }
.mea-oordeel__kolom:has(.mea-plus) h3 { color: var(--wp--preset--color--laden) }
.mea-oordeel__kolom:has(.mea-min) h3  { color: var(--wp--preset--color--nieuws) }

.mea-oordeel ul { list-style: none; margin: 0; padding: 0 }

.mea-oordeel li {
	font-size: .95rem;
	line-height: 1.55;
	margin-bottom: .65rem;
	padding-left: 1.5rem;
	position: relative;
}

.mea-oordeel li:last-child { margin-bottom: 0 }

.mea-plus li::before,
.mea-min li::before {
	font-weight: 700;
	left: 0;
	position: absolute;
	top: -.05em;
}

.mea-plus li::before { content: "+"; color: var(--wp--preset--color--laden); font-size: 1.2rem }
.mea-min li::before  { content: "\2212"; color: var(--wp--preset--color--nieuws); font-size: 1.2rem }

/* =========================================================================
   Keuzetools: keuzehulp, rekenhulp en aanbiederswijzer
   ====================================================================== */
.mea-gids {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--inkt);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 14px;
	margin: 1.6rem 0 2rem;
	overflow: hidden;
}

.mea-gids__kop {
	background: var(--wp--preset--color--zacht);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding: .95rem 1.35rem;
}

.mea-gids__kop b {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.05rem;
}

.mea-gids__kop span {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .85rem;
	margin-top: .15rem;
}

.mea-gids__body { padding: 1.35rem }

/* voortgang door de vragen */
.mea-gids__balk {
	background: var(--wp--preset--color--lijn);
	border-radius: 3px;
	height: 4px;
	margin-bottom: 1.2rem;
	overflow: hidden;
}

.mea-gids__balk i {
	background: var(--wp--preset--color--accent);
	display: block;
	height: 100%;
	transition: width .25s ease;
	width: 0;
}

.mea-gids .mea-vraag__tekst {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .35rem;
}

.mea-gids .mea-vraag__waarom {
	color: var(--wp--preset--color--grijs);
	font-size: .88rem;
	margin: 0 0 1rem;
}

.mea-gids .mea-keuzes {
	display: grid;
	gap: .5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.mea-gids .mea-keuzes--breed { grid-template-columns: 1fr 1fr }
}

.mea-gids .mea-keuze {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 9px;
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
	padding: .7rem .9rem;
	text-align: left;
	transition: border-color .15s ease, background .15s ease;
}

.mea-gids .mea-keuze:hover,
.mea-gids .mea-keuze:focus-visible {
	background: var(--wp--preset--color--zacht);
	border-color: var(--wp--preset--color--accent);
}

.mea-gids .mea-keuze b { display: block }

.mea-gids .mea-keuze span {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .84rem;
}

.mea-gids__terug {
	background: none;
	border: 0;
	color: var(--wp--preset--color--grijs);
	cursor: pointer;
	font: inherit;
	font-size: .85rem;
	margin-top: 1rem;
	padding: 0;
	text-decoration: underline;
}

/* uitkomst */
.mea-gids .mea-uitkomst__label {
	color: var(--wp--preset--color--grijs);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mea-gids .mea-uitkomst__titel {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.35rem;
	line-height: 1.25;
	margin: .2rem 0 .6rem;
}

.mea-gids .mea-uitkomst__reden {
	border-left: 3px solid var(--wp--preset--color--accent);
	margin: 1rem 0;
	padding-left: .9rem;
}

.mea-gids .mea-uitkomst__reden li { margin-bottom: .3rem }

/* invulvelden van de rekenhulp */
.mea-gids .mea-velden {
	display: grid;
	gap: .9rem 1.1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.mea-gids .mea-velden { grid-template-columns: 1fr 1fr }
}

.mea-gids .mea-veld label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: .25rem;
}

.mea-gids .mea-veld small {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .78rem;
	font-weight: 400;
}

.mea-gids .mea-veld input,
.mea-gids .mea-veld select {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 8px;
	font: inherit;
	padding: .5rem .6rem;
	width: 100%;
}

.mea-gids .mea-veld input:focus,
.mea-gids .mea-veld select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
	outline-offset: 1px;
}

.mea-gidsuitslag {
	border-top: 1px solid var(--wp--preset--color--lijn);
	margin-top: 1.3rem;
	padding-top: 1.1rem;
}

.mea-gidsrij {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: .42rem 0;
}

.mea-gidsrij + .mea-gidsrij { border-top: 1px dotted var(--wp--preset--color--lijn) }

.mea-gidsrij b { font-variant-numeric: tabular-nums }

.mea-gidsrij--totaal {
	border-top: 2px solid var(--wp--preset--color--inkt) !important;
	font-size: 1.08rem;
	margin-top: .3rem;
	padding-top: .6rem;
}

.mea-gidsrij span small {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .78rem;
}

.mea-gids__noot {
	color: var(--wp--preset--color--grijs);
	font-size: .82rem;
	line-height: 1.5;
	margin-top: 1.1rem;
}

/* wegwijzer naar de leasepagina per model */
.mea-modellinks {
	columns: 2;
	column-gap: 1.6rem;
	font-size: .93rem;
	list-style: none;
	margin: 1rem 0 1.6rem;
	padding: 0;
}

@media (min-width: 900px) { .mea-modellinks { columns: 3 } }

.mea-modellinks li {
	break-inside: avoid;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding: .38rem 0;
}

/* aanbiederswijzer: rangorde en ontbrekende gegevens */
.mea-gids .mea-keuze--aan {
	background: var(--wp--preset--color--zacht);
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
}

.mea-gids .mea-rangorde {
	counter-reset: rang;
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
}

.mea-gids .mea-rangorde > li {
	border-top: 1px solid var(--wp--preset--color--lijn);
	counter-increment: rang;
	padding: .85rem 0 .85rem 2.1rem;
	position: relative;
}

.mea-gids .mea-rangorde > li::before {
	color: var(--wp--preset--color--accent);
	content: counter(rang);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	left: 0;
	position: absolute;
	top: .85rem;
}

.mea-gids .mea-rangorde > li > b {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.02rem;
}

.mea-gids .mea-rangorde__meta {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .8rem;
	margin-bottom: .4rem;
}

.mea-gids .mea-rangorde ul {
	margin: 0;
	padding-left: 1.05rem;
}

.mea-gids .mea-rangorde li li {
	font-size: .9rem;
	line-height: 1.45;
	margin-bottom: .18rem;
}

.mea-gids .mea-rangorde__bron {
	color: var(--wp--preset--color--grijs);
	display: block;
	font-size: .8rem;
	margin-top: .45rem;
}

.mea-leeg { color: var(--wp--preset--color--grijs); font-style: italic }

/* de vergelijkingstabel is breed; die mag zelf schuiven */
.mea-breedtabel { overflow-x: auto }
.mea-breedtabel table { min-width: 780px }
.mea-breedtabel td, .mea-breedtabel th { font-size: .88rem; vertical-align: top }

/* portret van de redacteur op de pagina over de redactie */
.mea-portret {
	margin: 0 1.4rem .6rem 0;
	max-width: 148px;
	shape-margin: 1rem;
	shape-outside: circle();
}

.mea-portret img { border-radius: 50%; display: block; width: 100% }

@media (max-width: 520px) {
	.mea-portret { float: none; margin: 0 0 1rem }
}