/* ==========================================================================
   Autive - core.css
   --------------------------------------------------------------------------
   Het aanplakbiljet: elke sectie is een vel papier dat op een prikbord hangt,
   met plakband en aantekeningen met de hand. De ontwerpbron staat in
   designs/ontwerp/03-hetaanplakbiljet/ en designs/bouw/v03.mjs.

   Volgorde: eerst de vertaallaag van theme.json-tokens naar korte namen, dan
   basis en elementen, dan componenten. Elke component heeft een blok regels
   en een klasseprefix. Alle kleuren komen uit theme.json; hier staat geen
   losse hexwaarde die niet in een token past.
   ========================================================================== */

/* 0. Vertaallaag: theme.json-presets -> korte, semantische namen ---------- */
:root {
	/* Grond en vlakken */
	--bord:            var(--wp--preset--color--background);
	--vel:             var(--wp--preset--color--surface);

	/* Tekst */
	--ink:             var(--wp--preset--color--foreground);
	--zacht:           var(--wp--custom--kleur--zacht);
	--hand:            var(--wp--custom--kleur--hand);

	/* Merk */
	--magenta:         var(--wp--preset--color--primary);
	--magenta-op:      var(--wp--custom--kleur--magenta-op);
	--petrol:          var(--wp--preset--color--secondary);
	--lime:            var(--wp--preset--color--accent);
	/* De vierde dienstkleur. Hij komt niet uit het logo, want daar zitten er
	   drie in, en dat is met opzet zichtbaar: onderhoud is er als dienst bij
	   gekomen en niet als merk. Violet ligt in het enige gat dat het palet nog
	   had (petrol 190 graden, magenta 330; violet zit op 255) en haalt 6,72 : 1
	   op papierwit, tussen magenta 6,84 en petrol 6,21 in, zodat hij niet
	   zwaarder weegt dan de andere twee. */
	--violet:          var(--wp--preset--color--tertiary);
	--violet-op:       var(--wp--custom--kleur--violet-op);
	--violet-licht:    var(--wp--custom--kleur--violet-licht);
	--roos-licht:      var(--wp--custom--kleur--roos-licht);
	--petrol-licht:    var(--wp--custom--kleur--petrol-licht);

	/* De vier dienstkleuren als vlek onder een tekening */
	--vlek-toetsen:    var(--wp--custom--kleur--vlek-toetsen);
	--vlek-bouwen:     var(--wp--custom--kleur--vlek-bouwen);
	--vlek-onderhoud:  var(--wp--custom--kleur--vlek-onderhoud);
	--vlek-overnemen:  var(--wp--preset--color--accent);

	/* Toestanden. Deze drie stonden wel in het palet en niet in deze laag, en
	   forms.css gebruikt ze onder hun Nederlandse naam - var(--fout) was daar
	   dus ongeldig en viel terug op unset. Gevolg: een foutmelding in de kleur
	   van gewone tekst, en een rood uitroeprondje dat wit-op-wit onzichtbaar
	   werd. Precies de fout die er goed uitziet in de diff en niets doet op de
	   pagina. */
	--fout:            var(--wp--preset--color--error);
	--letop:           var(--wp--preset--color--warning);
	--goed:            var(--wp--preset--color--success);

	/* Lijnen en randen. --lijn is een scheidingslijntje, --rand is de
	   begrenzing van een bedienelement en haalt daarom 3 : 1 (1.4.11). */
	--lijn:            var(--wp--custom--kleur--lijn);
	--rand:            var(--wp--custom--kleur--rand);

	/* Plakband */
	--plakband:        var(--wp--custom--kleur--plakband);
	--plakband-rand:   var(--wp--custom--kleur--plakband-rand);

	/* Letters */
	--sans:            var(--wp--preset--font-family--body);
	--schrift:         var(--wp--preset--font-family--hand);

	/* Maten */
	--kolom:           var(--wp--custom--container--wide);
	--gutter:          var(--wp--custom--gutter);
	--sectie-y:        var(--wp--custom--section--y);
	--sectie-y-breed:  var(--wp--custom--section--y-wide);
	--radius-sm:       var(--wp--custom--radius--sm);
	--lijn-hair:       var(--wp--custom--stroke--hair);
	--lijn-firm:       var(--wp--custom--stroke--firm);
	--lijn-dik:        var(--wp--custom--stroke--dik);
	--maat-getal:      var(--wp--custom--size--getal);
	--maat-hand:       var(--wp--custom--size--hand);
	--maat-hand-klein: var(--wp--custom--size--hand-klein);
	--tracking-label:  var(--wp--custom--tracking--label);
	--tracking-tabel:  var(--wp--custom--tracking--tabel);
	--snel:            var(--wp--custom--motion--quick);
	--soepel:          var(--wp--custom--motion--smooth);
	--z-kop:           var(--wp--custom--z--kop);
	--z-submenu:       var(--wp--custom--z--submenu);

	/* De schaduw van een vel op het bord */
	--schaduw-vel:     var(--wp--preset--shadow--vel);
	--schaduw-knop:    var(--wp--preset--shadow--knop);
	--schaduw-kop:     var(--wp--preset--shadow--kop);
}

/* 1. Basis en elementen -------------------------------------------------- */

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

/* 1.4.10 - "Toegankelijkheidsonderzoek" is voor de layout een woord van 26
   tekens. In een titelformaat past dat op 320 px in geen enkele kolom, en dan
   schuift de hele pagina horizontaal. Koppen mogen dus breken. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Hetzelfde voor lopende tekst zodra hij in een smalle kolom staat. Bij 200 %
   tekstvergroting (1.4.4) liep hij anders uit zijn raster. */
p, li, dd, dt, td, th, figcaption, label, summary { overflow-wrap: break-word; }

/* Het accentwoord in een kop. Dit was een <em>, en dat is verkeerd: <em>
   betekent nadruk, en wat hier gebeurt is een kleurtje. Een schermlezer die
   nadruk aankondigt kondigt dan iets aan dat er niet is. Nu een <span> met
   een klasse: dezelfde kleur, geen geleende betekenis.

   De em-selector blijft staan voor inhoud die nog uit de oude vorm komt. */
h1 .autive-accent, h2 .autive-accent, h3 .autive-accent,
h1 em, h2 em, h3 em { font-style: normal; color: var(--magenta); }

/* Een kop mag nooit onder de kopbalk verdwijnen bij het springen naar een
   anker, en niet achter de vaste actiebalk op een telefoon (2.4.11). */
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: 1.5rem; }

/* 2. Opmaakruimte: sectie en vel ----------------------------------------- */

.autive-sectie { padding-block: var(--sectie-y); }
@media (min-width: 46rem) {
	.autive-sectie { padding-block: var(--sectie-y-breed); }
}

/* De ruimte boven en onder de inhoud van een pagina. */
.autive-hoofd { padding-block: var(--wp--custom--section--hoofd) 1rem; }
/* Op een pagina met een kruimelpad begint de inhoud niet met een vel maar
   met die ene regel, en dan is de ruimte boven de main (40 px) plus de
   ruimte van de kruimelsectie te veel wit boven één regel tekst (eigenaar,
   13 september 2026: "aan de bovenkant te veel witruimte"). Dan schuift het
   kruimelpad tegen de kop aan en brengt de eerste sectie eronder zijn eigen
   ruimte mee. Op de voorpagina, zonder kruimelpad, blijft de 40 px staan. */
.autive-hoofd:has(> .autive-kruimelsectie nav) { padding-block-start: 0.5rem; }
@media (min-width: 46rem) {
	.autive-hoofd { padding-block: var(--wp--custom--section--hoofd-wide) 1.5rem; }
	.autive-hoofd:has(> .autive-kruimelsectie nav) { padding-block-start: 0.75rem; }
}

/* 3. Het vel ------------------------------------------------------------- */
/* Twee blokstijlen op core/group: "Vel" en "Vel klein". Een redacteur kiest
   er een in het paneel Stijlen en typt nooit een klasse. De kleur is geen
   derde, vierde en vijfde stijl maar de gewone achtergrondkiezer uit het
   palet: magenta, petrol of lime. Dat scheelt drie keuzes in het paneel en
   het houdt de kleur waar een redacteur hem zoekt.

   De tekstkleuren op zo'n gekleurd vel staan hieronder allemaal expliciet.
   Een kaart die zijn tekstkleur erft is in deze set twee keer misgegaan:
   wit op wit, 1,16 : 1, op een dienstpagina. */

:is(.is-style-vel, .is-style-vel-klein) {
	position: relative;
	background: var(--vel);
	color: var(--ink);
	box-shadow: var(--schaduw-vel);
	/* De grondstand. Secties in de inhoud van een pagina krijgen hieronder een
	   eigen draaiing uit hun plek; een vel daarbuiten - in een sjabloon, in de
	   zijkolom van een proef - houdt deze. */
	transform: rotate(-0.5deg);
}
.is-style-vel { padding: 1.75rem 1.25rem 1.5rem; }
.is-style-vel-klein { padding: 1.4rem 1.25rem 1.2rem; }
@media (min-width: 46rem) {
	.is-style-vel { padding: 3rem 2.75rem 2.75rem; }
	.is-style-vel-klein { padding: 1.9rem 1.75rem 1.6rem; }
}

/* Het plakband. Twee hoekstroken is de grondvorm.

   De linkerstrook mag over de rand steken, de rechter niet. Alleen de
   rechterkant telt voor horizontale scroll, en de rechterstrook zit op de
   bovenhoek van een vel dat zelf een graad scheef hangt: bij een hoog vel
   zwaait die hoek door de draaiing naar buiten. Gemeten op de
   tarievenpagina bij 200 % tekst - het vel is daar zo'n 3.000 px hoog en de
   hoek schoof 23 px naar rechts. Vandaar right: 0 in plaats van een
   overhang. Op 320 px was ditzelfde eerder al goed voor twee pixels scroll
   bij -0.5rem. */
:is(.is-style-vel, .is-style-vel-klein)::before,
:is(.is-style-vel, .is-style-vel-klein)::after {
	content: "";
	position: absolute;
	top: -0.45rem;
	width: 3.6rem;
	height: 1.25rem;
	background: var(--plakband);
	border-left: var(--lijn-hair) solid var(--plakband-rand);
	border-right: var(--lijn-hair) solid var(--plakband-rand);
}
:is(.is-style-vel, .is-style-vel-klein)::before { left: -0.5rem; transform: rotate(-40deg); }
:is(.is-style-vel, .is-style-vel-klein)::after  { right: 0; transform: rotate(37deg); }
@media (min-width: 46rem) {
	:is(.is-style-vel, .is-style-vel-klein)::before,
	:is(.is-style-vel, .is-style-vel-klein)::after { width: 4.5rem; height: 1.4rem; }
}

/* 3b. Variatie zonder knoppen -------------------------------------------- */
/* De statische set zette de draaiing en de plakbandvariant per vel met de
   hand: hang-a tot hang-d en plak-m of plak-l. Dat zijn zes klassen die een
   redacteur zou moeten onthouden, en dat is precies wat 10-theme.md
   verbiedt. De variatie komt hier uit de plek van de sectie op de pagina:
   vier draaiingen en drie plakbandstanden die cyclisch aflopen. Herschik de
   secties en de variatie schuift mee, altijd binnen een graad - meer dan dat
   steekt op 320 px buiten de marge. */

.wp-block-post-content > *:nth-child(4n+1) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(-0.5deg); }
.wp-block-post-content > *:nth-child(4n+2) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(0.45deg); }
.wp-block-post-content > *:nth-child(4n+3) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(-0.6deg); }
.wp-block-post-content > *:nth-child(4n)   :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(0.55deg); }

/* Twee standen, om en om: de grondvorm met een strook op elke bovenhoek, en
   een enkele strook overdwars midden-boven. Die tweede raakt de rechterkant
   niet, dus daar kan niets uitsteken.

   Er wás een derde stand - één strook linksboven - en die is eruit. Een vel
   dat alleen aan de linkerkant vastzit hangt niet, het valt: het oog leest
   een blad papier van 1.100 px breed met plakband in één hoek als scheef
   opgehangen, ook als het dat niet is. Plakband hoort in het midden of op
   allebei de hoeken. */
