/* ==========================================================================
   Droomwand — gedeelde componenten (spec §9)
   Knop · kaart · chip · swatch · veld · header/mega-menu · voettekst ·
   badge · stappen · kruimelpad. Alles op tokens; geen losse waarden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Knop
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--raak);
	padding-inline: var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-fg);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--duur-snel) var(--ease),
		box-shadow var(--duur-snel) var(--ease),
		transform var(--duur-snel) var(--ease);
}

.btn:hover {
	background: var(--accent-hover);
	color: var(--accent-fg);
}

.btn:active {
	transform: translateY(1px);
}

.btn-lg {
	min-height: 3rem;
	padding-inline: var(--sp-6);
	font-size: var(--fs-base);
}

.btn-sm {
	min-height: 2.25rem;
	padding-inline: var(--sp-4);
	font-size: var(--fs-xs);
}

.btn-secondary {
	background: var(--surface);
	color: var(--fg);
	box-shadow: var(--shadow-1);
}

.btn-secondary:hover {
	background: var(--surface);
	color: var(--fg);
	box-shadow: var(--shadow-2);
}

.btn-ghost {
	background: transparent;
	color: var(--fg);
}

.btn-ghost svg {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.btn-ghost:hover {
	background: var(--bg-elevated);
	color: var(--fg);
}

.btn-full {
	width: 100%;
}

.btn .pijl {
	width: 1rem;
	height: 1rem;
	transition: transform var(--duur) var(--ease);
}

.btn:hover .pijl {
	transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Lijnicoon
   Basismaat en -gedrag voor de inline SVG's uit droomwand_icoon(). Ze erven
   altijd de tekstkleur, zodat dezelfde vorm werkt op crème én op de
   donkere band.
   -------------------------------------------------------------------------- */
.icoon {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Kaart
   -------------------------------------------------------------------------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-1);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--duur) var(--ease);
}

.card:hover {
	box-shadow: var(--shadow-2);
}

.card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.card-pad {
	padding: var(--sp-5);
}

.card-titel,
.card h3 {
	font-size: var(--fs-lg);
}

.card p {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.card-pic,
.thumb {
	overflow: hidden;
	background: var(--bg-elevated);
}

.card-pic img,
.card > img,
.thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--duur-traag) var(--ease);
}

.card:hover .card-pic img,
.card:hover > img {
	transform: scale(1.03);
}

.card-vlak {
	background: var(--bg-elevated);
	box-shadow: none;
	border: 1px solid var(--border);
}

/* Kamerwisselaar onder een mock-up. Staat hier en niet in library.css:
   template-parts/kamer-wissel.php wordt gedeeld met het atelier, dat die
   stylesheet niet laadt. */
.kamer-wissel {
	margin-top: 0;
}

/* .chips zet zelf al display:flex — zonder deze regel wint die van de
   kale UA-regel voor [hidden] en blijft de wisselaar zichtbaar in de
   "Behang"-weergave, waar geen kamer te kiezen valt. */
.kamer-wissel[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Chip
   -------------------------------------------------------------------------- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--raak);
	padding-inline: var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--r-rond);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	color: var(--fg);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition:
		background-color var(--duur-snel) var(--ease),
		box-shadow var(--duur-snel) var(--ease);
}

.chip:hover {
	color: var(--fg);
	box-shadow: var(--shadow-2);
}

.chip.on,
.chip[aria-current="page"],
.chip[aria-pressed="true"] {
	background: var(--accent);
	color: var(--accent-fg);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Swatch (kleurkeuze)
   -------------------------------------------------------------------------- */
.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0;
	margin: 0;
	list-style: none;
}

.swatch {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--raak);
	padding-inline: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-rond);
	background: var(--surface);
	color: var(--fg);
	font-size: var(--fs-sm);
}

.swatch i,
.swatch .dot {
	display: block;
	width: 1rem;
	height: 1rem;
	border-radius: var(--r-rond);
}

.swatch.on,
.swatch[aria-pressed="true"] {
	outline: var(--ring-breedte) solid var(--accent);
	outline-offset: var(--ring-afstand);
}

