/*
 * Aanvullingen op thaler.css.
 *
 * `thaler.css` is de stylesheet van de goedgekeurde mock-up en blijft
 * ongewijzigd, zodat hij regel voor regel met de bron te vergelijken blijft.
 * Alles wat WordPress nodig heeft en de mock-up niet kende, staat hier.
 * Houd dit bestand kort: groeit het, dan is dat een teken dat de markup van een
 * blok afwijkt van de mock-up en dáár de oplossing ligt.
 */

/* De mock-up wisselde van taal met knoppen en JavaScript; hier zijn het echte
   links, zodat de taalwissel ook zonder JavaScript werkt en indexeerbaar is.
   Deze regels geven ze het uiterlijk dat de knoppen in de mock-up hadden. */
.language-switch {
	display: inline-flex;
	gap: 4px;
}

.language-switch a {
	padding: 2px 7px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: inherit;
	font: 600 11px/1.5 Inter, Arial, sans-serif;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.language-switch a:hover,
.language-switch a:focus-visible {
	border-color: var(--white);
	background: rgba(255, 255, 255, 0.14);
}

.language-switch a[aria-current] {
	border-color: var(--white);
	background: var(--white);
	color: var(--navy);
}

/* WordPress zet zijn eigen uitlijnklassen op blokken. De mock-up regelde de
   breedte met .shell; deze twee regels laten ze samenwerken. */
.wp-block-group.alignfull > :where(:not(.alignfull)) {
	max-width: var(--shell);
	margin-inline: auto;
}

/* `--shell` in thaler.css is `min(1240px, 100% - 48px)`: de kolom houdt zelf
   al 24px aan weerszijden vrij. WordPress geeft zijn inhoudscontainers
   diezelfde marge nog een keer, waardoor een .shell daarbinnen 48px te smal
   werd — op het modellenoverzicht een kaart van 385 in plaats van 409px.
   Binnen zo'n container telt die marge dus niet nog eens mee. Het maximum is
   hetzelfde als in thaler.css; die stylesheet blijft byte-identiek aan de
   mock-up en kan er geen eigen variabele voor krijgen. */

/* Geen directe-kindselector: een blok zet zijn eigen omhulsel om de shell heen,
   en dan zou de regel er net naast grijpen. */
.has-global-padding .shell {
	width: min(1240px, 100%);
}

/* En die marge is niet overal even breed: onder 1000px gaat `--shell` van 48
   naar 40px totaal. De zijmarge van WordPress moet dezelfde knik maken, anders
   is de kolom daaronder 8px smaller dan in de mock-up. WordPress schrijft die
   marge zowel als variabele als met een vaste waarde weg, dus beide mee. */
@media (max-width: 1000px) {

	:root {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	.has-global-padding {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* De mock-up sloot op de dealerpagina een kaart van Google in. Dat is een
   verzoek naar een derde partij bij het laden van de pagina en dus een
   toestemmingsvraag; zie 11.2 van het migratieplan. Er staat nu een kaart uit
   eigen data, en zonder die data een tekening.

   De tekening is een staand vlak in een liggende kolom en krijgt daarom de
   `map-wrap` van de homepage om zich heen. De sectie houdt de hoogte van de
   ingesloten kaart die hier stond: 590px, waarvan 2 × 48px marge van die wrap.
   Er blijft dus 494px voor de tekening over, en dat is bij de verhouding uit
   thaler.css een breedte van 425px.

   Begrenzen op de breedte en niet op de hoogte, want anders houdt het vlak
   zijn 485px en laat de SVG er balken naast — en dan staan de markers niet
   meer op hun plaats, want die zijn een percentage van het kaartvlak. */
.dealer-map-zoom {
	overflow: hidden;
}

.region-map .dealer-map-zoom {
	max-width: 425px;
}

/* Schaal, middelpunt en verschuiving komen per dealer uit render.php: vergroten
   rond de vestiging, en dan opschuiven tot die zo dicht mogelijk bij het midden
   staat zonder dat de rand van de tekening in beeld komt. De tekening en de
   puntenlaag krijgen exact dezelfde bewerking, anders lopen ze uiteen. */
.dealer-map-zoom .dealer-map-base,
.dealer-map-zoom .dealer-map-points {
	transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom, 1));
	transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

/* Het stipje mag niet meeschalen: het is een markering, geen kaartelement.
   De tegenschaal houdt hem overal even groot. */
.dealer-map-zoom .dealer-point {
	transform: scale(calc(1 / var(--zoom, 1)));
}

/* Staat er een gerenderde kaart uit de eigen OpenStreetMap-data, dan is dat
   gewoon een afbeelding. De vestiging staat in het midden van die render, dus
   de marker staat vast op het midden in plaats van op een coördinaat.

   Het beeld vult de hele kaartkolom, zoals de ingesloten kaart in de mock-up
   dat deed. Absoluut binnen `.region-map`, want die kolom krijgt zijn hoogte
   uit thaler.css en verandert mee op de breekpunten: 590, 440 en 360px. Een
   figuur met `height: 100%` zou daar niets van meekrijgen, want die hoogte is
   een minimum en geen vaste maat. */
.region-map-render {
	position: relative;
	overflow: hidden;
}

.dealer-map-render {
	position: absolute;
	inset: 0;
	margin: 0;
}

.dealer-map-render img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dealer-map-render .dealer-point {
	left: 50%;
	top: 50%;
}

/* De bronvermelding is bij ODbL een voorwaarde en geen beleefdheid. Ze staat
   in de HTML en niet in het beeld: zo blijft ze leesbaar voor een schermlezer
   en hoeft er niets opnieuw gerenderd te worden als de tekst verandert. */
.dealer-map-render figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3px 7px;
	background: rgba(247, 245, 241, 0.82);
	color: var(--muted);
	font: 400 10px/1.4 Inter, Arial, sans-serif;
}

/* :any-link en niet kaal `a`: zonder die pseudo-klasse weegt deze regel lichter
   dan de taalwisselaar hierboven, en dan klaagt stylelint terecht dat een
   latere regel minder specifiek is dan een eerdere. */
.dealer-map-render figcaption a:any-link {
	color: inherit;
}

/* WordPress zet standaard 24px tussen de blokken op het hoogste niveau. De
   mock-up regelt zijn eigen ritme met .section en met de hero die tegen de
   bovenkant aan ligt; die extra marge schoof alles precies 24px omlaag. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Datzelfde speelt binnen een sectie: WordPress zet tussen twee blokken in een
   groep 24px, terwijl thaler.css de verticale ritmiek daar zelf bepaalt. De
   verhaalsectie werd er 48px hoger van en de intro 15px.

   Deze regel is bewust zwak: één klasse, dus een regel uit thaler.css die een
   element wél een marge geeft — `.story-panel p` bijvoorbeeld — wint hiervan.
   Alleen wat in de mock-up geen marge heeft, verliest die van WordPress. */
.intro-grid > * + *,
.story-panel > * + *,
.story > * + * {
	margin-block-start: 0;
}

/* Hetzelfde speelt in de rasters die uit de mock-up komen: tekst en formulier
   staan daar naast elkaar in een grid, en de 24px die WordPress tussen twee
   blokken zet duwt het formulier omlaag — een sectie werd er 23px hoger van.
   Ieder raster uit de mock-up draagt de klasse `shell`, dus die ene regel dekt
   ze allemaal. */
.wp-block-group.shell > * + * {
	margin-block-start: 0;
}

/* De mock-up zette `is-active` op een aangevinkte keuze met JavaScript, bij
   iedere klik. Hier komt die klasse van de server en klopt hij pas ná het
   versturen: je vinkte iets aan en zag niets veranderen. Deze regels laten de
   opmaak meelopen met het vinkje zelf, dus meteen bij de klik en zonder
   JavaScript. Ze zeggen precies wat `is-active` in thaler.css zegt. */
.compare-pick:has(input:checked) > span {
	border-color: var(--green-dark);
	background: rgba(215, 25, 32, 0.1);
}

/* De kaart op de homepage vult haar vlak van rand tot rand. In de mock-up was
   het een gestileerde tekening die met een slagschaduw in een crèmekleurig vlak
   zweefde; met een echte kaart is die rand een grijze baan om het beeld heen.

   Het beeld wordt tot het vlak uitgerekt en niet bijgesneden. Dat is met opzet:
   de stipjes staan in procenten van datzelfde vlak, dus beeld en stip rekken
   even veel mee en blijven bij elkaar staan. Bijsnijden zou het beeld wél
   verschuiven en de stippen niet. `make benelux-kaart` rendert op de
   verhouding van dit vlak, dus op een breed scherm valt er niets te rekken. */
.home-map-wrap {
	padding: 0;
}

.home-map-wrap .dealer-map {
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
}

.home-map-wrap img {
	filter: none;
}

/* De taalkeuze in het mobiele menu. In de mock-up staat ze alleen in de
   servicebalk, en die balk verdwijnt onder 1000px — op een site met drie
   markten was daarmee op mobiel geen taalwissel meer te vinden.

   Boven die grens staat ze in de balk en hoort dit blok weg; eronder andersom.
   Zo is er altijd precies één in beeld. */
.site-nav-languages {
	display: none;
}

@media (max-width: 1000px) {

	.site-nav-languages {
		display: block;
		width: 100%;
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* Groter dan in de balk: dit is een tikdoel en geen muisdoel. De hoogte
	   van 44px is de ondergrens die comfortabel te raken is. */
	.site-nav-languages .language-switch a {
		min-width: 52px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
	}

	/* Het telefoonnummer stond hier als kale link van 22 pixels hoog, náást
	   taalknoppen van 44. Bellen is op deze site het belangrijkste kanaal, en
	   daarmee stond de belangrijkste actie visueel onder de taalkeuze. Nu een
	   volwaardige knop, op een eigen regel erboven. */
	.site-nav-languages .utility-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin: 0 0 14px;
		padding: 0 18px;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 3px;
		font-size: 16px;
		font-weight: 600;
	}
}


/* De gewichten die de opmaak vraagt maar die niet als bestand bestaan.
   Op een modelpagina staan 148 elementen op Inter 700, drie op Manrope 900 en
   één op Bebas Neue 600 — gemeten met getComputedStyle, niet aangenomen. Van
   die drie is er geen bestand: Inter houdt op bij 600, Manrope bij 800 en Bebas
   heeft maar één gewicht.

   Wat de browser nu doet is het naastliggende gewicht pakken. Dat ziet er goed
   uit — nagemeten: dezelfde tekst op 600 en op 700 is exact even breed, dus er
   wordt niets nagebootst — maar het staat nergens vast. Zet iemand ooit een
   bestand inter-700 in de map en hangt daar een @font-face aan, dan verandert
   de halve modelpagina van uiterlijk zonder dat er een regel opmaak is
   aangeraakt.

   Daarom staat het hier wél vast: het bestand dat er is, wordt expliciet
   aangewezen voor het gewicht dat gevraagd wordt. De weergave blijft precies
   zoals de goedgekeurde mock-up hem laat zien — daar draait dezelfde opmaak op
   dezelfde bestanden — en een toevoeging later kan niets meer stilzwijgend
   omgooien. */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-600-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-600-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/manrope-800-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/manrope-800-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/bebas-neue-400-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/bebas-neue-400-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* stylelint-disable no-descending-specificity -- Dit bestand corrigeert
   thaler.css en staat er per definitie achter; de volgorde is de bedoeling. */

/* Ondergrens van 12px voor de kleine tekst. De mock-up zakt op een stuk of
   tien plekken naar 9, 10 of 11 pixels: de vermogenlabels in de modellenstrip,
   "Vanafprijs", de bronvermelding onder een praktijkverhaal, de kleine letters
   bij de garantie. Op een telefoon is dat niet te lezen, en op een scherm ook
   niet best — deze maten staan niet in een media query, ze zijn overal even
   klein.

   Daarom overal opgehoogd en niet alleen onder de duizend pixels. Het kost een
   paar pixels hoogte tegenover de mock-up; leesbaarheid weegt zwaarder, zoals
   ook bij de andere bewuste afwijkingen. De vermogenlabels gaan naar 13px: dat
   is het enige cijfer op die knop dat de bezoeker echt vergelijkt.

   Met de ouder erbij, want in thaler.css staat deze regel als
   `.model-carousel-tabs .tab-power` en dat weegt zwaarder. */
.model-carousel-tabs .tab-power {
	font-size: 13px;
}

.tab-slug,
.model-tile-badge,
.model-price span,
.model-tile-price span,
.model-tile-price small,
.verhaal-bron,
.s75-footnote,
.dealer-badge,
.dealer-place,
.kh-progress small,
.kh-step-option em,
.keuzehulp-help-points li span,
.attachment-card span,
.attachment-specs b,
.config-product span,
.config-total small,
.language-switch a,
.site-footer small {
	font-size: 12px;
}

/* "Made in Germany" boven het logo. Hij stond eerder op 12 pixels, mee met de
   ophoging hierboven, maar hoort bij het merkblok en niet bij de leestekst:
   een regel van drie woorden die het logo aankondigt, gevraagd op 9 pixels.
   De media query staat er apart onder, want die uit thaler.css weegt zwaarder
   dan een losse selector. */
.brand-origin {
	font-size: 9px;
}

@media (max-width: 1000px) {

	.brand-origin {
		font-size: 9px;
	}
}

/* De tekstkolom naast de kaart. De mock-up zet daar honderd pixels rondom, en
   dat is een vaste maat naast een kolom die meebeweegt: op een breed scherm
   valt het mee, maar bij twaalfhonderd pixels blijft er van de 595 pixels nog
   395 over voor de tekst en wordt de kaart ernaast juist aangesneden. Vijf
   procent schaalt mee met de kolom en houdt de twee helften in verhouding.

   Alleen waar de twee kolommen naast elkaar staan. Onder de duizend pixels
   staan ze onder elkaar en houdt thaler.css zijn eigen maten aan; vijf procent
   van een smalle kolom is daar te weinig lucht. */
@media (min-width: 1001px) {

	.dealer-copy {
		padding: 5%;
	}
}

/* Het venster bij een foto in de configurator. De pictogrammen zijn
   tweeënzestig pixels; daarop is niet te zien wat een opname of een geveerde
   stoel nu eigenlijk is. Een klik erop vergroot het beeld en zet de uitleg
   eronder.

   De vorm volgt de kaarten van de site: wit vlak, kleine radius, dezelfde
   schaduw. Geen eigen kleuren — dit is een venster over de pagina heen en geen
   nieuw onderdeel. */
.config-thumb-knop {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.config-thumb-knop:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

.config-uitleg {
	width: min(560px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--white);
	color: var(--navy);
	box-shadow: 0 24px 60px rgba(20, 20, 20, 0.35);
}

.config-uitleg::backdrop {
	background: rgba(20, 20, 20, 0.62);
}

.config-uitleg figure {
	margin: 0;
}

/* Het beeldvlak heeft een vaste hoogte en de foto past zich daarin. Van de 219
   opties met beeld zijn er 126 een pictogram van vierenzestig pixels en 93 een
   echte foto van bijna duizend. Rekte het beeld tot de volle breedte, dan werd
   zo'n pictogram een grove tekening over het hele venster — dat was de eerste
   poging, en die zag er niet uit. Nu staat het pictogram op ware grootte
   gecentreerd en vult de foto het vlak. */
.config-uitleg-beeld {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	padding: 16px;
	border-radius: 6px 6px 0 0;
	background: #f1efeb;
}

.config-uitleg img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.config-uitleg figcaption {
	padding: 24px 26px 28px;
}

/* De kleur staat er expliciet bij: de configurator staat op een donker vlak en
   thaler.css zet zijn koppen daar in wit. In dit venster is de achtergrond wit,
   en dan is een witte kop een lege regel — precies wat er stond. */
.config-uitleg h3 {
	margin: 0 0 6px;
	color: var(--navy);
	font: 400 26px/1.15 "Bebas Neue", Impact, Arial, sans-serif;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.config-uitleg [data-thaler-uitleg-prijs] {
	margin: 0 0 14px;
	color: var(--green-dark);
	font: 700 12px/1.4 Manrope, Arial, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.config-uitleg [data-thaler-uitleg-tekst] {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.65;
}

/* De sluitknop hangt in de hoek van het beeld, met een eigen vlak eronder
   zodat hij ook op een lichte foto leesbaar blijft. */
.config-uitleg-sluiten {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
}

.config-uitleg-sluiten button {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.62);
	color: var(--white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.config-uitleg-sluiten button:hover,
.config-uitleg-sluiten button:focus-visible {
	background: var(--green);
	outline: none;
}

/* Het blok over de importeur. Het leent het rooster van de contactpagina; wat
   hier staat is alleen de ruimte eromheen. */
.thaler-importeur {
	padding: 56px 0;
}

.thaler-importeur h2 {
	max-width: 22ch;
	margin: 14px 0 16px;
}

.thaler-importeur > .shell > p {
	max-width: 62ch;
	margin: 0 0 32px;
	color: var(--muted);
}

/* De knop naar de dealers, en de regel over wat er wél rechtstreeks kan. */
.thaler-importeur-weg {
	margin: 0 0 22px;
}

.thaler-importeur-rechtstreeks {
	max-width: 62ch;
	margin: 0;
	color: var(--muted);
}

.thaler-importeur-feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 28px 32px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.thaler-importeur-feiten div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.thaler-importeur-feiten dt {
	color: var(--green-dark);
	font: 700 12px/1.4 Manrope, Arial, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.thaler-importeur-feiten dd {
	margin: 0;
	font-size: 16px;
}

/* Een zichtbare focusrand in de voet. thaler.css geeft er een aan de knoppen
   en de hoofdnavigatie, maar niet aan de links in de voet; die kregen de rand
   van de browser zelf — `auto 1px rgb(16,16,16)`, bijna zwart op een
   antracieten vlak. Met het toetsenbord zag je dus niet waar je stond.

   `currentColor` en geen vaste kleur: de rand neemt de kleur van de tekst zelf
   over, en die is per definitie leesbaar op het vlak eronder. Dezelfde regel
   werkt daarmee ook als de voet ooit licht wordt. */
.site-footer a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
	border-radius: 1px;
}

/* De kleine letters in de voet stonden in wit, en de menulinks erboven in
   #d4dee7. Daarmee riep de bedrijfsinformatie harder dan de navigatie — in de
   mock-up viel dat niet op, want daar stond er één zin; hier staan de
   statutaire naam, het adres, de nummers en een servicezin onder elkaar.

   De volgorde is nu: kolomkop wit, links #d4dee7, kleine letters #aebdca, de
   garantieregel het zwakst. Vier stappen die aflopen in plaats van door elkaar
   heen. #aebdca haalt 7,5:1 op deze achtergrond, dus leesbaar blijft het. */
.contact-column small {
	color: #aebdca;
}

/* De servicezin is geen adresgegeven en hoort niet tegen de nummers aan te
   plakken. */
.contact-column small + small {
	display: block;
	margin-top: 12px;
}

/* De koppen van de voetkolommen staan als h2 in de markup in plaats van als h3
   — anders springt de koppenstructuur op een korte pagina van niveau 1 naar 3.
   thaler.css kent alleen `.footer-column h3`, dus de opmaak wordt hier
   herhaald; hij is letterlijk dezelfde. */
.footer-column h2 {
	margin: 0 0 22px;
	font: 400 17px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
	text-transform: uppercase;
}

/* De drie links onderin de voet — de credit en de twee beleidspagina's — waren
   16 pixels hoog. Dat is de hoogte van de regel zelf: er zit geen ruimte om de
   tekst, dus het tikdoel is precies de letters. Onder de 24 pixels is dat op
   een telefoon een kwestie van mikken. De regel eromheen heeft hoogte genoeg,
   dus dit kost niets aan opmaak. */
.footer-legal a {
	display: inline-block;
	padding: 4px 0;
	min-height: 24px;
}

/* De labels boven een specificatie en de nummers van een stappenlijst. Ze
   staan in de mock-up op een naamloos element binnen een article, vandaar
   deze langere selectors: de sectie eromheen is wat ze onderscheidt. */
.series-specs article span,
.series-keyfacts article span,
.s75-keyfacts article span,
.about-pillar-grid article span,
.about-numbers article span,
.contact-route-grid article span,
.service-choice-grid article span,
.series-offer .shell > div > span,
.series-offer .shell > div > small,
.button > span {
	font-size: 12px;
}

/* Het telefoonnummer in de servicebalk en in de voet. De mock-up kende ze niet
   — daar stond nergens een nummer — dus er is ook geen opmaak voor. Deze regels
   laten ze meelopen met wat er al staat. */
.utility-phone {
	margin-right: 14px;
	font-weight: 600;
}

.contact-column .footer-phone span {
	font-size: 18px;
	font-weight: 700;
}

/* De kop staat doorzichtig over de hero en wordt pas donker zodra je scrolt.
   Op een donkere hero gaat dat goed. Op de modelpagina staat de machine op een
   lichte studioachtergrond, en daar verdween de navigatie: wit op bijna-wit,
   gemeten op 1,16:1 voor de taalknoppen en 1,36:1 voor "Informatie" — met
   `make contrast-check`, dat de pixels achter de letters afleest in plaats van
   de kleur uit de CSS.

   De sluier hoort in de hero en niet in de kopbalk. Dat is niet willekeurig:
   de kopbalk staat op z-index 50 en zou met een eigen verloop óók over de
   aanhef eronder heen liggen — geprobeerd, en "THALER 3448" verdween erachter.
   De hero heeft al een sluierlaag met twee verlopen, van links en van onder;
   hier komt er één van boven bij, precies waar de kopbalk zweeft. De inhoud
   van de hero staat op z-index 2 en blijft er dus bovenop. */
:is(.hero-shade, .series-hero-shade, .information-hero-shade)::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 220px;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.88) 0%, rgba(24, 24, 24, 0.6) 45%, rgba(24, 24, 24, 0) 100%);
	pointer-events: none;
}

/* Het rode accentlabel op donkere vlakken. De merkkleur haalt op wit ruim 7:1,
   maar op antraciet blijft #A80026 op 1,92:1 steken en #DB0031 op 2,81:1 — ver
   onder de 4,5:1 die leesbaar heet. Het probleem is dus niet de kleur maar het
   vlak waar hij op ligt.

   Twee ingrepen. Op een licht vlak krijgt ook de `light`-variant het donkere
   rood: dat haalt daar 5,6:1 in plaats van 3,9:1. En op de donkere vlakken komt
   er een lichtere variant.

   Die variant lag eerst op de tint van het merkrood, alleen lichter. Dat werkte
   rekenkundig maar niet visueel: licht gemaakt leest dat rood als roze, want de
   merktint ligt aan de magenta-kant — sinds het rood gelijkgetrokken is met
   thalerworld.de zelfs op 347°. De tint is daarom naar oranje gedraaid en de
   verzadiging hoog gehouden — 8°, 87%, 66% tegenover 347°, 100%, 43% van het
   merkrood. Nog steeds rood, warm in plaats van roze, en met 5,07:1 ruim
   leesbaar op antraciet. */
:root {
	--thaler-rood-licht: #f4705c;
}

.eyebrow.light {
	color: var(--green-dark);
}

/* De dealerkaart staat er niet bij: die heeft een licht paneel, en daar hoort
   juist het donkere rood.

   De heroselector is bewust die van thaler.css zelf: op regel 15 staan de vijf
   klassen die een foto als achtergrond dragen bij elkaar. Eerst stond hier
   alleen `.page-hero`, en toen bleef de informatiehero achter met donkerrood op
   een foto — 1,56:1, onleesbaar. Een lijst met klassennamen laat vroeg of laat
   iemand buiten staan; dit is de verzameling waar het over gaat.

   LET OP — hier staat het merkrood zelf, op verzoek. Dat haalt op antraciet
   2,81:1 waar de lichtere variant hierboven 5,07:1 haalde, en blijft daarmee
   onder de 4,5:1 die de rest van de site aanhoudt. Er is geen kleur die allebei
   kan: een tint van het merkrood die het contrast wél haalt komt uit op
   #FF577C, en dat is roze. De keuze is dus merkkleur boven leesbaarheid; wie
   hem terugdraait zet hier `var(--thaler-rood-licht)` terug. */
:is(.hero, .series-hero, .photo-hero, .information-hero, .parallax-band, .page-hero) .eyebrow,
.story .eyebrow,
.model-card .eyebrow,
.config-summary .eyebrow,
.s75-work-section .eyebrow,
.s75-final-cta .eyebrow,
.service-process .eyebrow {
	color: var(--blue);
}

/* De dealersectie zet het paneel juist licht — `.dealers .dealer-card` heeft
   een eigen achtergrond van #DEDEDB — en zet daar het merkrood op. Daar hoort
   het donkere rood, en de selector moet even zwaar wegen als die uit
   thaler.css: drie klassen. */
.dealers .dealer-copy .eyebrow.light {
	color: var(--green-dark);
}

/* Het volgnummer op een modelkaart: grijs op antraciet, 3,51:1. Lichter grijs
   van dezelfde tint haalt 6,7:1. */
.model-index {
	color: #a8b2b8;
}

/* De labels in de kerncijferbalk staan in het merkrood op antraciet — dezelfde
   combinatie als het accentlabel hierboven, en met dezelfde uitkomst: 2,81:1.
   Ze krijgen dus dezelfde lichtere variant. */
.series-keyfacts span,
.s75-keyfacts span {
	color: var(--thaler-rood-licht);
}

/* stylelint-enable no-descending-specificity */

/*
 * De fotostrook op de modelpagina.
 *
 * De mock-up kent hem niet: die had één foto per machine. Thaler levert er vier
 * tot veertien, en die horen op de pagina te staan waar iemand een machine
 * uitzoekt. De vormgeving leunt op wat er al is — dezelfde kolom, dezelfde
 * kopstijl, en het venster van de configurator.
 */
.model-photos {
	padding: 4rem 0;
	background: var(--sand, #f5f3f0);
}

.model-photos h2 {
	margin: 0 0 2rem;
}

.model-photos-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.model-photos-strip a[data-thaler-foto] {
	display: block;
	overflow: hidden;
	background: #fff;
	border-radius: 2px;
	aspect-ratio: 4 / 3;
}

.model-photos-strip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.model-photos-strip a[data-thaler-foto]:hover img,
.model-photos-strip a[data-thaler-foto]:focus-visible img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

	.model-photos-strip img {
		transition: none;
	}

	.model-photos-strip a[data-thaler-foto]:hover img,
	.model-photos-strip a[data-thaler-foto]:focus-visible img {
		transform: none;
	}
}

/*
 * De marktmelding boven de kop, op /fr/ en /de/.
 *
 * Donker en smal: hij moet te lezen zijn zonder de kop eronder te overstemmen,
 * en hij mag de hero niet omlaag duwen meer dan één regel. De kop staat op die
 * pagina's toch al op een gevulde achtergrond — een modelpagina is de
 * uitzondering, en daar schuift de hero gewoon mee.
 */
.market-notice {
	background: var(--navy, #1b1f23);
	color: #fff;
	font: 500 13px/1.4 Inter, Arial, sans-serif;
}

.market-notice-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: baseline;
	justify-content: center;
	padding: 8px 0;
}

.market-notice > .shell > p {
	margin: 0;
}

.market-notice-inner a[rel="external"] {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.market-notice-inner a[rel="external"]:hover,
.market-notice-inner a[rel="external"]:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Twee regels stonden hier die de afstand tot de zwevende sitekop per pagina
 * bijstelden: 130 pixels extra op de modelpagina en 170 op /de/ en /fr/, waar
 * de meldingsbalk de kop een regel hoger maakt. Ze hoorden bij een hero die
 * zijn inhoud onderaan uitlijnde, en die is er niet meer: iedere hero begint nu
 * op 190 pixels vanaf de bovenkant (zie thaler.css), zodat de titel op elke
 * pagina op dezelfde hoogte staat. Die 190 houdt ook de hoogste kopbalk — 154
 * pixels met meldingsbalk — er ruim onder.
 */

/*
 * Een sluier bovenaan het kopbeeld van een pagina, nu de kop erover zweeft.
 *
 * Dezelfde ingreep als eerder bij de hero van de homepage en de modelpagina, om
 * dezelfde reden: de navigatie is wit, en op de dealerpagina staat rechtsboven
 * een lichte lucht. Het verloop van deze heroes komt van links en van onderen —
 * precies niet waar de kopbalk hangt.
 *
 * `.page-hero::after` staat in thaler.css bewust op `none`; dit is de enige
 * plek waar dat wordt teruggedraaid, en alleen voor de bovenrand.
 */
:is(.page-hero, .information-hero)::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 0 auto;
	height: 220px;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.88) 0%, rgba(24, 24, 24, 0.6) 45%, rgba(24, 24, 24, 0) 100%);
	pointer-events: none;
}

:is(.page-hero, .information-hero) > .shell {
	position: relative;
	z-index: 2;
}