.wp-block-post-content > *:nth-child(2n) :is(.is-style-vel, .is-style-vel-klein)::before {
	left: 50%;
	width: 6rem;
	transform: translateX(-50%) rotate(-2deg);
}
.wp-block-post-content > *:nth-child(2n) :is(.is-style-vel, .is-style-vel-klein)::after { display: none; }

/* Onder 46 rem hangen de vellen recht, en dat is een meting, geen smaak.
   Een vel dat een halve graad scheef staat wordt breder dan zijn eigen doos:
   de aanwas is de hoogte maal de sinus van de hoek, en op een telefoon is een
   vel de volle breedte en al gauw 1.300 px hoog. Dat is 13 px die rechts
   buiten het venster steken - gemeten met reflow(320) op de tarievenpagina en
   op de bouwpagina, +13 en +17 px. Horizontaal moeten schuiven op een
   telefoon is 1.4.10, en dat weegt zwaarder dan de scheefheid.

   Het bord blijft een bord: het plakband staat nog steeds scheef, de schaduw
   ligt er nog onder, en het papier is nog papier. Alleen het vel zelf hangt
   recht. Op een breed scherm, waar een vel nooit veel hoger is dan zijn eigen
   breedte, blijft de draaiing staan. */
@media (max-width: 45.99rem) {
	:is(.is-style-vel, .is-style-vel-klein),
	.wp-block-post-content > *:nth-child(n) :is(.is-style-vel, .is-style-vel-klein),
	.autive-drieluik > .wp-block-column:nth-child(n) :is(.is-style-vel, .is-style-vel-klein),
	.autive-tweevel > .wp-block-column:nth-child(n) :is(.is-style-vel, .is-style-vel-klein),
	.autive-tegen > .wp-block-column:nth-child(n) :is(.is-style-vel, .is-style-vel-klein),
	.autive-route .autive-halte:nth-child(n) { transform: none; }
}

/* 3c. De drie logokleuren als vel ---------------------------------------- */
/* Gemeten: wit op magenta 6,95 : 1, de lichte roos op magenta 4,92 : 1, wit
   op petrol 6,31 : 1, de lichte petrol op petrol 5,11 : 1, inkt op lime
   10,13 : 1. De handkleur haalt op lime 3,73 : 1 en op petrol minder, dus in
   die twee vellen staat geen aantekening met de hand en geen zachte
   tekstkleur. Limegroen staat nergens als tekst op licht: dat haalt 1,6 : 1. */


:is(.is-style-vel, .is-style-vel-klein).has-primary-background-color,
:is(.is-style-vel, .is-style-vel-klein).has-tertiary-background-color,
:is(.is-style-vel, .is-style-vel-klein).has-secondary-background-color {
	color: #FFFFFF;
}
:is(.is-style-vel, .is-style-vel-klein).has-accent-background-color {
	color: var(--ink);
}

/* Magenta */
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(h1, h2, h3, h4, p, li, dt, dd, strong, figcaption) { color: #FFFFFF; }
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(.autive-label, .autive-inleiding, .autive-tegen-uit, h1 em, h2 em, .autive-accent) { color: var(--roos-licht); }
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-getal .autive-getal-uit { color: var(--roos-licht); }
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button) { color: var(--roos-licht); }
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button):hover { color: #FFFFFF; }
.has-primary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-punten li::before { background: #FFFFFF; }

/* Petrol */
.has-secondary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(h1, h2, h3, h4, p, li, dt, dd, strong, figcaption) { color: #FFFFFF; }
.has-secondary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(.autive-label, .autive-inleiding, .autive-tegen-uit, h1 em, h2 em, .autive-accent) { color: var(--petrol-licht); }
.has-secondary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-getal .autive-getal-uit { color: var(--petrol-licht); }
.has-secondary-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button) { color: #FFFFFF; }
.has-secondary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-punten li::before { background: #FFFFFF; }

/* Violet. Wit erop haalt 6,83 : 1 en de lichte tint 5,18 : 1, allebei ruim
   boven de eis en allebei hoger dan het paar magenta met roos-licht (4,92 : 1)
   dat hier al stond. Gerekend, niet gegokt. */
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(h1, h2, h3, h4, p, li, dt, dd, strong, figcaption) { color: #FFFFFF; }
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) :is(.autive-label, .autive-inleiding, .autive-tegen-uit, h1 em, h2 em, .autive-accent) { color: var(--violet-licht); }
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-getal .autive-getal-uit { color: var(--violet-licht); }
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button) { color: var(--violet-licht); }
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button):hover { color: #FFFFFF; }
.has-tertiary-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-punten li::before { background: #FFFFFF; }

/* Lime */
.has-accent-background-color:is(.is-style-vel, .is-style-vel-klein) :is(h1, h2, h3, h4, p, li, dt, dd, strong, figcaption, .autive-label, .autive-inleiding, .autive-tegen-uit, h1 em, h2 em, .autive-accent) { color: var(--ink); }
.has-accent-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-getal :is(.autive-getal-nr, .autive-getal-uit) { color: var(--ink); }
.has-accent-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button) { color: var(--ink); }
.has-accent-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-punten li::before { background: var(--ink); }

/* Een smal vel, voor een korte mededeling tussen twee grote vellen.

   De selector moet .is-layout-constrained > … .alignwide zijn, en niet een
   kale klasse. WordPress zet zelf
     .is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size) }
   en dat is 0,2,0. Een kale .autive-vel-smal is 0,1,0 en verliest daarvan
   zonder iets te zeggen: het vel bleef gewoon 1.152 px breed. */
.is-layout-constrained > .autive-vel-smal.alignwide {
	max-width: 36rem;
	margin-inline: auto;
}

/* 3d. Het kruimelpad ------------------------------------------------------ */
/* Kernblok core/breadcrumbs, dus geen eigen PHP en geen plugin nodig. Op de
   voorpagina rendert het blok zichzelf niet (showOnHomePage staat standaard
   uit), en dan blijft er een lege sectie over met alleen ruimte erin - die
   klapt daarom dicht. */

.autive-kruimel {
	font-size: 0.95rem;
	color: var(--zacht);
}
.autive-kruimel a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--zacht);
}
.autive-kruimel a:hover { color: var(--magenta); }
.autive-kruimelsectie:not(:has(nav)) { padding-block: 0; }
/* De sectie om het kruimelpad kreeg de gewone sectieruimte boven en onder,
   en de link erin is al 44 px hoog: samen te veel lucht om één regel
   (eigenaar, 13 september 2026). Boven een klein beetje, onder niets; de
   sectie eronder brengt zijn eigen ruimte mee. */
.autive-kruimelsectie { padding-block: 0.5rem 0; }

/* 4. Kopbalk ------------------------------------------------------------- */

.autive-kop {
	background: var(--vel);
	border-bottom: var(--lijn-hair) solid var(--lijn);
	box-shadow: var(--schaduw-kop);
	position: relative;
	z-index: var(--z-kop);
}
/* Het logo is nu uit de 2x-bron van de live site gesneden, 129 px hoog, dus
   op een scherm met dubbele pixeldichtheid is 64 px nog precies 1 : 1. Deze
   48 is daarmee een ontwerpkeuze en geen gebrek meer - er is ruimte naar
   boven als dat ooit gewenst is. */
.autive-kop .wp-block-site-logo img,
.autive-kop .custom-logo {
	height: clamp(36px, 4.6vw, 48px);
	width: auto;
	display: block;
}

/* 5. Navigatie ----------------------------------------------------------- */
/* Let op 20-fse.md: het uitklapmenu op een breed scherm en het schermvullende
   overlay op een telefoon zijn hetzelfde blok maar twee verschillende
   componenten. Elke regel die de submenucontainer raakt staat daarom achter
   .wp-block-navigation__responsive-container:not(.is-menu-open), ook de
   regels die alleen kleur zetten. Een ongescopeerde display:none maakte op
   twee Autive-sites hele bestemmingen onbereikbaar op een telefoon, en een
   ongescopeerde color deed het daarna nog eens over op 1,07 : 1.
   De controle is mechanisch, dus draai hem in plaats van te lezen:
     grep -n 'submenu-container' assets/css/core.css | grep -v 'is-menu-open' */

.autive-kop .wp-block-navigation { font-size: 0.97rem; }
/* De afstand tussen twee menu-items is niet alleen de blockGap uit
   parts/header.html: core zet er ook 0,97 rem padding links en rechts op elk
   item bij, dus tussen twee woorden zat 1,3 rem + tweemaal 15,5 px = ruim
   50 px. Hier is die padding 0,45 rem en de blockGap 0,85 rem, samen zo'n
   28 px. Het item blijft 44 px hoog en minstens zijn woordbreedte plus
   14 px breed, dus 2.5.8 heeft er geen last van. */
.autive-kop .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.45rem;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--snel);
}
.autive-kop .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.autive-kop .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.autive-kop .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--magenta);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Het paneel onder Diensten, alleen op een breed scherm.

   Het is een vel dat onder de kopbalk vandaan komt, en niet een grijs
   systeemmenu: papierwit, plakbandkleurige hairline, dezelfde schaduw als
   elke sectie. Elk item draagt links de kleur van zijn eigen dienst - magenta
   toetsen, petrol bouwen, lime overnemen - dezelfde codering als de drie
   vakken op de voorpagina en als de gereedschapswand. Die koppeling loopt via
   het ADRES en niet via een klasse: zo hoeft een redacteur die het menu
   opnieuw zet niets te typen om de kleur te houden, en er staat geen
   volgnummer in de CSS dat stilletjes op het verkeerde item gaat wijzen.

   Over de specificiteit, want de vorige versie hier was gewoon fout. Core zet
   het paneel open met vijf klassen - navigation, has-child, :not(open-on-click),
   :hover en het paneel zelf - en dat is 0,5,0. (De selector staat hier met
   opzet niet voluit: de mechanische controle uit 20-fse.md grept op de naam
   van het paneel en zou op dit commentaar afgaan.)
   De verdubbelde klasse van hiervoor kwam op 0,4,0 en verloor
   dus: gemeten stond het paneel op min-width 200px in plaats van op de
   themabreedte, en de langste dienstnaam wikkelde in vier regels. Het
   commentaar erboven beweerde het tegendeel. Alles hieronder staat daarom op
   ten minste 0,6,0, en de maat is nagemeten in de browser en niet afgeleid uit
   de regel. */
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.wp-block-navigation-item > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
	top: 100%;
	/* Zo breed als de langste regel erin, en niet een vaste 24 rem: dat was
	   te breed voor vier korte namen (eigenaar, 13 september 2026). De
	   max-width blijft, want op een smal venster mag hij niet buiten beeld. */
	min-width: 0;
	inline-size: max-content;
	max-width: calc(100vw - 2 * var(--gutter));
	padding: 0.4rem;
	background: var(--vel);
	border: var(--lijn-hair) solid var(--plakband-rand);
	border-radius: 0;
	box-shadow: var(--schaduw-vel);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	color: var(--ink);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.35;
	padding: 0.6rem 0.8rem;
	min-height: 0;
	border-left: var(--lijn-dik) solid transparent;
	transition: background var(--snel), border-color var(--snel), color var(--snel);
}
/* De streep hoort bij de dienst, dus hij staat er ook als je nergens overheen
   staat: kleur is hier codering en geen hovereffect. De vlek eronder komt pas
   bij hover en focus. */
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="toegankelijk-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-left-color: var(--magenta);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="laten-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-left-color: var(--petrol);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="website-onderhoud"].wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-left-color: var(--violet);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="overnemen"].wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-left-color: var(--lime);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="toegankelijk-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="toegankelijk-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--vlek-toetsen);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="laten-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="laten-maken"].wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--vlek-bouwen);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="website-onderhoud"].wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="website-onderhoud"].wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--vlek-onderhoud);
}
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="overnemen"].wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a[href*="overnemen"].wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--vlek-overnemen);
}
/* De tekst blijft inkt op elke vlek - dat haalt 10 : 1 en meer. Magenta tekst
   op de rozevlek zou 3,4 : 1 zijn, en dat is precies het soort hovereffect dat
   op papier goed lijkt en gemeten zakt. */
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--ink);
	text-decoration: none;
}
/* De pagina waar je staat, in het paneel zelf. Core's eigen markering zit op
   het li, dus dit hangt aan dezelfde klasse als in de hoofdbalk. */
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

