/* ==========================================================================
   DHB-thema

   1. Basis. Weegt niets (:where of een enkel element), zodat de opmaak van
      Elementor, de kit en de widgets altijd wint. Geeft de site wat Hub gaf
      en waar de widgets op leunen: border-box overal, geen horizontaal
      scrollen, afbeeldingen die niet uit hun vak lopen. Wel in de huisstijl:
      tekst Satoshi, koppen DHB Elms 800.
   2. Header en footer om de pagina heen, zoals in Hub: de zwevende pill ligt
      over de eerste sectie en blijft op brede schermen staan.
   3. De pagina's die het thema zelf tekent: kopband, tekst, berichten,
      zoeken, 404.
   ========================================================================== */

:root {
	--dhb-oranje: #FF4500;
	--dhb-oranje-licht: #FF6A2A;
	--dhb-oranje-diep: #E03C00;
	--dhb-link: #C83A00;
	--dhb-inkt: #161616;
	--dhb-nacht: #0F0E0E;
	--dhb-zand: #F4F1EE;
	--dhb-steen: #6B655F;
	--dhb-lijn: rgba(22, 22, 22, .12);
	--dhb-lijn-donker: rgba(255, 255, 255, .14);
	--dhb-kopletter: 'DHB Elms', 'Satoshi', system-ui, sans-serif;
	--dhb-letter: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dhb-verloop: linear-gradient(135deg, var(--dhb-oranje-licht) 0%, var(--dhb-oranje) 55%, var(--dhb-oranje-diep) 100%);
	--dhb-zijkant: clamp(16px, 4vw, 48px);
	--dhb-breed: 1240px;
	--dhb-smal: 760px;
}

/* --------------------------------------------------------------------------
   1. Basis
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: #fff;
	color: var(--dhb-inkt);
	font-family: var(--dhb-letter);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5em;
	font-family: var(--dhb-kopletter);
	font-weight: 800;
	line-height: 1.15;
}

:where(p, ul, ol, dl, blockquote, figure, pre, address) {
	margin: 0 0 1em;
}

:where(a) {
	color: var(--dhb-link);
	text-decoration: none;
}

:where(img) {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

:where(video, iframe, embed, object) {
	max-width: 100%;
}

:where(button, input, select, textarea) {
	font-family: inherit;
}

:where(table) {
	border-collapse: collapse;
}

:where(hr) {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--dhb-lijn);
}

::selection {
	background: rgba(255, 69, 0, .22);
}

/* Alleen voor schermlezers */
.dhb-verborgen,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Meteen naar de inhoud: alleen zichtbaar met het toetsenbord */
.dhb-overslaan {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--dhb-inkt);
	color: #fff;
	font-weight: 700;
	transform: translateY(-200%);
	transition: transform .2s ease;
}

