/* ==========================================================================
   DHB Megamenu (wit, ontwerp DHB_Header_Wit_Megamenu)
   Navigatie met vier witte panelen onder de zwevende balk, geanimeerde
   lijniconen, en een wit mobiel menu met accordeons.
   Alles geprefixt met dhbmm- zodat het niets van het thema raakt.

   De panelen blijven in de balk staan: absolute positie onder .nhh-header-in,
   precies zo breed als de pill. De sluier en het mobiele menu worden door het
   script naar <body> verplaatst (in .dhbmm-lagen), zodat position:fixed blijft
   werken als Elementor de header in een container met transform zet.
   ========================================================================== */

.dhbmm,
.dhbmm-lagen {
	--dhbmm-oranje: #FF4400;
	--dhbmm-oranje-2: #FF6A33;
	--dhbmm-oranje-3: #E03C00;
	--dhbmm-oranje-tekst: #D93A00;
	--dhbmm-oranje-licht: #FFB08F;
	--dhbmm-antraciet: #161616;
	--dhbmm-antraciet-2: #242424;
	--dhbmm-wit: #ffffff;
	--dhbmm-lijn: #ECECEC;
	--dhbmm-zacht: #FFF1EB;
	--dhbmm-zacht-2: #FAFAF9;
	--dhbmm-tekst: #161616;
	--dhbmm-grijs: #6B6B6B;
	--dhbmm-radius-l: 24px;
	--dhbmm-radius-m: 16px;
	--dhbmm-radius-s: 12px;
	--dhbmm-kop:'DHB Elms','Satoshi',system-ui,sans-serif;
	--dhbmm-body:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	/* de knoppen van het gedeelde buttonsysteem volgen de accentkleur */
	--nb-accent: var(--dhbmm-oranje);
	--nb-accent-2: var(--dhbmm-oranje-2);
	--nb-accent-3: var(--dhbmm-oranje-3);
	--nb-dark: var(--dhbmm-antraciet);
}

/* ---------- Omhulling ----------
   Elke regel hieronder draagt .dhbmm-om.dhbmm-om (de wortel van het menu in de
   balk en de laag op body hebben die klasse). Deze regel draait thema en kit
   terug naar de browserstandaard voor kale elementen, en weegt net minder dan
   alles wat erna komt. Geen svg: de tekeningen zetten lijn en vulling met
   attributen, en revert zou die terugdraaien naar zwart gevuld. De gedeelde knop
   (.dhb-btn, uit dhb-buttons.css) en zijn spans blijven buiten schot, want dat
   stylesheet is niet omhuld (:where weegt niets, dus deze regel blijft licht). */
.dhbmm-om.dhbmm-om :is(div, section, article, figure, figcaption, h1, h2, h3, h4, h5, h6, p, a, span, strong, b, em, i, small, ul, ol, li, hr, img, br, button, nav, aside, header):not(:where(.dhb-btn, .dhb-btn *)) {
	all: revert;
}


/* ---------- Basis en afscherming ----------
   Het ontwerp rekent op een kale pagina (*{margin:0;padding:0}). De panelen
   krijgen dat hier zelf, en de laag op body ook; daarna zet elke regel van het
   ontwerp zijn eigen maten. Knoppen en links krijgen de reset op gewicht
   (0,1,1): zwaarder dan [type=button] van het thema, lichter dan elke regel
   hieronder die met twee klassen is geschreven. */
.dhbmm-om.dhbmm-om.dhbmm,
.dhbmm-om.dhbmm-om.dhbmm-lagen,
.dhbmm-om.dhbmm-om.dhbmm *,
.dhbmm-om.dhbmm-om.dhbmm-lagen * {
	box-sizing: border-box;
}

.dhbmm-om.dhbmm-om .dhbmm-mega *:not(:where(.dhb-btn)),
.dhbmm-om.dhbmm-om.dhbmm-lagen *:not(:where(.dhb-btn)) {
	margin: 0;
	padding: 0;
}

.dhbmm-om.dhbmm-om.dhbmm,
.dhbmm-om.dhbmm-om.dhbmm-lagen {
	font-family: var(--dhbmm-body);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	line-height: normal;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent: 0;
	text-shadow: none;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	color: var(--dhbmm-tekst);
	-webkit-font-smoothing: antialiased;
}

.dhbmm-om.dhbmm-om.dhbmm {
	display: flex;
	align-items: center;
	gap: 10px;
	position: static;
}

/* De losse widget (verborgen, voor oude pagina's) heeft geen pill om onder te hangen. */
.elementor-widget-dhb_megamenu .dhbmm-om.dhbmm-om.dhbmm {
	position: relative;
	z-index: 5;
}

.dhbmm-om.dhbmm-om.dhbmm a:not(:where(.dhb-btn)),
.dhbmm-om.dhbmm-om.dhbmm-lagen a:not(:where(.dhb-btn)),
.dhbmm-om.dhbmm-om.dhbmm a:not(:where(.dhb-btn)):hover,
.dhbmm-om.dhbmm-om.dhbmm-lagen a:not(:where(.dhb-btn)):hover {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.dhbmm-om.dhbmm-om.dhbmm button,
.dhbmm-om.dhbmm-om.dhbmm-lagen button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
	text-align: inherit;
}