/* Het paneel gaat ook open als de focus erin komt, en niet alleen bij hover.
   60-seo-performance.md eist dat met zoveel woorden, en core levert het hier
   niet: zijn eigen focus-within-regel sluit .open-on-hover-click expliciet
   uit, en dat is precies de klasse die dit menu krijgt. Gevolg was dat je met
   Tab langs "Diensten" liep en de vier dienstpagina's oversloeg - je kwam er
   alleen in door op de knop te drukken, een handeling die een muisgebruiker
   niet hoeft te doen.

   Vijf klassen diep, want core's eigen toonregel is er vier. Gescopeerd met
   :not(.is-menu-open), want binnen het schermvullende overlay staat het
   submenu al open en regelt core het daar zelf. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.open-on-hover-click:focus-within > .wp-block-navigation__submenu-container {
	height: auto;
	width: auto;
	opacity: 1;
	overflow: visible;
	visibility: visible;
}

/* De knop die het submenu uitklapt. Core rendert die als een los knopje van
   9 x 9 px naast de link, en dat is 2.5.8 Doelgrootte: het is het enige wat
   je met een vinger kunt raken om het submenu te openen. Gevonden door de
   zelftest van de meting, niet door de meting zelf - die keek alleen op
   390 px, en daar zit dit knopje in het uitklapmenu verstopt.

   Gescopeerd met :not(.is-menu-open), en dat is hier geen formaliteit: core
   verbergt dit knopje juist binnen het schermvullende overlay, en elke
   auteursregel die display zet wint van die regel. Ongescopeerd zou dit
   knopje dus op een telefoon terugkomen boven op het menu. Precies de fout
   die 20-fse.md beschrijft, een element verderop.

   De breedte was 44 px, en dat zette het pijltje ruim twintig pixels van het
   woord "Diensten" af - het leek bij "Tarieven" te horen. 2.5.8 AA vraagt
   24 x 24; die 44 was de AAA-maat van 2.5.5 en die kost hier leesbaarheid.
   Nu 26 breed en nog steeds 44 hoog, dus het doel blijft ruim boven de eis en
   het pijltje staat waar het bij hoort. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding-inline: 0;
	min-height: 44px;
	color: var(--ink);
}
/* De tweede helft van diezelfde afstand zat niet in de knop maar in de link
   ervoor: core geeft elk menu-item 15,5 px padding links en rechts, en bij
   "Diensten" staat het pijltje achter die padding. Gemeten stond de punt van
   het pijltje 20 px van de letter n. Alleen bij een item met een submenu gaat
   die rechterpadding eruit; de andere items houden hun ritme. */
.autive-kop .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-right: 0.15rem;
}

/* De knop die het overlay opent, en het overlay zelf. Core schildert dat
   overlay wit zodra het blok geen eigen achtergrond heeft; het blok krijgt in
   parts/header.html daarom de velkleur en de inktkleur mee, zodat core ze
   erft in plaats van er wit van te maken. */
.autive-kop .wp-block-navigation__responsive-container-open,
.autive-kop .wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
	color: var(--ink);
}
.autive-kop .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--gutter) 2rem;
}
.autive-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--ink);
	font-size: 1.125rem;
	min-height: 48px;
	padding-block: 0.35rem;
}

/* 6. Knoppen ------------------------------------------------------------- */
/* De vorm komt uit theme.json; hier staan alleen de schaduw, de tweede stijl
   en de garantie dat een knop 44 px hoog blijft (2.5.8). */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	box-shadow: var(--schaduw-knop);
	transition: background var(--snel), border-color var(--snel), color var(--snel);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--vel);
	border-color: var(--rand);
	color: var(--ink);
	box-shadow: var(--schaduw-knop);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--ink);
	background: var(--vel);
	color: var(--ink);
}
/* --- Knoppen op een gekleurd vel ---------------------------------------
   Deze regels stonden eerst bij de gekleurde vellen hierboven, en verloren
   daar stil van de algemene knopregels: beide kanten zijn 0,3,0 en dan wint
   wie het laatst staat. Vandaar hier, na de algemene regels, en niet met een
   verdubbelde klasse om de volgorde te omzeilen. */

/* De eerste knop op een gekleurd vel. Die stond er niet, en daardoor bleef
   hij magenta op een magenta vel: 1,00 : 1, alleen aan een schaduwrandje te
   zien. Een redacteur die in de kleurkiezer magenta aanwijst verliest zo zijn
   actieknop zonder dat iets dat meldt - gevonden door de redacteurstest, niet
   door een meting, want de meting kijkt naar tekst en niet naar een vlak dat
   in een ander vlak verdwijnt.

   Op magenta en petrol wordt de knop wit met de velkleur als tekst; op lime
   wordt hij inkt met lime als tekst. Alle drie ruim boven de eis. */
:is(.has-primary-background-color, .has-secondary-background-color, .has-accent-background-color, .has-foreground-background-color)
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--magenta-op);
}
.has-secondary-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link { color: var(--petrol); }
.has-accent-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--lime);
}
:is(.has-primary-background-color, .has-secondary-background-color, .has-foreground-background-color)
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--vel);
	border-color: var(--vel);
}
.has-accent-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--zacht);
	border-color: var(--zacht);
	color: var(--vel);
}

/* Inkt als velkleur. Dat staat gewoon in de kleurkiezer en "ik wil een donker
   vlak" is een normale gedachte, maar zonder deze regels werd alle tekst
   inkt-op-inkt en bleef er niets over dan de streepjes en de knop. Dezelfde
   fout als bij magenta, en dezelfde reden om hem hier af te vangen in plaats
   van de kleur uit het palet te halen: de kleur is nodig, het gat niet. */
:is(.is-style-vel, .is-style-vel-klein).has-foreground-background-color { color: var(--vel); }
.has-foreground-background-color:is(.is-style-vel, .is-style-vel-klein) :is(h1, h2, h3, h4, p, li, dt, dd, strong, figcaption) { color: var(--vel); }
.has-foreground-background-color:is(.is-style-vel, .is-style-vel-klein) :is(.autive-label, .autive-inleiding, .autive-tegen-uit, h1 em, h2 em, .autive-accent) { color: var(--lijn); }
.has-foreground-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-getal .autive-getal-uit { color: var(--lijn); }
.has-foreground-background-color:is(.is-style-vel, .is-style-vel-klein) a:not(.wp-element-button) { color: var(--vel); }
.has-foreground-background-color:is(.is-style-vel, .is-style-vel-klein) .autive-punten li::before { background: var(--vel); }
.has-foreground-background-color .is-style-outline > .wp-block-button__link {
	background: transparent; border-color: var(--vel); color: var(--vel); box-shadow: none;
}
.has-foreground-background-color .is-style-outline > .wp-block-button__link:hover {
	background: var(--vel); border-color: var(--vel); color: var(--ink);
}

/* De tweede knop op een gekleurd vel: omgekeerd, met de kleuren expliciet. */
:is(.has-primary-background-color, .has-secondary-background-color) .is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
	box-shadow: none;
}
.has-primary-background-color .is-style-outline > .wp-block-button__link:hover {
	background: #FFFFFF; border-color: #FFFFFF; color: var(--magenta-op);
}
.has-secondary-background-color .is-style-outline > .wp-block-button__link:hover {
	background: #FFFFFF; border-color: #FFFFFF; color: var(--petrol);
}
.has-accent-background-color .is-style-outline > .wp-block-button__link {
	background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none;
}
.has-accent-background-color .is-style-outline > .wp-block-button__link:hover {
	background: var(--ink); border-color: var(--ink); color: var(--lime);
}

/* Op een telefoon staan de knoppen onder elkaar en over de volle breedte:
   twee knoppen naast elkaar worden daar allebei te smal om te raken. */
.wp-block-buttons { gap: 0.6rem; }
@media (max-width: 29.99rem) {
	.wp-block-buttons > .wp-block-button { width: 100%; }
	.wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; }
}

/* 6b. Het zoekveld ------------------------------------------------------- */
/* Core levert het zoekveld met een eigen rand van #949494. Op het vel haalt
   die 2,98 : 1 en dat is net onder de eis van 3 : 1 voor de begrenzing van
   een bedienelement (1.4.11) - gemeten op de 404-pagina. De rand van een
   invoerveld hoort dezelfde te zijn als overal elders op deze site. */

.wp-block-search__input {
	border: var(--lijn-hair) solid var(--rand);
	border-radius: var(--radius-sm);
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	background: var(--vel);
	color: var(--ink);
}
.wp-block-search .wp-block-search__label {
	font-weight: 600;
	margin-bottom: 0.35rem;
	display: block;
}
.wp-block-search__button {
	min-height: 44px;
	box-shadow: var(--schaduw-knop);
}

/* 7. Label, inleiding, aantekening, streepjeslijst ------------------------ */
/* Alle vier blokvariaties, dus ze staan in de inserter onder hun eigen naam.
   De opmaak hangt aan de klasse, niet aan de variatie: geimporteerde inhoud
   met dezelfde klasse ziet er dan hetzelfde uit. */

.autive-label {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--zacht);
}
/* 2.5.8 - het label boven een bericht is de categorielink, en op 0,875rem is
   die 17 px hoog. Core rendert hem in een div en niet in een alinea, dus de
   inline-uitzondering geldt er niet: het is een losse link. */
.autive-label a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Knoppen die direct op een inleiding volgen krijgen lucht. Gemeten op de
   dienstpagina's op 13 september 2026: 5 px tussen de laatste regel tekst en
   de bovenkant van de knoppenrij, terwijl de kop en de inleiding ook maar
   6 px uit elkaar staan. De knop plakte aan de tekst en de eigenaar zag het.
   Dit geldt overal waar een knoppenrij op een inleiding volgt: de hero van
   elke pagina, het bureauvel, het tarievenvel. */
.autive-inleiding + .wp-block-buttons { margin-top: 1.5rem; }

.autive-inleiding {
	max-width: 52ch;
	color: var(--zacht);
	font-size: var(--wp--preset--font-size--large);
}

/* De aantekening met de hand hoort bij het bord, niet bij het vel: hij staat
   erbuiten, eronder, en altijd in de stroom. De absolute kantlijnvariant uit
   een eerdere ronde stak tussen 68 en 80 rem rechts buiten het venster - een
   kantlijn hoort een kolom te zijn, geen coordinaat. Op het bord haalt de
   handkleur 4,61 : 1. */
.autive-pen {
	font-family: var(--schrift);
	font-size: var(--maat-hand);
	line-height: 1.3;
	color: var(--hand);
	/* Ruimte rechts voor de draaiing. Een blok van een graad scheef wordt
	   breder dan zijn doos met ongeveer zijn hoogte maal de sinus van de hoek,
	   en op 200 % tekst (1.4.4) was dat 2 px buiten het venster - gemeten op de
	   tarievenpagina. Hier is de aanwas hooguit een paar pixels, dus een vaste
	   reserve is genoeg; bij de vellen ging het om tientallen en hangen ze op
	   een telefoon daarom recht. */
	max-width: min(46rem, calc(100% - 0.75rem));
	transform: rotate(-1deg);
}
/* Het pijltje is decoratie. Gegenereerde inhoud zit in de
   toegankelijkheidsboom en VoiceOver en NVDA lezen dit teken in sommige
   standen voor ("pijl omlaag naar rechts"), en dat is precies het soort ruis
   waar deze site anderen op aanspreekt. De lege alternatieve tekst achter de
   schuine streep haalt hem eruit. */
.autive-pen::before { content: "\21B3 " / ""; }
.autive-pen-rechts { margin-left: auto; text-align: right; transform: rotate(0.7deg); }
.autive-pen a { color: var(--hand); }

