/* =====================================================================
   WebOptimal — versie 3: opgebouwd zoals de sites die Dali voor zijn
   klanten maakt (Danny's Bouwbedrijf, Hoving Assen, Autobedrijf Bruins).
   ---------------------------------------------------------------------
   Licht, met paars als de ene merkkleur. Witte balk met menu en één
   paarse knop, kop met een paarse regel, twee knoppen, cijfers eronder,
   het werk groot rechts, een USP-strook, dan witte en lichtgrijze secties
   met kaarten, stappen, prijzen, vragen en reviews, en een donkere voet.

   De projecttegels en projectpagina's nemen de kleuren van die klant over
   via --grond, --tekst, --zacht, --accent en --rand in een style-attribuut.
   Daarbinnen komt het paars van WebOptimal niet voor.

   Volgorde:
     1. Lettertypes      6. Homepage         11. Contact
     2. Tokens           7. Projecten        12. Artikelen
     3. Basis            8. Prijzen          13. Voet en belbalk           
     4. Bouwstenen       9. Over mij         13b. Assistent
     5. Kop en menu     10. Reviews          14. Toegankelijkheid
   ===================================================================== */


/* 1. LETTERTYPES ==================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dmmono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dmmono-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/dmmono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. TOKENS ========================================================= */

:root {
	/* De site zelf: wit en lichtgrijs, donkere inkt. */
	--wit:          #FFFFFF;
	--grijs:        #F4F4F6;
	--inkt:         #17171A;
	--inkt-zacht:   #5B5B66;   /* gedempte tekst, 6,7:1 op wit */
	--lijn:         #E5E5EC;
	--lijn-sterk:   #C9C9D3;
	--zwart:        #0B0B0C;   /* topbalk en voet */
	--zwart-zacht:  #B7B7C2;   /* tekst op zwart */

	/* Het merk. */
	--paars:        #6C63FF;
	--paars-vul:    #5148E5;   /* tekstlinks en hover; wit erop 6,1:1, op wit 6,0:1 */
	--paars-tint:   #EEEDFF;
	--paars-tint2:  #F7F6FF;
	--paars-tekst:  #9C95FF;   /* link op zwart (voet, assistent) */

	/* Standaardwaarden voor klantkleuren; elke tegel/band overschrijft ze. */
	--grond:  var(--grijs);
	--tekst:  var(--inkt);
	--zacht:  var(--inkt-zacht);
	--accent: var(--inkt);
	--rand:   rgba(23, 23, 26, .16);

	--sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--omhulsel: 1200px;
	--rand-marge: clamp(1.25rem, 4vw, 2rem);
	--ruimte: clamp(3.25rem, 6vw, 5.5rem);
	--ruimte-klein: clamp(2rem, 4vw, 3rem);

	--radius: 14px;
	--radius-tegel: 18px;
	--radius-knop: 10px;

	--schaduw-paars: 0 8px 24px rgba(108, 99, 255, .28);
	--schaduw-kaart: 0 20px 50px rgba(23, 23, 26, .08);

	/* Typemaat. */
	--t-mega:  clamp(2.1rem, 1.2rem + 2.9vw, 3.9rem);
	--t-groot: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	--t-kop:   clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
	--t-sub:   clamp(1.05rem, 1rem + .3vw, 1.2rem);
	--t-body:  clamp(1rem, .96rem + .2vw, 1.0625rem);
	--t-klein: .9rem;
	--t-mono:  .75rem;
}


/* 3. BASIS ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--wit);
	color: var(--inkt);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	text-wrap: balance;
}
h3, h4 { letter-spacing: -.02em; line-height: 1.15; }

p { margin: 0; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--paars); color: #fff; }

/* Het hidden-attribuut wint altijd, ook van een klasse die display zet.
   Zonder dit bleef het assistentpaneel open terwijl het "hidden" was. */
[hidden] { display: none !important; }

.mono {
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.overslaan {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--paars-vul); color: #fff; padding: .8rem 1.2rem; text-decoration: none; border-radius: var(--radius-knop);
}
.overslaan:focus { left: .5rem; top: .5rem; }


/* 4. BOUWSTENEN ===================================================== */

.omhulsel {
	width: 100%;
	max-width: var(--omhulsel);
	margin-inline: auto;
	padding-inline: var(--rand-marge);
}
.omhulsel--smal { max-width: 48rem; }

.sectie { padding-block: var(--ruimte); }
.sectie--grijs { background: var(--grijs); }
.sectie--tint { background: var(--paars-tint2); }

/* De kop van een sectie: label met streepje, titel, korte uitleg. */
.sectiekop { max-width: 40rem; }
.sectiekop--midden { margin-inline: auto; text-align: center; }
.sectiekop--midden .label { justify-content: center; }
.sectiekop h1, .sectiekop h2 { font-size: var(--t-groot); }
.sectiekop p { margin-top: .9rem; color: var(--inkt-zacht); font-size: var(--t-sub); line-height: 1.55; text-wrap: pretty; }