.dot-pine { background: var(--pine); }
.dot-navy { background: var(--navy); }
.dot-rust { background: var(--rust); }
.dot-blush { background: var(--blush); }
.dot-sand { background: var(--sand); }
.dot-sky { background: var(--sky); }
.dot-ink { background: var(--ink); }
.dot-cream { background: var(--cream); border: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   Veld en formulier
   -------------------------------------------------------------------------- */
.field {
	display: grid;
	gap: var(--sp-2);
}

.field label,
.veld-label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.field .hint,
.veld-hint {
	font-size: var(--fs-xs);
	color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: var(--raak);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--fg);
	box-shadow: var(--shadow-1);
	transition: border-color var(--duur-snel) var(--ease);
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--border-sterk);
}

textarea {
	min-height: 7rem;
	padding: var(--sp-3);
	line-height: var(--lh-basis);
	resize: vertical;
}

::placeholder {
	color: var(--subtle);
	opacity: 1;
}

.field-fout input,
.field-fout textarea,
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--fout);
	background: var(--fout-zacht);
}

.foutmelding {
	font-size: var(--fs-sm);
	color: var(--fout);
}

.file-drop {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--raak);
	padding: var(--sp-2) var(--sp-3);
	border: 1px dashed var(--border-sterk);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--muted);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.file-drop:hover {
	border-color: var(--accent);
	color: var(--fg);
}

.schakelaar {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--raak);
	border: 0;
	background: transparent;
	font-size: var(--fs-sm);
	padding: 0;
}

.vinkje {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--border-sterk);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--accent-fg);
	font-size: var(--fs-xs);
}

.vinkje.on,
[aria-pressed="true"] > .vinkje {
	background: var(--accent);
	border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Sitekop
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	height: var(--header-hoogte);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--fg);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	letter-spacing: var(--ls-strak);
	text-decoration: none;
}

.logo:hover {
	color: var(--fg);
}

.logo-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-fg);
}

.logo-mark svg {
	width: 1rem;
	height: 1rem;
}

.logo-aangepast img,
.custom-logo {
	max-height: 2.25rem;
	width: auto;
}

.nav-desk {
	display: none;
}

.nav-lijst {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-item {
	position: static;
}

/* Alleen de items in de balk zelf. Een kale ".nav-desk a" lekt het
   mega-menu in — dat hangt in .nav-desk — en gaf elke link daarin een vaste
   hoogte van 44px, waardoor een beschrijving van twee regels over het
   volgende item heen liep. Elk item in de balk heeft .nav-link (de
   mega-trigger is zelfs een button), dus die selector is genoeg. */
.nav-desk .nav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	height: var(--raak);
	padding-inline: var(--sp-3);
	border: 0;
	border-radius: var(--r-md);
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color var(--duur-snel) var(--ease);
}

.nav-desk .nav-link:hover,
.nav-desk .current-menu-item > .nav-link {
	color: var(--fg);
}

.nav-mega-knop .chevron {
	width: 1rem;
	height: 1rem;
	transition: transform var(--duur) var(--ease);
}

.nav-mega-knop[aria-expanded="true"] {
	color: var(--fg);
}

.nav-mega-knop[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--raak);
	height: var(--raak);
	border: 0;
	border-radius: var(--r-md);
	background: transparent;
	color: var(--fg);
}

.icon-btn svg {
	width: 1.5rem;
	height: 1.5rem;
}

.icon-btn .icoon-sluit,
.icon-btn[aria-expanded="true"] .icoon-menu {
	display: none;
}

.icon-btn[aria-expanded="true"] .icoon-sluit {
	display: block;
}

.desk-only {
	display: none;
}

/* --------------------------------------------------------------------------
   Mega-menu
   -------------------------------------------------------------------------- */
.mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--z-mega);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	box-shadow: var(--shadow-3);
}

.mega[hidden] {
	display: none;
}

.mega-inner {
	display: grid;
	gap: var(--sp-7);
	padding-block: var(--sp-7) var(--sp-8);
}

.mega-kop {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-kicker);
	text-transform: uppercase;
	color: var(--muted);
}

.mega-kop-tweede {
	margin-top: var(--sp-7);
}

.mega-lijst {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
}

.mega-lijst a {
	display: block;
	padding-block: var(--sp-2);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--r-sm);
}

