/* ==========================================================================
   DHB Megamenu
   Navigatie met megapanelen + mobiele menuknop en lade.
   Alles geprefixt met dhbmm- zodat het niets van het thema raakt.
   De panelen, de sluier en de lade worden door het script naar <body>
   verplaatst; hun regels staan daarom los van de .dhbmm-wrapper.
   ========================================================================== */

.dhbmm,
.dhbmm-lagen {
	--dhbmm-oranje: #FF4400;
	--dhbmm-oranje-donker: #E03C00;
	--dhbmm-oranje-zacht: #FFF1EB;
	--dhbmm-antraciet: #161616;
	--dhbmm-antraciet-2: #242424;
	--dhbmm-tekst: #1c1c1c;
	--dhbmm-grijs: #6b6b6b;
	--dhbmm-lijn: #ececec;
	--dhbmm-radius-l: 22px;
	--dhbmm-radius-m: 14px;
	--dhbmm-radius-s: 10px;
	--dhbmm-schaduw: 0 30px 80px -30px rgba(22, 22, 22, .35);
	--dhbmm-kop: 'Montserrat', system-ui, sans-serif;
	--dhbmm-body: 'Poppins', system-ui, sans-serif;
	--dhbmm-top: 84px;
	--dhbmm-breedte: 1256px;
}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit of
   het thema wint daarvan en kleurt de koppen ineens blauw. De wrapper
   staat er dubbel in, zodat deze regel zwaarder weegt dan de kit. De
   eigen kleuren hieronder hebben de wrapper ook gekregen en winnen weer
   van deze regel. */
.dhbmm.dhbmm h1,
.dhbmm.dhbmm h2,
.dhbmm.dhbmm h3,
.dhbmm.dhbmm h4,
.dhbmm.dhbmm h5,
.dhbmm.dhbmm h6,
.dhbmm-lagen.dhbmm-lagen h1,
.dhbmm-lagen.dhbmm-lagen h2,
.dhbmm-lagen.dhbmm-lagen h3,
.dhbmm-lagen.dhbmm-lagen h4,
.dhbmm-lagen.dhbmm-lagen h5,
.dhbmm-lagen.dhbmm-lagen h6 {
	color: inherit;
}




.dhbmm,
.dhbmm-lagen,
.dhbmm *,
.dhbmm-lagen * {
	box-sizing: border-box;
}

.dhbmm-lagen {
	/* De panelen hangen los onder body; zonder deze kleur erven zij
	   de kleur van het thema in plaats van die van het menu. */
	color: var(--dhbmm-tekst);
}

.dhbmm {
	font-family: var(--dhbmm-body);
	color: var(--dhbmm-tekst);
	display: flex;
	align-items: center;
	gap: 10px;
	-webkit-font-smoothing: antialiased;
}

.dhbmm a,
.dhbmm-lagen a {
	color: inherit;
	text-decoration: none;
}

.dhbmm button,
.dhbmm-lagen button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.dhbmm img,
.dhbmm-lagen img {
	display: block;
	max-width: 100%;
}

.dhbmm :focus-visible,
.dhbmm-lagen :focus-visible {
	outline: 2px solid var(--dhbmm-oranje);
	outline-offset: 3px;
	border-radius: 6px;
}

.dhbmm svg,
.dhbmm-lagen svg {
	flex: none;
}

/* ============ NAVIGATIE ============ */
.dhbmm-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dhbmm-item {
	position: relative;
}

.dhbmm-knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--dhbmm-kop);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: var(--dhbmm-antraciet);
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.dhbmm-knop svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	transition: transform .25s;
}

.dhbmm-knop:hover {
	background: #f3f3f3;
}

.dhbmm-item.is-open .dhbmm-knop {
	background: var(--dhbmm-antraciet);
	color: #fff;
}

.dhbmm-item.is-open .dhbmm-knop svg {
	transform: rotate(180deg);
}

/* ============ MENUKNOP MOBIEL ============ */
.dhbmm-burger {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--dhbmm-antraciet);
	color: #fff;
	align-items: center;
	justify-content: center;
	flex: none;
}

.dhbmm-burger svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
}