.autive-punten { list-style: none; padding-left: 0; }
.autive-punten li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}
.autive-punten li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.85rem;
	height: 3px;
	background: var(--magenta);
}

/* 8. Het tweeluik: tekst naast een tekening ------------------------------ */
/* De bronvolgorde is de mobiele volgorde: eerst de tekst, dan de tekening.
   Op een breed scherm mag de tekening naar links met .autive-tweeluik-om. */

.autive-tweeluik { align-items: center; }
.autive-tweeluik > .wp-block-column { min-width: 0; }
@media (max-width: 57.99rem) {
	/* !important, en dat is hier geen luiheid. Core zet boven 782 px
	   `flex-wrap: nowrap !important` op elk kolommenblok. Zonder deze
	   verzwaring stapelt geen enkele rij op het punt waar dit thema dat wil:
	   hij perst de kolommen samen. Gemeten op 800 px waren de drie
	   dienstvakken 209 px breed, de drie stappen 205 en de cijferrij 191, en
	   de voorwaardenpagina werd er 48.427 px hoog van in plaats van 30.000.
	   Die zone tussen 782 px en het breekpunt is nooit eerder gemeten: reflow
	   meet op 320 px en de mobiele meting op 390. */
	.autive-tweeluik { flex-wrap: wrap !important; }
	.autive-tweeluik > .wp-block-column { flex-basis: 100% !important; }
}
@media (min-width: 58rem) {
	.autive-tweeluik-om > .wp-block-column:first-child { order: 2; }
}

/* De tekening zelf: nooit dragend, altijd met een bijschrift in gewone tekst.
   Wie hem niet ziet mist niets, en daarom staat het alt-attribuut leeg. */
.autive-tekening { margin: 0; text-align: center; }
.autive-tekening img { width: 100%; height: auto; max-width: 26rem; margin-inline: auto; }
.autive-tekening.autive-tekening-klein img { max-width: 12rem; }
.autive-tekening figcaption {
	margin-top: 0.9rem;
	font-family: var(--schrift);
	font-size: var(--maat-hand);
	line-height: 1.3;
	color: var(--hand);
	/* Zelfde reserve als bij de aantekening: een bijschrift van drie regels dat
	   een graad scheef staat wordt ruim twee pixels breder dan zijn kolom, en
	   op 200 % tekst was dat de laatste 1.4.4-bevinding van de hele set. */
	max-width: calc(100% - 0.75rem);
	margin-inline: auto;
	transform: rotate(-1deg);
}

/* 9. De vier diensten ---------------------------------------------------- */
/* De kleur zit in de bovenrand en in de vlek onder de tekening; de streepjes
   blijven inkt. Kleur is hier codering, geen confetti. */

.autive-diensten { gap: 1.9rem; }
@media (min-width: 54rem) { .autive-diensten { gap: 2rem; } }
@media (max-width: 53.99rem) {
	.autive-diensten { flex-wrap: wrap !important; }
	.autive-diensten > .wp-block-column { flex-basis: 100% !important; }
}
/* Boven 54 rem staan de vier in een vierkant van twee bij twee, en niet in
   een rij van vier. Dat was eerst alleen de tussenstand tussen 54 en 76 rem;
   de eigenaar vond twee bij twee overal beter, en de meting gaf hem gelijk.
   Vier naast elkaar is op de brede kolom 249 px per stuk, en daar wikkelt
   "Toegankelijkheid en AVG" op de knop over twee regels en een streepje als
   "Toegankelijkheidswet: geldt die voor jou?" over drie. Twee bij twee geeft
   471 px: elke knop op één regel, en de kaarten hebben dezelfde hoogte omdat
   ze per rij van twee uitlijnen in plaats van per rij van vier.

   Dit is ook de reden dat er geen vijfde dienst bij kan zonder opnieuw te
   meten: bij vijf staat er eentje alleen op de onderste rij. */
@media (min-width: 54rem) {
	.autive-diensten { flex-wrap: wrap !important; }
	.autive-diensten > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}
/* De knoppen moeten op dezelfde hoogte staan, en daar zijn twee dingen voor
   nodig die allebei misten. De kolom moet zo hoog worden als de rij - core
   zet daar `align-self: stretch` niet vanzelf op zodra er een verticale
   uitlijning in het spel is - en het vak erin moet die hoogte overnemen.
   Zonder dat tweede is het vak zo hoog als zijn eigen tekst, en dan doet de
   `margin-top: auto` onder aan dit blok niets: de drie knoppen stonden op
   drie hoogtes, 637, 648 en 677 px, precies zo ver uit elkaar als de
   streepjeslijsten verschillen. Gemeten in de browser, niet afgeleid. */
.autive-diensten > .wp-block-column {
	align-self: stretch;
	display: flex;
}
.autive-diensten > .wp-block-column > .autive-dienst { width: 100%; }
.autive-dienst {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	border-top: var(--lijn-dik) solid var(--ink);
	padding-top: 1rem;
}
/* De knop krijgt bij hover en bij toetsenbordfocus de vlek van zijn eigen
   dienst als grond. Dat is hetzelfde gebaar als in het uitklapmenu, en om
   dezelfde reden met inkt als tekstkleur en niet met de dienstkleur zelf:
   magenta op de rozevlek haalt 3,4 : 1, en limegroen als tekst of als rand op
   papier haalt 1,59 : 1. Inkt op alle vier de vlekken haalt 10 : 1 of meer
   (toetsen 10,25 · bouwen 11,26 · onderhoud 10,93 · overnemen 10,13). De rand
   blijft inkt, want dat is de begrenzing van het bedienelement (1.4.11). */
.autive-dienst .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--ink);
}
.autive-dienst-toetsen .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--vlek-toetsen);
}
.autive-dienst-bouwen .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--vlek-bouwen);
}
.autive-dienst-onderhoud .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--vlek-onderhoud);
}
.autive-dienst-overnemen .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--vlek-overnemen);
}

/* Dezelfde hoverkleur op de knoppen van de tarievenpagina: elk tariefblok
   draagt autive-tarief-<dienst>, en de knop erin krijgt bij hover en focus
   de vlek van die dienst als grond, met inkt als tekst en inkt als rand, om
   dezelfde redenen als hierboven (eigenaar, 13 september 2026). De ids op
   die pagina zijn voldoen, maken, onderhoud en overnemen; "voldoen" en
   "maken" wijken dus af van de sleutels van de dienstkaarten (toetsen,
   bouwen). Gemeten: de eerste versie zei toetsen en deed daar niets. */
.autive-tarief .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { color: var(--ink); }
.autive-tarief-voldoen   .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { background: var(--vlek-toetsen); }
.autive-tarief-maken     .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { background: var(--vlek-bouwen); }
.autive-tarief-onderhoud .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { background: var(--vlek-onderhoud); }
.autive-tarief-overnemen .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { background: var(--vlek-overnemen); }

.autive-dienst-toetsen   { border-top-color: var(--magenta); }
.autive-dienst-bouwen    { border-top-color: var(--petrol); }
.autive-dienst-onderhoud { border-top-color: var(--violet); }
.autive-dienst-overnemen { border-top-color: var(--lime); }
.autive-dienst figure { margin: 0; }
.autive-dienst img { width: 3.2rem; height: auto; }
.autive-dienst h3 { font-size: 1.12rem; }
.autive-dienst p { color: var(--zacht); font-size: 0.98rem; }
.autive-dienst ul { list-style: none; padding-left: 0; }
.autive-dienst li {
	position: relative;
	padding-left: 1.05rem;
	font-size: 0.95rem;
	color: var(--zacht);
	/* anywhere en niet break-word: alleen anywhere verlaagt ook de
	   min-contentbreedte, en daarmee wordt een rasterkolom gemeten. */
	overflow-wrap: anywhere;
	margin-bottom: 0.25rem;
}
.autive-dienst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.5rem;
	height: 2px;
	background: var(--ink);
}
.autive-dienst .wp-block-buttons { margin-top: auto; padding-top: 0.6rem; }

/* 10. Stappen, cijfers --------------------------------------------------- */

.autive-stappen { counter-reset: stap; gap: 1.75rem; }
@media (min-width: 52rem) { .autive-stappen { gap: 2rem; } }
@media (max-width: 51.99rem) {
	.autive-stappen { flex-wrap: wrap !important; }
	.autive-stappen > .wp-block-column { flex-basis: 100% !important; }
}
.autive-stap { counter-increment: stap; min-width: 0; }
.autive-stap::before {
	content: counter(stap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--vel);
	font-weight: 700;
	margin-bottom: 0.6rem;
}
.autive-stap h3 { font-size: 1.06rem; }
.autive-stap p { color: var(--zacht); font-size: 0.98rem; margin-top: 0.25rem; }

.autive-cijferrij { gap: 1.75rem 3rem; }
@media (max-width: 43.99rem) {
	.autive-cijferrij { flex-wrap: wrap !important; }
	.autive-cijferrij > .wp-block-column { flex-basis: 100% !important; }
}
.autive-getal { min-width: 0; }
/* Twee alinea's en geen <b> met een <span>: core/paragraph laat inline
   markup staan, maar twee blokken zijn in de editor los te bewerken en dat is
   wat een redacteur hier wil. */
.autive-getal .autive-getal-nr {
	font-size: var(--maat-getal);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--kop);
	color: var(--ink);
}
.autive-getal .autive-getal-uit {
	margin-top: 0.5rem;
	color: var(--zacht);
}

/* 11. Het drieluik en het tweeluik van losse vellen ---------------------- */

.autive-drieluik, .autive-tweevel { gap: 1.5rem; align-items: stretch; }
@media (min-width: 54rem) { .autive-drieluik, .autive-tweevel { gap: 1.4rem; } }
@media (max-width: 53.99rem) {
	.autive-drieluik, .autive-tweevel { flex-wrap: wrap !important; }
	.autive-drieluik > .wp-block-column,
	.autive-tweevel > .wp-block-column { flex-basis: 100% !important; }
}
.autive-drieluik :is(.is-style-vel, .is-style-vel-klein),
.autive-tweevel :is(.is-style-vel, .is-style-vel-klein) { height: 100%; padding: 1.6rem 1.25rem 1.4rem; }
.autive-drieluik h2, .autive-tweevel h2 {
	font-size: clamp(1.25rem, 4.5vw, 1.5rem);
	margin-top: 0;
}
.autive-drieluik :is(.is-style-vel, .is-style-vel-klein) > p,
.autive-tweevel :is(.is-style-vel, .is-style-vel-klein) > p { color: var(--zacht); font-size: 0.98rem; }
/* Op een gekleurd vel in zo'n paar blijft de alinea wit (of inkt op lime).
   De regel hierboven zet elke alinea in een twee- of drieluik op de zachte
   grijstint, bedoeld voor papier, en die won van de kleurregels van de
   vellen omdat hij later staat: op het petrolvel met de gegevens op de
   contactpagina stond de tekst in grijs op petrol, gemeten rgb(90, 82, 72),
   "onleesbaar" (eigenaar, 13 september 2026). Meer klassen, dus wint dit
   ongeacht de volgorde. */
:is(.autive-drieluik, .autive-tweevel) :is(.has-primary-background-color, .has-secondary-background-color, .has-tertiary-background-color):is(.is-style-vel, .is-style-vel-klein) > p { color: #FFFFFF; }
:is(.autive-drieluik, .autive-tweevel) .has-accent-background-color:is(.is-style-vel, .is-style-vel-klein) > p { color: var(--ink); }

/* Het uitspraakpaar op de voorpagina is een tweeluik met de maat van een
   sectiekop: twee uitspraken die elk op zichzelf staan, niet twee kaartjes
   met een onderwerp. Vandaar dat de kopmaat uit theme.json hier terugkomt en
   de inleiding de gewone inleidingsmaat houdt. */
.autive-uitspraak h2 { font-size: var(--wp--preset--font-size--x-large); }
.autive-uitspraak :is(.is-style-vel, .is-style-vel-klein) > p.autive-inleiding {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0;
}
.autive-uitspraak :is(.is-style-vel, .is-style-vel-klein) { padding: 1.5rem 1.4rem 1.4rem; }

/* 11b. Het drieluik: elk vel zijn eigen scheefheid ----------------------- */
/* De rotatie komt normaal uit de plek van de sectie, maar drie vellen in een
   rij zitten in dezelfde sectie en zouden dan alle drie even scheef hangen.
   Per kolom een eigen stand, zodat het een prikbord blijft en geen raster. */
.autive-drieluik > .wp-block-column:nth-child(2) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(0.6deg); }
.autive-drieluik > .wp-block-column:nth-child(3) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(-0.9deg); }
.autive-tweevel > .wp-block-column:nth-child(2) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(0.7deg); }
.autive-tegen > .wp-block-column:nth-child(2) :is(.is-style-vel, .is-style-vel-klein) { transform: rotate(0.8deg); }