.dhb-overslaan:focus {
	transform: none;
	color: #fff;
	outline: 2px solid var(--dhb-oranje);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   2. Header en footer om de pagina
   -------------------------------------------------------------------------- */

.dhb-pagina {
	position: relative;
	background: #fff;
}

/* De inhoud ligt boven de footer en onder de header, zoals in Hub.
   flow-root: een marge op de eerste of laatste sectie (in Elementor bijvoorbeeld
   -11px boven) blijft binnen de inhoud, zoals in Hub (daar deed de clearfix van
   .container dat). Anders schuift hij door naar de body en gaat de hele pagina,
   header incluis, mee omhoog. */
.dhb-inhoud {
	position: relative;
	z-index: 2;
	display: flow-root;
	background: #fff;
}

.dhb-kop {
	position: relative;
	z-index: 99;
}

/* De zwevende pill. Op smalle schermen staat de header (twintig pixels:
   de container eromheen) boven de pagina, net als in Hub; zo blijft de
   ruimte tussen pill en paginakop gelijk. Hub liet die strook wit; hier
   krijgt hij de kleur van de eerste sectie (dhb-thema.js), donker als dat
   een foto of video is. Vanaf 993 pixels ligt de header over de pagina. */
.dhb-kop--zwevend {
	background: var(--dhb-kop-strook, var(--dhb-inkt));
}

@media (min-width: 993px) {
	.dhb-kop--zwevend {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		background: none;
	}
}

/* Vast bij scrollen (dhb-thema.js zet .is-vast), vanaf 1200 pixels. */
@media (min-width: 1200px) {
	.dhb-kop--zwevend.is-vast {
		position: fixed;
		animation: dhb-kop-in .45s cubic-bezier(.22, .9, .3, 1);
	}

	.admin-bar .dhb-kop--zwevend.is-vast {
		top: 32px;
	}
}

@keyframes dhb-kop-in {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dhb-kop--zwevend.is-vast {
		animation: none;
	}
}

/* Eenvoudige header (alleen zonder DHB-header) */
.dhb-pil {
	position: absolute;
	top: 20px;
	right: var(--dhb-zijkant);
	left: var(--dhb-zijkant);
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 12px 12px 24px;
	border: 1px solid var(--dhb-lijn-donker);
	border-radius: 999px;
	background: rgba(22, 22, 22, .72);
	color: #fff;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

.dhb-pil-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	color: #fff;
}

.dhb-pil-logo .dhb-logo-beeld {
	width: auto;
	height: 44px;
}

.dhb-logo-tekst {
	font-family: var(--dhb-kopletter);
	font-size: 18px;
	font-weight: 800;
}

.dhb-pil-menu {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
}

.dhb-pil-menu ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.dhb-pil-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 999px;
	color: #fff;
	font-weight: 500;
}

.dhb-pil-menu a:hover,
.dhb-pil-menu .current-menu-item > a {
	background: rgba(255, 255, 255, .1);
}

.dhb-pil-knop {
	flex: none;
	margin-left: auto;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--dhb-verloop);
	color: #fff;
	font-weight: 700;
}

.dhb-pil-knop:hover {
	color: #fff;
	filter: brightness(1.06);
}

.dhb-kop--zwevend:has(.dhb-pil) {
	height: 20px;
}

/* Eenvoudige footer (alleen zonder DHB-footer) */
.dhb-voet--eenvoudig {
	padding: 56px 0 40px;
	background: var(--dhb-inkt);
	color: rgba(255, 255, 255, .72);
}

.dhb-voet-binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.dhb-voet-logo .dhb-logo-beeld {
	width: auto;
	height: 44px;
}

.dhb-voet-logo {
	color: #fff;
}

.dhb-voet-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dhb-voet-menu a {
	color: #fff;
}

.dhb-voet-menu a:hover {
	color: var(--dhb-oranje-licht);
}

.dhb-voet-klein {
	flex-basis: 100%;
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--dhb-lijn-donker);
	font-size: 14px;
}

/* Een header of footer los bekijken (ook in de editor van Elementor) */
.dhb-voorbeeld {
	background: #2A2827;
}

.dhb-voorbeeld-vlak {
	position: relative;
	min-height: 100vh;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
		#2A2827;
}

/* --------------------------------------------------------------------------
   3. Pagina's van het thema
   -------------------------------------------------------------------------- */

.dhb-breed,
.dhb-smal {
	width: min(100% - var(--dhb-zijkant) * 2, var(--dhb-breed));
	margin-inline: auto;
}

.dhb-smal {
	width: min(100% - var(--dhb-zijkant) * 2, var(--dhb-smal));
}

.dhb-sectie {
	padding-block: clamp(48px, 7vw, 96px);
}

.dhb-sectie--zand {
	background: var(--dhb-zand);
}

.dhb-sectie-titel {
	margin: 0 0 28px;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -.02em;
}

/* Labeltje boven een kop: pilletje met oranje stip, zoals in de widgets */
.dhb-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 7px 16px 7px 13px;
	border: 1px solid var(--dhb-lijn);
	border-radius: 999px;
	color: var(--dhb-inkt);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.dhb-label::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dhb-oranje);
}