/* ============ MEGAPANEEL ============ */
.dhbmm-mega {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--dhbmm-top);
	z-index: 9998;
	padding: 14px 32px 0;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-8px);
	visibility: hidden;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.dhbmm-mega.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition: opacity .22s ease, transform .22s ease;
}

.dhbmm-binnen {
	max-width: var(--dhbmm-breedte);
	margin: 0 auto;
	background: #fff;
	border-radius: var(--dhbmm-radius-l);
	box-shadow: var(--dhbmm-schaduw);
	overflow: hidden;
	border: 1px solid var(--dhbmm-lijn);
	max-height: calc(100vh - var(--dhbmm-top) - 28px);
	overflow-y: auto;
}

.dhbmm-sluier {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Begint onder de header. Zou hij het hele scherm bedekken, dan ligt hij
	   over de menuknop die je net aanwees; de browser vuurt dan mouseleave en
	   de sluit-timer gooit het paneel meteen weer dicht. */
	top: var(--dhbmm-top, 0px);
	background: rgba(22, 22, 22, .42);
	z-index: 9997;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility 0s linear .25s;
}

.dhbmm-sluier.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s;
}

/* ---------- Paneel: diensten ---------- */
.dhbmm-diensten {
	display: grid;
	grid-template-columns: 1fr 400px;
}

.dhbmm-dienstenlijst {
	padding: 30px 30px 26px;
}

.dhbmm-paneelkop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding: 0 10px;
}

:is(.dhbmm, .dhbmm-lagen) .dhbmm-paneelkop h3{
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
	color: var(--dhbmm-antraciet);
}

.dhbmm-paneelkop a {
	font-size: 14px;
	font-weight: 500;
	color: var(--dhbmm-oranje);
	white-space: nowrap;
}

.dhbmm-paneelkop a:hover {
	text-decoration: underline;
}

.dhbmm-tegels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

.dhbmm-dienst {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
	border-radius: var(--dhbmm-radius-m);
	transition: background .2s;
}

.dhbmm-dienst .dhbmm-icoon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: #f4f4f4;
	display: grid;
	place-items: center;
	transition: background .2s;
}

.dhbmm-dienst .dhbmm-icoon svg {
	width: 24px;
	height: 24px;
	stroke: var(--dhbmm-antraciet);
	fill: none;
	transition: stroke .2s;
}

.dhbmm-dienst strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--dhbmm-antraciet);
	margin: 2px 0 4px;
}

.dhbmm-dienst span span,
.dhbmm-dienst > span > span:last-child {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dhbmm-grijs);
}

.dhbmm-dienst:hover,
.dhbmm-dienst.is-actief {
	background: var(--dhbmm-oranje-zacht);
}

.dhbmm-dienst:hover .dhbmm-icoon,
.dhbmm-dienst.is-actief .dhbmm-icoon {
	background: var(--dhbmm-oranje);
}

.dhbmm-dienst:hover .dhbmm-icoon svg,
.dhbmm-dienst.is-actief .dhbmm-icoon svg {
	stroke: #fff;
}

.dhbmm-merken {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 10px 0;
	padding-top: 18px;
	border-top: 1px solid var(--dhbmm-lijn);
	font-size: 13px;
	color: var(--dhbmm-grijs);
}

.dhbmm-merken b {
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 13px;
	color: #a3a3a3;
}

/* ---------- Paneel: preview rechts ---------- */
.dhbmm-preview {
	position: relative;
	background: var(--dhbmm-antraciet);
	color: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.dhbmm-previewfoto {
	position: relative;
	height: 230px;
	overflow: hidden;
}

.dhbmm-previewfoto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .35s, transform .6s;
}

.dhbmm-previewfoto img.is-zichtbaar {
	opacity: 1;
	transform: none;
}

.dhbmm-previewfoto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 22, 22, 0) 40%, var(--dhbmm-antraciet) 100%);
}

.dhbmm-previewtekst {
	padding: 4px 30px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

:is(.dhbmm, .dhbmm-lagen) .dhbmm-previewtekst h4{
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.15;
	margin: 0 0 10px;
	color: #fff;
}

.dhbmm-previewtekst p {
	font-size: 14px;
	line-height: 1.6;
	color: #bdbdbd;
	margin: 0 0 16px;
}

.dhbmm-kenmerken {
	list-style: none;
	display: grid;
	gap: 9px;
	margin: 0 0 22px;
	padding: 0;
}

.dhbmm-kenmerken li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	color: #e6e6e6;
}