/* 12. De route: vijf briefjes onder elkaar ------------------------------- */
/* Uit archief 02, in de rust van Het prikbord: een kolom kleine briefjes,
   zonder punaisepunten. Het haltenummer staat met de hand geschreven in de
   kop zelf: in de statische set droeg een <ol> de volgorde en was het cijfer
   aria-hidden, maar een genummerde lijst van kernblokken kan geen koppen
   bevatten. Nu is het nummer zichtbaar en wordt het ook voorgelezen. */

/* De route is een lijn met haltes eraan. Op een telefoon loopt de lijn
   verticaal langs de linkerkant, met het nummer als rondje óp de lijn en de
   kaart ernaast; op een breed scherm loopt de lijn horizontaal over de vijf
   kaarten heen, met de rondjes erop. Het was een stapel van vijf kaarten
   onder elkaar, en de eigenaar zei het precies: "zo onder elkaar is niet
   mooi, maak er duidelijker een route van" (13 september 2026).

   De lijn is een gestippelde rand op een pseudo-element en geen
   achtergrondafbeelding, om dezelfde reden als overal: de contrastmeting
   meldt elk element met een achtergrondafbeelding in de keten. Het rondje
   staat absoluut ten opzichte van de kaart, dus het nummer in de h3 blijft
   in de bron en wordt voorgelezen. */
.autive-route {
	position: relative;
	max-width: none;
	display: grid;
	gap: 1.2rem;
	padding-inline-start: 2.6rem;
}
.autive-route::before {
	content: "";
	position: absolute;
	inset-block: 1.4rem 1.4rem;
	left: 1.05rem;
	border-left: 2px dashed var(--hand);
}
.autive-route .autive-halte {
	position: relative;
	background: var(--vel);
	color: var(--ink);
	box-shadow: var(--schaduw-vel);
	padding: 1.25rem 1.2rem 1.1rem;
	min-width: 0;
	/* De groep zet als blockGap een margin-block-start van 1,1 rem op elk
	   kind behalve het eerste. In een raster schuift dat kaart twee tot en
	   met vijf 17,6 px omlaag ten opzichte van de eerste, en het rondje van
	   de eerste halte hangt dan boven de lijn. Gemeten op 13 september 2026.
	   De afstand komt hier uit de gap van het raster. */
	margin-block-start: 0;
}
@media (min-width: 54rem) {
	.autive-route {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1rem;
		padding-inline-start: 0;
		padding-top: 1.3rem;
	}
	.autive-route::before {
		inset-block: auto;
		top: 1.3rem;
		left: 2.4rem;
		right: 2.4rem;
		border-left: 0;
		border-top: 2px dashed var(--hand);
	}
	.autive-route .autive-halte { padding-top: 1.6rem; }
}
.autive-route .autive-halte:nth-child(2n)   { transform: rotate(0.45deg); }
.autive-route .autive-halte:nth-child(3n)   { transform: rotate(-0.6deg); }
.autive-route .autive-halte:nth-child(4n+1) { transform: rotate(-0.9deg); }
.autive-haltenr {
	position: absolute;
	left: -2.6rem;
	top: 1.1rem;
	inline-size: 2.2rem;
	block-size: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--vel);
	border: 2px solid var(--hand);
	font-family: var(--schrift);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--hand);
	transform: rotate(-4deg);
}
@media (min-width: 54rem) {
	.autive-haltenr { left: 1rem; top: -1.1rem; }
}
.autive-route h3 { font-size: 1.05rem; }
.autive-route p { color: var(--zacht); font-size: 0.95rem; margin-top: 0.4rem; max-width: 54ch; }
/* .autive-route .autive-duur en niet een kale .autive-duur: die zou van
   .autive-route p verliezen. Specificiteit heeft hier al twee keer stil een
   kleur gebroken. */
.autive-route .autive-duur {
	font-family: var(--schrift);
	font-size: var(--maat-hand-klein);
	line-height: 1.3;
	color: var(--hand);
	margin-top: 0.5rem;
}

/* Een kop rechtstreeks op het bord: de zoekvellen, de route, het
   bureau-tweeluik. De site is een bord met vellen erop, en wat niet op een
   vel staat is met de hand geschreven (eigenaar, 13 september 2026).

   Een eerste versie leende de stijl van de aantekening (.autive-pen): licht
   grijsbruin, 2,3 rem, een graad scheef. Dat las niet als een kop maar als
   een kanttekening, en dat is precies wat die stijl op deze site betekent.
   Een kop op een whiteboard is een stifttitel: inkt, zwaar, groter dan de
   koppen op de vellen, met een streep eronder. De streep is de getekende
   lijn uit de tekenset als border-image, dus geen achtergrondafbeelding en
   dus niets voor de contrastmeting. Inkt op het bord haalt 12 : 1. */
/* De vellen eronder dragen plakband dat boven de velrand uitsteekt, en op
   1,1 rem raakte de streep onder de kop dat plakband bijna (eigenaar,
   13 september 2026). Gemeten na de wijziging: 25 px tussen de streep en de
   bovenkant van het plakband, dat 7 px boven de velrand uitsteekt. */
.autive-bordkop { margin-bottom: 2.2rem; padding-inline: 0.25rem; }
/* Ook de h1 van het artikelenarchief staat zo op het bord; dezelfde regel,
   iets groter, want het is de titel van de pagina. */
.autive-bordkop h1 { font-size: clamp(2.3rem, 6vw, 3.4rem); }
.autive-bordkop :is(h1, h2) {
	display: inline-block;
	font-family: var(--schrift);
	font-weight: 700;
	font-size: clamp(2.1rem, 5.5vw, 3rem);
	line-height: 1.1;
	color: var(--ink);
	padding-bottom: 0.15em;
	border-bottom: 4px solid transparent;
	border-image: url("../images/lijn-dik.svg") 0 0 8 0 / 0 0 4px 0 round;
	transform: rotate(-0.6deg);
	transform-origin: left bottom;
}
.autive-bordkop .autive-label { margin-bottom: 0.2rem; }
.autive-zoekrij + .autive-zoekrij { margin-top: 1.4rem; }

/* 13. Bij een bureau / hier ---------------------------------------------- */