/* Kopband: donker, de zwevende header ligt erop */
.dhb-band {
	position: relative;
	overflow: hidden;
	padding: clamp(130px, 14vw, 190px) 0 clamp(56px, 7vw, 96px);
	background: var(--dhb-inkt);
	color: #fff;
}

.dhb-band::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: var(--dhb-lijn-donker);
}

.dhb-band--groot {
	display: flex;
	align-items: center;
	min-height: min(88vh, 860px);
}

.dhb-band-binnen {
	position: relative;
	width: min(100% - var(--dhb-zijkant) * 2, var(--dhb-breed));
	margin-inline: auto;
}

.dhb-band .dhb-label {
	border-color: var(--dhb-lijn-donker);
	background: rgba(255, 255, 255, .07);
	color: #fff;
}

.dhb-band-titel {
	max-width: 18ch;
	margin: 0;
	color: #fff;
	font-size: clamp(36px, 5.4vw, 72px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.025em;
	overflow-wrap: break-word;
}

.dhb-band-titel em {
	color: var(--dhb-oranje);
	font-style: normal;
}

.dhb-band-meta {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, .62);
	font-size: 15px;
}

.dhb-band-tekst {
	max-width: 58ch;
	margin-top: 22px;
	color: rgba(255, 255, 255, .72);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.65;
}

.dhb-band-tekst p:last-child {
	margin-bottom: 0;
}

.dhb-band-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.dhb-band .dhb-zoek {
	margin-top: 32px;
}

/* Knoppen */
.dhb-knop {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 24px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}

.dhb-knop-pijl {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	transition: transform .2s ease;
}

.dhb-knop:hover .dhb-knop-pijl {
	transform: rotate(45deg);
}

.dhb-knop--vol {
	background: var(--dhb-verloop);
	color: #fff;
	box-shadow: 0 10px 30px rgba(255, 69, 0, .28);
}

.dhb-knop--vol .dhb-knop-pijl {
	background: #fff;
	color: var(--dhb-inkt);
}

.dhb-knop--vol:hover {
	color: #fff;
	filter: brightness(1.06);
}

.dhb-knop--rand {
	border: 1px solid var(--dhb-lijn-donker);
	color: #fff;
}

.dhb-knop--rand .dhb-knop-pijl {
	background: rgba(255, 255, 255, .1);
}