.mega-lijst a:hover {
	color: var(--accent);
}

.mega-lijst-rijk a {
	padding-block: var(--sp-3);
}

/*
 * Zonder ".mega, .mobile-panel" hier expliciet te noemen matchen deze
 * regels alleen de desktop-dropdown (".mega"): het mobiele paneel gebruikt
 * een ander wrapper-element (".mobile-panel") voor dezelfde mega-menu
 * template-part, en viel dus terug op ongestylde, inline tekst — titel en
 * beschrijving liepen zichtbaar in elkaar over.
 */
.mega .nav-title,
.mobile-panel .nav-title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--fg);
}

.mega .nav-body,
.mobile-panel .nav-body {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	line-height: var(--lh-basis);
	color: var(--muted);
}

.mega-lijst-rijk a:hover .nav-title {
	color: var(--accent);
}

/* Doorloop naar het volledige overzicht. Staat bewust los van .mega-lijst:
   het is geen zevende categorie maar een uitweg uit de lijst, en dat mag je
   zien aan de scheidingslijn erboven.

   ".mega" en ".mobile-panel" staan er allebei bij, zoals bij .nav-title
   hierboven: dezelfde template-part hangt onder twee wrappers, en de knop
   hoort er in allebei hetzelfde uit te zien. */
.mega .mega-alles,
.mobile-panel .mega-alles {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--accent);
	text-decoration: none;
}

.mega .mega-alles .pijl svg,
.mobile-panel .mega-alles .pijl svg {
	display: block;
	width: 1rem;
	height: 1rem;
	transition: transform var(--duur) var(--ease);
}

.mega .mega-alles:hover .pijl svg,
.mega .mega-alles:focus-visible .pijl svg,
.mobile-panel .mega-alles:hover .pijl svg,
.mobile-panel .mega-alles:focus-visible .pijl svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Mobiel paneel
   -------------------------------------------------------------------------- */
.mobile-panel {
	max-height: calc(100dvh - var(--header-hoogte));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--border);
	background: var(--bg);
	padding-bottom: var(--sp-8);
}

.mobile-panel[hidden] {
	display: none;
}

.mobile-panel .mega-inner {
	padding-block: var(--sp-6) var(--sp-6);
}

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--sp-12);
	border-top: 1px solid var(--border);
	background: var(--bg-elevated);
}

.footer-grid {
	display: grid;
	gap: var(--sp-8);
	padding-block: var(--sp-10) var(--sp-7);
}

.footer-zin {
	max-width: 22rem;
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	line-height: var(--lh-ruim);
}

.footer-lijst {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
}

.footer-lijst li + li {
	margin-top: var(--sp-2);
}

.footer-lijst a {
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--muted);
}

.footer-lijst a:hover {
	color: var(--accent);
}

/* --- Merk-kolom: USP's, reviewbadge en bedrijfsnummers --- */
.footer-usps {
	display: grid;
	gap: var(--sp-2);
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}

.footer-usps li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.footer-usps svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--succes);
}

.footer-review {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-rond);
	font-size: var(--fs-sm);
	color: var(--fg);
	text-decoration: none;
	transition: border-color var(--duur-snel) var(--ease);
}

a.footer-review:hover {
	border-color: var(--border-sterk);
}

.footer-review-ster {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: #eab308;
}

.footer-nummers {
	margin-top: var(--sp-5);
	font-size: var(--fs-xs);
}

.footer-onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-5) var(--sp-8);
	border-top: 1px solid var(--border);
}

.footer-note {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--subtle);
}

.footer-note .scheiding {
	margin-inline: var(--sp-1);
	color: var(--border-sterk);
}

.footer-juridisch ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-juridisch a {
	font-size: var(--fs-xs);
	color: var(--subtle);
	text-decoration: none;
}

.footer-juridisch a:hover {
	color: var(--accent);
}

.footer-betalen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-betalen img {
	display: block;
	width: 2rem;
	height: 1.5rem;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--border);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	border-radius: var(--r-rond);
	padding: 0.15rem var(--sp-3);
	background: var(--accent);
	color: var(--accent-fg);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.badge-mute {
	background: var(--bg-elevated);
	color: var(--muted);
	box-shadow: inset 0 0 0 1px var(--border);
}