.autive-tegen { gap: 1.7rem; align-items: stretch; }
@media (min-width: 54rem) { .autive-tegen { gap: 2.25rem; } }
@media (max-width: 53.99rem) {
	.autive-tegen { flex-wrap: wrap !important; }
	.autive-tegen > .wp-block-column { flex-basis: 100% !important; }
}
.autive-tegen :is(.is-style-vel, .is-style-vel-klein) { height: 100%; padding: 1.6rem 1.4rem 1.5rem; }
.autive-tegen h3 {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zacht);
}
.autive-tegen-groot {
	font-size: clamp(1.35rem, 4.5vw, 1.8rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--kop);
	margin-top: 0.5rem;
}
.autive-tegen-uit { color: var(--zacht); font-size: 0.98rem; margin-top: 0.55rem; }
.has-primary-background-color .autive-tegen-groot { color: #FFFFFF; }
.has-primary-background-color .autive-tegen h3,
.has-primary-background-color h3 { color: var(--roos-licht); }

/* 14. De derde tel ------------------------------------------------------- */

.autive-derde { gap: 1.5rem; }
@media (min-width: 54rem) { .autive-derde { gap: 2rem; } }
@media (max-width: 53.99rem) {
	.autive-derde { flex-wrap: wrap !important; }
	.autive-derde > .wp-block-column { flex-basis: 100% !important; }
}
.autive-derde h3 { font-size: 1.06rem; }
.autive-derde .autive-punten li { font-size: 0.98rem; }

/* 15. Tabellen ----------------------------------------------------------- */
/* Een schuifkader om een tabel is geen oplossing: op 390 px stond de
   prijskolom buiten beeld, achter een overflow-x zonder tabindex en zonder
   enig teken dat er rechts nog iets stond. Onder 46 rem staat er daarom een
   stapel in plaats van een tabel - twee vormen in de pagina, altijd precies
   een zichtbaar, en wat op display:none staat zit ook niet in de
   toegankelijkheidsboom. */

.autive-tabel table { width: 100%; border-collapse: collapse; }
/* Kolomkoppen staan in de thead; een th in de tbody is een rijkop en hoort
   er als gewone celtekst uit te zien. Die twee door elkaar halen gaf in een
   eerdere versie een tarieventabel waarin elke eerste kolom in kapitalen
   stond. */
.autive-tabel thead th {
	text-align: left;
	font-size: 0.875rem;
	letter-spacing: var(--tracking-tabel);
	text-transform: uppercase;
	color: var(--zacht);
	font-weight: 600;
	padding: 0.6rem 1rem 0.6rem 0;
	border-bottom: var(--lijn-firm) solid var(--ink);
}
.autive-tabel tbody th {
	text-align: left;
	font-weight: 400;
	padding: 0.8rem 1rem 0.8rem 0;
	border-bottom: var(--lijn-hair) solid var(--lijn);
	vertical-align: top;
}
.autive-tabel td {
	padding: 0.8rem 1rem 0.8rem 0;
	border-bottom: var(--lijn-hair) solid var(--lijn);
	vertical-align: top;
}
/* De prijskolom. Geen eigen klasse op de cel: core/table laat een klasse op
   een td vallen bij het opslaan, en dan is het blok ongeldig zodra iemand de
   editor opent. De uitlijning is wel een attribuut van het blok, dus daar
   hangt de opmaak aan. */
/* 1.4.4 - op 200 % tekst past de pakkettentabel niet meer in 1200 px: de
   omschakeling naar de stapel staat in een media query, en rem rekent daar
   tegen de begínwaarde van font-size (16 px), niet tegen de root van de
   pagina. Een browserinstelling van 200 % schakelt dus niet om. Wat wel helpt
   is de min-contentbreedte verlagen, en dat doet alleen anywhere: break-word
   breekt de tekst wel af maar verlaagt de gemeten breedte niet. Dezelfde
   valkuil als bij de rasterkolommen. */
.autive-tabel :is(th, td) { overflow-wrap: anywhere; }
.autive-pakketten :is(th, td) { padding-inline: 0.25rem; }

/* Het getekende kader. De tabel had een rechte hairline onder elke rij en
   dat vloekte met de getekende iconen en de aantekeningen ernaast (eigenaar:
   "die tabel is echt lelijk, kunnen we de border niet getekend hebben?",
   13 september 2026). Kader en lijnen komen uit svg.mjs en gaan erin als
   border-image en niet als achtergrond; zie de reden daar. Twee dingen die
   je moet weten: border-image doet niets op een tabel met border-collapse:
   collapse, dus die staat op separate; en de kolomkop houdt een dikkere,
   inktkleurige lijn, de rijen een dunnere in de randkleur, net als eerst. */
.autive-tabel {
	border: 12px solid transparent;
	border-image: url("../images/kader.svg") 14 / 12px round;
	padding: 0.2rem 0.9rem 0.4rem;
}
.autive-tabel table { border-collapse: separate; border-spacing: 0; }
.autive-tabel thead th {
	border-bottom: 3px solid transparent;
	border-image: url("../images/lijn-dik.svg") 0 0 8 0 / 0 0 3px 0 round;
}
.autive-tabel tbody th,
.autive-tabel td {
	border-bottom: 3px solid transparent;
	border-image: url("../images/lijn.svg") 0 0 8 0 / 0 0 3px 0 round;
}

.autive-tabel td.has-text-align-right {
	white-space: nowrap;
	padding-right: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* De pakkettentabel: eerste kolom links, de vier pakketten gecentreerd, de
   prijsregels met een streep erboven. */
.autive-pakketten th,
.autive-pakketten td { text-align: center; padding-inline: 0.5rem; }
.autive-pakketten th:first-child,
.autive-pakketten td:first-child { text-align: left; padding-left: 0; }
/* De twee prijsregels staan onderaan en worden structureel aangewezen: een
   klasse op een tr overleeft core/table net zomin als een op een td. */
.autive-pakketten tbody tr:nth-last-child(-n+2) td {
	border-top: var(--lijn-firm) solid var(--ink);
	border-bottom: 0;
	font-weight: 700;
	text-align: center;
}
.autive-pakketten tbody tr:last-child td { border-top: 0; padding-top: 0; }
.autive-pakketten tbody tr:nth-last-child(-n+2) td:first-child { text-align: left; }
/* Het vinkje is een teken en staat op aria-hidden; het woord ernaast is wat
   een schermlezer voorleest. */
.autive-vink { font-weight: 700; color: var(--petrol); }
.autive-streep { color: var(--zacht); }

/* Wat nog niet vaststaat is gestippeld onderstreept - bedragen en duren, een
   markering voor allebei. In het ontwerp was dat een data-attribuut; hier is
   het een <mark>, want dat is het enige element dat core/table binnen een cel
   overeind laat. De markering is niet alleen zichtbaar: in elke mark staat
   ook de reden in tekst, zodat iemand met een schermlezer dezelfde
   voorbehoud hoort in plaats van hem te missen. */
.autive-nogniet,
mark.autive-nogniet {
	background: transparent;
	color: inherit;
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
/* De legenda onder een tarieventabel stond in het handschrift, op 4,61 : 1 -
   net boven de eis. Maar deze regel is geen sfeer: hij legt uit wat die
   stippellijn onder een bedrag betekent, en dat is de hele prijsconventie van
   de site. Een dunne schrijfletter op de laagste doorlaatwaarde is daar de
   verkeerde plek voor. Nu in Work Sans op --zacht, 7,55 : 1 op het vel.
   Het handschrift blijft waar het decoratie is: de aantekening naast een vel,
   de duur bij een halte, het bijschrift bij een tekening. */
.autive-aanname {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--zacht);
	text-decoration: none;
}

/* De stapelvorm onder 46 rem. */
.autive-tabelstapel { display: none; }
@media (max-width: 45.99rem) {
	.autive-tabel { display: none; }
	.autive-tabelstapel { display: block; margin-top: 1.25rem; }
	.autive-tabelstapel .autive-stapelrij {
		padding: 0.9rem 0;
		border-top: var(--lijn-hair) solid var(--lijn);
	}
	.autive-tabelstapel .autive-stapelrij:last-child { border-bottom: var(--lijn-hair) solid var(--lijn); }
	.autive-tabelstapel .autive-stapelkop { font-weight: 700; line-height: 1.35; }
	.autive-tabelstapel dl {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: 0.15rem 0.75rem;
		margin-top: 0.4rem;
	}
	.autive-tabelstapel dt {
		font-size: 0.875rem;
		text-transform: uppercase;
		letter-spacing: var(--tracking-tabel);
		color: var(--zacht);
	}
	.autive-tabelstapel dd {
		margin: 0;
		font-variant-numeric: tabular-nums;
		min-width: 0;
		overflow-wrap: break-word;
	}
}

/* 16. Vragen (core/details) ---------------------------------------------- */

.autive-vragen .wp-block-details {
	border-bottom: var(--lijn-hair) solid var(--lijn);
	padding: 0;
}
.autive-vragen summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding-block: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	min-width: 0;
}
.autive-vragen summary::-webkit-details-marker { display: none; }
.autive-vragen summary::marker { content: ""; }
.autive-vragen summary::after {
	content: "+";
	flex: none;
	color: var(--magenta);
	font-weight: 700;
}
.autive-vragen .wp-block-details[open] summary::after { content: "\2212"; }
.autive-vragen .wp-block-details p {
	padding-bottom: 1rem;
	color: var(--zacht);
	max-width: 60ch;
}

/* 17. Berichten ---------------------------------------------------------- */

/* Elk bericht is een briefje op het bord, en niet meer een stuk tekst met een
   streepje erboven. Dat laatste was wat het was: op de voorpagina hing het
   bericht buiten het vel "Laatst geschreven" los op de plank, zonder eigen
   papier, zonder schaduw en zonder plakband. Nu heeft het alle drie.

   Het papier is wit, net als elk ander vel; de kleur van het onderwerp zit
   alleen in de band erboven, en die is dik genoeg om van een afstand te
   lezen. Een tussenversie had het hele briefje in een tint van de categorie
   staan - vier gekleurde vlakken naast elkaar maakten van het bord een
   kleurenkaart, en de tekeningen ernaast konden er niet meer tegenop.

   De kleur komt van de categorieklasse die WordPress zelf op het li van de
   lus zet, dus een redacteur die een bericht in Onderhoud schrijft krijgt de
   petrol band zonder er iets voor te doen.

   Het label blijft in alle vier de gevallen de zachte kleur en nooit de
   merkkleur zelf: limegroen als tekst op licht is 1,6 : 1, en dan zou één van
   de vier onleesbaar zijn terwijl de andere drie het wel doen. */
.autive-berichten { list-style: none; padding-left: 0; }
.autive-berichten > li { min-width: 0; }
.autive-bericht {
	position: relative;
	background: var(--vel);
	border-top: 0.5rem solid var(--briefje-band, var(--ink));
	box-shadow: var(--schaduw-vel);
	padding: 1.4rem 1.2rem 1.3rem;
	display: grid;
	gap: 0.4rem;
	align-content: start;
	height: 100%;
	transform: rotate(-0.5deg);
}
/* Het plakband, in dezelfde vorm als op een vel maar kleiner: een strook
   midden boven. Links en rechts blijft hij binnen de doos - alleen de
   rechterkant telt voor horizontale scroll, en een briefje staat in een
   raster waar rechts geen marge meer over is.

   Hij ligt hoger dan op een vel, want hij kruist hier de gekleurde band. Van
   de 17 px ligt er nu 5 op het briefje en de rest erboven; op de vorige maat
   at het plakband een gat van tien pixels uit de band, en dat is precies het
   onderdeel dat het onderwerp moet aanwijzen. */
.autive-bericht::before {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: 50%;
	width: 3.4rem;
	height: 1.05rem;
	background: var(--plakband);
	border-left: var(--lijn-hair) solid var(--plakband-rand);
	border-right: var(--lijn-hair) solid var(--plakband-rand);
	transform: translateX(-50%) rotate(-1.8deg);
}
/* Drie standen, cyclisch, zodat een rij briefjes een bord blijft en geen
   raster wordt. Dezelfde afspraak als bij de vellen: de variatie komt uit de
   plek en niet uit een klasse die iemand moet typen.

   De variatie zit in de hoek en de breedte van de strook, nooit in de kant:
   plakband in één hoek leest als scheef opgehangen. Zie de vellen hierboven,
   waar dezelfde stand er om dezelfde reden uit is. */
.autive-berichten > li:nth-child(3n+2) .autive-bericht { transform: rotate(0.45deg); }
.autive-berichten > li:nth-child(3n) .autive-bericht { transform: rotate(-0.25deg); }
.autive-berichten > li:nth-child(3n+2) .autive-bericht::before {
	width: 2.8rem;
	transform: translateX(-50%) rotate(2.5deg);
}
.autive-berichten > li:nth-child(3n) .autive-bericht::before {
	width: 4rem;
	transform: translateX(-50%) rotate(-0.8deg);
}
/* Recht onder 46 rem, om dezelfde reden als bij de vellen: een gedraaid blok
   wordt breder dan zijn doos, en op een telefoon is er rechts geen marge om
   dat in kwijt te kunnen. */
@media (max-width: 45.99rem) {
	.autive-berichten > li:nth-child(n) .autive-bericht { transform: none; }
}
/* Een rasteritem heeft min-width:auto, en "Toegankelijkheidsverklaring:" is
   op 320 px breder dan de kaart: zonder deze twee regels liep hij 9 px uit
   het venster. */
.autive-bericht > * { min-width: 0; }
.autive-bericht :is(h2, h3) {
	overflow-wrap: anywhere;
	font-size: 1.12rem;
	margin-top: 0;
	/* 2.5.8 - de titel is de knop van deze kaart, en met de kopregelhoogte van
	   1,15 was hij 21 px hoog. Nu 1,35, dus ruim boven de 24 px, en een titel
	   van twee regels leest er ook beter door. */
	line-height: 1.35;
}
.autive-bericht :is(h2, h3) a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.autive-bericht :is(h2, h3) a:hover { color: var(--magenta); }
.autive-bericht .autive-cat a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.autive-bericht .autive-cat {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--zacht);
}
.autive-bericht .autive-cat a { color: var(--zacht); }
.autive-bericht .autive-datum {
	font-family: var(--schrift);
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--hand);
}
.autive-bericht .autive-samenvatting { color: var(--zacht); font-size: 0.98rem; }
/* De band per categorie. WordPress zet de categorie als klasse op het li van
   de lus, dus de kleur hoeft nergens met de hand bij een bericht gezet te
   worden: schrijf een bericht in Onderhoud en de band wordt petrol.

   Beveiliging is geen dienst en heeft dus geen merkkleur; die band is inkt. */
.category-toegankelijkheid .autive-bericht,
.autive-bericht.cat-toegankelijkheid { --briefje-band: var(--magenta); }
.category-onderhoud .autive-bericht,
.autive-bericht.cat-onderhoud        { --briefje-band: var(--petrol); }
.category-reparaties .autive-bericht,
.autive-bericht.cat-reparaties       { --briefje-band: var(--lime); }
.category-beveiliging .autive-bericht,
.autive-bericht.cat-beveiliging      { --briefje-band: var(--ink); }

/* De lus zelf: drie naast elkaar op de home, twee op het archief. */
.autive-berichten.wp-block-post-template { gap: 1.6rem; }
@media (min-width: 54rem) { .autive-berichten.wp-block-post-template { gap: 2rem; } }

/* De filterbalk boven het archief -------------------------------------- */
/* Als navigatieblok, want het is echt navigatie en dan zet core zelf
   aria-current="page" op het onderwerp waar je bent. De prijs daarvan is de
   specificiteit: core schrijft
     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }
   met een dubbele klasse (0,3,0), en een gewone regel verliest daarvan. Dat
   is hier ook echt gebeurd: de actieve knop kreeg wel het inktvlak maar hield
   inktkleurige tekst, gemeten 1,00 : 1. Elke kleurregel hieronder draagt
   daarom dezelfde dubbele klasse. */

/* De filters zijn geschreven tekst op het bord, geen knoppen. Ze stonden als
   een rij kaders onder een titel op een vel, en dat waren twee lagen
   plakwerk boven elkaar; de eigenaar wilde de titel houden en de filters als
   geschreven tekst met de kleur van het onderwerp (13 september 2026). Het
   onderwerp waar je bent, en het onderwerp waar je overheen gaat, krijgt
   een markerstreep in zijn eigen kleur onder de tekst: dezelfde kleuren als
   de band op de artikelkaarten. Inkt blijft de tekstkleur, want limegroen
   als tekst op het bord haalt 1,24 : 1. */
/* Links uitgelijnd, onder de titel, en niet gecentreerd: de titel staat links
   op het bord en de filters horen eronder als één geschreven regel. De
   ruimte naar de kaarten staat op de query erna, want de blockGap van de
   sectie zet daar een eigen marge en die won van een margin-bottom hier. */
.autive-filters.wp-block-navigation { justify-content: flex-start; }
.autive-filters + .wp-block-query { margin-block-start: 2.4rem; }

/* De omschrijving van een onderwerp op het archief is een aantekening. Het
   blok is een div met een p erin, en dan kwam de pijl van de aantekening op
   een eigen regel boven de tekst te staan. De p loopt nu in de regel mee. */