.dhb-knop--rand:hover {
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.dhb-knop:focus-visible,
.dhb-zoek-knop:focus-visible,
.dhb-tegel:focus-visible,
.dhb-kaart-link:focus-visible,
.dhb-resultaat a:focus-visible {
	outline: 2px solid var(--dhb-oranje);
	outline-offset: 3px;
}

/* Zoekveld */
.dhb-zoek {
	display: flex;
	gap: 8px;
	max-width: 560px;
	padding: 6px;
	border: 1px solid var(--dhb-lijn);
	border-radius: 999px;
	background: #fff;
}

.dhb-band .dhb-zoek {
	border-color: var(--dhb-lijn-donker);
	background: rgba(255, 255, 255, .06);
}

.dhb-zoek-veld {
	flex: 1;
	min-width: 0;
	padding: 10px 8px 10px 18px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 16px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.dhb-zoek-veld::placeholder {
	color: var(--dhb-steen);
	opacity: 1;
}

.dhb-band .dhb-zoek-veld {
	color: #fff;
}

.dhb-band .dhb-zoek-veld::placeholder {
	color: rgba(255, 255, 255, .55);
}

.dhb-zoek:focus-within {
	border-color: var(--dhb-oranje);
}

.dhb-zoek-knop {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--dhb-verloop);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.dhb-zoek-knop:hover {
	filter: brightness(1.06);
}

@media (max-width: 480px) {
	.dhb-zoek-knop span {
		display: none;
	}

	.dhb-zoek-knop {
		padding: 10px 14px;
	}
}

/* Lopende tekst: berichten en pagina's zonder Elementor */
.dhb-tekst {
	color: #2B2826;
	font-size: 17px;
	line-height: 1.75;
}

.dhb-tekst > :first-child {
	margin-top: 0;
}

.dhb-tekst :is(h2, h3, h4) {
	margin: 1.8em 0 .55em;
	color: var(--dhb-inkt);
	letter-spacing: -.02em;
}

.dhb-tekst h2 {
	font-size: clamp(26px, 2.6vw, 34px);
}

.dhb-tekst h3 {
	font-size: clamp(21px, 2vw, 25px);
}

.dhb-tekst h4 {
	font-size: 19px;
}

.dhb-tekst :is(p, ul, ol, blockquote, figure, table, pre) {
	margin: 0 0 1.25em;
}

.dhb-tekst :is(ul, ol) {
	padding-left: 1.35em;
}

.dhb-tekst li + li {
	margin-top: .35em;
}

.dhb-tekst ul li::marker {
	color: var(--dhb-oranje);
}

.dhb-tekst a {
	color: var(--dhb-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.dhb-tekst a:hover {
	color: var(--dhb-oranje);
}

.dhb-tekst strong {
	color: var(--dhb-inkt);
	font-weight: 700;
}

.dhb-tekst blockquote {
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--dhb-oranje);
	color: var(--dhb-inkt);
	font-size: 1.15em;
	font-weight: 500;
}

.dhb-tekst blockquote p:last-child {
	margin-bottom: 0;
}

.dhb-tekst :is(img, video) {
	border-radius: 16px;
}

.dhb-tekst figcaption,
.dhb-tekst .wp-caption-text {
	margin-top: 10px;
	color: var(--dhb-steen);
	font-size: 14px;
}

.dhb-tekst table {
	width: 100%;
	font-size: 15px;
}

.dhb-tekst :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--dhb-lijn);
	text-align: left;
}

.dhb-tekst th {
	color: var(--dhb-inkt);
	font-weight: 700;
}

.dhb-tekst .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--dhb-lijn);
}

.dhb-tekst .wp-block-table thead {
	border-bottom: 2px solid var(--dhb-inkt);
}

.dhb-tekst :is(code, pre) {
	border-radius: 8px;
	background: var(--dhb-zand);
	font-size: .9em;
}

.dhb-tekst code {
	padding: .15em .4em;
}

.dhb-tekst pre {
	padding: 16px 20px;
	overflow-x: auto;
}

.dhb-tekst .alignwide {
	width: min(100vw - var(--dhb-zijkant) * 2, var(--dhb-breed));
	max-width: none;
	margin-inline: calc((min(100vw - var(--dhb-zijkant) * 2, var(--dhb-breed)) - 100%) / -2);
}

.dhb-tekst .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.dhb-tekst .alignfull img {
	border-radius: 0;
}

.dhb-tekst .alignleft {
	float: left;
	margin: .3em 1.5em 1em 0;
}

.dhb-tekst .alignright {
	float: right;
	margin: .3em 0 1em 1.5em;
}

.dhb-tekst .aligncenter {
	display: block;
	margin-inline: auto;
}

.dhb-tekst::after {
	content: "";
	display: table;
	clear: both;
}

.dhb-uitgelicht {
	margin: 0 0 40px;
}

.dhb-uitgelicht img {
	display: block;
	width: 100%;
	border-radius: 22px;
}

/* Vorig en volgend bericht */
.dhb-buren {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--dhb-lijn);
}

.dhb-buur small {
	display: block;
	margin-bottom: 4px;
	color: var(--dhb-steen);
	font-size: 13px;
}

.dhb-buur a {
	color: var(--dhb-inkt);
	font-family: var(--dhb-kopletter);
	font-weight: 800;
	line-height: 1.3;
}

.dhb-buur a:hover {
	color: var(--dhb-oranje-diep);
}