.dhbmm-om.dhbmm-om.dhbmm img,
.dhbmm-om.dhbmm-om.dhbmm-lagen img {
	display: block;
	max-width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.dhbmm-om.dhbmm-om.dhbmm ul,
.dhbmm-om.dhbmm-om.dhbmm-lagen ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dhbmm-om.dhbmm-om.dhbmm svg,
.dhbmm-om.dhbmm-om.dhbmm-lagen svg {
	flex: none;
	background: none;
	border: 0;
	box-shadow: none;
	/* de browserstandaard van het svg-element; de attribuutregels hieronder
	   winnen waar de tekening zelf lijn of vulling meegeeft */
	fill: #000;
	stroke: none;
	stroke-width: 1;
}

/* De tekeningen zetten lijn en vulling als attribuut (gewicht nul). Een thema met
   svg{fill:…;stroke:…} verslaat dat; daarom staat elk attribuut hier nog eens als
   regel die precies herhaalt wat het attribuut zegt. */
.dhbmm-om.dhbmm-om.dhbmm svg[fill="none"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[fill="none"] {
	fill: none;
}

.dhbmm-om.dhbmm-om.dhbmm svg[fill="currentColor"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[fill="currentColor"] {
	fill: currentColor;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke="currentColor"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke="currentColor"] {
	stroke: currentColor;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-linecap="round"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-linecap="round"] {
	stroke-linecap: round;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-linejoin="round"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-linejoin="round"] {
	stroke-linejoin: round;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="1.6"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="1.6"] {
	stroke-width: 1.6;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="1.7"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="1.7"] {
	stroke-width: 1.7;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="1.8"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="1.8"] {
	stroke-width: 1.8;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="2"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="2"] {
	stroke-width: 2;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="2.2"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="2.2"] {
	stroke-width: 2.2;
}

.dhbmm-om.dhbmm-om.dhbmm svg[stroke-width="2.5"],
.dhbmm-om.dhbmm-om.dhbmm-lagen svg[stroke-width="2.5"] {
	stroke-width: 2.5;
}

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

/* 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-om.dhbmm-om.dhbmm.dhbmm h1,
.dhbmm-om.dhbmm-om.dhbmm.dhbmm h2,
.dhbmm-om.dhbmm-om.dhbmm.dhbmm h3,
.dhbmm-om.dhbmm-om.dhbmm.dhbmm h4,
.dhbmm-om.dhbmm-om.dhbmm.dhbmm h5,
.dhbmm-om.dhbmm-om.dhbmm.dhbmm h6,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h1,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h2,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h3,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h4,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h5,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen h6 {
	color: inherit;
}

.dhbmm-om.dhbmm-om .dhbmm-mega h3,
.dhbmm-om.dhbmm-om .dhbmm-mega h4,
.dhbmm-om.dhbmm-om .dhbmm-mega h5,
.dhbmm-om.dhbmm-om .dhbmm-mega strong,
.dhbmm-om.dhbmm-om .dhbmm-mega b,
.dhbmm-om.dhbmm-om .dhbmm-lade b,
.dhbmm-om.dhbmm-om .dhbmm-lade strong {
	font-family: var(--dhbmm-kop);
}

/* ============ NAVIGATIE IN DE BALK ============
   Dezelfde maten als de oude navigatie van de header (.nhh-nav > li > a):
   halfvet, 14,5px, gedempt wit, een doorschijnende pil bij aanwijzen en een
   oranje stipje dat van links naar binnen schuift. De rij staat op twee
   klassen: een thema dat nav{display:none} zet mag hem niet wegdrukken. */
.dhbmm-om.dhbmm-om.dhbmm .dhbmm-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dhbmm-om.dhbmm-om .dhbmm-item {
	position: static;
}

.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: auto;
	padding: 10px 18px;
	border-radius: 999px;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	background: transparent;
	white-space: nowrap;
	transition: color .18s ease, background-color .18s ease;
}

/* Het stipje staat klaar links buiten de knop. De negatieve marge is precies
   zo groot als het stipje plus de tussenruimte, zodat de tekst niet verspringt
   op het moment dat het stipje verschijnt. */
.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dhbmm-oranje);
	flex: none;
	opacity: 0;
	margin-left: -13px;
	transition: opacity .18s ease, margin-left .18s ease;
}

.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop:hover,
.dhbmm-om.dhbmm-om.dhbmm .dhbmm-item.is-open .dhbmm-knop {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop:hover::before,
.dhbmm-om.dhbmm-om.dhbmm .dhbmm-item.is-open .dhbmm-knop::before {
	opacity: 1;
	margin-left: 0;
}

.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop .dhbmm-chev {
	width: 12px;
	height: 12px;
	flex: none;
	stroke: currentColor;
	fill: none;
	transition: transform .2s ease;
}

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

/* ============ MENUKNOP MOBIEL ============ */
.dhbmm-om.dhbmm-om.dhbmm .dhbmm-burger {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .2);
	transition: background-color .2s ease, border-color .2s ease;
}

.dhbmm-om.dhbmm-om.dhbmm .dhbmm-burger:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .32);
}

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

/* ============ SLUIER ============
   In de header (zie de laag hieronder), onder de pill en boven de
   inhoud van de pagina. */
.dhbmm-om.dhbmm-om .dhbmm-sluier {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(10, 10, 10, .52);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

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

/* De laag met de sluier staat in de header (.nhh-wrap, z-index 990): daar ligt hij
   met z-index 10 onder de pill (90) en het paneel, en boven de pagina. Op body zou
   hij in een site waar de header zijn eigen stapelcontext heeft bóven de balk
   komen en het paneel meteen weer sluiten. De laag zelf neemt geen ruimte in. */
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen--kop,
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen--eigen {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	overflow: visible;
}

.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen--kop .dhbmm-sluier {
	z-index: 10;
}

/* De losse widget heeft geen .nhh-wrap: de sluier blijft in de widget zelf, die
   een eigen stapelcontext krijgt, en ligt daarin onder de navigatie. */
.dhbmm-om.dhbmm-om.dhbmm-lagen.dhbmm-lagen--eigen .dhbmm-sluier {
	z-index: -1;
}

/* ============ MEGAPANEEL ============ */
.dhbmm-om.dhbmm-om .dhbmm-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	z-index: 5;
	transform: translateY(-8px);
	font-family: var(--dhbmm-body);
	font-size: 16px;
	line-height: normal;
	font-weight: 400;
	text-align: left;
	color: var(--dhbmm-tekst);
	background: var(--dhbmm-wit);
	border: 1px solid var(--dhbmm-lijn);
	border-radius: var(--dhbmm-radius-l);
	box-shadow: 0 40px 90px -20px rgba(10, 10, 10, .55), 0 2px 0 rgba(255, 255, 255, .6) inset;
	overflow: hidden;
	/* op een laag scherm past het paneel niet onder de balk; dan scrolt hij */
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--dhbmm-oranje) 50%, transparent);
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega * {
	font-family: inherit;
}

/* stagger van tegels en links bij openen */
.dhbmm-om.dhbmm-om .dhbmm-stag {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}

.dhbmm-om.dhbmm-om .dhbmm-item.is-open .dhbmm-stag {
	opacity: 1;
	transform: none;
	transition: opacity .32s ease var(--d, 0s), transform .32s cubic-bezier(.22, .9, .3, 1) var(--d, 0s), background-color .18s ease, border-color .18s ease;
}

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