.autive-pen.wp-block-term-description p { display: inline; margin: 0; }
.autive-filters .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.1rem 0.35rem;
	margin-inline-end: 0.9rem;
	font-family: var(--schrift);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	/* De markerstreep als inzet-schaduw en niet als verloop: een verloop is
	   een achtergrondafbeelding, en die meldt de contrastmeting op elk
	   tekstelement in plaats van hem goed te keuren. */
	box-shadow: inset 0 -0.4em 0 var(--marker, transparent);
	transform: rotate(-0.6deg);
}
.autive-filters .wp-block-navigation-item:nth-child(2n) .wp-block-navigation-item__content {
	transform: rotate(0.7deg);
}
.autive-filters .wp-block-navigation-item__content.wp-block-navigation-item__content:is(:hover, :focus-visible),
.autive-filters .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
.autive-filters .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--marker: var(--lijn);
	color: var(--ink);
}
.autive-filters a[href*="/onderwerp/toegankelijkheid"].wp-block-navigation-item__content.wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) { --marker: var(--vlek-toetsen); }
.autive-filters a[href*="/onderwerp/onderhoud"].wp-block-navigation-item__content.wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"])        { --marker: var(--vlek-bouwen); }
.autive-filters a[href*="/onderwerp/reparaties"].wp-block-navigation-item__content.wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"])       { --marker: var(--vlek-overnemen); }
.autive-filters a[href*="/onderwerp/beveiliging"].wp-block-navigation-item__content.wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"])      { --marker: var(--plakband); }

/* De hele kaart is klikbaar. De titellink krijgt een onzichtbaar
   pseudo-element over de hele kaart; er is dus nog steeds precies één link
   met de titel als naam, en een schermlezer merkt niets van de vergroting.
   De onderwerplink erboven ligt met z-index boven dat vlak, anders is hij
   niet meer te klikken. */
.autive-bericht { position: relative; }
.autive-bericht :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.autive-bericht .autive-cat { position: relative; z-index: 1; }
.autive-bericht:hover :is(h2, h3) a { color: var(--magenta); }

/* 18. Het artikel -------------------------------------------------------- */

.autive-lees { max-width: 62ch; }
.autive-lees h2 { font-size: clamp(1.25rem, 4.5vw, 1.6rem); margin-top: 2rem; }
.autive-lees pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	padding: 1rem 1.2rem;
	border: var(--lijn-hair) solid var(--rand);
	font-size: 0.95rem;
	line-height: 1.5;
	background: var(--vel);
}
.autive-lees code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.autive-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; align-items: baseline; }
.autive-meta .autive-datum { font-family: var(--schrift); font-size: var(--maat-hand-klein); color: var(--hand); }

/* 19. De bewijspagina ---------------------------------------------------- */
/* De meting staat als klein briefje naast de proef: op een breed scherm een
   kolom in hetzelfde raster, op een telefoon eronder. Een kantlijn hoort een
   kolom te zijn, geen coordinaat. */

.autive-proef { gap: 1.25rem; align-items: flex-start; }
@media (min-width: 58rem) { .autive-proef { gap: 2rem; } }
@media (max-width: 57.99rem) {
	.autive-proef { flex-wrap: wrap !important; }
	.autive-proef > .wp-block-column { flex-basis: 100% !important; }
}
.autive-proef > .wp-block-column { min-width: 0; }
.autive-proef-uit { margin-top: 0.9rem; color: var(--zacht); max-width: 58ch; }
.autive-doedit { margin-top: 1.2rem; font-weight: 600; }
.autive-doedit::before { content: "\2192 "; color: var(--magenta); }

.autive-maatvel { padding: 1.2rem 1.15rem 1.1rem; }
@media (min-width: 58rem) { .autive-maatvel { margin-top: 1.5rem; } }
.autive-maat .autive-metlabel {
	font-family: var(--schrift);
	font-size: var(--maat-hand-klein);
	line-height: 1.2;
	color: var(--hand);
}
.autive-maat .autive-maatgetal {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--tracking--kop);
	color: var(--ink);
	margin-top: 0.35rem;
	font-variant-numeric: tabular-nums;
}
.autive-maat .autive-uitleg { margin-top: 0.5rem; color: var(--zacht); }
.autive-maat .autive-crit {
	color: var(--magenta);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-top: 0.4rem;
}

/* Proef 1: de focusring, op het vel en op petrol. */
.autive-tabvak { margin-top: 1.25rem; border: var(--lijn-hair) solid var(--rand); padding: 1.1rem 1.2rem; }
.autive-tabvak > p { color: var(--zacht); }
.autive-tabrij { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.autive-tabrij a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.95rem;
	border: var(--lijn-hair) solid var(--rand);
	background: var(--vel);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}
.autive-tabrij a:hover { border-color: var(--ink); }
.autive-donkerrij {
	background: var(--petrol);
	color: #FFFFFF;
	margin: 0.9rem -1.2rem -1.1rem;
	padding: 1rem 1.2rem;
}
.autive-donkerrij p { color: var(--petrol-licht); font-size: 0.95rem; }
.autive-donkerrij a { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.autive-donkerrij a:hover { background: #FFFFFF; color: var(--petrol); }

/* Proef 2: de twee kleurstalen op ware grootte. Beide op aria-hidden, met de
   uitleg in gewone tekst ernaast; er zit niets focusbaars in. */
.autive-stalen { gap: 1.25rem; }
@media (max-width: 39.99rem) {
	.autive-stalen { flex-wrap: wrap !important; }
	.autive-stalen > .wp-block-column { flex-basis: 100% !important; }
}
.autive-staal { border: var(--lijn-hair) solid var(--rand); min-width: 0; }
.autive-staalvlak { padding: 1.4rem 1.25rem; font-size: 1.35rem; font-weight: 700; margin: 0; }
.autive-staal-fout .autive-staalvlak { color: var(--lime); background: var(--vel); }
.autive-staal-goed .autive-staalvlak { color: var(--ink); background: var(--lime); }
.autive-staalmeting {
	border-top: var(--lijn-hair) solid var(--lijn);
	padding: 0.8rem 1.25rem;
	font-size: 0.95rem;
	color: var(--zacht);
	margin: 0;
}
.autive-staalmeting b { color: var(--ink); }

/* Proef 3: het oude en het nieuwe veld op ware grootte. */
.autive-paar { gap: 1.25rem; }
@media (max-width: 45.99rem) {
	.autive-paar { flex-wrap: wrap !important; }
	.autive-paar > .wp-block-column { flex-basis: 100% !important; }
}
.autive-paarvak { border: var(--lijn-hair) solid var(--rand); padding: 1.25rem; height: 100%; min-width: 0; }
.autive-paarrol {
	font-family: var(--schrift);
	font-size: var(--maat-hand-klein);
	line-height: 1.2;
	color: var(--hand);
	margin-bottom: 0.9rem;
}
.autive-oudveld {
	border: var(--lijn-hair) solid #D9D9D6;
	padding: 0.62rem 0.75rem;
	color: #9A9A96;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.autive-oudknop {
	margin-top: 0.75rem;
	background: #D9D9D6;
	color: #FFFFFF;
	padding: 0.62rem 1.1rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}
.autive-paarmeting { margin-top: 0.9rem; font-size: 0.95rem; color: var(--zacht); }
.autive-paarmeting b { color: var(--ink); }

/* 19b. Het belblok en de gegevenstabel ----------------------------------- */

/* De drie contactmiddelen in het belblok, elk met een tekening ervoor:
   telefoon, agenda, mail. De tekening is een CSS-achtergrond op ::before en
   geen <img>, en dat is drie keer een keuze. De opmaak blijft geldige
   kernopmaak; het icoon bestaat niet voor een schermlezer, en de tekst ernaast
   zegt al wat het is; en de contrastmeting, die elk element met een
   achtergrondafbeelding in de keten meldt, kijkt naar het element en zijn
   ouders en niet naar een pseudo-element. Maat 1,75 rem: op 100 bij 100
   getekend met lijndikte 3,4 houdt de lijn op 28 px nog net één pixel. */
/* Geen flex op de alinea. Dat stond er eerst, en dan wordt elke losse tekst
   én elke link een eigen flexitem: "Kies zelf een moment:" kwam links te
   staan en de link in een eigen kolom rechts, met de gap ertussen en een
   eigen regelval. Gezien op 13 september 2026. Het icoon staat daarom
   absoluut in de linkerkantlijn van de alinea, en de tekst loopt gewoon
   door als tekst. Uitgelijnd op de eerste regel en niet op het midden, want
   bij een regel die wikkelt hoort het icoon bovenaan, zoals een opsommings-
   teken. De 1lh is de hoogte van één regel; oudere browsers vallen terug op
   top: 0, en dat scheelt dan een pixel of twee. */
.autive-belblok .autive-contact {
	position: relative;
	padding-inline-start: 2.45rem;
	min-block-size: 1.75rem;
}
.autive-belblok .autive-contact + .autive-contact { margin-top: 0.45rem; }
.autive-belblok .autive-contact::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	top: calc((1lh - 1.75rem) / 2);
	inline-size: 1.75rem;
	block-size: 1.75rem;
	background: no-repeat center / contain;
}
.autive-belblok .autive-contact-tel::before    { background-image: url("../images/ic-telefoon-los.svg"); }
.autive-belblok .autive-contact-agenda::before { background-image: url("../images/ic-kalender-los.svg"); }
.autive-belblok .autive-contact-mail::before   { background-image: url("../images/ic-envelop-los.svg"); }

.autive-belblok { gap: 1.9rem; }
@media (min-width: 54rem) { .autive-belblok { gap: 3rem; } }
@media (max-width: 53.99rem) {
	.autive-belblok { flex-wrap: wrap !important; }
	.autive-belblok > .wp-block-column { flex-basis: 100% !important; }
}
.autive-belblok > .wp-block-column { min-width: 0; }

/* Twee kolommen label-en-waarde. Geen stapelfilter nodig: twee kolommen
   passen op een telefoon, en de filter slaat hem over omdat hij de klasse
   autive-tabel niet draagt. */
.autive-gegevenstabel table { width: 100%; border-collapse: collapse; }
.autive-gegevenstabel th {
	text-align: left;
	vertical-align: top;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-tabel);
	text-transform: uppercase;
	color: var(--zacht);
	padding: 0.6rem 1.25rem 0.6rem 0;
	border-bottom: var(--lijn-hair) solid var(--lijn);
	white-space: nowrap;
}
.autive-gegevenstabel td {
	padding: 0.6rem 0;
	border-bottom: var(--lijn-hair) solid var(--lijn);
}
/* De links staan los, niet in een zin: dan geldt 2.5.8 voluit. */
.autive-gegevenstabel td a { display: inline-flex; align-items: center; min-height: 44px; }

/* 20. Gegevens en contact ------------------------------------------------ */

.autive-groot-tel {
	font-size: clamp(1.5rem, 6vw, 2.2rem);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--kop);
	line-height: 1.15;
	margin-top: 1.2rem;
}
.autive-groot-tel a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

.autive-gegevens { display: grid; gap: 0.35rem 1.25rem; margin-top: 1.1rem; }
@media (min-width: 40rem) { .autive-gegevens { grid-template-columns: auto 1fr; } }
.autive-gegevens dt {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-tabel);
	text-transform: uppercase;
	color: var(--zacht);
	padding-top: 0.15rem;
}
.autive-gegevens dd { margin: 0; }
/* De links staan los, niet in een zin: dan geldt 2.5.8 voluit. */
.autive-gegevens dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* De lege plek voor de foto. Geen plaatshouder die op een ontwerp lijkt. */
.autive-portretplek {
	aspect-ratio: 3 / 4;
	max-width: 16rem;
	margin-inline: auto;
	border: var(--lijn-firm) dashed var(--rand);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
	font-family: var(--schrift);
	font-size: var(--maat-hand);
	line-height: 1.3;
	color: var(--hand);
}

/* 20a. De vervanger van het formulier -------------------------------------- */
/* Staat er alleen zolang Gravity Forms ontbreekt. Zie inc/formulier.php. */