.badge-sand { background: var(--sand); color: var(--ink); }
.badge-rust { background: var(--rust); color: var(--cream); }

/* --------------------------------------------------------------------------
   Stappen (wizard) en kruimelpad
   -------------------------------------------------------------------------- */
.steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-7);
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

.steps button,
.steps a,
.steps .stap {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 2.25rem;
	border: 0;
	border-radius: var(--r-rond);
	padding-inline: var(--sp-3);
	background: transparent;
	color: var(--muted);
	text-decoration: none;
}

.steps .on,
.steps [aria-current="step"] {
	background: var(--accent);
	color: var(--accent-fg);
}

.steps-nr {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid currentColor;
	border-radius: var(--r-rond);
	font-size: var(--fs-xs);
	opacity: 0.75;
}

.steps .on .steps-nr,
.steps [aria-current="step"] .steps-nr {
	opacity: 1;
}

.steps .sep {
	color: var(--subtle);
}

.kruimelpad {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-xs);
	color: var(--muted);
}

.kruimelpad ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kruimelpad li + li::before {
	content: "/";
	margin-right: var(--sp-2);
	color: var(--subtle);
}

.kruimelpad a {
	text-decoration: none;
	color: var(--muted);
}

.kruimelpad a:hover {
	color: var(--accent);
}

.kruimelpad [aria-current="page"] {
	color: var(--fg);
}

/* --------------------------------------------------------------------------
   Mock-up (template-parts/mockup.php) — gedeeld, niet alleen het atelier:
   ook de bibliotheek-detailpagina (single-dw_ontwerp.php) gebruikt 'm.
   -------------------------------------------------------------------------- */
.mockup {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-2);
	background: var(--surface);
}

/* --- "Behang"-weergave: alleen het gegenereerde ontwerp, geen kamer --- */
.mockup-enkel {
	position: relative;
}

.mockup-enkel-beeld {
	display: block;
	width: 100%;
	height: auto;
}

.mockup-enkel .plaque {
	bottom: var(--sp-4);
}

.mockup-frame {
	position: relative;
	display: grid;
}

.mockup-frame .room {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mockup-wall {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Het behang vult de wandlaag helemaal; wáár die laag ligt bepaalt de kamer
   zelf, via de inline `inset` die mockup.php uit het wandvlak schrijft. */
.mockup-wall img,
.mockup-pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mockup-pattern {
	background-repeat: repeat;
	background-size: 28% auto;
}

.mockup-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 24, 20, 0) 60%, rgba(27, 24, 20, 0.12) 100%);
	pointer-events: none;
}

/* --- Doorkijkkamer -------------------------------------------------------
   Sommige kamerfoto's zijn PNG's met een transparant gat waar de wand zit.
   Die horen vóór het behang te liggen: het behang vult dan het hele vlak en
   valt door het gat naar voren, terwijl meubels en vloer het netjes
   afdekken. Alleen de stapelvolgorde en de hoogte veranderen — de rest van
   de mock-up blijft gelijk.
   -------------------------------------------------------------------------- */
.mockup-frame.is-doorkijk .room {
	position: relative;
	z-index: 2;
}

.mockup-frame.is-doorkijk .mockup-wall {
	z-index: 1;
}

/* Het plaatje hangt in de rechteronderhoek van het kader, met wat lucht van
   de rand. z-index 3 houdt het boven zowel het behang als een doorkijkfoto. */
.plaque {
	position: absolute;
	z-index: 3;
	right: var(--sp-4);
	bottom: var(--sp-4);
	display: grid;
	gap: 2px;
	padding: var(--sp-2) var(--sp-4);
	background: var(--accent);
	color: var(--accent-fg);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-2);
	text-align: right;
}

.plaque small {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-kicker);
	text-transform: uppercase;
	opacity: 0.85;
}