.dhbmm-om.dhbmm-om .dhbmm-lijst {
	padding: 30px 30px 24px;
	display: flex;
	flex-direction: column;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kop h3 {
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.15;
	margin: 0;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kop a {
	font-size: 14px;
	font-weight: 500;
	color: var(--dhbmm-oranje-tekst);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kop a svg {
	width: 12px;
	height: 12px;
	transition: transform .2s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kop a:hover {
	color: var(--dhbmm-oranje-tekst);
	text-decoration: underline;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kop a:hover svg {
	transform: translate(2px, -2px);
}

.dhbmm-om.dhbmm-om .dhbmm-tegels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	align-content: stretch;
	flex: 1;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 20px 20px;
	border-radius: var(--dhbmm-radius-m);
	border: 1px solid transparent;
	background: transparent;
	transition: background-color .2s, border-color .2s;
}

.dhbmm-om.dhbmm-om .dhbmm-tegel .dhbmm-ico {
	flex: none;
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	overflow: hidden;
	--ic-line: #161616;
	--ic-acc: var(--dhbmm-oranje);
	--ic-soft: color-mix(in srgb, var(--dhbmm-oranje) 26%, transparent);
	--ic-ink: #161616;
	background: linear-gradient(160deg, #fff 0%, var(--dhbmm-zacht) 100%);
	border: 1px solid color-mix(in srgb, var(--dhbmm-oranje) 22%, var(--dhbmm-lijn));
	box-shadow: 0 1px 0 #fff inset, 0 6px 16px -10px rgba(22, 22, 22, .35);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .9, .3, 1);
}

.dhbmm-om.dhbmm-om .dhbmm-tegel .dhbmm-ico::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(70% 70% at 25% 15%, rgba(255, 68, 0, .38), transparent 65%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.dhbmm-om.dhbmm-om .dhbmm-tegel:hover .dhbmm-ico,
.dhbmm-om.dhbmm-om .dhbmm-tegel.is-actief .dhbmm-ico {
	--ic-line: #fff;
	--ic-acc: var(--dhbmm-oranje);
	--ic-soft: rgba(255, 68, 0, .18);
	background: var(--dhbmm-antraciet);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 45%, transparent);
	box-shadow: 0 12px 26px -12px rgba(22, 22, 22, .75), 0 0 0 4px color-mix(in srgb, var(--dhbmm-oranje) 14%, transparent);
	transform: translateY(-1px) scale(1.03);
}

.dhbmm-om.dhbmm-om .dhbmm-tegel:hover .dhbmm-ico::after,
.dhbmm-om.dhbmm-om .dhbmm-tegel.is-actief .dhbmm-ico::after {
	opacity: 1;
}

.dhbmm-om.dhbmm-om .dhbmm-tegel:hover .dhbmm-ni .a,
.dhbmm-om.dhbmm-om .dhbmm-tegel.is-actief .dhbmm-ni .a,
.dhbmm-om.dhbmm-om .dhbmm-tegel:hover .dhbmm-ni .af,
.dhbmm-om.dhbmm-om .dhbmm-tegel.is-actief .dhbmm-ni .af {
	filter: drop-shadow(0 0 3px rgba(255, 68, 0, .55));
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight:800;
	font-size: 17px;
	color: var(--dhbmm-tekst);
	margin: 0 0 4px;
	transition: color .18s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel .dhbmm-sub {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel:hover,
.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel.is-actief {
	background: var(--dhbmm-zacht);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 35%, transparent);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel:hover strong,
.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tegel.is-actief strong {
	color: var(--dhbmm-oranje-tekst);
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-merken b {
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 800;
	font-size: 13.5px;
	color: #A3A3A3;
}

.dhbmm-om.dhbmm-om .dhbmm-merken span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.dhbmm-om.dhbmm-om .dhbmm-merken span svg {
	width: 14px;
	height: 14px;
	color: var(--dhbmm-oranje-tekst);
	flex: none;
}

/* preview rechts (antraciet) */
.dhbmm-om.dhbmm-om .dhbmm-preview {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	color: #fff;
	background: radial-gradient(56% 60% at 86% -6%, color-mix(in srgb, var(--dhbmm-oranje) 16%, transparent), transparent 66%), linear-gradient(180deg, #242424 0%, #111111 100%);
}

.dhbmm-om.dhbmm-om .dhbmm-pv-foto {
	position: relative;
	height: 210px;
	overflow: hidden;
	background-color: #242424;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-pv-foto img.is-zichtbaar {
	opacity: 1;
	transform: none;
}

.dhbmm-om.dhbmm-om .dhbmm-pv-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 22, 22, 0) 35%, #1A1A1A 100%);
}

.dhbmm-om.dhbmm-om .dhbmm-pv-tekst {
	padding: 0 28px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-top: -6px;
	position: relative;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-pv-tekst h4 {
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.12;
	margin: 0 0 10px;
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-pv-tekst p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 16px;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kenmerken li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .9);
	margin: 0;
	padding: 0;
}

.dhbmm-om.dhbmm-om .dhbmm-kenmerken svg {
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--dhbmm-oranje);
	margin-top: 1px;
}

.dhbmm-om.dhbmm-om .dhbmm-pv-acties {
	margin-top: auto;
}

/* onderbalk met adviseur en chips */
.dhbmm-om.dhbmm-om .dhbmm-onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 30px;
	background: var(--dhbmm-zacht-2);
	border-top: 1px solid var(--dhbmm-lijn);
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-vraag img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--dhbmm-lijn), 0 0 0 4px color-mix(in srgb, var(--dhbmm-oranje) 25%, transparent);
	flex: none;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-vraag strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--dhbmm-tekst);
}

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

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

.dhbmm-om.dhbmm-om .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;
	color: var(--dhbmm-tekst);
	transition: border-color .2s, background-color .2s;
}

.dhbmm-om.dhbmm-om .dhbmm-chip svg {
	width: 16px;
	height: 16px;
	color: var(--dhbmm-oranje-tekst);
}

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

.dhbmm-om.dhbmm-om .dhbmm-chip--accent {
	background: color-mix(in srgb, var(--dhbmm-oranje) 14%, #fff);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 45%, transparent);
}

.dhbmm-om.dhbmm-om .dhbmm-chip--accent:hover {
	background: color-mix(in srgb, var(--dhbmm-oranje) 24%, #fff);
	border-color: var(--dhbmm-oranje-tekst);
}

/* ---------- Onderbalk v2 (ontwerp 5): avatar met status, chips met icoon, checkknop ---------- */
.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder--v2 {
	padding: 14px 23px 14px 21px;
	gap: 18px;
	background: linear-gradient(90deg, var(--dhbmm-zacht) 0%, #fff 48%);
	border-top: 1px solid var(--dhbmm-lijn);
	position: relative;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder--v2::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--dhbmm-oranje), transparent 55%);
	opacity: .55;
}

.dhbmm-om.dhbmm-om .dhbmm-av {
	position: relative;
	flex: none;
	width: 55px;
	height: 55px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-av img {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--dhbmm-lijn), 0 8px 16px -10px rgba(0, 0, 0, .4);
}

.dhbmm-om.dhbmm-om .dhbmm-av-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #22B46A;
	border: 2.5px solid #fff;
	box-shadow: 0 0 0 3px rgba(34, 180, 106, .22);
	animation: dhbmm-puls-groen 2s infinite;
}

.dhbmm-om.dhbmm-om .dhbmm-av-dot.is-dicht {
	background: #A3A3A3;
	box-shadow: none;
	animation: none;
}

@keyframes dhbmm-puls-groen {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 180, 106, .22); }
	50% { box-shadow: 0 0 0 7px rgba(34, 180, 106, .06); }
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder--v2 .dhbmm-vraag {
	gap: 14px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder--v2 .dhbmm-vraag strong {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 15.5px;
	margin-bottom: 3px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder--v2 .dhbmm-vraag > div > span {
	font-size: 14px;
}

.dhbmm-om.dhbmm-om .dhbmm-onder-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-style: normal;
	font-family: var(--dhbmm-body);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	color: #15803D;
	background: #E8F8EF;
	border: 1px solid #BFE9D1;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.dhbmm-om.dhbmm-om .dhbmm-onder-status i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22B46A;
}

.dhbmm-om.dhbmm-om .dhbmm-onder-status.is-dicht {
	color: #6B6B6B;
	background: #F3F3F3;
	border-color: #E3E3E3;
}

.dhbmm-om.dhbmm-om .dhbmm-onder-status.is-dicht i {
	background: #A3A3A3;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-chip--v2 {
	height: 46px;
	padding: 0 17px 0 6px;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--dhbmm-lijn);
	box-shadow: 0 1px 0 #fff inset, 0 6px 12px -10px rgba(0, 0, 0, .3);
	transition: transform .2s, border-color .2s, box-shadow .2s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-chip--v2:hover {
	transform: translateY(-1px);
	border-color: #CFCFCF;
	box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .35);
}

.dhbmm-om.dhbmm-om .dhbmm-chip--v2 .dhbmm-chip-ic {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--dhbmm-zacht);
	color: var(--dhbmm-oranje-tekst);
	display: grid;
	place-items: center;
	flex: none;
	transition: transform .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-chip--v2:hover .dhbmm-chip-ic {
	transform: rotate(-8deg) scale(1.06);
}

.dhbmm-om.dhbmm-om .dhbmm-chip--v2 .dhbmm-chip-ic svg {
	width: 17px;
	height: 17px;
	color: inherit;
}

.dhbmm-om.dhbmm-om .dhbmm-chip--v2 > span {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	font-size: 15px;
	font-weight: 600;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-chip--v2 > span small {
	display: none; /* ontwerp 5: het label blijft in de html (voorleessoftware), niet in beeld */
	font-size: 12px;
	font-weight: 500;
	color: var(--dhbmm-grijs);
	margin-bottom: 3px;
}

.dhbmm-om.dhbmm-om .dhbmm-chip--wa .dhbmm-chip-ic {
	background: #E7F8EC;
	color: #1FAF54;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder-btn.dhb-btn.dhb-btn {
	height: 50px;
	padding: 0 6px 0 21px;
	font-size: 15.5px;
	gap: 11px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder-btn .dhb-btn-icon {
	width: 39px;
	height: 39px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-onder-btn .dhb-btn-icon svg {
	width: 17px;
	height: 17px;
}

/* combinaties verwijderd (ontwerp 5): de checkkaart vult de derde kolom */
.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-combis {
	padding: 0;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-scan {
	margin-top: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-scan .dhbmm-scan-badge {
	align-self: flex-start;
	margin-bottom: auto;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-scan strong {
	font-size: 22px;
	line-height: 1.1;
	margin-top: 18px;
	margin-bottom: 8px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-scan p {
	font-size: 14px;
	margin-bottom: 16px;
}

/* ---------- Paneel: woning en bedrijf ---------- */
.dhbmm-om.dhbmm-om .dhbmm-wb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 350px;
	gap: 18px;
	padding: 24px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-doel {
	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;
	background-color: #242424;
}

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

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

.dhbmm-om.dhbmm-om .dhbmm-doel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--dhbmm-oranje) 22%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity .4s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-doel:hover img {
	transform: scale(1.05);
}

.dhbmm-om.dhbmm-om .dhbmm-doel:hover::after {
	opacity: 1;
}

.dhbmm-om.dhbmm-om .dhbmm-doel .dhbmm-inhoud {
	padding: 24px;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-doel h4 {
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 25px;
	line-height: 1.1;
	margin: 0 0 8px;
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-doel p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
	margin: 0 0 14px;
	max-width: 34ch;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-tags span {
	font-size: 12.5px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-lees {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}

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

.dhbmm-om.dhbmm-om .dhbmm-lees i svg {
	width: 16px;
	height: 16px;
}

.dhbmm-om.dhbmm-om .dhbmm-doel:hover .dhbmm-lees i {
	transform: translateX(4px) rotate(-45deg);
}

.dhbmm-om.dhbmm-om .dhbmm-combis {
	padding: 4px 4px 0;
	display: flex;
	flex-direction: column;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-combis h5 {
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--dhbmm-tekst);
	margin: 0 0 12px;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-combi:hover {
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 60%, transparent);
	background: var(--dhbmm-zacht);
}

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

.dhbmm-om.dhbmm-om .dhbmm-duo span {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--dhbmm-tekst);
	color: #fff;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
	transition: margin .3s cubic-bezier(.22, .9, .3, 1), transform .3s ease;
}

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

.dhbmm-om.dhbmm-om .dhbmm-duo svg {
	width: 16px;
	height: 16px;
}

.dhbmm-om.dhbmm-om .dhbmm-combi:hover .dhbmm-duo span + span {
	margin-left: -4px;
	transform: rotate(8deg);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-combi strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--dhbmm-tekst);
}

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

/* de donkere checkkaart (ook onderin het mobiele menu) */
.dhbmm-om.dhbmm-om .dhbmm-scan {
	margin-top: auto;
	padding: 18px;
	border-radius: var(--dhbmm-radius-m);
	color: #fff;
	position: relative;
	overflow: hidden;
	background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--dhbmm-oranje) 22%, transparent), transparent 65%), linear-gradient(180deg, #242424 0%, #111111 100%);
	border: 1px solid rgba(255, 255, 255, .08);
}

.dhbmm-om.dhbmm-om .dhbmm-scan .dhbmm-scan-badge {
	display: inline-block;
	font-family: var(--dhbmm-body);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dhbmm-oranje) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--dhbmm-oranje) 50%, transparent);
	color: var(--dhbmm-oranje-licht);
	margin-bottom: 10px;
}

.dhbmm-om.dhbmm-om .dhbmm-scan strong {
	display: block;
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.15;
	margin-bottom: 5px;
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-scan p {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 14px;
}

.dhbmm-om.dhbmm-om .dhbmm-scan .dhb-btn {
	width: 100%;
	justify-content: space-between;
}

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

.dhbmm-om.dhbmm-om .dhbmm-kolom {
	padding: 28px 24px 28px 34px;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kolom h5 {
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--dhbmm-tekst);
	margin: 0 0 12px 12px;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-link:hover {
	background: var(--dhbmm-zacht);
}

.dhbmm-om.dhbmm-om .dhbmm-link .dhbmm-ico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	border: 1px solid var(--dhbmm-lijn);
	background: #fff;
	display: grid;
	place-items: center;
	color: var(--dhbmm-oranje-tekst);
	transition: background .2s, color .2s, border-color .2s, transform .3s cubic-bezier(.22, .9, .3, 1);
}

.dhbmm-om.dhbmm-om .dhbmm-link .dhbmm-ico svg {
	width: 19px;
	height: 19px;
}

.dhbmm-om.dhbmm-om .dhbmm-link:hover .dhbmm-ico {
	background: linear-gradient(135deg, var(--dhbmm-oranje-3), var(--dhbmm-oranje) 55%, var(--dhbmm-oranje-2));
	color: var(--dhbmm-tekst);
	border-color: transparent;
	transform: rotate(-6deg) scale(1.06);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-link strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-link .dhbmm-sub {
	font-size: 13px;
	font-weight: 400;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-nieuw {
	font-family: var(--dhbmm-body);
	font-size: 11px;
	font-weight: 700;
	color: var(--dhbmm-oranje-tekst);
	background: color-mix(in srgb, var(--dhbmm-oranje) 18%, #fff);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: 2px;
}

.dhbmm-om.dhbmm-om .dhbmm-contact {
	color: #fff;
	padding: 28px;
	background: radial-gradient(56% 60% at 86% -6%, color-mix(in srgb, var(--dhbmm-oranje) 16%, transparent), transparent 66%), linear-gradient(180deg, #242424 0%, #111111 100%);
}

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

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-adviseur strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 3px;
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-contact p {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 16px;
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kanaal {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--dhbmm-radius-s);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .08);
	color: #fff;
	transition: background-color .2s, border-color .2s;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kanaal:hover {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 40%, transparent);
}

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

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kanaal strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	word-break: break-word;
}

.dhbmm-om.dhbmm-om .dhbmm-mega .dhbmm-kanaal small {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

.dhbmm-om.dhbmm-om .dhbmm-uren {
	margin-top: 16px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .55);
	display: flex;
	justify-content: space-between;
}

/* bereikbaarheid: oranje bolletje pulseert als er iemand is */
.dhbmm-om.dhbmm-om .dhbmm-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
}

.dhbmm-om.dhbmm-om .dhbmm-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	font-style: normal;
	background: var(--dhbmm-oranje);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dhbmm-oranje) 22%, transparent);
	animation: dhbmm-puls 2s infinite;
}

.dhbmm-om.dhbmm-om .dhbmm-status.is-dicht i {
	background: #9aa39f;
	box-shadow: 0 0 0 4px rgba(154, 163, 159, .2);
	animation: none;
}

@keyframes dhbmm-puls {
	0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dhbmm-oranje) 22%, transparent); }
	50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dhbmm-oranje) 8%, transparent); }
}