.autive-formulier-terugval {
	border: var(--lijn-firm) dashed var(--rand);
	padding: 1.25rem 1.25rem 1.1rem;
}
.autive-formulier-terugval .autive-terugval-kop {
	font-family: var(--schrift);
	font-size: var(--maat-hand);
	line-height: 1.2;
	color: var(--hand);
}
.autive-formulier-terugval p + p { margin-top: 0.6rem; }
.autive-terugval-acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	font-weight: 600;
}
.autive-terugval-acties a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 20b. Losstaande links ---------------------------------------------------- */
/* 2.5.8 Doelgrootte kent een uitzondering voor een link die middenin een zin
   staat: die mag klein zijn, want hem opblazen zou de zin uit elkaar trekken.
   Een link die in zijn eentje een alinea vult is geen zin - dat is een knop
   die eruitziet als tekst, en die hoort 44 px te zijn. Vandaar :only-child. */

.autive-voet p > a:only-child,
.autive-groot-tel > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 21. Voet --------------------------------------------------------------- */

/* De voet was een stapel losse regels, en hij lijnde niet uit: de bovenste
   rij liep tot de brede kolom van 1152 px en het blok eronder stond op de
   leeskolom van 720 px gecentreerd, omdat die groep op layout "constrained"
   stond binnen een alignwide blok. Dat is nu drie kolommen op één breedte,
   met de bedrijfsgegevens op een regel eronder.

   De drie dienstlinks dragen de kleur van hun dienst als streepje ervoor,
   net als in het uitklapmenu en op de voorpagina. Het is het enige stukje
   kleur in de voet; verder blijft hij stil, want een voet hoort niet te
   roepen. */

.autive-voet {
	padding-block: 2.25rem 2rem;
	font-size: 0.95rem;
	color: var(--zacht);
	border-top: var(--lijn-hair) solid var(--lijn);
}
.autive-voet a { color: var(--ink); }
.autive-voet a:hover { color: var(--magenta); }

.autive-voetkolommen { gap: 1.75rem; }
@media (min-width: 48rem) { .autive-voetkolommen { gap: 2.5rem; } }
@media (max-width: 47.99rem) {
	.autive-voetkolommen { flex-wrap: wrap !important; }
	.autive-voetkolommen > .wp-block-column { flex-basis: 100% !important; }
}
.autive-voetkolommen > .wp-block-column { min-width: 0; }

.autive-voetkop {
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--zacht);
	margin-bottom: 0.55rem;
}
.autive-voetnaam { max-width: 34ch; margin-bottom: 0.75rem; }
.autive-voetactie a { font-weight: 600; }
.autive-voet :is(.autive-voetnaam, .autive-voetactie) + p { margin-top: 0; }

/* De twee menu's staan onder elkaar in plaats van naast elkaar; core's eigen
   flexregels zijn daar al op gezet in het blok, hier staat alleen de
   raakvlakmaat en de kleurcodering. */
.autive-voet nav ul { list-style: none; padding-left: 0; }
.autive-voet nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 32px;
	color: var(--ink);
	text-decoration: none;
}
.autive-voet nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--magenta);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
/* In deze kolom staan de vier diensten en niets anders, dus elk item krijgt
   het streepje in zijn eigen kleur. Er heeft een tijdje Tarieven bij gestaan,
   en toen stond hier een selector die dat ene item moest uitzonderen. Een
   uitzondering in de CSS omdat de indeling niet klopt is het verkeerde eind:
   Tarieven is geen dienst en staat nu bij de pagina's. */
.autive-voetdiensten .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-left: 0.85rem;
	position: relative;
}
.autive-voetdiensten .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.5rem;
	height: 2px;
	margin-top: -1px;
	background: var(--dienststreep);
}
.autive-voetdiensten a[href*="toegankelijk-maken"] { --dienststreep: var(--magenta); }
.autive-voetdiensten a[href*="laten-maken"] { --dienststreep: var(--petrol); }
.autive-voetdiensten a[href*="website-onderhoud"] { --dienststreep: var(--violet); }
.autive-voetdiensten a[href*="overnemen"] { --dienststreep: var(--lime); }

/* De algemene voorwaarden: één vel van bijna dertigduizend pixels hoog. Dat
   vel hangt recht, en dat is een meting en geen smaak. Een half graadje
   scheef betekent hoogte maal de sinus van de hoek aan extra breedte, hier
   231 px, en de leeskolom is 720 px: tussen ongeveer 740 en 1000 px venster
   steekt hij dan rechts buiten beeld. De bestaande metingen vinden dat niet,
   want reflow meet op 320 px en mobiel op 390 px, en daar hangen alle vellen
   al recht. Zelfde reden als bij het artikelvel.

   De selector moet even diep zijn als die van de draaiing zelf: die staat op
   .wp-block-post-content > *:nth-child(4n+2) :is(.is-style-vel, ...) en dat is
   0,3,0. Een kale dubbele klasse is 0,2,0 en verliest - gemeten stond het vel
   op 780 px nog steeds 83 px buiten beeld. */
.wp-block-post-content > *:nth-child(n) .autive-voorwaarden.autive-voorwaarden { transform: none; }
/* Het lidnummer staat gewoon vooraan in de regel, en de volgende regels
   lopen er onder door. Zo doet het bronbestand het ook.

   Er heeft hier een uitspringend nummer gestaan, zoals in een wettekst. Dat
   zag er goed uit in de regel en fout op het scherm: het nummer kwam drie
   pixels buiten het vel te liggen, omdat de negatieve text-indent groter was
   dan de padding van het vel. Gemeten met een Range om de cijfers zelf, want
   de rect van het inline-block eromheen liegt daarover. Terugdraaien was
   goedkoper dan uitrekenen, en het scheelt ook nog 46 px regelbreedte. */
.autive-voorwaarden p.has-small-font-size > strong {
	margin-right: 0.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--zacht);
}

/* De index loopt mee met het scrollen. Op een document van tweeëntwintigduizend
   pixels is dat het verschil tussen een inhoudsopgave en een lijst die je één
   keer ziet. Sticky hangt aan de groep binnen de kolom en niet aan de kolom
   zelf: een kolom in een flexrij is de volle hoogte, en dan loopt er niets. */
.autive-vw-rij { gap: 2rem; align-items: flex-start; }
/* flex-wrap met !important, want core zet boven 782 px zelf
   `flex-wrap: nowrap !important` op elk kolommenblok. Zonder die verzwaring
   stapelen de kolommen niet maar worden ze geperst: gemeten was de
   tekstkolom op 900 px nog maar 367 px breed, en het document 48.427 px hoog
   in plaats van 30.000. */
@media (max-width: 61.99rem) {
	.autive-vw-rij { flex-wrap: wrap !important; }
	.autive-vw-rij > .wp-block-column { flex-basis: 100% !important; }
}
.autive-vw-rij > .wp-block-column { min-width: 0; }
@media (min-width: 62rem) {
	.autive-vw-index {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		padding-right: 0.5rem;
		border-right: var(--lijn-hair) solid var(--lijn);
	}
}
.autive-vw-index h2 {
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--zacht);
	margin-bottom: 0.6rem;
}
.autive-vw-lijst { list-style: none; padding-left: 0; margin: 0; }
.autive-vw-lijst li { margin-bottom: 0; }
.autive-vw-lijst a {
	display: flex;
	align-items: center;
	min-height: 32px;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--ink);
	text-decoration: none;
	padding-block: 0.25rem;
}
.autive-vw-lijst a:hover { color: var(--magenta); text-decoration: underline; text-underline-offset: 0.22em; }

/* Ruimte onder de kopbalk als je vanuit de index naar een hoofdstuk springt. */
.autive-voorwaarden :is(h2, h3) { scroll-margin-top: 1.5rem; }
.autive-voorwaarden h2:not(:first-child) { margin-top: 2.6rem; }
.autive-voorwaarden h3 { margin-top: 1.6rem; }
.autive-voorwaarden .autive-punten { margin-bottom: 0; }
/* 2.5.8 - de tien links in de index zijn losse doelen in een lijst en niet
   links in een lopende zin, dus de uitzondering voor inline links geldt er
   niet. Op de regelhoogte van de lijst waren ze 20 px hoog; de eis is 24.
   Gemeten, en tien keer gemeld. */
.autive-voorwaarden .autive-punten a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
}
.autive-voorwaarden .autive-punten li { margin-bottom: 0; }

.autive-voetregel {
	margin-top: 2rem;
	padding-top: 1.1rem;
	border-top: var(--lijn-hair) solid var(--lijn);
}
.autive-voetregel p { margin: 0; }
.autive-voetgegevens { font-size: 0.9rem; }

/* 22. De vaste actiebalk onderaan, alleen op een telefoon ----------------- */
/* Staat alleen op de pagina's waar de eerste actie diep onder de vouw ligt -
   gemeten, niet gegokt. Als <nav aria-label>, niet als kale div. */

.autive-balk {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: nowrap;
	padding: 0.55rem var(--gutter);
	padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
	background: var(--bord);
	border-top: var(--lijn-hair) solid var(--lijn);
}
.autive-balk p {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--zacht);
	text-wrap: balance;
}
.autive-balk .wp-block-buttons { flex: none; margin: 0; }
.autive-balk .wp-element-button { min-height: 44px; padding-inline: 1.1rem; }
/* Twee klassen, met opzet: core zet op een groepsblok met een flexlayout een
   eigen .wp-container-...-is-layout-flex met display:flex, en dat is dezelfde
   specificiteit als een kale .autive-balk. Wie dan wint hangt af van de
   vololgorde waarin de stylesheets in de head staan, en dat is geen contract.
   Gemeten: de balk stond op 1200 px gewoon in beeld, 75 px hoog. */
@media (min-width: 46rem) { .autive-balk.autive-balk { display: none; } }
/* 2.4.11 Focus Not Obscured: een plakkende balk onderaan dekt het element af
   dat net focus kreeg. scroll-padding houdt bij het scrollen naar focus een
   strook vrij ter hoogte van de balk. */
@media (max-width: 45.99rem) {
	body:has(.autive-balk) { scroll-padding-bottom: 5.5rem; }
	html:has(.autive-balk) { scroll-padding-bottom: 5.5rem; }
}

/* 23. Toegankelijkheidsbasis --------------------------------------------- */

/* Tekst die alleen voor een schermlezer is. WordPress zet deze klasse zelf op
   een paar plekken (de overslaan-link, formuliertitels) maar levert de
   opmaak niet in elk bloktheme mee, dus hij staat hier. Met opzet 1 x 1 px en
   overflow hidden: dat is geen bevinding maar het mechanisme. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
}

/* 2.4.7 en 1.4.11 - een zichtbare focusstijl, nergens weggehaald.
   Hier stond ooit currentColor, en dat is precies verkeerd: op een gekleurde
   knop is currentColor wit, en die witte ring lag op een cremekleurige
   pagina. Gemeten op 1 september 2026 over 60 pagina's: 1,12 : 1, dus in de
   praktijk geen focusring. Nu twee ringen om elkaar - een donkere die werkt
   op een lichte grond, en een lichte eromheen die werkt op een donker vlak.
   Welke kleur er ook onder ligt, een van de twee haalt zijn contrast.

   Met :is() en niet met :where(): een component met een eigen box-shadow
   (.wp-element-button heeft er een) heeft specificiteit 0,1,0 en zou een
   :where()-regel verslaan, en dan is de witte buitenring weg op precies de
   elementen waar het om gaat. :is(a, button, ...) is 0,0,1 en met
   :focus-visible erbij 0,1,1. Deze regel staat daarom ook achteraan. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--lijn-dik) solid #10151A;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #FFFFFF;
}

/* De overslaan-link die WordPress zelf plaatst, in de stijl van het bord. */
.skip-link.screen-reader-text:focus {
	background: var(--ink);
	color: var(--vel);
	padding: 0.85rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 0;
	left: 0;
	top: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* De draaiing van de vellen is decoratie, geen beweging: hij staat stil en
	   blijft dus staan. Wie beweging uit zet, ziet hetzelfde bord. */
}