.dhbmm-kenmerken svg {
	flex: none;
	width: 18px;
	height: 18px;
	stroke: var(--dhbmm-oranje);
	fill: none;
	margin-top: 1px;
}

.dhbmm-previewacties {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* ---------- Knoppen ---------- */
.dhbmm-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}

.dhbmm-btn svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	fill: none;
}

a.dhbmm-btn-oranje,
.dhbmm-btn-oranje {
	background: var(--dhbmm-oranje);
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(255, 68, 0, .6);
}

a.dhbmm-btn-oranje:hover,
.dhbmm-btn-oranje:hover {
	background: var(--dhbmm-oranje-donker);
	color: #fff;
	transform: translateY(-1px);
}

a.dhbmm-btn-donker,
.dhbmm-btn-donker {
	background: var(--dhbmm-antraciet);
	color: #fff;
}

a.dhbmm-btn-donker:hover,
.dhbmm-btn-donker:hover {
	color: #fff;
	transform: translateY(-1px);
}

/* ---------- Paneel: onderbalk ---------- */
.dhbmm-onderbalk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 16px 40px;
	background: #fafafa;
	border-top: 1px solid var(--dhbmm-lijn);
}

.dhbmm-vraag {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dhbmm-vraag img {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--dhbmm-lijn);
	flex: none;
}

.dhbmm-vraag strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--dhbmm-antraciet);
}

.dhbmm-vraag span {
	font-size: 13px;
	color: var(--dhbmm-grijs);
}

.dhbmm-snel {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.dhbmm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--dhbmm-lijn);
	font-size: 13.5px;
	font-weight: 500;
	transition: border-color .2s;
}

.dhbmm-chip svg {
	width: 16px;
	height: 16px;
	stroke: var(--dhbmm-oranje);
	fill: none;
}

.dhbmm-chip:hover {
	border-color: var(--dhbmm-antraciet);
}

/* ---------- Paneel: oplossingen ---------- */
.dhbmm-oplossingen {
	display: grid;
	grid-template-columns: 1fr 1fr 330px;
	gap: 18px;
	padding: 26px;
}

.dhbmm-doelgroep {
	position: relative;
	border-radius: var(--dhbmm-radius-m);
	overflow: hidden;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	isolation: isolate;
}

.dhbmm-doelgroep img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .7s;
}

.dhbmm-doelgroep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(22, 22, 22, .05) 20%, rgba(22, 22, 22, .92) 100%);
}

.dhbmm-doelgroep:hover img {
	transform: scale(1.05);
}

.dhbmm-doelgroep .dhbmm-inhoud {
	padding: 26px;
}

:is(.dhbmm, .dhbmm-lagen) .dhbmm-doelgroep h4{
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 25px;
	line-height: 1.15;
	margin: 0 0 8px;
	color: #fff;
}

.dhbmm-doelgroep p {
	font-size: 14px;
	line-height: 1.55;
	color: #dcdcdc;
	margin: 0 0 16px;
	max-width: 36ch;
}

.dhbmm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.dhbmm-tags span {
	font-size: 12.5px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.dhbmm-lees {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 14px;
}

.dhbmm-lees i {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--dhbmm-oranje);
	display: grid;
	place-items: center;
	transition: transform .25s;
	flex: none;
}

.dhbmm-lees i svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
	fill: none;
}

.dhbmm-doelgroep:hover .dhbmm-lees i {
	transform: translateX(4px);
}

.dhbmm-combinaties {
	padding: 6px 6px 0;
}

:is(.dhbmm, .dhbmm-lagen) .dhbmm-combinaties h5{
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 16px;
	color: var(--dhbmm-antraciet);
	margin: 0 0 12px;
}

.dhbmm-combi {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 14px;
	border-radius: var(--dhbmm-radius-s);
	border: 1px solid var(--dhbmm-lijn);
	margin-bottom: 9px;
	transition: border-color .2s, background .2s;
}

.dhbmm-combi:hover {
	border-color: var(--dhbmm-oranje);
	background: var(--dhbmm-oranje-zacht);
}