/* trustbalk (licht) */
.dhbmm-om.dhbmm-om .dhbmm-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 13px 24px;
	border-top: 1px solid var(--dhbmm-lijn);
	background: var(--dhbmm-zacht-2);
	font-size: 12.5px;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dhbmm-om.dhbmm-om .dhbmm-trust svg {
	width: 14px;
	height: 14px;
	color: var(--dhbmm-oranje-tekst);
	flex: none;
}

/* De oranje knoppen van het gedeelde buttonsysteem: een kit die links een
   kleur geeft (a{color}) weegt zwaarder dan .dhb-btn--primary; de witte tekst
   hier vastzetten, zoals de hero-banner dat ook doet. */
.dhbmm-om.dhbmm-om .dhbmm-mega .dhb-btn--primary,
.dhbmm-om.dhbmm-om .dhbmm-mega .dhb-btn--primary:hover,
.dhbmm-om.dhbmm-om.dhbmm-lagen .dhb-btn--primary,
.dhbmm-om.dhbmm-om.dhbmm-lagen .dhb-btn--primary:hover {
	color: #fff !important;
	text-decoration: none !important;
}

/* ============ GEANIMEERDE ICONEN ============
   Rust: stilstaand. Paneel opent: lijnen tekenen zich in. Actieve of
   aangewezen tegel en de badge op de previewfoto: een rustige loop. */