.dhb-buur--volgende {
	grid-column: 2;
	text-align: right;
}

/* Berichten als kaarten */
.dhb-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.dhb-kaart-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--dhb-lijn);
	border-radius: 24px;
	background: #fff;
	color: var(--dhb-inkt);
	transition: transform .25s ease, box-shadow .25s ease;
}

.dhb-kaart-link:hover {
	color: var(--dhb-inkt);
	transform: translateY(-4px);
	box-shadow: 0 22px 50px rgba(22, 22, 22, .1);
}

.dhb-kaart-beeld {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--dhb-zand);
}

.dhb-kaart-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.dhb-kaart-link:hover .dhb-kaart-beeld img {
	transform: scale(1.04);
}

.dhb-kaart-leeg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 80% 20%, rgba(255, 69, 0, .18), transparent 55%),
		var(--dhb-inkt);
}

.dhb-kaart-tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 26px 26px;
}

.dhb-kaart-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 10px;
	color: var(--dhb-steen);
	font-size: 14px;
}

.dhb-kaart-meta span {
	color: var(--dhb-oranje-diep);
	font-weight: 700;
}

.dhb-kaart-titel {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.dhb-kaart-uittreksel {
	margin: 0 0 20px;
	color: #4A4541;
	font-size: 15px;
	line-height: 1.6;
}

.dhb-kaart-verder {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--dhb-oranje-diep);
	font-size: 15px;
	font-weight: 700;
}

.dhb-leeg {
	color: var(--dhb-steen);
	font-size: 18px;
}

/* Zoekresultaten */
.dhb-resultaten {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dhb-resultaat + .dhb-resultaat {
	border-top: 1px solid var(--dhb-lijn);
}

.dhb-resultaat a {
	display: block;
	padding: 28px 0;
	color: var(--dhb-inkt);
}

.dhb-resultaat .dhb-label {
	margin-bottom: 12px;
	padding: 4px 12px 4px 10px;
	font-size: 13px;
}

.dhb-resultaat-titel {
	margin: 0 0 8px;
	font-size: clamp(21px, 2vw, 26px);
	letter-spacing: -.015em;
	transition: color .2s ease;
}

.dhb-resultaat a:hover .dhb-resultaat-titel {
	color: var(--dhb-oranje-diep);
}

.dhb-resultaat p {
	margin: 0;
	color: #4A4541;
	font-size: 16px;
}

/* Snelle links (404, niets gevonden) */
.dhb-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dhb-tegel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 20px 20px 20px 24px;
	border: 1px solid var(--dhb-lijn);
	border-radius: 20px;
	background: #fff;
	color: var(--dhb-inkt);
	font-family: var(--dhb-kopletter);
	font-size: 18px;
	font-weight: 800;
	transition: border-color .2s ease, transform .2s ease;
}

.dhb-tegel:hover {
	border-color: var(--dhb-oranje);
	color: var(--dhb-inkt);
	transform: translateY(-2px);
}

.dhb-tegel-pijl {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dhb-verloop);
	color: #fff;
}

/* Bladeren */
.dhb-bladeren {
	margin-top: 48px;
}

.dhb-bladeren .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.dhb-bladeren .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--dhb-lijn);
	border-radius: 999px;
	color: var(--dhb-inkt);
	font-weight: 700;
}

.dhb-bladeren a.page-numbers:hover {
	border-color: var(--dhb-oranje);
}

.dhb-bladeren .page-numbers.current {
	border-color: transparent;
	background: var(--dhb-inkt);
	color: #fff;
}

.dhb-bladeren .page-numbers.dots {
	border: 0;
}

@media (max-width: 640px) {
	.dhb-buren {
		grid-template-columns: 1fr;
	}

	.dhb-buur--volgende {
		grid-column: auto;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dhb-kaart-link,
	.dhb-kaart-beeld img,
	.dhb-tegel,
	.dhb-knop,
	.dhb-knop-pijl {
		transition: none;
	}
}