.dhbmm-duo {
	display: flex;
	flex: none;
}

.dhbmm-duo span {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--dhbmm-antraciet);
	display: grid;
	place-items: center;
	border: 2px solid #fff;
}

.dhbmm-duo span + span {
	margin-left: -10px;
	background: var(--dhbmm-oranje);
}

.dhbmm-duo svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
	fill: none;
}

.dhbmm-combi strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--dhbmm-antraciet);
}

.dhbmm-combi small {
	font-size: 12.5px;
	color: var(--dhbmm-grijs);
}

.dhbmm-pakketkaart {
	margin-top: 14px;
	padding: 18px;
	border-radius: var(--dhbmm-radius-m);
	background: var(--dhbmm-antraciet);
	color: #fff;
}

.dhbmm-pakketkaart strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 4px;
}

.dhbmm-pakketkaart p {
	font-size: 13px;
	color: #bdbdbd;
	margin: 0 0 14px;
	line-height: 1.5;
}

.dhbmm-pakketkaart .dhbmm-btn {
	height: 42px;
	width: 100%;
	justify-content: center;
}

/* ---------- Paneel: service ---------- */
.dhbmm-service {
	display: grid;
	grid-template-columns: 1fr 1fr 380px;
}

.dhbmm-kolom {
	padding: 30px 26px 30px 36px;
}

.dhbmm-kolom + .dhbmm-kolom {
	border-left: 1px solid var(--dhbmm-lijn);
}

:is(.dhbmm, .dhbmm-lagen) .dhbmm-kolom h5{
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 16px;
	color: var(--dhbmm-antraciet);
	margin: 0 0 12px 12px;
}

.dhbmm-servicelink {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px;
	border-radius: var(--dhbmm-radius-s);
	transition: background .2s;
}

.dhbmm-servicelink:hover {
	background: #f5f5f5;
}

.dhbmm-servicelink .dhbmm-icoon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	border: 1px solid var(--dhbmm-lijn);
	display: grid;
	place-items: center;
}

.dhbmm-servicelink .dhbmm-icoon svg {
	width: 19px;
	height: 19px;
	stroke: var(--dhbmm-oranje);
	fill: none;
}

.dhbmm-servicelink strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--dhbmm-antraciet);
}

.dhbmm-servicelink > span > span:last-child {
	font-size: 13px;
	color: var(--dhbmm-grijs);
}

.dhbmm-label {
	font-family: var(--dhbmm-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--dhbmm-oranje);
	background: var(--dhbmm-oranje-zacht);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: 2px;
}

.dhbmm-contactkaart {
	background: var(--dhbmm-antraciet);
	color: #fff;
	padding: 30px;
}

.dhbmm-adviseur {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.dhbmm-adviseur img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--dhbmm-oranje);
	flex: none;
}

.dhbmm-adviseur strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 16px;
}

.dhbmm-contactkaart p {
	font-size: 13.5px;
	color: #bdbdbd;
	line-height: 1.55;
	margin: 0 0 18px;
}

.dhbmm-kanalen {
	display: grid;
	gap: 8px;
}

.dhbmm-kanaal {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--dhbmm-radius-s);
	background: var(--dhbmm-antraciet-2);
	transition: background .2s;
}

.dhbmm-kanaal:hover {
	background: #2f2f2f;
}

.dhbmm-kanaal svg {
	width: 18px;
	height: 18px;
	stroke: var(--dhbmm-oranje);
	fill: none;
	flex: none;
}

.dhbmm-kanaal strong {
	font-family: var(--dhbmm-kop);
	font-weight: 600;
	font-size: 14px;
	word-break: break-word;
}

.dhbmm-kanaal small {
	display: block;
	font-size: 12px;
	color: #9e9e9e;
}

.dhbmm-uren {
	margin-top: 16px;
	font-size: 12.5px;
	color: #9e9e9e;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

/* ---------- Bereikbaarheid ---------- */
.dhbmm-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #cfcfcf;
}

.dhbmm-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ECC71;
	box-shadow: 0 0 0 4px rgba(46, 204, 113, .18);
	flex: none;
}

.dhbmm-status.is-dicht i {
	background: #9a9a9a;
	box-shadow: 0 0 0 4px rgba(154, 154, 154, .18);
}