.dhbmm-om.dhbmm-om .dhbmm-ni {
	width: 30px;
	height: 30px;
	display: block;
	overflow: visible;
	position: relative;
	z-index: 1;
	/* de browserstandaard van het svg-element zelf: de gevulde delen (.af, .sf)
	   erven hun lijn hiervan, en een thema met svg{stroke} .dhbmm-om.dhbmm-om zou die anders dik maken */
	fill: #000;
	stroke: none;
	stroke-width: 1;
}

.dhbmm-ni .l { fill: none; stroke: var(--ic-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.dhbmm-om.dhbmm-om .dhbmm-ni .a { fill: none; stroke: var(--ic-acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.dhbmm-om.dhbmm-om .dhbmm-ni .af { fill: var(--ic-acc); transition: fill .3s ease; }
.dhbmm-om.dhbmm-om .dhbmm-ni .lf { fill: var(--ic-line); transition: fill .3s ease; }
.dhbmm-om.dhbmm-om .dhbmm-ni .sf { fill: var(--ic-soft); transition: fill .3s ease; }
.dhbmm-om.dhbmm-om .dhbmm-ni .ink { fill: var(--ic-ink); }
.dhbmm-om.dhbmm-om .dhbmm-ni .d { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* een stilstaand icoon in dezelfde doos kleurt mee met de lijnkleur */
.dhbmm-om.dhbmm-om .dhbmm-ni--stil {
	stroke: var(--ic-line);
	color: var(--ic-line);
	transition: stroke .3s ease, color .3s ease;
}

.dhbmm-om.dhbmm-om .dhbmm-ni .ni-cam,
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-tag,
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-bon,
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-sparks { transform-box: view-box; }
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-cam { transform-origin: 28.5px 9.5px; }
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-sparks { transform-origin: 16px 16px; opacity: .55; }
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-ecg { stroke-dasharray: 1 0; stroke-width: 1.8; }
.dhbmm-om.dhbmm-om .dhbmm-ni .ni-cone { stroke-dasharray: 1.6 2; opacity: .6; }

@keyframes dhbmm-ni-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dhbmm-ni-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes dhbmm-ni-heat { 0% { transform: translateY(1.5px); opacity: .25; } 45% { opacity: 1; } 100% { transform: translateY(-2.5px); opacity: .15; } }
@keyframes dhbmm-ni-spark { 0%, 100% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; transform: scale(1); } 60% { opacity: .2; } }
@keyframes dhbmm-ni-flicker { 0%, 100% { fill: var(--ic-soft); } 8%, 22% { fill: var(--ic-acc); } 15% { fill: var(--ic-soft); } }
@keyframes dhbmm-ni-golf { 0%, 100% { opacity: .12; } 40% { opacity: 1; } }
@keyframes dhbmm-ni-pan { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
@keyframes dhbmm-ni-cone { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dhbmm-ni-ecg { 0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; } 55% { stroke-dasharray: 1 1; stroke-dashoffset: 0; } 100% { stroke-dasharray: 1 1; stroke-dashoffset: -1; } }
@keyframes dhbmm-ni-tag { 0%, 100% { transform: translateX(0); } 35%, 65% { transform: translateX(-3.5px); } }
@keyframes dhbmm-ni-bon { 0% { transform: translateY(10px); } 60%, 100% { transform: translateY(0); } }
@keyframes dhbmm-badge-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dhbmm-redraw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

/* intekenen bij openen (paneel en accordeon) */
.dhbmm-om.dhbmm-om .dhbmm-item.is-open .dhbmm-tegel .dhbmm-ni .d {
	animation: dhbmm-ni-draw .9s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .08s) both;
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel .dhbmm-ni .d {
	animation: dhbmm-ni-draw .9s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .15s) both;
}

/* de loop op de actieve tegel, de badge en de actieve mobiele tegel */
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-led { animation: dhbmm-ni-blink 1.6s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-heat { animation: dhbmm-ni-heat 1.8s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-heat.h2 { animation-delay: -.6s; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-heat.h3 { animation-delay: -1.2s; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-sparks { animation: dhbmm-ni-spark 1.4s ease-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-sparks .s2 { animation: dhbmm-ni-blink 1.4s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-boltfill { animation: dhbmm-ni-flicker 2.8s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-golf { animation: dhbmm-ni-golf 1.4s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-golf.g2 { animation-delay: .25s; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-cam { animation: dhbmm-ni-pan 3.2s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-cone { animation: dhbmm-ni-cone 1.6s ease-in-out infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-ecg { animation: dhbmm-ni-ecg 2.2s linear infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-tag { animation: dhbmm-ni-tag 2.4s cubic-bezier(.5, 0, .2, 1) infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-bon { animation: dhbmm-ni-bon 2.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.dhbmm-om.dhbmm-om :is(.dhbmm-item.is-open .dhbmm-tegel.is-actief, .dhbmm-item.is-open .dhbmm-pv-badge, .dhbmm-lade.is-open .dhbmm-acc.is-open .dhbmm-mtegel.is-actief) .ni-knop { animation: dhbmm-ni-blink 1.4s ease-in-out infinite; }

/* glazen badge met het geanimeerde icoon op de previewfoto */
.dhbmm-om.dhbmm-om .dhbmm-pv-badge {
	position: absolute;
	left: 20px;
	top: 18px;
	z-index: 2;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	--ic-line: #fff;
	--ic-acc: var(--dhbmm-oranje);
	--ic-soft: rgba(255, 68, 0, .2);
	--ic-ink: #161616;
	background: rgba(22, 22, 22, .45);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 68, 0, .12);
	animation: dhbmm-badge-in .45s cubic-bezier(.22, .9, .3, 1) both;
}

.dhbmm-om.dhbmm-om .dhbmm-pv-badge:empty {
	display: none;
}

.dhbmm-om.dhbmm-om .dhbmm-pv-badge .dhbmm-ni {
	width: 28px;
	height: 28px;
}

.dhbmm-om.dhbmm-om .dhbmm-pv-badge .dhbmm-ni .a,
.dhbmm-om.dhbmm-om .dhbmm-pv-badge .dhbmm-ni .af {
	filter: drop-shadow(0 0 3px rgba(255, 68, 0, .6));
}

/* kleine iconen elders: lijn tekent zich opnieuw in bij hover */
.dhbmm-om.dhbmm-om .dhbmm-link .dhbmm-ico svg,
.dhbmm-om.dhbmm-om .dhbmm-kanaal svg,
.dhbmm-om.dhbmm-om .dhbmm-chip svg {
	stroke-dasharray: 60;
	stroke-dashoffset: 0;
}

.dhbmm-om.dhbmm-om .dhbmm-link:hover .dhbmm-ico svg,
.dhbmm-om.dhbmm-om .dhbmm-kanaal:hover svg,
.dhbmm-om.dhbmm-om .dhbmm-chip:hover svg {
	animation: dhbmm-redraw .9s cubic-bezier(.65, 0, .35, 1);
}

/* ============ MOBIEL MENU (wit, in de stijl van het megamenu) ============ */
.dhbmm-om.dhbmm-om .dhbmm-lade {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	flex-direction: column;
	background: #161616;
	font-family: var(--dhbmm-body);
	font-size: 16px;
	line-height: normal;
	font-weight: 400;
	text-align: left;
	color: var(--dhbmm-tekst);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.dhbmm-om.dhbmm-om .dhbmm-lade * {
	font-family: inherit;
}

.dhbmm-om.dhbmm-om .dhbmm-ladekop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 34px;
	padding-top: calc(16px + env(safe-area-inset-top, 0px));
	background: radial-gradient(70% 140% at 100% 0%, rgba(255, 68, 0, .24), transparent 60%), linear-gradient(180deg, #242424 0%, #161616 100%);
}

.dhbmm-om.dhbmm-om .dhbmm-ladekop img {
	display: block;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-ladesluit {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	cursor: pointer;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-ladesluit svg {
	width: 16px;
	height: 16px;
}

.dhbmm-om.dhbmm-om .dhbmm-ladebody {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 24px 24px 0 0;
	margin-top: -18px;
	position: relative;
	transform: translateY(28px);
	transition: transform .5s cubic-bezier(.22, .9, .3, 1);
}

.dhbmm-om.dhbmm-om .dhbmm-ladebody::before {
	content: "";
	position: sticky;
	top: 0;
	display: block;
	height: 2px;
	margin: 0 24px;
	background: linear-gradient(90deg, transparent, var(--dhbmm-oranje), transparent);
	z-index: 2;
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-ladebody {
	transform: none;
}

.dhbmm-om.dhbmm-om .dhbmm-ladebinnen {
	padding: 6px 16px 22px;
}

/* accordeons */
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc {
	display: block;
	border-bottom: 1px solid var(--dhbmm-lijn);
	text-decoration: none;
	color: inherit;
	opacity: 0;
	transform: translateY(12px);
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .9, .3, 1);
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(1) { transition-delay: .08s; }
.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(2) { transition-delay: .13s; }
.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(3) { transition-delay: .18s; }
.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(4) { transition-delay: .23s; }
.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(5) { transition-delay: .28s; }
.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-acc:nth-child(6) { transition-delay: .33s; }

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc-kop {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 17px 2px;
	background: none;
	border: 0;
	color: var(--dhbmm-tekst);
	text-align: left;
	cursor: pointer;
}

.dhbmm-om.dhbmm-om .dhbmm-acc-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc-txt b {
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.1;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc-txt small {
	font-size: 12.5px;
	color: var(--dhbmm-grijs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dhbmm-om.dhbmm-om .dhbmm-acc-chev {
	margin-left: auto;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--dhbmm-zacht);
	color: var(--dhbmm-oranje-tekst);
	border: 1px solid color-mix(in srgb, var(--dhbmm-oranje) 25%, transparent);
	transition: transform .35s cubic-bezier(.22, .9, .3, 1), background-color .3s, color .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-acc-chev svg {
	width: 16px;
	height: 16px;
}

.dhbmm-om.dhbmm-om .dhbmm-acc-chev--r {
	transform: rotate(-90deg);
}

.dhbmm-om.dhbmm-om .dhbmm-acc.is-open .dhbmm-acc-chev {
	transform: rotate(180deg);
	background: var(--dhbmm-antraciet);
	color: var(--dhbmm-oranje);
	border-color: transparent;
}

.dhbmm-om.dhbmm-om .dhbmm-acc-in {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1);
}

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

.dhbmm-om.dhbmm-om .dhbmm-acc-in > div {
	overflow: hidden;
	min-height: 0;
}

.dhbmm-om.dhbmm-om .dhbmm-pad {
	padding: 2px 0 18px;
}

/* tegels met geanimeerde iconen */
.dhbmm-om.dhbmm-om .dhbmm-mtegels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px 15px;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	background: linear-gradient(180deg, #fff 0%, var(--dhbmm-zacht-2) 100%);
	border: 1px solid var(--dhbmm-lijn);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, background-color .3s, border-color .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc.is-open .dhbmm-mtegel {
	opacity: 1;
	transform: none;
	transition: opacity .4s ease var(--d, 0s), transform .4s cubic-bezier(.22, .9, .3, 1) var(--d, 0s), background-color .3s, border-color .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel.is-actief {
	background: var(--dhbmm-zacht);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 45%, transparent);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel:active {
	transform: scale(.98);
}

.dhbmm-om.dhbmm-om .dhbmm-mico {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	overflow: hidden;
	--ic-line: #161616;
	--ic-acc: var(--dhbmm-oranje);
	--ic-soft: color-mix(in srgb, var(--dhbmm-oranje) 26%, transparent);
	--ic-ink: #161616;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--dhbmm-oranje) 22%, var(--dhbmm-lijn));
	box-shadow: 0 6px 14px -10px rgba(22, 22, 22, .4);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.dhbmm-om.dhbmm-om .dhbmm-mico::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 70% at 25% 15%, rgba(255, 68, 0, .38), transparent 65%);
	opacity: 0;
	transition: opacity .35s;
	pointer-events: none;
}

.dhbmm-om.dhbmm-om .dhbmm-mtegel.is-actief .dhbmm-mico {
	--ic-line: #fff;
	--ic-acc: var(--dhbmm-oranje);
	--ic-soft: rgba(255, 68, 0, .18);
	background: var(--dhbmm-antraciet);
	border-color: color-mix(in srgb, var(--dhbmm-oranje) 45%, transparent);
	box-shadow: 0 10px 22px -10px rgba(22, 22, 22, .7), 0 0 0 3px color-mix(in srgb, var(--dhbmm-oranje) 14%, transparent);
}

.dhbmm-om.dhbmm-om .dhbmm-mtegel.is-actief .dhbmm-mico::after {
	opacity: 1;
}

.dhbmm-om.dhbmm-om .dhbmm-mtegel.is-actief .dhbmm-ni .a,
.dhbmm-om.dhbmm-om .dhbmm-mtegel.is-actief .dhbmm-ni .af {
	filter: drop-shadow(0 0 3px rgba(255, 68, 0, .55));
}

.dhbmm-om.dhbmm-om .dhbmm-mico .dhbmm-ni {
	width: 27px;
	height: 27px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	color: var(--dhbmm-tekst);
	transition: color .3s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel.is-actief strong {
	color: var(--dhbmm-oranje-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-alle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding: 13px 15px;
	border-radius: 14px;
	background: var(--dhbmm-zacht-2);
	border: 1px solid var(--dhbmm-lijn);
	font-size: 14px;
	font-weight: 500;
	color: var(--dhbmm-oranje-tekst);
	text-decoration: none;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-alle svg {
	width: 12px;
	height: 12px;
}

/* woning en bedrijf */
.dhbmm-om.dhbmm-om .dhbmm-doelen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mdoel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: 184px;
	border-radius: 16px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 3px;
	color: #fff;
	text-decoration: none;
	background-color: #242424;
	opacity: 0;
	transform: translateY(10px);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc.is-open .dhbmm-mdoel {
	opacity: 1;
	transform: none;
	transition: opacity .4s ease var(--d, 0s), transform .4s cubic-bezier(.22, .9, .3, 1) var(--d, 0s);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mdoel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: -2;
}

.dhbmm-om.dhbmm-om .dhbmm-mdoel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(22, 22, 22, 0) 25%, rgba(22, 22, 22, .92) 100%), radial-gradient(70% 50% at 100% 100%, rgba(255, 68, 0, .22), transparent 70%);
}

.dhbmm-om.dhbmm-om .dhbmm-mdoel i {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dhbmm-oranje);
	color: #161616;
	display: grid;
	place-items: center;
	font-style: normal;
}

.dhbmm-om.dhbmm-om .dhbmm-mdoel i svg {
	width: 14px;
	height: 14px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mdoel b {
	font-family: var(--dhbmm-kop);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.1;
	color: #fff;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mdoel span {
	font-size: 12px;
	color: rgba(255, 255, 255, .78);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mlabel {
	margin: 16px 2px 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-mcombis {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0 -16px;
	padding: 0 16px 2px;
	scrollbar-width: none;
}

.dhbmm-om.dhbmm-om .dhbmm-mcombis::-webkit-scrollbar {
	display: none;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mcombi {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	border: 1px solid var(--dhbmm-lijn);
	background: #fff;
	text-decoration: none;
	color: var(--dhbmm-tekst);
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
}

.dhbmm-om.dhbmm-om .dhbmm-mcombi .dhbmm-duo span {
	width: 30px;
	height: 30px;
}

.dhbmm-om.dhbmm-om .dhbmm-mcombi .dhbmm-duo svg {
	width: 14px;
	height: 14px;
}

/* service-links */
.dhbmm-om.dhbmm-om .dhbmm-mlinks {
	display: grid;
	gap: 2px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mlink {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 4px;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mlink:active {
	background: var(--dhbmm-zacht);
}

.dhbmm-om.dhbmm-om .dhbmm-lico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	border: 1px solid var(--dhbmm-lijn);
	background: var(--dhbmm-zacht-2);
	color: var(--dhbmm-oranje-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-lico svg {
	width: 19px;
	height: 19px;
}

.dhbmm-om.dhbmm-om .dhbmm-ltxt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-ltxt strong {
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-ltxt small {
	font-size: 12.5px;
	color: var(--dhbmm-grijs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dhbmm-om.dhbmm-om .dhbmm-rchev {
	flex: none;
	width: 16px;
	height: 16px;
	color: #A3A3A3;
}

/* checkkaart, adviseur en trust onderin */
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mscan {
	margin-top: 20px;
	opacity: 0;
	transform: translateY(12px);
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-mscan {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease .32s, transform .45s cubic-bezier(.22, .9, .3, 1) .32s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mscan strong {
	font-size: 19px;
}

.dhbmm-om.dhbmm-om .dhbmm-hulp {
	margin-top: 12px;
	padding: 16px;
	border-radius: 16px;
	background: var(--dhbmm-zacht-2);
	border: 1px solid var(--dhbmm-lijn);
}

.dhbmm-om.dhbmm-om .dhbmm-hulp-kop {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-hulp-kop img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--dhbmm-oranje);
	flex: none;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-hulp-kop strong {
	display: block;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
	margin-bottom: 4px;
	color: var(--dhbmm-tekst);
}

.dhbmm-om.dhbmm-om .dhbmm-hulp .dhbmm-status {
	color: var(--dhbmm-grijs);
	font-size: 12.5px;
}

.dhbmm-om.dhbmm-om .dhbmm-hulp-knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}

.dhbmm-om.dhbmm-om .dhbmm-hulp-knoppen .dhbmm-chip {
	justify-content: center;
	height: 44px;
}

.dhbmm-om.dhbmm-om .dhbmm-mtrust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 18px;
	font-size: 12px;
	color: var(--dhbmm-grijs);
}

.dhbmm-om.dhbmm-om .dhbmm-mtrust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dhbmm-om.dhbmm-om .dhbmm-mtrust svg {
	width: 13px;
	height: 13px;
	color: var(--dhbmm-oranje-tekst);
}

/* vaste knoppenbalk */
.dhbmm-om.dhbmm-om .dhbmm-ladevoet {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--dhbmm-lijn);
	box-shadow: 0 -14px 30px -18px rgba(22, 22, 22, .35);
	opacity: 0;
	transform: translateY(16px);
}

.dhbmm-om.dhbmm-om .dhbmm-lade.is-open .dhbmm-ladevoet {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease .25s, transform .45s cubic-bezier(.22, .9, .3, 1) .25s;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-bel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 56px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--dhbmm-antraciet);
	color: #fff;
	text-decoration: none;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-bel svg {
	width: 18px;
	height: 18px;
	color: var(--dhbmm-oranje);
}

.dhbmm-om.dhbmm-om .dhbmm-ladevoet .dhbmm-mcta.dhb-btn.dhb-btn {
	padding: 6px 6px 6px 22px;
	font-family:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-size: 15px;
	height: 56px;
}

.dhbmm-om.dhbmm-om .dhbmm-ladevoet .dhb-btn-icon {
	width: 44px;
	height: 44px;
}

@media (min-width: 700px) {
	.dhbmm-om.dhbmm-om .dhbmm-ladebinnen {
		max-width: 720px;
		margin: 0 auto;
		padding-left: 24px;
		padding-right: 24px;
	}

	.dhbmm-om.dhbmm-om .dhbmm-mtegels {
		grid-template-columns: repeat(4, 1fr);
	}

	.dhbmm-om.dhbmm-om .dhbmm-ladevoet {
		padding-left: max(16px, calc(50% - 344px));
		padding-right: max(16px, calc(50% - 344px));
	}
}

/* ============ RESPONSIEF ============
   De balk met vijf items en de oranje knop heeft zo'n 1170px nodig. Daarom
   gaat de navigatie hier bij 1280px over in de menuknop; de mobiele versie
   neemt het over. Deze waarden staan ook letterlijk in de kritieke css. */
@media (max-width: 1280px) {
	.dhbmm-om.dhbmm-om.dhbmm .dhbmm-nav {
		display: none;
	}

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

@media (min-width: 1281px) and (max-width: 1400px) {
	.dhbmm-om.dhbmm-om.dhbmm .dhbmm-nav {
		gap: 2px;
	}

	.dhbmm-om.dhbmm-om.dhbmm .dhbmm-knop {
		padding: 10px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dhbmm-om.dhbmm-om.dhbmm *,
.dhbmm-om.dhbmm-om.dhbmm *::before,
.dhbmm-om.dhbmm-om.dhbmm *::after,
.dhbmm-om.dhbmm-om.dhbmm-lagen *,
.dhbmm-om.dhbmm-om.dhbmm-lagen *::before,
.dhbmm-om.dhbmm-om.dhbmm-lagen *::after {
		transition: none !important;
		animation: none !important;
	}

	.dhbmm-om.dhbmm-om .dhbmm-stag,
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-acc,
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mtegel,
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mdoel,
.dhbmm-om.dhbmm-om .dhbmm-lade .dhbmm-mscan,
.dhbmm-om.dhbmm-om .dhbmm-ladevoet,
.dhbmm-om.dhbmm-om .dhbmm-ladebody {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* In de Elementor-editor staat het paneel in de pagina in plaats van onder
   de balk, en 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-om.dhbmm-om .dhbmm-mega {
	position: static;
	transform: none;
	max-height: none;
	display: none;
}

body.elementor-editor-active .dhbmm-om.dhbmm-om .dhbmm-item.is-open .dhbmm-mega {
	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-om.dhbmm-om .dhbmm-sluier {
	display: none;
}

/* ---------- Gedeelde knoppen in de panelen en het mobiele menu ----------
   dhb-buttons.css zet de weergave met een enkele klasse; een thema met
   a{display:inline-block} zou daarvan winnen en tekst en pijl tegen elkaar
   drukken. Hier nog eens op gewicht van het menu. */
.dhbmm-om.dhbmm-om .dhbmm-mega .dhb-btn,
.dhbmm-om.dhbmm-om .dhbmm-lade .dhb-btn {
	display: inline-flex;
}