.plaque span {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Paginering
   -------------------------------------------------------------------------- */
.paginering {
	margin-top: var(--sp-9);
}

.paginering .nav-links,
.paginering ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * :not(ul) is bewust: paginate_links() met 'type' => 'list' geeft
 * <ul class="page-numbers"><li>…</li></ul> terug — dezelfde class
 * "page-numbers" zit dus zowel op de buitenste lijst als op elke losse
 * knop erin. Zonder deze uitsluiting krijgt de <ul> ook de pil-opmaak
 * (achtergrond, schaduw, ronding) en ontstaat er een pil-in-een-pil.
 */
.paginering .page-numbers:not(ul) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--raak);
	min-height: var(--raak);
	padding-inline: var(--sp-3);
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	font-size: var(--fs-sm);
	text-decoration: none;
}

.paginering .page-numbers.current {
	background: var(--accent);
	color: var(--accent-fg);
	box-shadow: none;
}

.paginering .page-numbers.dots {
	background: none;
	box-shadow: none;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Kleine hulpcomponenten
   -------------------------------------------------------------------------- */
.caption {
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--subtle);
	text-align: center;
}

.page-beeld {
	margin-bottom: var(--sp-7);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.page-404 {
	padding-block: var(--sp-12) var(--sp-13);
}

.veld-404 {
	margin-top: var(--sp-9);
	max-width: 24rem;
}

.section-grid {
	margin-top: var(--sp-7);
}

/* --------------------------------------------------------------------------
   Grotere schermen
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
	.footer-grid {
		grid-template-columns: 1.2fr 1fr 1fr 1fr;
	}
}

@media (min-width: 64rem) {
	.nav-desk {
		display: flex;
	}

	.desk-only {
		display: inline-flex;
	}

	.icon-btn.menu {
		display: none;
	}

	.mega-inner {
		grid-template-columns: 1.15fr 1fr 1fr;
		gap: var(--sp-9);
	}
}

/* --- Wand in bewerking ---------------------------------------------------
   Terwijl de engine tekent staat de kamer er al; alleen het wandvlak leeft.
   Een trage streek over het vlak plus een rustige ademhaling, in de
   merkkleuren. Geen nepbehang: het suggereert werk, geen resultaat.
   ---------------------------------------------------------------------- */

.mockup-bezig {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--accent-zacht, #e6ece9);
	animation: dw-wand-adem 3.2s ease-in-out infinite;
	pointer-events: none;
}

/* De streek die over de wand trekt. */
.mockup-bezig::after {
	content: "";
	position: absolute;
	inset: -30% -60%;
	background: linear-gradient(
		100deg,
		rgba(243, 238, 230, 0) 35%,
		rgba(243, 238, 230, 0.75) 50%,
		rgba(243, 238, 230, 0) 65%
	);
	animation: dw-wand-streek 2.6s linear infinite;
}

@keyframes dw-wand-adem {
	0%, 100% { background-color: var(--accent-zacht, #e6ece9); }
	50%      { background-color: #dbe4df; }
}

@keyframes dw-wand-streek {
	from { transform: translateX(-55%); }
	to   { transform: translateX(55%); }
}

/* Naarmate het vordert wordt het vlak rustiger: minder streek, meer kleur. */
.mockup-bezig[data-fase="laat"]::after { opacity: 0.45; }
.mockup-bezig[data-fase="laat"] { background-color: #d2ded8; }

@media (prefers-reduced-motion: reduce) {
	.mockup-bezig,
	.mockup-bezig::after {
		animation: none;
	}
	.mockup-bezig::after {
		opacity: 0.35;
	}
}

/* --- Processtappen -------------------------------------------------------
   De stap wisselt met een korte fade, zodat de tekst niet staat te knipperen.
   ---------------------------------------------------------------------- */

.voortgang-stap {
	display: inline-block;
	transition: opacity 0.28s ease;
}

.voortgang-stap.wisselt {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.voortgang-stap { transition: none; }
}

/* --- Enginekeuze --------------------------------------------------------- */

.engine-keuze {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 0.5rem);
	flex-wrap: wrap;
	margin-top: var(--sp-3, 0.75rem);
}

.engine-keuze label {
	font-size: var(--fs-sm, 0.875rem);
	color: var(--fg-zacht, #6b6459);
}

.engine-keuze select {
	font: inherit;
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 10ch;
	padding: 0.4em 0.7em;
	border: 1px solid var(--rand, #d9d2c6);
	border-radius: var(--radius-s, 8px);
	background-color: #fff;
	color: inherit;
}