/* ============ MOBIELE LADE ============ */
.dhbmm-lade {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	visibility: hidden;
	font-family: var(--dhbmm-body);
	color: var(--dhbmm-tekst);
}

.dhbmm-lade.is-open {
	transform: none;
	visibility: visible;
}

.dhbmm-ladekop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	padding-top: calc(16px + env(safe-area-inset-top, 0px));
	border-bottom: 1px solid var(--dhbmm-lijn);
}

.dhbmm-ladekop img {
	height: 38px;
	width: auto;
}

.dhbmm-ladesluit {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f3f3f3;
	display: grid;
	place-items: center;
	flex: none;
}

.dhbmm-ladesluit svg {
	width: 20px;
	height: 20px;
	stroke: var(--dhbmm-antraciet);
	fill: none;
}

.dhbmm-ladebody {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 20px 24px;
}

.dhbmm-acc {
	border-bottom: 1px solid var(--dhbmm-lijn);
}

.dhbmm-acc > button,
.dhbmm-acc > a {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 4px;
	font-family: var(--dhbmm-kop);
	font-weight: 700;
	font-size: 18px;
	color: var(--dhbmm-antraciet);
	text-align: left;
}

.dhbmm-acc > button svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	transition: transform .25s;
}

.dhbmm-acc.is-open > button svg {
	transform: rotate(180deg);
}

.dhbmm-accinhoud {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s;
}

.dhbmm-acc.is-open .dhbmm-accinhoud {
	grid-template-rows: 1fr;
}

.dhbmm-accinhoud > div {
	overflow: hidden;
}

.dhbmm-accinhoud .dhbmm-dienst {
	padding: 11px 8px;
}

.dhbmm-accinhoud .dhbmm-dienst .dhbmm-icoon {
	width: 40px;
	height: 40px;
}

.dhbmm-accinhoud .dhbmm-dienst .dhbmm-icoon svg {
	width: 20px;
	height: 20px;
}

.dhbmm-accinhoud .dhbmm-dienst strong {
	font-size: 15px;
	margin: 0 0 2px;
}

.dhbmm-accinhoud .dhbmm-ruimte {
	padding-bottom: 14px;
}

.dhbmm-ladevoet {
	padding: 14px 20px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--dhbmm-lijn);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.dhbmm-ladevoet .dhbmm-btn {
	justify-content: center;
	height: 50px;
}

/* ============ RESPONSIEF ============ */
@media (max-width: 1180px) {
	.dhbmm-nav {
		display: none;
	}

	.dhbmm-burger {
		display: inline-flex;
	}

	.dhbmm-diensten,
	.dhbmm-service {
		grid-template-columns: 1fr;
	}

	.dhbmm-oplossingen {
		grid-template-columns: 1fr;
	}

	.dhbmm-kolom + .dhbmm-kolom {
		border-left: 0;
		border-top: 1px solid var(--dhbmm-lijn);
	}
}

@media (max-width: 640px) {
	.dhbmm-lade {
		--dhbmm-radius-m: 12px;
	}

	.dhbmm-ladebody {
		padding: 10px 16px 20px;
	}

	.dhbmm-acc > button,
	.dhbmm-acc > a {
		font-size: 17px;
	}
}

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

	.dhbmm *,
	.dhbmm *::before,
	.dhbmm *::after,
	.dhbmm-lagen *,
	.dhbmm-lagen *::before,
	.dhbmm-lagen *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* In de Elementor-editor staat het paneel in de pagina in plaats van fixed,
   want binnen het getransformeerde canvas werkt fixed niet. Alleen het paneel
   dat je aanklikt komt in beeld; zouden ze allemaal tegelijk openstaan, dan
   ligt de hele editor vol met over elkaar heen vallende panelen. */
body.elementor-editor-active .dhbmm-mega {
	position: static;
	transform: none;
	padding: 14px 0 0;
	display: none;
}

body.elementor-editor-active .dhbmm-item.is-open .dhbmm-mega,
body.elementor-editor-active .dhbmm-mega.is-open {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* De sluier hoort niet over het canvas te liggen tijdens het bewerken. */
body.elementor-editor-active .dhbmm-sluier {
	display: none;
}