.label {
	display: inline-flex; align-items: center; gap: .6rem;
	margin-bottom: 1rem;
	font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; color: var(--paars-vul);
}
.label::before { content: ''; width: 1.75rem; height: 3px; background: var(--paars); border-radius: 2px; flex: none; }
.label__link { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.label__link:hover { border-bottom-color: currentColor; }
.accent { color: var(--paars-vul); }

/* Knoppen ---------------------------------------------------------- */

.knop {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	padding: .9rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--radius-knop);
	font-size: .9875rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.2;
	text-decoration: none; cursor: pointer; background: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.knop:hover { transform: translateY(-1px); }

.knop--primair, .knop--bellen { background: var(--paars); color: #fff; border-color: var(--paars); box-shadow: var(--schaduw-paars); }
.knop--primair:hover, .knop--bellen:hover { background: var(--paars-vul); border-color: var(--paars-vul); }

.knop--stil { border-color: var(--inkt); color: var(--inkt); }
.knop--stil:hover { background: var(--inkt); color: #fff; }


.knop--app { background: #128C7E; color: #fff; border-color: #128C7E; }
.knop--app:hover { background: #0f7466; border-color: #0f7466; }

/* Binnen een klantkleur: de kleuren van de klant. */
.knop--opdonker { border-color: var(--rand); color: var(--tekst); }
.knop--opdonker:hover { border-color: var(--tekst); }

.knop--klein { padding: .65rem 1.05rem; font-size: .9rem; }
.knop--breed { width: 100%; }

/* Pijllink --------------------------------------------------------- */

.pijllink, .band__link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 700; text-decoration: none;
	border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.pijllink { color: var(--paars-vul); }
.pijllink:hover { color: var(--inkt); }
.pijl { transition: transform .18s ease; flex: none; }
.pijllink:hover .pijl, .band__link:hover .pijl { transform: translateX(4px); }

/* Kruimels --------------------------------------------------------- */

.kruimels { color: var(--inkt-zacht); }
.kruimels ol {
	display: flex; flex-wrap: wrap; gap: .4rem;
	font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .07em; text-transform: uppercase;
}
.kruimels li + li::before { content: '/'; margin-right: .4rem; opacity: .5; }
.kruimels a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; text-decoration: none; }
.kruimels a:hover { color: var(--paars-vul); }

/* Vinklijst: zoals op de prijskaarten. */
.vinklijst { display: grid; gap: .6rem; }
.vinklijst li { position: relative; padding-left: 1.7rem; }
.vinklijst li::before {
	content: ''; position: absolute; left: .1rem; top: .5em; width: .85rem; height: .45rem;
	border-left: 2.5px solid var(--paars); border-bottom: 2.5px solid var(--paars); transform: rotate(-45deg);
}


/* 5. KOP EN MENU ==================================================== */

/* De dunne donkere balk erboven, zoals op Danny's en Hoving. */
.topbalk { background: var(--zwart); color: var(--zwart-zacht); font-size: .84rem; }
.topbalk__binnen {
	max-width: var(--omhulsel); margin-inline: auto; padding: .5rem var(--rand-marge);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.topbalk__deel { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.topbalk b { color: #fff; font-weight: 600; }
.topbalk a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; text-decoration: none; color: #fff; }
.topbalk a:hover { color: var(--paars-tekst); }
.topbalk__scheiding { opacity: .4; }
.topbalk__deel--rechts { display: none; }
@media (min-width: 46rem) { .topbalk__deel--rechts { display: inline-flex; } }

.kop {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--lijn);
	transition: transform .28s ease;
}
.kop.is-weg { transform: translateY(-101%); }

.kop__binnen {
	max-width: var(--omhulsel); margin-inline: auto;
	padding: .8rem var(--rand-marge);
	display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.25rem;
}
.kop__merk { display: block; line-height: 0; padding-block: .4rem; margin-block: -.4rem; }
.kop__logo { width: clamp(118px, 15vw, 140px); height: auto; }

.kop__nav { display: none; }
.kop__menu { display: flex; gap: clamp(1rem, 2vw, 1.9rem); justify-content: center; }
.kop__menu a {
	text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--inkt);
	padding-block: .55rem; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.kop__menu a:hover { color: var(--paars-vul); }
.kop__menu .current-menu-item > a, .kop__menu .current_page_item > a { color: var(--paars-vul); border-bottom-color: var(--paars); }

.kop__contact { display: none; }

.kop__schakelaar {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 44px; height: 44px; padding: 0 11px;
	border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-knop); background: none; cursor: pointer; grid-column: 4;
}
.kop__streep { display: block; height: 2px; background: var(--inkt); transition: transform .2s ease; }
.kop__schakelaar[aria-expanded='true'] .kop__streep:first-child { transform: translateY(3.5px) rotate(45deg); }
.kop__schakelaar[aria-expanded='true'] .kop__streep:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobielmenu { border-top: 1px solid var(--lijn); padding: 1rem var(--rand-marge) 1.5rem; background: var(--wit); }
.mobielmenu__lijst { display: flex; flex-direction: column; }
.mobielmenu__lijst a {
	display: block; padding: .85rem 0; border-bottom: 1px solid var(--lijn);
	text-decoration: none; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
}
.mobielmenu__contact { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }

@media (min-width: 62rem) {
	.kop__binnen { grid-template-columns: auto 1fr auto; }
	.kop__nav { display: block; }
	.kop__contact { display: flex; gap: .6rem; }
	.kop__schakelaar { display: none; }
	.mobielmenu { display: none !important; }
}


/* 6. HOMEPAGE ======================================================= */

/* De hero: kop links met een paarse regel, het werk rechts. */

.hero {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4.5rem, 7vw, 6rem);
	background: linear-gradient(180deg, var(--paars-tint2) 0%, var(--wit) 75%);
	overflow: hidden;
}
.hero__raster { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.hero__zin { font-size: var(--t-mega); max-width: 15ch; }
.hero__zin em { font-style: normal; color: var(--paars-vul); }
.hero__lead { margin-top: 1.4rem; max-width: 34rem; font-size: var(--t-sub); line-height: 1.55; color: var(--inkt-zacht); text-wrap: pretty; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
/* Onder de knoppen één rustige regel met de prijs. */
.hero__prijs {
	display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
	margin-top: 2rem; padding: .4rem 1rem .4rem .4rem;
	border-radius: 999px; background: var(--wit); border: 1px solid var(--lijn);
	color: var(--inkt-zacht); font-size: .95rem; box-shadow: 0 6px 20px -12px rgba(23, 23, 26, .25);
}
.hero__prijs b {
	display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 999px;
	background: var(--paars); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* Op een smalle telefoon: knoppen over de volle breedte en de prijsregel
   als een nette kaart in plaats van een pil die over twee regels breekt. */
@media (max-width: 29.999rem) {
	.hero__knoppen .knop { flex: 1 1 100%; }
	.hero__prijs { display: flex; align-items: center; border-radius: 16px; padding: .5rem .9rem .5rem .5rem; }
	.hero__prijs b { flex: none; }
	.hero__prijs span { flex: 1 1 8rem; line-height: 1.35; }
}

/* Het werk in de hero: alle negen sites als een 3×3-mozaïek van browser-
   vensters, elk met een kader in de kleur van die klant en een link naar het
   project. Op desktop staat het mozaïek licht gekanteld, naar de tekst toe,
   met een zachte paarse gloed erachter; op mobiel plat en zonder gloed. */

.mozaiek { position: relative; width: 100%; max-width: 38rem; margin-inline: auto; }
.mozaiek__raster {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem;
}
/* De z-index valt pas terug als de tegel klaar is met krimpen. */
.mozaiek__raster > li { position: relative; z-index: 1; transition: z-index 0s .3s; }
.mozaiek__tegel {
	position: relative; display: block; overflow: hidden; text-decoration: none;
	border-radius: 8px; background: #fff;
	border: 2px solid var(--kader, var(--paars));
	box-shadow: 0 12px 30px -14px rgba(23, 23, 26, .35);
	transition: transform .26s ease-out, box-shadow .3s ease, opacity .25s ease;
}
.mozaiek__balk { height: 15px; background: #F6F6F9; border-bottom: 1px solid #E8E8EE; display: flex; align-items: center; gap: 3px; padding: 0 6px; }
.mozaiek__balk i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.mozaiek__balk i:nth-child(1) { background: #FF5F57; } .mozaiek__balk i:nth-child(2) { background: #FEBC2E; } .mozaiek__balk i:nth-child(3) { background: #28C840; }
.mozaiek__tegel img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top center; }

/* De negende plek als er acht sites zijn: een paarse uitnodiging. */
.mozaiek__tegel--vrij { background: var(--paars); border-color: var(--paars); color: #fff; }
.mozaiek__tegel--vrij .mozaiek__balk { background: rgba(255, 255, 255, .16); border-bottom-color: rgba(255, 255, 255, .22); }
.mozaiek__vrijtekst {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	aspect-ratio: 16 / 10; padding: .4rem; text-align: center;
	font-size: .68rem; line-height: 1.3; color: rgba(255, 255, 255, .85);
}
.mozaiek__vrijtekst b { display: block; margin-bottom: .15rem; font-size: .95rem; letter-spacing: -.02em; color: #fff; }

/* De naam van de klant verschijnt onderin de tegel zodra je erop staat. */
.mozaiek__naam {
	position: absolute; left: .45rem; right: .45rem; bottom: .45rem;
	padding: .3rem .55rem; border-radius: 6px;
	background: rgba(255, 255, 255, .94); color: var(--inkt);
	font-size: .72rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	opacity: 0; transform: translateY(6px);
	transition: opacity .22s ease, transform .22s ease;
}

/* Erop staan: de tegel springt naar voren, de rest wijkt iets terug. */
@media (hover: hover) and (pointer: fine) {
	.mozaiek__raster > li:hover { z-index: 5; transition-delay: 0s; }
	.mozaiek__tegel:hover {
		/* De veer alleen op de heenweg; terug gewoon zacht. */
		transform: translateY(-8px) scale(1.16);
		transition-timing-function: cubic-bezier(.2, .9, .3, 1.25), ease, ease;
		box-shadow: 0 34px 60px -18px rgba(23, 23, 26, .5), 0 0 0 1px rgba(255, 255, 255, .7);
	}
	.mozaiek__tegel:hover .mozaiek__naam { opacity: 1; transform: none; }
	/* Alleen dimmen als er echt een tegel gehoverd is, niet in de goot ertussen. */
	.mozaiek__raster:has(> li:hover) > li:not(:hover) .mozaiek__tegel { opacity: .72; }
}
.mozaiek__raster > li:focus-within { z-index: 5; transition-delay: 0s; }
.mozaiek__tegel:focus-visible { transform: translateY(-8px) scale(1.16); outline-offset: 4px; }
.mozaiek__tegel:focus-visible .mozaiek__naam { opacity: 1; transform: none; }

/* Bij het laden vallen de tegels één voor één op hun plek. */
@keyframes mozaiek-in { from { opacity: 0; transform: translateY(14px); } }
.mozaiek__raster > li { animation: mozaiek-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }

.mozaiek__onder { position: relative; z-index: 1; margin-top: 1rem; text-align: center; }
.mozaiek__pil {
	display: inline-block; max-width: 100%;
	padding: .5rem 1rem; border-radius: 999px;
	background: var(--paars); color: #fff; font-size: .85rem; line-height: 1.35; text-wrap: balance;
	box-shadow: 0 10px 30px rgba(108, 99, 255, .35);
}

@media (min-width: 62rem) {
	.hero__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4rem); }
	.mozaiek { margin-inline: 0 auto; }
	.mozaiek::before {
		content: ''; position: absolute; inset: 8% 4% 12% 4%; z-index: 0; pointer-events: none;
		background: radial-gradient(closest-side, rgba(108, 99, 255, .30), rgba(108, 99, 255, 0));
		filter: blur(36px);
	}
	.mozaiek__raster { gap: .75rem; transform: perspective(1600px) rotateY(6deg) rotateX(2deg); transform-origin: 50% 50%; }
	.mozaiek__tegel { border-radius: 10px; border-width: 3px; }
	.mozaiek__balk { height: 20px; gap: 4px; padding: 0 8px; }
	.mozaiek__balk i { width: 6px; height: 6px; }
}
@media (max-width: 61.999rem) {
	/* Op smalle schermen niet zichtbaar, maar wel de naam van de link. */
	.mozaiek__naam {
		width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 1; transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mozaiek__tegel, .mozaiek__tegel:hover, .mozaiek__tegel:focus-visible { transform: none; }
	.mozaiek__raster > li { animation: none; }
	.mozaiek__raster:has(> li:hover) > li:not(:hover) .mozaiek__tegel { opacity: 1; }
}

/* USP-strook: vier vlakken; het paarse vlak glijdt mee naar het vlak waar
   je op staat (site.js zet --licht-x/y/w/h) en keert daarna terug naar het
   eerste. Zonder JavaScript is het eerste vlak gewoon paars. */
.usp-wrap { margin-top: -3rem; position: relative; z-index: 2; }
.usp {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; background: var(--wit);
	box-shadow: var(--schaduw-kaart);
}
.usp::before {
	content: ''; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
	width: var(--licht-w, 0px); height: var(--licht-h, 0px);
	transform: translate(var(--licht-x, 0px), var(--licht-y, 0px));
	background: var(--paars); opacity: var(--licht-aan, 0);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.usp__vlak { position: relative; padding: 1.5rem 1.5rem; border-bottom: 1px solid rgba(23, 23, 26, .08); transition: color .3s ease; }
.usp__vlak > * { position: relative; z-index: 2; }
.usp__vlak:last-child { border-bottom: 0; }
.usp__vlak svg { width: 26px; height: 26px; stroke: var(--paars); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.usp__vlak b { display: block; margin-top: .85rem; font-size: 1.02rem; letter-spacing: -.01em; }
.usp__vlak p { margin-top: .35rem; font-size: var(--t-klein); color: var(--inkt-zacht); line-height: 1.5; transition: color .3s ease; }
/* Zonder JavaScript: het eerste vlak paars. */
.usp:not(.heeft-licht) .usp__vlak:first-child { background: var(--paars); color: #fff; }
.usp:not(.heeft-licht) .usp__vlak:first-child svg { stroke: #fff; }
.usp:not(.heeft-licht) .usp__vlak:first-child p { color: rgba(255, 255, 255, .86); }
/* Met JavaScript: het vlak onder het licht. */
.usp.heeft-licht .usp__vlak.is-licht { color: #fff; }
.usp.heeft-licht .usp__vlak.is-licht svg { stroke: #fff; }
.usp.heeft-licht .usp__vlak.is-licht p { color: rgba(255, 255, 255, .86); }
@media (min-width: 46rem) {
	.usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.usp__vlak { border-right: 1px solid rgba(23, 23, 26, .08); }
	.usp__vlak:nth-child(2n) { border-right: 0; }
	.usp__vlak:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 64rem) {
	.usp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.usp__vlak { border-bottom: 0; border-right: 1px solid rgba(23, 23, 26, .08); }
	.usp__vlak:nth-child(2n) { border-right: 1px solid rgba(23, 23, 26, .08); }
	.usp__vlak:last-child { border-right: 0; }
}

/* Het werk: kaarten in de kleur van de klant. */

.raster { padding-block: var(--ruimte); }
.raster__lijst {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 46rem) {
	.raster__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.raster__lijst > .tegel:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.raster__lijst > .tegel:last-child:nth-child(odd) .tegel__beeld { aspect-ratio: 32 / 10; }
}
@media (min-width: 64rem) {
	.raster__lijst, .raster__lijst--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.raster__lijst > .tegel:last-child:nth-child(odd),
	.raster__lijst--drie > .tegel:last-child:nth-child(odd) { grid-column: auto; }
	.raster__lijst > .tegel:last-child:nth-child(odd) .tegel__beeld,
	.raster__lijst--drie > .tegel:last-child:nth-child(odd) .tegel__beeld { aspect-ratio: 16 / 10; }
	.raster__lijst > .tegel:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.raster__lijst > .tegel:last-child:nth-child(3n + 1) .tegel__beeld { aspect-ratio: 32 / 10; }
	/* Op de Werk-pagina: twee bredere kaarten naast elkaar, met uitleg. */
	.raster__lijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
	.raster__lijst--twee > .tegel:last-child:nth-child(3n + 1) { grid-column: auto; }
	.raster__lijst--twee > .tegel:last-child:nth-child(3n + 1) .tegel__beeld { aspect-ratio: 16 / 10; }
	.raster__lijst--twee > .tegel:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.raster__lijst--twee > .tegel:last-child:nth-child(odd) .tegel__beeld { aspect-ratio: 32 / 10; }
}

.tegel {
	background: var(--grond); color: var(--tekst);
	border-radius: var(--radius-tegel); overflow: hidden;
	box-shadow: 0 1px 0 var(--rand);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tegel:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(23, 23, 26, .35); }
.tegel__link {
	display: grid; grid-template-rows: auto 1fr auto; height: 100%;
	padding: .9rem .9rem 1.3rem; text-decoration: none; gap: 1rem;
	position: relative;
}
.tegel__beeld { display: block; overflow: hidden; border-radius: calc(var(--radius-tegel) - 8px); aspect-ratio: 16 / 10; }
.tegel__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.tegel__link:hover .tegel__beeld img { transform: scale(1.03); }
.tegel__tekst { display: block; padding-inline: .35rem; padding-right: 3rem; }
.tegel__naam { display: block; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tegel__vak { display: block; margin-top: .3rem; color: var(--zacht); font-size: var(--t-klein); }
.tegel__beslissing { display: block; margin-top: .75rem; color: var(--tekst); font-size: var(--t-klein); line-height: 1.55; max-width: 48ch; }
.tegel__pijl {
	position: absolute; right: 1.25rem; bottom: 1.3rem;
	width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--rand);
	display: inline-flex; align-items: center; justify-content: center; color: var(--accent);
}
.tegel__link:hover .tegel__pijl { border-color: var(--accent); }

/* De rij vol maken: een paarse tegel met een uitnodiging. */
.tegel--vrij { --grond: var(--paars); --tekst: #fff; --zacht: rgba(255, 255, 255, .82); --accent: #fff; --rand: rgba(255, 255, 255, .3); box-shadow: var(--schaduw-paars); }
.tegel--vrij .tegel__link { grid-template-rows: 1fr auto; min-height: 16rem; padding: 1.6rem 1.4rem; }
.tegel--vrij .tegel__tekst { align-self: center; padding-inline: 0; }
.tegel__vrijlabel { display: block; margin-bottom: .6rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.tegel--vrij .tegel__naam { font-size: 1.6rem; }
.tegel--vrij .tegel__vak { margin-top: .6rem; max-width: 30ch; font-size: var(--t-body); line-height: 1.5; }
.raster__onder { margin-top: 2rem; text-align: center; }
.raster--archief { padding-top: 0; }
.raster--archief .raster__lijst { margin-top: 0; }

/* Op een telefoon veeg je door het werk in plaats van eindeloos te scrollen:
   de kaarten staan naast elkaar, de volgende kaart piept al in beeld. */
@media (max-width: 45.999rem) {
	.raster__lijst--veeg {
		display: flex; gap: .85rem;
		margin-inline: calc(-1 * var(--rand-marge)); padding: .25rem var(--rand-marge) .75rem;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand-marge);
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.raster__lijst--veeg::-webkit-scrollbar { display: none; }
	.raster__lijst--veeg > .tegel { flex: 0 0 min(84%, 21rem); scroll-snap-align: start; }
	.raster__lijst--veeg > .tegel:hover { transform: none; }
	.verder .raster__lijst--veeg { margin-inline: 0; }
}
.veegstippen { display: none; justify-content: center; gap: .1rem; margin-top: .35rem; }
/* De stip is klein, de knop eromheen is 24 px: goed te raken met een duim. */
.veegstippen button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .2s ease; }
.veegstippen button::before { content: ''; position: absolute; inset: 8px; border-radius: 4px; background: var(--lijn-sterk); transition: background-color .2s ease; }
.veegstippen button.is-actief { width: 38px; }
.veegstippen button.is-actief::before { background: var(--paars); }
@media (max-width: 45.999rem) { .veegstippen.is-actief { display: flex; } }

/* Waarom: drie kaarten; het paarse vlak glijdt naar de kaart waar je op
   staat en keert terug naar de middelste. Zonder JavaScript is de
   middelste (.kaart--paars) gewoon paars. */
.waarom { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 56rem) { .waarom { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.waarom::before {
	content: ''; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
	width: var(--licht-w, 0px); height: var(--licht-h, 0px);
	transform: translate(var(--licht-x, 0px), var(--licht-y, 0px));
	background: var(--paars); border-radius: var(--radius); box-shadow: var(--schaduw-paars); opacity: var(--licht-aan, 0);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.kaart { position: relative; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); transition: color .3s ease, border-color .3s ease; }
.kaart > * { position: relative; z-index: 2; }
.kaart svg { width: 30px; height: 30px; stroke: var(--paars); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.kaart h3 { margin-top: 1.1rem; font-size: var(--t-kop); }
.kaart p { margin-top: .6rem; color: var(--inkt-zacht); line-height: 1.55; transition: color .3s ease; }
/* Zonder JavaScript: de middelste kaart paars. */
.waarom:not(.heeft-licht) .kaart--paars { background: var(--paars); color: #fff; border-color: var(--paars); box-shadow: var(--schaduw-paars); }
.waarom:not(.heeft-licht) .kaart--paars svg { stroke: #fff; }
.waarom:not(.heeft-licht) .kaart--paars p { color: rgba(255, 255, 255, .9); }
/* Met JavaScript: de kaart onder het licht. */
.waarom.heeft-licht .kaart.is-licht { color: #fff; border-color: var(--paars); }
.waarom.heeft-licht .kaart.is-licht svg { stroke: #fff; }
.waarom.heeft-licht .kaart.is-licht p { color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) {
	.usp::before, .waarom::before { transition: opacity .2s ease; }
}

/* Stappen: vier kolommen met een paarse bovenrand. */
.stappen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 46rem) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stap { border-top: 3px solid var(--paars); padding-top: 1.25rem; }
.stap__nr { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--paars-vul); font-weight: 500; }
.stap h3 { margin-top: .6rem; font-size: var(--t-kop); }
.stap p { margin-top: .5rem; color: var(--inkt-zacht); line-height: 1.55; }

/* Prijzen: drie kaarten, de middelste uitgelicht. */
.prijzen__kaarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 2.75rem); align-items: stretch; }
@media (min-width: 56rem) {
	.prijzen__kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Eén prijs plus onderhoud: twee kaarten, de website het breedst. */
	.prijzen__kaarten--twee { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: 58rem; margin-inline: auto; gap: 1.5rem; }
}
.prijs {
	position: relative; display: flex; flex-direction: column;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem);
}
.prijs--uit { border-color: var(--paars); box-shadow: 0 20px 50px rgba(108, 99, 255, .18); }
.prijs__etiket {
	position: absolute; top: -.8rem; left: 1.5rem;
	background: var(--paars); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
	padding: .3rem .75rem; border-radius: 999px;
}
.prijs h3 { font-size: 1.05rem; font-weight: 600; color: var(--inkt-zacht); letter-spacing: 0; }
.prijs__bedrag { margin-top: .6rem; font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.prijs__bedrag small { font-size: .85rem; color: var(--inkt-zacht); font-weight: 400; letter-spacing: 0; margin-left: .4rem; }
/* "Op offerte" in plaats van een bedrag: iets kleiner, anders wordt het te breed. */
.prijs__bedrag--tekst { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.03em; }
.prijs__bedrag--tekst small { display: block; margin: .35rem 0 0; }
.prijs .vinklijst { margin-top: 1.4rem; flex: 1; font-size: .95rem; }
.prijs .knop { margin-top: 1.6rem; }
.prijzen__noot { margin-top: 1.75rem; text-align: center; color: var(--inkt-zacht); }
.prijzen__noot b { color: var(--inkt); }

/* Vragen: twee kolommen. */
.vragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 56rem) {
	.vragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vragen > .vraag:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 60ch; }
}
.vraag { border-top: 1px solid var(--lijn); padding-top: 1.1rem; }
.vraag dt { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.vraag dd { margin-top: .5rem; color: var(--inkt-zacht); line-height: 1.55; max-width: 56ch; }


/* 7. PROJECTEN ====================================================== */

/* Projectpagina: de kop in de kleur van de klant, de rest wit. */

.projectpagina { background: var(--wit); }
.projectkop { background: var(--grond); color: var(--tekst); padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.projectkop .kruimels { color: var(--zacht); }
.projectkop .kruimels a:hover { color: var(--accent); }
.projectkop__naam { margin-top: 1.25rem; font-size: var(--t-mega); }
.projectkop__vak { margin-top: .6rem; color: var(--zacht); font-size: var(--t-sub); }
.projectkop__link { margin-top: 1rem; }
.projectkop__link a {
	display: inline-flex; align-items: center; gap: .5rem; color: var(--accent);
	font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .07em; text-transform: uppercase;
	text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; padding-top: .5rem; margin-top: -.5rem;
}
.projectkop__figuur { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: var(--omhulsel); padding-inline: var(--rand-marge); }
.projectkop__figuur img { border-radius: var(--radius); border: 1px solid var(--rand); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }

.projectbody { padding-block: var(--ruimte); color: var(--inkt); }
.projectbody__raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.specs { border-top: 1px solid var(--lijn); }
.specs__rij { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--lijn); }
.specs__rij dt { color: var(--inkt-zacht); }
.specs__rij dd { font-weight: 600; }
.projectbody__kop { font-size: var(--t-mono); font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--paars-vul); }
.projectbody__lead { margin-top: 1rem; font-size: var(--t-kop); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; max-width: 36ch; }
.projectbody__nog {
	margin-top: 1.75rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--lijn-sterk); border-radius: var(--radius);
	color: var(--inkt-zacht); letter-spacing: .04em; line-height: 1.7;
}
.projectbody__uit { margin-top: 2rem; }
.projectbody .knop--opdonker { border-color: var(--inkt); color: var(--inkt); }
.projectbody .knop--opdonker:hover { background: var(--inkt); color: #fff; }
@media (min-width: 56rem) { .projectbody__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } }

.verder { padding-block: var(--ruimte); background: var(--grijs); }
.verder__kop { font-size: var(--t-groot); }
.verder .raster__lijst { margin-bottom: 2rem; }

/* Paginakop (alle overige pagina's) */

.paginakop { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem); background: linear-gradient(180deg, var(--paars-tint2), var(--wit)); }
.paginakop .kruimels { margin-bottom: 1.25rem; }
.paginakop__titel { font-size: var(--t-mega); max-width: 18ch; }
.paginakop__intro { margin-top: 1.25rem; max-width: 40rem; font-size: var(--t-sub); color: var(--inkt-zacht); line-height: 1.55; text-wrap: pretty; }


/* 7b. DE GALERIJ (Werk-pagina) ====================================== */

/* Twee kolommen grote browservensters in witte kaarten; het kader en de
   stip in de kleuren van de klant, verder wit, grijs en één keer paars. */

.galerij { padding-block: 0 var(--ruimte); }

.filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.filter__pillen { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter__pil {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem .6rem .55rem 1rem; border-radius: 999px;
	border: 1.5px solid var(--lijn-sterk); background: var(--wit); color: var(--inkt);
	font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter__pil:hover { border-color: var(--inkt); }
.filter__tal {
	display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .4rem;
	border-radius: 999px; background: var(--grijs); color: var(--inkt-zacht); font-size: .78rem; font-weight: 700;
}
.filter__pil.is-actief { background: var(--paars); border-color: var(--paars); color: #fff; box-shadow: var(--schaduw-paars); }
.filter__pil.is-actief .filter__tal { background: rgba(255, 255, 255, .22); color: #fff; }

.galerij__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
@media (min-width: 46rem) { .galerij__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }

.galerij__kaart { position: relative; }
.galerij__artikel {
	position: relative; height: 100%;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-tegel);
	box-shadow: 0 1px 0 rgba(23, 23, 26, .03);
	transition: transform .25s ease, box-shadow .25s ease;
}
.galerij__link { display: flex; flex-direction: column; height: 100%; padding: .7rem .7rem 1.25rem; text-decoration: none; color: var(--inkt); }

.galerij__venster {
	display: block; overflow: hidden; border-radius: 12px;
	border: 3px solid var(--kader, var(--paars)); background: #F6F6F9;
}
.galerij__balk { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #F6F6F9; border-bottom: 1px solid #E8E8EE; }
.galerij__balk i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.galerij__balk i:nth-child(1) { background: #FF5F57; } .galerij__balk i:nth-child(2) { background: #FEBC2E; } .galerij__balk i:nth-child(3) { background: #28C840; }
.galerij__beeld { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.galerij__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }

.galerij__tekst { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .55rem 0; flex: 1; }
.galerij__kopregel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.galerij__naam { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.galerij__pijl {
	flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--lijn-sterk);
	display: inline-flex; align-items: center; justify-content: center; color: var(--inkt);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.galerij__vak { display: flex; align-items: center; gap: .5rem; color: var(--inkt-zacht); font-size: var(--t-klein); }
.galerij__stip { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--stip, var(--kader, var(--paars))); box-shadow: 0 0 0 1px rgba(23, 23, 26, .08); }
.galerij__beslissing { margin-top: .5rem; color: var(--inkt-zacht); line-height: 1.55; text-wrap: pretty; }
.galerij__meer {
	margin-top: auto; padding-top: 1rem; align-self: flex-start;
	color: var(--paars-vul); font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* Adres van de live site in de balk, als losse link naast de kaartlink. */
.galerij__extern {
	position: absolute; top: calc(.7rem + 3px + 2px); left: 50%; transform: translateX(-50%); z-index: 2;
	display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .65rem;
	border-radius: 6px; background: var(--wit); border: 1px solid #E0E0E8; color: var(--inkt-zacht);
	font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}
.galerij__extern:hover { color: var(--paars-vul); border-color: var(--paars); }

@media (hover: hover) and (pointer: fine) {
	.galerij__artikel:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(23, 23, 26, .35); }
	.galerij__artikel:hover .galerij__beeld img { transform: scale(1.025); }
	.galerij__artikel:hover .galerij__pijl { background: var(--paars); border-color: var(--paars); color: #fff; transform: translateX(3px); }
}
.galerij__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-tegel); }

/* Het lege vak naast de negende kaart: een uitnodiging. */
.uitnodiging {
	height: 100%; display: flex; flex-direction: column; justify-content: center;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--paars-tint2); border: 1px solid #E4E2FF; border-radius: var(--radius-tegel);
}
.uitnodiging__kop { font-size: var(--t-groot); max-width: 12ch; }
.uitnodiging p:not(.label) { margin-top: 1rem; color: var(--inkt-zacht); max-width: 40ch; line-height: 1.55; }
.uitnodiging__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }

/* Bij het laden vallen de kaarten één voor één op hun plek; bij filteren niet. */
@keyframes galerij-in { from { opacity: 0; transform: translateY(14px); } }
.galerij__kaart { animation: galerij-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.galerij__kaart:nth-child(2) { animation-delay: 60ms; } .galerij__kaart:nth-child(3) { animation-delay: 120ms; } .galerij__kaart:nth-child(4) { animation-delay: 180ms; }
.galerij__kaart:nth-child(n+5) { animation-delay: 240ms; }
.galerij.is-gefilterd .galerij__kaart { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.galerij__kaart { animation: none; }
	.galerij__artikel:hover { transform: none; }
	.galerij__artikel:hover .galerij__beeld img { transform: none; }
}


/* 7c. WEBDESIGN ASSEN (landingspagina) ============================== */

/* Bouwt op de hero, de galerijkaarten, de prijskaart, de stappen en het
   formulier die er al zijn; hier staat alleen wat de pagina extra nodig heeft. */

.hero--assen .kruimels { margin-bottom: 1.25rem; }
.hero--assen .hero__zin { max-width: 12ch; }

.assen-feiten { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.75rem; color: var(--inkt-zacht); font-size: var(--t-klein); }
.assen-feiten li { position: relative; padding-left: 1.4rem; }
.assen-feiten li::before {
	content: ''; position: absolute; left: .05rem; top: .55em; width: .7rem; height: .4rem;
	border-left: 2.5px solid var(--paars); border-bottom: 2.5px solid var(--paars); transform: rotate(-45deg);
}

.assen-venster { width: 100%; max-width: 38rem; margin-inline: auto; }
.assen-venster__link { display: block; text-decoration: none; transition: transform .25s ease; }
.assen-venster__link .galerij__venster { box-shadow: 0 30px 70px -30px rgba(23, 23, 26, .45); }
.assen-venster__link:hover { transform: translateY(-4px); }
.assen-venster__pil {
	display: inline-block; margin-top: 1rem; padding: .5rem 1rem; border-radius: 999px;
	background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt-zacht); font-size: .85rem; line-height: 1.35;
	box-shadow: 0 6px 20px -12px rgba(23, 23, 26, .25);
}
.assen-venster__pil b { color: var(--inkt); }
@media (min-width: 62rem) { .assen-venster { margin-inline: 0 auto; } }

/* Wat je krijgt: tekst met vinklijst, prijskaart ernaast. */
.assen-krijgt { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .assen-krijgt { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.assen-krijgt .vinklijst--ruim { margin-top: 1.75rem; gap: .8rem; font-size: var(--t-body); }
.assen-krijgt__na { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); color: var(--inkt-zacht); max-width: 56ch; }
.assen-krijgt__kaart { position: sticky; top: 6rem; }
.assen-krijgt__kaart .knop { align-self: stretch; justify-content: center; }

/* Vergelijken: twee kaarten naast elkaar. */
.vergelijk { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 56rem) { .vergelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vergelijk__kaart h3 { margin-top: .75rem; font-size: var(--t-kop); }
.vergelijk__kaart > p:not(.vergelijk__label) { margin-top: .75rem; color: var(--inkt-zacht); line-height: 1.55; }
.vergelijk__kaart .vinklijst, .vergelijk__kaart .kruislijst { margin-top: 1.4rem; }
.vergelijk__label { font-weight: 500; color: var(--inkt-zacht); }
.vergelijk__kaart--zonder { background: var(--grijs); border-color: transparent; }
.vergelijk__kaart--met { border-color: var(--paars); box-shadow: 0 20px 50px rgba(108, 99, 255, .14); }
.vergelijk__kaart--met .vergelijk__label { color: var(--paars-vul); }
.vergelijk__slot { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--t-sub); font-weight: 600; letter-spacing: -.01em; max-width: 44rem; text-wrap: pretty; }

.kruislijst { display: grid; gap: .6rem; }
.kruislijst li { position: relative; padding-left: 1.7rem; color: var(--inkt-zacht); }
.kruislijst li::before, .kruislijst li::after {
	content: ''; position: absolute; left: .45rem; top: .35em; width: 2.5px; height: .9rem; border-radius: 1px;
	background: #B54748; transform: rotate(45deg);
}
.kruislijst li::after { transform: rotate(-45deg); }

/* Werk uit de regio: de galerijkaarten, met alleen plaats en één regel. */
.regio__lijst { margin-top: clamp(2rem, 4vw, 2.75rem); }
.regio__lijst .galerij__beslissing { margin-top: .35rem; }
.regio__meer { margin-top: 2rem; }

/* Waarom Assen: tekst met de adreskaart ernaast. */
.assen-regio { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .assen-regio { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.assen-regio__tekst > p { margin-top: 1.1rem; color: var(--inkt-zacht); line-height: 1.6; max-width: 58ch; text-wrap: pretty; }
.assen-regio__tekst > p:first-of-type { margin-top: 1.5rem; color: var(--inkt); font-size: var(--t-sub); }
.adreskaart .label { margin-bottom: .75rem; }
.adreskaart__adres { font-style: normal; line-height: 1.55; }
.adreskaart__adres b { font-size: 1.1rem; }
.adreskaart__regel { margin-top: .6rem; color: var(--inkt-zacht); }
.adreskaart__regel a { color: var(--inkt); font-weight: 700; text-decoration: none; }
.adreskaart__regel a:hover { color: var(--paars-vul); }
.adreskaart__route { margin-top: 1.25rem; }

/* Afsluiting: tekst en knoppen links, het korte formulier rechts. */
.assen-slot__raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .assen-slot__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.assen-slot__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.assen-formulier .knop { align-self: flex-start; }
.formulier__noot { color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
.formulier__noot a { color: var(--paars-vul); }
.formulier .knop[type='submit'] { justify-self: start; }


/* 8. PRIJZEN ======================================================== */

.prijzen { padding-block: 0 var(--ruimte); }
.prijzen__blad { display: grid; gap: 1rem; }
.prijsrij {
	display: grid; gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart);
}
.prijsrij__wat h2 { font-size: var(--t-kop); }
.prijsrij__wat p { margin-top: .6rem; max-width: 52ch; color: var(--inkt-zacht); }
.prijsrij__bedrag {
	font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 700;
	letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; color: var(--paars-vul);
}
.prijsrij__bedrag .mono { display: block; margin-top: .45rem; color: var(--inkt-zacht); }
.prijsrij__bedrag--tekst { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.03em; }
.prijsrij__tot { font-size: .72em; opacity: .85; }
@media (min-width: 46rem) {
	.prijsrij { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: start; }
	.prijsrij__bedrag { text-align: right; }
}

.prijzen__twee { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 56rem) { .prijzen__twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.lijstblok__kop { font-size: var(--t-kop); }
.lijstblok__intro { margin-top: .7rem; color: var(--inkt-zacht); max-width: 46ch; }

.streeplijst { margin-top: 1.25rem; border-top: 1px solid var(--lijn); }
.streeplijst li { padding-block: .7rem; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .35rem; align-items: start; }
.streeplijst li::before {
	content: ''; width: .8rem; height: .45rem; margin-top: .55em;
	border-left: 2.5px solid var(--paars); border-bottom: 2.5px solid var(--paars); transform: rotate(-45deg);
}
.streeplijst--groot li { font-size: var(--t-sub); }

.nietlijst { margin-top: 1.5rem; border-top: 1px solid var(--lijn); }
.nietlijst__rij { padding-block: 1rem; border-bottom: 1px solid var(--lijn); }
.nietlijst__rij dt { font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.nietlijst__rij dd { margin-top: .35rem; color: var(--inkt-zacht); max-width: 56ch; }

.prijzen__slot {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--radius); background: var(--paars-tint); border: 1px solid #DDDAFF;
	max-width: 60ch;
}
.prijzen__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }


/* 9. OVER MIJ ======================================================= */

.portret { padding-block: var(--ruimte); }
.portret--pagina { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.portret__raster { display: grid; gap: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 56rem) { .portret__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.portret__intro .label { margin-bottom: .9rem; }
.portret__kop { font-size: var(--t-groot); max-width: 16ch; }
.portret__tekst p { margin-top: 1rem; max-width: 56ch; color: var(--inkt-zacht); line-height: 1.6; }
.portret__tekst p:first-of-type { margin-top: 0; color: var(--inkt); font-size: var(--t-sub); }
.portret__meer { margin-top: 1.75rem; }

.werkwijze { padding-block: var(--ruimte); background: var(--grijs); }
.werkwijze__kop { font-size: var(--t-groot); }
.werkwijze__lijst { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: 1.25rem; counter-reset: stap; }
@media (min-width: 46rem) { .werkwijze__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .werkwijze__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.werkwijze__stap {
	counter-increment: stap;
	padding: clamp(1.4rem, 3vw, 1.75rem);
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	display: grid; gap: .5rem; align-content: start;
}
.werkwijze__stap::before {
	content: counter(stap, decimal-leading-zero);
	font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--paars-vul); font-weight: 500;
	padding-bottom: .75rem; border-bottom: 3px solid var(--paars); margin-bottom: .5rem; width: max-content;
}
.werkwijze__stap h3 { font-size: 1.15rem; }
.werkwijze__stap p { color: var(--inkt-zacht); line-height: 1.55; }

.beloftes { padding-block: var(--ruimte); }
.beloftes__kop { font-size: var(--t-groot); }
.beloftes .streeplijst { max-width: 56ch; }


/* 10. REVIEWS ======================================================= */

.reviews { padding-block: var(--ruimte); background: var(--grijs); }
.reviews__kop { font-size: var(--t-groot); }
.reviews__lijst { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .reviews__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .reviews__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.review {
	margin: 0;
	padding: clamp(1.4rem, 3vw, 1.75rem);
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	display: grid; gap: 1.25rem; align-content: space-between;
}
.review__tekst { margin: 0; }
.review__tekst p { font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.review__tekst p::before { content: '\201C'; }
.review__tekst p::after { content: '\201D'; }
.review__wie { display: grid; gap: .3rem; }
.review__sterren { color: #F5B301; line-height: 0; }
.review__naam { font-weight: 700; }
.review__bedrijf { color: var(--inkt-zacht); }

.reviews__na { margin-top: clamp(1.5rem, 3vw, 2rem); display: grid; gap: .6rem; justify-items: start; }
.reviews__uitleg { color: var(--inkt-zacht); font-size: var(--t-klein); max-width: 46ch; }


/* 11. CONTACT ======================================================= */

.contact { padding-block: 0 var(--ruimte); }
.contact__raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .contact__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.contact__leeg {
	margin-top: 1rem; color: var(--inkt-zacht); font-size: var(--t-mono); line-height: 1.6; letter-spacing: .07em;
	border: 1px dashed var(--lijn-sterk); border-radius: var(--radius); padding: 1rem 1.15rem; max-width: 30rem;
}
.contact__tijden { margin-top: .6rem; color: var(--inkt-zacht); }
.contact__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.contact__na { margin-top: 2.5rem; border-top: 1px solid var(--lijn); }
.contact__narij { padding-block: 1rem; border-bottom: 1px solid var(--lijn); }
.contact__narij dt { font-weight: 700; letter-spacing: -.015em; }
.contact__narij dd { color: var(--inkt-zacht); margin-top: .2rem; }
.contact__zakelijk { margin-top: 1.75rem; color: var(--inkt-zacht); line-height: 1.8; }

.contact__formulier {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart);
}
.contact__kop { font-size: var(--t-kop); }
.contact__uitleg { margin-top: .6rem; color: var(--inkt-zacht); }

.formulier { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.formulier__vereist { color: var(--inkt-zacht); font-size: var(--t-klein); }
.veld { display: grid; gap: .4rem; }
.veld label { font-weight: 600; font-size: .95rem; }
.veld__hulp { color: var(--inkt-zacht); font-size: var(--t-klein); }
.veld input[type='text'], .veld input[type='email'], .veld input[type='tel'], .veld textarea, .zoeken input[type='search'] {
	width: 100%; padding: .85rem 1rem;
	border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-knop);
	background: var(--wit); color: var(--inkt);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.veld input:focus, .veld textarea:focus, .zoeken input:focus { border-color: var(--paars); box-shadow: 0 0 0 3px var(--paars-tint); outline: none; }
.veld textarea { resize: vertical; min-height: 8rem; }
.veld--vink { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.veld--vink input { margin-top: .2rem; width: 1.25rem; height: 1.25rem; accent-color: var(--paars-vul); }
.veld--vink label { font-weight: 400; font-size: var(--t-klein); line-height: 1.5; color: var(--inkt-zacht); }
.veld--vink a { color: var(--paars-vul); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 3px solid var(--paars); background: var(--paars-tint2); border-radius: 0 var(--radius-knop) var(--radius-knop) 0; }
.melding--fout { border-left-color: #D63638; background: #FDF1F1; }
.melding--goed { border-left-color: #1B8A5A; background: #EEF8F2; }

.zoeken { margin-top: 2rem; display: grid; gap: .5rem; max-width: 32rem; }
.zoeken label { font-weight: 600; font-size: .95rem; }
.zoeken__rij { display: flex; gap: .5rem; }


/* 12. ARTIKELEN ===================================================== */

.artikelen { padding-block: 0 var(--ruimte); }
.artikelen__lijst { display: grid; gap: 1rem; }
.artikel__link {
	display: grid; gap: .6rem;
	padding: clamp(1.4rem, 3vw, 1.9rem);
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	text-decoration: none; transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
.artikel__link:hover { border-color: var(--lijn-sterk); transform: translateY(-2px); box-shadow: var(--schaduw-kaart); }
.artikel__titel { font-size: var(--t-kop); max-width: 30ch; }
.artikel__link:hover .artikel__titel { color: var(--paars-vul); }
.artikel__samenvatting { color: var(--inkt-zacht); max-width: 62ch; }
.artikel__meta { color: var(--inkt-zacht); display: flex; gap: .5rem; flex-wrap: wrap; }
@media (min-width: 52rem) {
	.artikel__link { grid-template-columns: minmax(0, 12fr) minmax(0, 14fr) auto; gap: 2.5rem; align-items: baseline; }
	.artikel__meta { justify-content: flex-end; }
}

.artikelpagina { padding-bottom: var(--ruimte); }
.artikelkop { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, var(--paars-tint2), var(--wit)); }
.artikelkop .kruimels { margin-bottom: 1.25rem; }
.artikelkop__titel { font-size: var(--t-groot); }
.artikelkop__meta { margin-top: 1.25rem; color: var(--inkt-zacht); display: flex; gap: .5rem; flex-wrap: wrap; }
.artikelbeeld { margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: var(--omhulsel); padding-inline: var(--rand-marge); }
.artikelbeeld img { border-radius: var(--radius); }

.rijketekst { font-size: 1.0625rem; line-height: 1.7; color: var(--inkt); }
.rijketekst--los { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.rijketekst > * + * { margin-top: 1.25rem; }
.rijketekst h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.rijketekst h3 { margin-top: 1.9rem; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
.rijketekst p, .rijketekst li { color: #2B2B33; }
.rijketekst a { color: var(--paars-vul); text-underline-offset: .17em; }
.rijketekst a:hover { color: var(--inkt); }
.rijketekst ul, .rijketekst ol { padding-left: 1.3rem; }
.rijketekst li { list-style: disc; margin-top: .5rem; }
.rijketekst ol li { list-style: decimal; }
.rijketekst blockquote { margin: 2rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--paars); background: var(--paars-tint2); font-size: 1.15rem; line-height: 1.5; border-radius: 0 var(--radius) var(--radius) 0; }
.rijketekst img { margin-block: 2rem; border-radius: var(--radius); }
.rijketekst figure { margin: 2rem 0; }
.rijketekst figcaption { margin-top: .6rem; font-size: var(--t-klein); color: var(--inkt-zacht); }
.rijketekst table { width: 100%; border-collapse: collapse; }
.rijketekst th, .rijketekst td { text-align: left; padding: .7rem 1rem .7rem 0; border-bottom: 1px solid var(--lijn); }
.rijketekst code { font-family: var(--mono); font-size: .9em; background: var(--grijs); padding: .1em .35em; border-radius: 4px; }
.rijketekst pre { overflow-x: auto; background: var(--grijs); padding: 1.25rem; font-family: var(--mono); font-size: .875rem; border-radius: var(--radius); }
.rijketekst .wp-block-table { overflow-x: auto; }

.nalezen { padding-block: 0 var(--ruimte-klein); }
.nalezen__blok { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--paars-tint); border: 1px solid #DDDAFF; }
.nalezen__kop { font-size: var(--t-kop); max-width: 26ch; }
.nalezen p { margin-top: .7rem; color: var(--inkt-zacht); max-width: 52ch; }
.nalezen__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }

.verderlezen { padding-block: 0 var(--ruimte-klein); }
.verderlezen__raster { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .verderlezen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verderlezen__link {
	display: grid; gap: .5rem; padding: 1.3rem 1.5rem;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); text-decoration: none;
}
.verderlezen__link .mono { color: var(--inkt-zacht); }
.verderlezen__titel { font-weight: 700; letter-spacing: -.015em; }
.verderlezen__link:hover .verderlezen__titel { color: var(--paars-vul); }
.verderlezen__link--rechts { text-align: right; }

.blader { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.blader .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.blader .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.6rem; height: 2.6rem; padding-inline: .7rem;
	border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-knop); text-decoration: none; font-size: .95rem; font-weight: 600;
}
.blader .page-numbers:hover { border-color: var(--inkt); }
.blader .page-numbers.current { background: var(--paars); color: #fff; border-color: var(--paars); }

.leeg { padding-block: 2rem; color: var(--inkt-zacht); }

.foutpagina { padding-block: var(--ruimte); }
.foutpagina .mono { color: var(--paars-vul); font-weight: 500; }
.foutpagina__kop { margin-top: 1rem; font-size: var(--t-groot); }
.foutpagina p { margin-top: 1.25rem; color: var(--inkt-zacht); max-width: 52ch; }
.foutpagina__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }


/* 13. VOET EN BELBALK ============================================== */

.voet { background: var(--zwart); color: var(--zwart-zacht); padding-block: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem); font-size: .95rem; }
.voet__binnen { max-width: var(--omhulsel); margin-inline: auto; padding-inline: var(--rand-marge); }

.voet__kolommen { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .voet__kolommen { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.voet__logo { width: 140px; height: auto; }
.voet__regel { margin-top: 1rem; max-width: 34ch; line-height: 1.55; }
.voet__kop { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
.voet__lijst { margin-top: 1rem; display: grid; gap: .55rem; }
.voet__lijst a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; text-decoration: none; }
.voet__lijst a:hover { color: #fff; text-decoration: underline; text-underline-offset: .17em; }
.voet__lijst--stil { font-size: var(--t-klein); }
.voet__slot {
	margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	font-size: .85rem; color: #8A8A96;
}
.voet__klein { display: flex; gap: 1.25rem; }
.voet__klein a { display: inline-block; padding-block: .4rem; margin-block: -.4rem; text-decoration: none; }
.voet__klein a:hover { color: #fff; }

/* Vaste belbalk op mobiel */

.belbalk {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: flex; gap: 1px; background: var(--wit);
	box-shadow: 0 -1px 0 var(--lijn), 0 -12px 30px rgba(23, 23, 26, .12);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.belbalk__knop, .belbalk__app {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: 1rem; text-decoration: none; font-weight: 700; font-size: .95rem;
}
.belbalk__knop { background: var(--paars); color: #fff; }
.belbalk__app { flex: 0 0 34%; background: #128C7E; color: #fff; }
@media (min-width: 62rem) { .belbalk { display: none; } }
@media (max-width: 61.999rem) {
	.voet { padding-bottom: 5.5rem; }
	body:not(.geen-telefoon) .voet { padding-bottom: 9.5rem; }
	.menu-open .belbalk { display: none; }
}
@media (min-width: 62rem) { .voet__slot { padding-right: 12.5rem; } }


/* 13b. DE ASSISTENT RECHTSONDER ===================================== */

.assistent {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
	display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
@media (max-width: 61.999rem) {
	body:not(.geen-telefoon) .assistent { bottom: 5rem; }
	.menu-open .assistent { display: none; }
}

/* De knop. */
.assistent__knop {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .85rem 1.15rem .85rem .95rem;
	border: 0; border-radius: 999px;
	background: var(--paars); color: #fff;
	font: inherit; font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
	box-shadow: 0 14px 40px -10px rgba(81, 72, 229, .7);
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease;
}
.assistent__knop:hover { background: var(--paars-vul); transform: translateY(-2px); }
.assistent__knop svg { flex: none; }
.assistent.is-open .assistent__knop span { display: none; }
.assistent.is-open .assistent__knop { padding: .85rem .95rem; }

/* Het hintwolkje boven de knop: één keer per bezoek, verdwijnt vanzelf. */
.assistent__hint {
	max-width: 15rem; padding: .7rem .9rem; border: 1px solid var(--lijn); border-radius: 14px 14px 4px 14px;
	background: var(--wit); color: var(--inkt); font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.4; text-align: left;
	box-shadow: 0 18px 40px -18px rgba(23, 23, 26, .35); cursor: pointer;
	animation: assistent-open .3s cubic-bezier(.2, .8, .2, 1) both;
}
.assistent__hint:hover { border-color: var(--paars); }

/* Het paneel. */
.assistent__paneel {
	width: min(24rem, calc(100vw - 2.2rem));
	max-height: min(36rem, calc(100vh - 8rem));
	display: flex; flex-direction: column;
	background: var(--wit); color: var(--inkt);
	border: 1px solid var(--lijn); border-radius: var(--radius-tegel);
	box-shadow: 0 30px 80px -20px rgba(23, 23, 26, .35);
	overflow: hidden;
	transform-origin: 100% 100%;
	animation: assistent-open .22s cubic-bezier(.2, .8, .2, 1) both;
}
/* Sluiten gaat via het hidden-attribuut; de algemene [hidden]-regel in
   sectie 3 zorgt dat display: flex hierboven dat niet overrulet. */
@keyframes assistent-open { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Op een telefoon vult het gesprek het hele scherm; knop en belbalk wijken
   en de pagina eronder scrolt niet mee. */
@media (max-width: 61.999rem) {
	.assistent__paneel {
		position: fixed; inset: 0; width: auto; max-height: none;
		border: 0; border-radius: 0; transform-origin: 50% 100%;
		padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.assistent.is-open .assistent__knop, .assistent-open .belbalk { display: none; }
	.assistent-open { overflow: hidden; }
}

.assistent__kop {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: start;
	padding: 1.1rem 1.1rem .9rem 1.25rem;
	border-bottom: 1px solid var(--lijn); background: var(--paars-tint2);
}
.assistent__titel { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.assistent__sub { grid-column: 1; color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.4; }
.assistent__sub a { color: var(--paars-vul); font-weight: 600; }
.assistent__sluit {
	grid-column: 2; grid-row: 1 / span 2;
	width: 40px; height: 40px; border: 1.5px solid var(--lijn-sterk); border-radius: 999px;
	background: var(--wit); color: var(--inkt); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.assistent__sluit:hover { border-color: var(--inkt); }

.assistent__lijst {
	flex: 1 1 auto; overflow-y: auto; min-height: 8rem;
	display: flex; flex-direction: column; gap: .6rem;
	padding: 1rem 1.1rem;
	scroll-behavior: smooth; overscroll-behavior: contain;
}
.assistent__bericht { max-width: 88%; }
.assistent__bericht > p {
	padding: .7rem .9rem; border-radius: 16px;
	font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.assistent__bericht--assistent { align-self: flex-start; }
.assistent__bericht--assistent > p { background: var(--grijs); border-bottom-left-radius: 6px; }
.assistent__bericht--gebruiker { align-self: flex-end; }
.assistent__bericht--gebruiker > p { background: var(--paars); color: #fff; border-bottom-right-radius: 6px; }

/* Drie puntjes zolang het antwoord onderweg is. */
.assistent__typen { display: inline-flex; gap: 5px; align-items: center; min-height: 2.6rem; }
.assistent__typen i { width: 7px; height: 7px; border-radius: 50%; background: var(--inkt-zacht); opacity: .5; animation: assistent-punt 1.1s ease-in-out infinite; }
.assistent__typen i:nth-child(2) { animation-delay: .15s; }
.assistent__typen i:nth-child(3) { animation-delay: .3s; }
@keyframes assistent-punt { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Knoppen onder een antwoord: bellen, appen, terugbellen, een pagina. */
.assistent__acties { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.assistent__actie {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .5rem .85rem; border: 1.5px solid var(--lijn-sterk); border-radius: 999px;
	background: var(--wit); color: var(--inkt); font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.assistent__actie:hover { border-color: var(--paars); color: var(--paars-vul); }
.assistent__actie--primair, .assistent__actie--bel { background: var(--paars); border-color: var(--paars); color: #fff; }
.assistent__actie--primair:hover, .assistent__actie--bel:hover { background: var(--paars-vul); border-color: var(--paars-vul); color: #fff; }
.assistent__actie--app { background: #128C7E; border-color: #128C7E; color: #fff; }
.assistent__actie--app:hover { background: #0f7466; border-color: #0f7466; color: #fff; }
.assistent__actie:disabled { opacity: .6; cursor: default; }

/* Het terugbelformulier, in het gesprek. */
.assistent__bericht--formulier { max-width: 100%; align-self: stretch; }
.assistent__terugbel { position: relative; display: grid; gap: .45rem; padding: .9rem 1rem 1rem; border: 1.5px solid var(--paars-tint); border-radius: 16px; background: var(--paars-tint2); }
.assistent__terugbel-kop { font-weight: 700; letter-spacing: -.01em; }
.assistent__terugbel-uitleg { color: var(--inkt-zacht); font-size: var(--t-klein); margin-bottom: .3rem; }
.assistent__terugbel label { font-size: var(--t-klein); font-weight: 600; }
.assistent__terugbel input {
	width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--lijn-sterk); border-radius: 10px;
	background: var(--wit); color: var(--inkt); font: inherit; font-size: .95rem;
}
.assistent__terugbel input:focus { border-color: var(--paars); outline: none; }
.assistent__honing { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.assistent__terugbel-knoppen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.assistent__terugbel-fout { color: #B4232C; font-size: var(--t-klein); font-weight: 600; }

/* Vervolgvragen boven het invoerveld. */
.assistent__suggesties { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.1rem .6rem; }
.assistent__suggesties button {
	padding: .45rem .8rem; border: 1.5px solid var(--lijn-sterk); border-radius: 999px;
	background: var(--wit); color: var(--inkt); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.assistent__suggesties button:hover { border-color: var(--paars); color: var(--paars-vul); }

.assistent__form {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end;
	padding: .75rem .9rem .9rem;
	border-top: 1px solid var(--lijn);
}
.assistent__form textarea {
	width: 100%; min-height: 2.75rem; max-height: 140px; resize: none;
	padding: .7rem .9rem; border: 1.5px solid var(--lijn-sterk); border-radius: 14px;
	background: var(--wit); color: var(--inkt); font: inherit; font-size: .95rem; line-height: 1.4;
}
.assistent__form textarea:focus { border-color: var(--paars); outline: none; }
.assistent__verstuur {
	width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px;
	background: var(--paars); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.assistent__verstuur:hover { background: var(--paars-vul); }
.assistent__verstuur:disabled { opacity: .5; cursor: default; }
.assistent__noot { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; padding: 0 1.25rem .9rem; color: var(--inkt-zacht); font-size: .72rem; line-height: 1.4; }
.assistent__noot a { color: var(--paars-vul); }
.assistent__nieuw { margin-left: auto; padding: .25rem 0; border: 0; background: none; color: var(--inkt-zacht); font: inherit; font-size: .72rem; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.assistent__nieuw:hover { color: var(--inkt); }

@media (prefers-reduced-motion: reduce) {
	.assistent__typen i { animation: none; opacity: .7; }
	.assistent__paneel, .assistent__hint { animation: none; }
	.assistent__knop:hover { transform: none; }
}
@media print { .assistent { display: none; } }

/* 13c. DE COOKIEMELDING ============================================= */

/* Een kaart linksonder in de kleuren van de site; op een telefoon een
   strook boven de belbalk. Twee even grote knoppen: akkoord en alleen
   noodzakelijk. Zolang hij open staat wijkt de assistentknop op mobiel. */
.koekjes {
	position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 75;
	width: min(24rem, calc(100vw - 2.2rem));
	padding: 1.1rem 1.2rem 1.2rem;
	background: var(--wit); color: var(--inkt);
	border: 1px solid var(--lijn); border-radius: var(--radius-tegel);
	box-shadow: 0 30px 80px -20px rgba(23, 23, 26, .35);
	animation: assistent-open .3s cubic-bezier(.2, .8, .2, 1) both;
}
.koekjes__kop { font-weight: 700; letter-spacing: -.01em; }
.koekjes__tekst { margin-top: .4rem; color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
.koekjes__tekst a { color: var(--paars-vul); }
.koekjes__knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.koekjes__knoppen .knop { flex: 1 1 auto; }
@media (max-width: 61.999rem) {
	.koekjes { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
	body:not(.geen-telefoon) .koekjes { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
	.koekjes-open .assistent { display: none; }
}
@media (prefers-reduced-motion: reduce) { .koekjes { animation: none; } }
@media print { .koekjes { display: none; } }

/* 14. TOEGANKELIJKHEID EN BEWEGING ================================== */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--paars-vul); outline-offset: 3px;
}
:where(a:not([class])):focus-visible { border-radius: 2px; }
.tegel :where(a, button):focus-visible,
.projectkop :where(a, button):focus-visible { outline-color: var(--accent); }
.kaart--paars :where(a, button):focus-visible, .usp__vlak:first-child :where(a, button):focus-visible { outline-color: #fff; }
.voet :where(a, button):focus-visible { outline-color: var(--paars-tekst); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
	.kop.is-weg { transform: none; }
	.tegel:hover, .knop:hover, .artikel__link:hover { transform: none; }
}

@media print {
	.topbalk, .kop, .belbalk, .mobielmenu, .usp-wrap { display: none; }
	body { color: #000; background: #fff; }
	.tegel, .reviews, .voet, .kaart, .prijs, .review { background: #fff !important; color: #000 !important; }
}