/* ------------------------------------------------------------------
   B& familierecht – componenten.
   Alles wat theme.json niet kan uitdrukken. Elke waarde komt uit de
   tokens; hier staan geen losse kleuren.
   ------------------------------------------------------------------ */

/* ---- blokstijlen ---- */
.is-style-eb-label{
	font-size:var(--wp--preset--font-size--label);
	font-weight:700; letter-spacing:.15em; text-transform:uppercase;
	line-height:1.3; color:var(--wp--preset--color--blauw);
}
.is-style-eb-bedrag{
	font-size:var(--wp--preset--font-size--bedrag);
	font-weight:700; letter-spacing:-.03em; line-height:1.1;
	color:var(--wp--preset--color--blauw-diep);
	font-variant-numeric:tabular-nums; white-space:nowrap;
}
.is-style-eb-kaart{
	background:var(--wp--preset--color--wit);
	border:1px solid var(--wp--preset--color--lijn);
	border-radius:3px;
	/* Geen slagschaduw: verheffing komt van lijnen en ruimte. */
}

/* ---- balk bovenaan ---- */
.eb-util{
	background:var(--wp--preset--color--blauw-diep);
	color:#CED2D6; font-size:14px;
}
.eb-util a{color:var(--wp--preset--color--wit); font-weight:600}
.eb-util p{margin:0}

/* ---- kop ---- */
.eb-kop{
	background:var(--wp--preset--color--wit);
	border-bottom:1px solid var(--wp--preset--color--lijn);
}
.eb-merk svg{height:44px; width:auto; display:block}
.eb-kop .wp-block-navigation{font-weight:500; color:var(--wp--preset--color--leisteen-2)}
.eb-kop .wp-block-navigation a:hover{color:var(--wp--preset--color--leisteen)}
.eb-taal{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--wp--preset--color--leisteen-3); white-space:nowrap}
.eb-taal strong{color:var(--wp--preset--color--leisteen)}

/* De kop blijft op één regel: logo links, menu in het midden, taal en knop rechts.
   Zonder dit valt hij bij een lang menu uiteen in twee regels. */
@media (min-width:1000px){
	.eb-kop .wp-block-group.is-layout-flex{flex-wrap:nowrap}
	.eb-merk{flex:0 0 auto}
	.eb-kop .wp-block-navigation{
		font-size:15px; min-width:0; flex:1 1 auto;
	}
	.eb-kop .wp-block-navigation .wp-block-navigation__container{gap:18px; flex-wrap:nowrap}
	.eb-kop .wp-block-navigation .wp-block-navigation-item__content{white-space:nowrap}
	.eb-kop .wp-block-buttons{flex:0 0 auto}
}
.eb-kop .wp-block-navigation__responsive-container-open,
.eb-kop .wp-block-navigation__responsive-container-close{color:var(--wp--preset--color--leisteen)}
@media (max-width:640px){ .eb-merk svg{height:34px} }

/* ---- hero ---- */
.eb-hero{position:relative; background:var(--wp--preset--color--blauw-diep); color:var(--wp--preset--color--wit)}
.eb-hero :is(h1,h2,h3,p){color:var(--wp--preset--color--wit)}
.eb-hero .is-style-eb-label{color:var(--wp--preset--color--blauw-licht)}
.eb-hero .eb-hero-sub{color:#D6D9DD; max-width:42ch}
.eb-hero .wp-block-cover__background{opacity:1}

/* Beeld in de rechterhelft. Het loopt via een verloop de blauwe kleur in,
   zodat er geen harde naad ontstaat en de tekst links leesbaar blijft. */
.eb-hero{overflow:hidden}
.eb-hero .eb-hero-beeld{
	position:absolute; top:0; right:0; bottom:0; left:auto;
	width:44%; margin:0; z-index:2; pointer-events:none;
}
.eb-hero .eb-hero-beeld img{
	width:100%; height:100%; object-fit:cover; object-position:56% 42%; display:block;
}
.eb-hero .eb-hero-beeld::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(to right,
		var(--wp--preset--color--blauw-diep) 0%,
		rgba(42,69,96,.70) 16%,
		rgba(42,69,96,.20) 52%,
		rgba(42,69,96,.06) 100%);
}
.eb-hero .wp-block-cover__inner-container{position:relative; z-index:3}
@media (max-width:900px){ .eb-hero .eb-hero-beeld{display:none} }

/* ---- twee ingangen ---- */
/* Twee tegels op de grijze ondergrond, in de vorm van de prijskaarten: dunne lijn,
   14px afronding, geen slagschaduw. Bovenin een smalle donkerblauwe strook met alleen
   het opschrift; de titel staat in het witte deel eronder. */
.eb-deuren{
	background:var(--wp--preset--color--grond);
	padding-block:clamp(40px,5vw,72px);
	padding-inline:clamp(18px,4vw,44px);
}
.eb-deuren .wp-block-columns{
	gap:clamp(16px,2vw,24px)!important;
	margin:0 auto;
	max-width:1160px;
	align-items:stretch;
}
.eb-deur{
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--wp--preset--color--wit);
	border:1px solid var(--wp--preset--color--lijn);
	border-radius:14px;
	overflow:hidden;
	padding:0;
	transition:border-color .18s ease, transform .18s ease;
}
/* Geen tussenruimte tussen de strook en het lijf: WordPress zet daar standaard
   24px, en dan blijft er bij het oplichten een wit randje onder de blauwe strook. */
.eb-deur > *{margin-block-start:0}
.eb-deur-kop{
	background:var(--wp--preset--color--blauw-diep,#2A4560);
	padding:11px clamp(22px,2.4vw,34px) 10px;
}
.eb-deur-kop .is-style-eb-label{color:#fff; margin:0}
.eb-deur-lijf{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:24px clamp(22px,2.4vw,34px) 26px;
	transition:background .18s ease;
}
.eb-deur-lijf h2{margin:0 0 12px}
.eb-deur-lijf p{color:var(--wp--preset--color--leisteen-2); max-width:42ch}
.eb-deur-lijf > p:last-child{margin-top:auto; margin-bottom:0; padding-top:12px}
.eb-deur:hover{
	border-color:var(--wp--preset--color--blauw);
	transform:translateY(-2px);
}
.eb-deur:hover .eb-deur-lijf{background:var(--wp--preset--color--blauw-was)}
@media (prefers-reduced-motion:reduce){
	.eb-deur{transition:none}
	.eb-deur:hover{transform:none}
}

/* ---- stappen ---- */
.eb-stappen{border-top:1px solid var(--wp--preset--color--lijn)}
.eb-stappen .wp-block-column{
	padding:24px 28px 28px 0;
	border-right:1px solid var(--wp--preset--color--lijn-zacht);
}
.eb-stappen .wp-block-column:last-child{border-right:0; padding-right:0}
.eb-stap-nr{
	font-size:13px; font-weight:800; letter-spacing:.12em;
	color:var(--wp--preset--color--blauw); font-variant-numeric:tabular-nums;
}
.eb-stappen h3{font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.35}
.eb-stappen p{font-size:16px; color:var(--wp--preset--color--leisteen-2); line-height:1.55}
@media (max-width:781px){
	.eb-stappen .wp-block-column{border-right:0; border-bottom:1px solid var(--wp--preset--color--lijn-zacht); padding:20px 0}
	.eb-stappen .wp-block-column:last-child{border-bottom:0}
}

/* ---- tarieven als tabelregels ---- */
.eb-tarieven{border-top:1px solid var(--wp--preset--color--lijn)}
.eb-rij{
	display:grid; grid-template-columns:minmax(0,1.5fr) 150px 150px;
	gap:clamp(16px,3vw,40px); align-items:center;
	padding-block:22px; border-bottom:1px solid var(--wp--preset--color--lijn-zacht);
}
.eb-rij h3{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0}
.eb-rij .eb-omschrijving{margin-top:5px; font-size:16px; color:var(--wp--preset--color--leisteen-2); max-width:52ch; line-height:1.5}
.eb-rij .is-style-eb-bedrag{text-align:right; margin:0}
.is-style-eb-bedrag .eb-vanaf{font-size:15px; font-weight:600; letter-spacing:0; color:var(--wp--preset--color--leisteen-3)}
.eb-rij .eb-pp{display:block; font-size:13.5px; font-weight:400; color:var(--wp--preset--color--leisteen-3); letter-spacing:0; margin-top:2px}
.eb-rij .eb-actie{text-align:right; margin:0}
.eb-merkje{
	display:inline-block; margin-left:10px; vertical-align:2px;
	font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	background:var(--wp--preset--color--amber); color:var(--wp--preset--color--amber-ink);
	padding:3px 9px; border-radius:3px;
}
@media (max-width:781px){
	.eb-rij{grid-template-columns:1fr auto; row-gap:14px; align-items:end; padding-block:24px}
	.eb-rij .eb-wat{grid-column:1/-1; order:0}
	.eb-rij .is-style-eb-bedrag{order:1; text-align:left; font-size:26px}
	.eb-rij .eb-actie{order:2}
}

/* ---- vertrouwen ---- */
.eb-cijfers{border-left:2px solid var(--wp--preset--color--blauw); padding-left:clamp(20px,2.4vw,32px)}
.eb-cijfer{display:flex; align-items:baseline; gap:14px; margin-bottom:22px}
.eb-cijfer:last-child{margin-bottom:0}
.eb-cijfer strong{
	font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1;
	color:var(--wp--preset--color--blauw-diep); font-variant-numeric:tabular-nums;
	flex:none; min-width:104px;
}
.eb-cijfer span{font-size:15px; color:var(--wp--preset--color--leisteen-2); line-height:1.4}
@media (max-width:781px){
	.eb-cijfers{border-left:0; border-top:2px solid var(--wp--preset--color--blauw); padding-left:0; padding-top:24px}
}

/* ---- kennisbank ---- */
.eb-clusters{border-top:1px solid var(--wp--preset--color--lijn)}
.eb-clusters .wp-block-column{padding:0}
/* Een aanklikbaar blok moet er aanklikbaar uitzien. Bij hover en bij
   toetsenbordfocus licht het hele vlak op, kleurt de kop blauw en schuift
   er een pijl naar binnen. Dat is duidelijker dan een verschuiving alleen. */
.eb-cluster{
	display:block; position:relative;
	padding:20px 42px 22px 14px; margin-left:-14px;
	border-bottom:1px solid var(--wp--preset--color--lijn-zacht);
	border-radius:3px; text-decoration:none;
	transition:background .15s ease;
}
.eb-cluster::after{
	content:""; position:absolute; right:18px; top:50%; margin-top:-6px;
	width:9px; height:9px;
	border-top:2px solid var(--wp--preset--color--blauw);
	border-right:2px solid var(--wp--preset--color--blauw);
	transform:translateX(-4px) rotate(45deg);
	opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.eb-cluster:hover,.eb-cluster:focus-visible{
	background:var(--wp--preset--color--blauw-was); text-decoration:none; outline:none;
}
.eb-cluster:focus-visible{box-shadow:0 0 0 2px var(--wp--preset--color--blauw)}
.eb-cluster:hover h3,.eb-cluster:focus-visible h3{color:var(--wp--preset--color--blauw)}
.eb-cluster:hover::after,.eb-cluster:focus-visible::after{opacity:1; transform:translateX(0) rotate(45deg)}
.eb-cluster h3{font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px; transition:color .15s ease}
.eb-cluster p{font-size:16px; color:var(--wp--preset--color--leisteen-2); line-height:1.5; max-width:46ch; margin:0}

/* ---- kennisbankhub ---- */
.eb-hublijst{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px); margin:0 0 8px}
.eb-artikel-inhoud .eb-hublijst{max-width:none}
.eb-hublijst .eb-cluster{padding:15px 40px 16px 14px}
.eb-hublijst .eb-cluster h3{font-size:17px; margin:0}
.eb-hublijst .eb-cluster p{font-size:15px; margin-top:4px; max-width:44ch}
@media (max-width:781px){ .eb-hublijst{grid-template-columns:1fr} }

/* ---- brede pagina ---- */
.eb-pagina-lijf{padding-block:clamp(24px,3vw,40px) clamp(48px,6vw,88px)}
.eb-pagina-lijf p,.eb-pagina-lijf li{font-size:17px; line-height:1.65}
.eb-pagina-lijf > .wp-block-post-content > p,
.eb-pagina-lijf > .wp-block-post-content > ul,
.eb-pagina-lijf > .wp-block-post-content > ol,
.eb-pagina-lijf > .wp-block-post-content > h2,
.eb-pagina-lijf > .wp-block-post-content > h3{max-width:680px; margin-left:0!important; margin-right:auto!important}
.eb-pagina-lijf h2{font-size:clamp(22px,2.2vw,27px); font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:2em 0 .5em}
.eb-pagina-lijf h3{font-size:18px; font-weight:600; letter-spacing:-.015em; margin:1.6em 0 .35em}
.eb-pagina-lijf a{color:var(--wp--preset--color--blauw)}

/* ---- contact ---- */
.wp-block-columns.eb-contact{gap:clamp(32px,5vw,72px)!important; align-items:flex-start!important; margin-top:clamp(28px,4vw,44px)}
.eb-contact-gegevens address{font-style:normal; line-height:1.65; margin:0 0 22px; color:var(--wp--preset--color--leisteen)}
.eb-contact-gegevens p{margin:0 0 22px; line-height:1.6}
.eb-contact-label{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--leisteen-3); margin:0 0 6px!important;
}
.eb-contact-bij{display:block; font-size:14.5px; color:var(--wp--preset--color--leisteen-3); margin-top:3px}
.eb-contact-formulier{min-width:0}
.eb-contact-formulier > *{max-width:640px}
@media (max-width:781px){
	.wp-block-columns.eb-contact{flex-wrap:wrap}
	.eb-contact > .wp-block-column{flex-basis:100%!important}
}

/* ---- voet ---- */
.eb-voet{background:var(--wp--preset--color--blauw-diep); color:#C1C6CA}
.eb-voet :is(p,li,address){color:#C1C6CA}
.eb-voet a{color:#DADDE1; font-weight:400}
.eb-voet a:hover{color:var(--wp--preset--color--wit)}
.eb-voet h2,.eb-voet h3,.eb-voet h4{
	color:#8E9398; font-size:var(--wp--preset--font-size--label);
	font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.eb-voet svg{height:52px; width:auto; display:block}
.eb-voet address{font-style:normal; line-height:1.65}

/* ==================================================================
   Kennisbankartikel.
   Hier komt het grootste deel van de site te staan, dus dit sjabloon
   moet het langst meegaan. Uitgangspunt: één kolom om te lezen, één
   smalle kolom om je te oriënteren, en verder niets dat afleidt.
   ================================================================== */

.eb-artikel .eb-datum{font-size:15px; color:var(--wp--preset--color--leisteen-3)}

/* ---- kruimelpad ---- */
.eb-kruimelbalk{border-bottom:1px solid var(--wp--preset--color--lijn); padding-block:11px}
.eb-kruimels ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0}
.eb-kruimels li{font-size:14px; color:var(--wp--preset--color--leisteen-3)}
.eb-kruimels li + li::before{content:"›"; margin:0 9px; color:var(--wp--preset--color--leisteen-3)}
.eb-kruimels a{color:var(--wp--preset--color--leisteen-2); text-decoration:none}
.eb-kruimels a:hover{color:var(--wp--preset--color--blauw); text-decoration:underline}
.eb-kruimels li[aria-current]{color:var(--wp--preset--color--leisteen)}

/* ---- kop van het artikel ---- */
.eb-artikel-kop{padding-block:clamp(32px,4vw,52px) 0}
.eb-artikel-kop h1{max-width:22ch; margin-left:0; margin-right:auto; text-wrap:balance}
.eb-artikel-meta{
	margin-top:18px; gap:0 8px; align-items:baseline;
	color:var(--wp--preset--color--leisteen-3);
}
.eb-artikel-meta p,.eb-artikel-meta time,.eb-artikel-meta .wp-block-post-date{
	margin:0; font-size:14.5px; color:var(--wp--preset--color--leisteen-3);
}
.eb-artikel-meta > *:not(:first-child)::before{content:"·"; margin-right:8px}

/* ---- twee kolommen ---- */
.eb-artikel-lijf{padding-block:clamp(28px,3.4vw,44px) clamp(48px,6vw,88px)}
.wp-block-columns.eb-artikel-kolommen{gap:clamp(32px,5vw,72px)!important; align-items:flex-start!important}
.eb-artikel-inhoud{min-width:0}

/* Leesmaat en ritme. De koppen staan dichter op hun eigen tekst dan op
   de vorige alinea; dat is wat een lange pagina leesbaar houdt. */
.eb-artikel-inhoud > *{max-width:680px}
.eb-artikel-inhoud p{font-size:17px; line-height:1.65; margin:0 0 1.15em}
.eb-artikel-inhoud h2{
	font-size:clamp(23px,2.4vw,29px); font-weight:700; letter-spacing:-.025em;
	line-height:1.2; margin:2.1em 0 .5em; scroll-margin-top:24px;
}
.eb-artikel-inhoud h3{
	font-size:19px; font-weight:600; letter-spacing:-.015em;
	line-height:1.3; margin:1.7em 0 .4em; scroll-margin-top:24px;
}
.eb-artikel-inhoud h2:first-child,.eb-artikel-inhoud h3:first-child{margin-top:0}
.eb-artikel-inhoud :is(ul,ol){margin:0 0 1.15em; padding-left:1.25em}
.eb-artikel-inhoud li{font-size:17px; line-height:1.6; margin-bottom:.45em}
.eb-artikel-inhoud li::marker{color:var(--wp--preset--color--leisteen-3)}
.eb-artikel-inhoud a{color:var(--wp--preset--color--blauw); text-underline-offset:2px}
.eb-artikel-inhoud figure{margin:2em 0}
.eb-artikel-inhoud figcaption{font-size:14.5px; color:var(--wp--preset--color--leisteen-3); margin-top:9px}
.eb-artikel-inhoud table{width:100%; border-collapse:collapse; font-size:16px; margin:1.6em 0}
.eb-artikel-inhoud :is(th,td){
	text-align:left; padding:11px 14px 11px 0;
	border-bottom:1px solid var(--wp--preset--color--lijn-zacht); vertical-align:top;
}
.eb-artikel-inhoud th{font-weight:600; color:var(--wp--preset--color--leisteen)}
.eb-artikel-inhoud blockquote{
	margin:1.8em 0; padding-left:22px;
	border-left:2px solid var(--wp--preset--color--blauw);
	font-size:18px; color:var(--wp--preset--color--leisteen-2);
}

/* ---- kort antwoord ----
   Het blok dat een taalmodel overneemt als het jullie citeert. Daarom
   staat het bovenaan, is het kort, en bevat het het hele antwoord. */
.eb-kort{
	background:var(--wp--preset--color--blauw-was);
	border-left:3px solid var(--wp--preset--color--blauw);
	padding:20px 24px 22px; margin:0 0 2.2em; border-radius:0 3px 3px 0;
}
.eb-kort > p:first-child{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--blauw); margin-bottom:9px;
}
.eb-kort p:last-child{margin-bottom:0}
.eb-kort p{font-size:17px; line-height:1.6}

/* ---- vraag en antwoord ---- */
details.eb-vraag{border-bottom:1px solid var(--wp--preset--color--lijn-zacht); padding:2px 0}
details.eb-vraag summary{
	cursor:pointer; list-style:none; padding:15px 30px 15px 0; position:relative;
	font-size:17px; font-weight:600; color:var(--wp--preset--color--leisteen); line-height:1.45;
}
details.eb-vraag summary::-webkit-details-marker{display:none}
details.eb-vraag summary::after{
	content:""; position:absolute; right:6px; top:22px;
	width:9px; height:9px; border-right:2px solid var(--wp--preset--color--blauw);
	border-bottom:2px solid var(--wp--preset--color--blauw);
	transform:rotate(45deg); transition:transform .18s ease;
}
details.eb-vraag[open] summary::after{transform:rotate(-135deg); top:26px}
details.eb-vraag > :not(summary){margin:0 0 15px}

/* ---- inhoudsopgave ---- */
.eb-artikel-zij{position:sticky; top:24px}
.admin-bar .eb-artikel-zij{top:56px}
.eb-inhoud{margin-bottom:28px}
.eb-inhoud-kop{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--leisteen-3); margin:0 0 12px;
}
.eb-inhoud ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--wp--preset--color--lijn)}
.eb-inhoud li{margin:0}
.eb-inhoud a{
	display:block; padding:6px 0 6px 15px; margin-left:-1px;
	border-left:2px solid transparent;
	font-size:15px; line-height:1.4; color:var(--wp--preset--color--leisteen-2);
	text-decoration:none;
}
.eb-inhoud a:hover{color:var(--wp--preset--color--leisteen)}
.eb-inhoud a[aria-current]{
	color:var(--wp--preset--color--blauw); font-weight:600;
	border-left-color:var(--wp--preset--color--blauw);
}

/* ---- kaart in de zijkolom ---- */
.eb-zijkaart{
	background:var(--wp--preset--color--wit);
	border:1px solid var(--wp--preset--color--lijn);
	border-radius:3px; padding:22px 22px 24px;
}
.eb-zijkaart p{margin:0 0 10px}
.eb-zijkaart-label{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase; color:var(--wp--preset--color--blauw);
}
.eb-zijkaart-kop{font-size:17px; font-weight:600; line-height:1.4; color:var(--wp--preset--color--leisteen)}
.eb-zijkaart-kop strong{font-variant-numeric:tabular-nums; white-space:nowrap}
.eb-zijkaart-tekst{font-size:15px; line-height:1.5; color:var(--wp--preset--color--leisteen-2)}
.eb-zijkaart-knop{margin:16px 0 12px}
.eb-zijkaart-knop a{
	display:block; text-align:center; padding:11px 18px;
	background:var(--wp--preset--color--blauw); color:var(--wp--preset--color--wit);
	font-weight:600; font-size:16px; border-radius:4px; text-decoration:none;
}
.eb-zijkaart-knop a:hover{background:var(--wp--preset--color--blauw-diep)}
.eb-zijkaart-hulp{font-size:14px; line-height:1.5; color:var(--wp--preset--color--leisteen-3); margin:0}

/* ---- auteur ---- */
.eb-auteur{
	display:flex; gap:20px; align-items:flex-start;
	margin-top:clamp(40px,5vw,64px); padding-top:26px;
	border-top:1px solid var(--wp--preset--color--lijn); max-width:680px;
}
.eb-auteur-foto{
	width:76px; height:76px; flex:none; border-radius:50%;
	object-fit:cover; filter:grayscale(1); display:block;
}
.eb-auteur-leeg{background:var(--wp--preset--color--lijn)}
.eb-auteur p{margin:0}
.eb-auteur-label{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--leisteen-3); margin-bottom:7px;
}
.eb-auteur-naam{font-size:18px; font-weight:600; line-height:1.3}
.eb-auteur-naam a{color:var(--wp--preset--color--leisteen); text-decoration:none}
.eb-auteur-naam a:hover{color:var(--wp--preset--color--blauw); text-decoration:underline}
.eb-auteur-rol{font-size:15px; color:var(--wp--preset--color--leisteen-3); margin-top:2px}
.eb-auteur-bio{font-size:15.5px; line-height:1.55; color:var(--wp--preset--color--leisteen-2); margin-top:10px; max-width:56ch}

/* Op een telefoon staat de zijkolom bóven het artikel: een inhoudsopgave
   ná de tekst helpt niemand. De kaart met de prijs valt daar weg – die
   staat onderaan de pagina toch al, en zou hier alleen de tekst wegduwen. */
@media (max-width:900px){
	.eb-artikel-kolommen{flex-wrap:wrap}
	.eb-artikel-zij{position:static; flex-basis:100%!important; order:-1}
	.eb-artikel-zij .eb-zijkaart{display:none}
	.eb-inhoud{
		margin:0 0 30px; padding:16px 20px 18px;
		background:var(--wp--preset--color--grond);
		border:1px solid var(--wp--preset--color--lijn); border-radius:3px;
	}
	.eb-artikel-inhoud h2{font-size:22px; margin-top:1.8em}
	.eb-auteur{gap:16px}
	.eb-auteur-foto{width:60px; height:60px}
}

/* ==================================================================
   Pakketpagina.
   Eén kolom met uitleg, één kolom met de prijs die meeloopt. De prijs
   mag nooit uit beeld zijn: dat is de vraag waarmee iemand hier komt.
   ================================================================== */

.eb-pakket-kop{padding-block:clamp(32px,4vw,52px) 0}
.eb-pakket-kop .is-style-eb-label{margin-bottom:10px}
.eb-pakket-kop h1{max-width:20ch; margin-left:0; margin-right:auto; text-wrap:balance}
.eb-pakket-inleiding{
	margin-top:16px; max-width:56ch; margin-left:0;
	font-size:19px; line-height:1.55; color:var(--wp--preset--color--leisteen-2);
}
.eb-pakket-inleiding a{display:none}

.eb-pakket-lijf{padding-block:clamp(28px,3.4vw,44px) clamp(40px,5vw,72px)}
.wp-block-columns.eb-pakket-kolommen{gap:clamp(32px,5vw,72px)!important; align-items:flex-start!important}
.eb-pakket-inhoud{min-width:0}
.eb-pakket-inhoud > *{max-width:680px}
.eb-pakket-inhoud p{font-size:17px; line-height:1.65; margin:0 0 1.15em}
.eb-pakket-inhoud h2{
	font-size:clamp(22px,2.2vw,27px); font-weight:700; letter-spacing:-.025em;
	line-height:1.2; margin:2em 0 .5em;
}
.eb-pakket-inhoud h2:first-child{margin-top:0}
.eb-pakket-inhoud h3{font-size:18px; font-weight:600; letter-spacing:-.015em; margin:1.6em 0 .35em}
.eb-pakket-inhoud :is(ul,ol){margin:0 0 1.15em; padding-left:1.25em}
.eb-pakket-inhoud li{font-size:17px; line-height:1.6; margin-bottom:.45em}
.eb-pakket-inhoud a{color:var(--wp--preset--color--blauw)}

/* ---- de prijskaart ---- */
.eb-pakket-zij{position:sticky; top:24px}
.admin-bar .eb-pakket-zij{top:56px}
.eb-prijskaart{
	background:var(--wp--preset--color--wit);
	border:1px solid var(--wp--preset--color--lijn);
	border-radius:3px; padding:24px 24px 26px;
}
.eb-prijskaart p{margin:0}
.eb-prijskaart-label{
	font-size:var(--wp--preset--font-size--label); font-weight:700;
	letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--blauw); margin-bottom:12px;
}
.eb-prijskaart-label .eb-merkje{margin-left:8px; vertical-align:1px}
.eb-prijskaart-bedrag{
	font-size:42px; font-weight:800; letter-spacing:-.035em; line-height:1;
	color:var(--wp--preset--color--blauw-diep);
	font-variant-numeric:tabular-nums; white-space:nowrap;
}
.eb-prijskaart-bedrag .eb-vanaf{
	font-size:16px; font-weight:600; letter-spacing:0; color:var(--wp--preset--color--leisteen-3);
}
.eb-prijskaart-eenheid{margin-top:5px; font-size:15px; color:var(--wp--preset--color--leisteen-3)}
.eb-prijskaart-samen{margin-top:3px; font-size:15px; color:var(--wp--preset--color--leisteen-3)}
.eb-prijskaart-knop{margin:20px 0 0}
.eb-prijskaart-knop a{
	display:block; text-align:center; padding:12px 18px;
	background:var(--wp--preset--color--blauw); color:var(--wp--preset--color--wit);
	font-weight:600; font-size:16.5px; border-radius:4px; text-decoration:none;
}
.eb-prijskaart-knop a:hover{background:var(--wp--preset--color--blauw-diep)}
.eb-prijskaart-punten{
	list-style:none; margin:20px 0 0; padding:18px 0 0;
	border-top:1px solid var(--wp--preset--color--lijn-zacht);
}
.eb-prijskaart-punten li{
	position:relative; padding-left:24px; margin-bottom:9px;
	font-size:15px; line-height:1.45; color:var(--wp--preset--color--leisteen-2);
}
.eb-prijskaart-punten li::before{
	content:""; position:absolute; left:2px; top:5px;
	width:11px; height:6px; border-left:2px solid var(--wp--preset--color--blauw);
	border-bottom:2px solid var(--wp--preset--color--blauw); transform:rotate(-45deg);
}
.eb-prijskaart-hulp{
	margin-top:16px; padding-top:14px;
	border-top:1px solid var(--wp--preset--color--lijn-zacht);
	font-size:14px; line-height:1.5; color:var(--wp--preset--color--leisteen-3);
}

/* ---- vergelijkingstabel ---- */
.eb-vergelijkblok{
	padding-block:clamp(40px,5vw,72px);
	border-top:1px solid var(--wp--preset--color--lijn);
	background:var(--wp--preset--color--wit);
}
.eb-vergelijk-inleiding{
	max-width:60ch; margin-left:0; margin-top:10px;
	font-size:17px; color:var(--wp--preset--color--leisteen-2);
}
.eb-vergelijk-omhulsel{margin-top:28px; overflow-x:auto}
.eb-vergelijk{width:100%; border-collapse:collapse; min-width:720px}
.eb-vergelijk th,.eb-vergelijk td{
	padding:13px 16px; text-align:center; vertical-align:middle;
	border-bottom:1px solid var(--wp--preset--color--lijn-zacht);
}
.eb-vergelijk thead th{vertical-align:bottom; padding-bottom:18px; border-bottom-color:var(--wp--preset--color--lijn)}
.eb-vergelijk tbody th{
	text-align:left; font-weight:400; font-size:16px;
	color:var(--wp--preset--color--leisteen-2); padding-left:0; width:34%;
}
.eb-vergelijk-naam{
	display:block; font-size:16px; font-weight:600; letter-spacing:-.01em;
	color:var(--wp--preset--color--leisteen);
}
.eb-vergelijk-prijs{
	display:block; margin-top:6px; font-size:22px; font-weight:700; letter-spacing:-.03em;
	color:var(--wp--preset--color--blauw-diep); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.eb-vergelijk-prijs .eb-vanaf{font-size:14px; font-weight:600; letter-spacing:0; color:var(--wp--preset--color--leisteen-3)}
.eb-vergelijk-eenheid{display:block; font-size:13px; color:var(--wp--preset--color--leisteen-3); margin-top:2px}
.eb-vergelijk .is-actief{background:var(--wp--preset--color--blauw-was)}
.eb-vergelijk .eb-ja,.eb-vergelijk .eb-nee{display:inline-block}
.eb-vergelijk .eb-ja{
	width:14px; height:8px; border-left:2.5px solid var(--wp--preset--color--blauw);
	border-bottom:2.5px solid var(--wp--preset--color--blauw);
	transform:rotate(-45deg) translateY(-2px);
}
.eb-vergelijk .eb-nee{width:14px; height:0; border-top:2px solid var(--wp--preset--color--lijn)}
.eb-vergelijk-actie td{padding-top:20px; border-bottom:0}
.eb-vergelijk-actie a{color:var(--wp--preset--color--blauw); font-size:15px; font-weight:600; text-decoration:none}
.eb-vergelijk-actie a:hover{text-decoration:underline}
.eb-vergelijk-hier{font-size:15px; color:var(--wp--preset--color--leisteen-3)}
.eb-verborgen{
	position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Op een telefoon staat de prijs bóven de uitleg: dat is waarvoor
   iemand de pagina opent. De vergelijkingstabel schuift zijwaarts. */
@media (max-width:900px){
	.eb-pakket-kolommen{flex-wrap:wrap}
	.eb-pakket-zij{position:static; flex-basis:100%!important; order:-1; margin-bottom:32px}
	.eb-pakket-inhoud h2{font-size:21px}
}

/* ---- beeld in de kop ----
   Een ondiepe strook rechts, die via een verloop in de paginakleur
   oplost. Geen decoratie om de decoratie: het geeft de pagina een
   gezicht zonder dat er iets van de tekst af gaat. */
.eb-artikel-kop,.eb-pakket-kop{position:relative; overflow:hidden}
.eb-kopbeeld{
	position:absolute; top:0; right:0; bottom:0; left:auto;
	width:42%; margin:0; z-index:0; pointer-events:none;
}
.eb-kopbeeld img{width:100%; height:100%; object-fit:cover; object-position:50% 46%; display:block}
.eb-kopbeeld::after{
	content:""; position:absolute; inset:0;
	background:
		linear-gradient(to bottom, rgba(250,250,250,0) 52%, var(--wp--preset--color--grond) 100%),
		linear-gradient(to right,
		var(--wp--preset--color--grond) 0%,
		rgba(250,250,250,.88) 14%,
		rgba(250,250,250,.30) 48%,
		rgba(250,250,250,0) 88%);
}
.eb-artikel-kop-binnen,.eb-pakket-kop-binnen{position:relative; z-index:1}
.eb-artikel-kop,.eb-pakket-kop{padding-bottom:clamp(24px,3vw,40px)}
@media (max-width:900px){ .eb-kopbeeld{display:none} }

/* ---- merken in de voet ---- */
.eb-voet-initiatief{
	margin:26px 0 10px!important; font-size:13px; letter-spacing:.06em;
	text-transform:uppercase; color:#8E9398;
}
.eb-kantoormerk svg{height:124px; width:auto; display:block}
.eb-kantoormerk{margin-bottom:30px}
.eb-voetslot{
	display:flex; flex-wrap:wrap; align-items:center;
	justify-content:space-between; gap:24px 40px; margin-top:6px;
}
.eb-voetslot p{font-size:14.5px; line-height:1.6; max-width:52ch; margin:0}
.eb-keurmerken{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.eb-keurmerk{background:#fff; border-radius:6px; padding:11px 15px; display:flex; align-items:center}
.eb-keurmerk img{height:auto; width:auto; max-height:32px; max-width:170px; display:block}
.eb-keurmerk img:hover{opacity:1}
@media (max-width:781px){
	.eb-voetslot{gap:20px}
	.eb-keurmerken{gap:24px}
	.eb-keurmerk img{max-height:38px}
}

/* ---- toegankelijkheid ---- */
.eb-overslaan{
	position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.eb-overslaan:focus{
	position:fixed; left:24px; top:8px; width:auto; height:auto; clip-path:none; z-index:99;
	background:var(--wp--preset--color--wit); padding:10px 16px;
	border:2px solid var(--wp--preset--color--blauw); border-radius:4px;
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }


/* Tekstpagina met smalle leeskolom */
.eb-tekstkolom{max-width:720px}
.eb-tekstkolom h2{margin-top:64px}
.eb-tekstkolom h3{margin-top:40px}
.eb-tekstkolom ul{padding-left:20px}
.eb-tekstkolom li{margin-bottom:8px}
.eb-bewaartabel{margin:28px 0}
.eb-bewaartabel table{width:100%; border-collapse:collapse}
.eb-bewaartabel th,.eb-bewaartabel td{text-align:left; padding:13px 20px 13px 0; border-bottom:1px solid var(--wp--preset--color--lijn); vertical-align:top}
.eb-bewaartabel thead th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--wp--preset--color--leisteen-2); font-weight:600}
.eb-bewaartabel td:last-child{white-space:normal; color:var(--wp--preset--color--leisteen-2)}

.eb-bewaartabel table,.eb-bewaartabel th,.eb-bewaartabel td{border:0}
.eb-bewaartabel th,.eb-bewaartabel td{border-bottom:1px solid var(--wp--preset--color--lijn)}
.eb-bewaartabel tr:last-child td{border-bottom:0}

/* Chatknop: laadt de chat pas als iemand er zelf op klikt */
.eb-chatknop{position:fixed; right:24px; bottom:24px; z-index:9998; padding:14px 24px; border:0; border-radius:4px; background:var(--wp--preset--color--blauw,#4A7D0C); color:#fff; font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; box-shadow:0 6px 22px rgba(42,69,96,.26); transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.eb-chatknop:hover{background:var(--wp--preset--color--blauw-diep,#2A4560); transform:translateY(-2px); box-shadow:0 10px 28px rgba(42,69,96,.32)}
.eb-chatknop:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#C3D65A); outline-offset:3px}
.eb-chatknop.is-laden{opacity:.65; cursor:progress; transform:none}
@media (max-width:600px){.eb-chatknop{right:16px; bottom:16px; padding:12px 20px; font-size:14px}}

/* Eigen cookiemelding */
.eb-cookiebalk{position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#fff; border-top:1px solid var(--wp--preset--color--lijn,#E0E2E5); box-shadow:0 -6px 26px rgba(42,69,96,.10); transition:transform .28s ease, opacity .28s ease}
.eb-cookiebalk.is-weg{transform:translateY(100%); opacity:0}
.eb-cookiebalk-binnen{max-width:1160px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; gap:20px 40px; flex-wrap:wrap}
.eb-cookiebalk p{margin:0; flex:1 1 420px; font-size:15px; line-height:1.55; color:var(--wp--preset--color--leisteen-2,#666D5E)}
.eb-cookieknoppen{display:flex; gap:12px; flex-wrap:wrap}
.eb-cookiebalk button{font-family:inherit; font-size:15px; font-weight:600; padding:11px 22px; border-radius:4px; cursor:pointer; border:1px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease}
.eb-knop-in{background:var(--wp--preset--color--blauw,#4A7D0C); color:#fff}
.eb-knop-in:hover{background:var(--wp--preset--color--blauw-diep,#2A4560)}
.eb-knop-uit{background:transparent; color:var(--wp--preset--color--leisteen-2,#666D5E); border-color:var(--wp--preset--color--lijn,#E0E2E5)}
.eb-knop-uit:hover{color:var(--wp--preset--color--blauw-diep,#2A4560); border-color:#C2C5C9}
.eb-cookiebalk button:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#C3D65A); outline-offset:2px}
body:has(.eb-cookiebalk) .eb-chatknop{bottom:124px}
.eb-cookies-opnieuw{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}
@media (max-width:720px){.eb-cookiebalk-binnen{padding:16px}.eb-cookieknoppen{width:100%}.eb-cookiebalk button{flex:1 1 auto}body:has(.eb-cookiebalk) .eb-chatknop{bottom:180px}}

.eb-voetkeuze{margin:22px 0 0!important; font-size:13px}
.eb-voetkeuze .eb-cookies-opnieuw{color:#8E9398}
.eb-voetkeuze .eb-cookies-opnieuw:hover{color:#fff}

/* Beoordelingen van Feedback Company */
.eb-beoordeling-balk{display:flex; align-items:center; min-height:22px}
.eb-beoordeling-balk iframe{border:0; max-width:100%}
.eb-beoordeling-zwevend{position:relative; z-index:9997}

.eb-beoordeling-balk .__fbcw__bar-widget__score{color:#fff!important}
.eb-beoordeling-balk .__fbcw__bar-widget__amount-of-reviews{color:#CED2D6!important}
.eb-beoordeling-balk .__fbcw__bar-widget__score,.eb-beoordeling-balk .__fbcw__bar-widget__amount-of-reviews{font-family:inherit!important}

/* Tariefregels: hele regel klikbaar, met terugkoppeling bij hover */
.eb-tarieven .eb-rij{position:relative; transition:background-color .15s ease}
.eb-tarieven .eb-actie a{position:static; display:inline-flex; align-items:baseline; gap:8px; text-decoration:none}
.eb-tarieven .eb-actie a::after{content:""; position:absolute; inset:0; z-index:1}
.eb-tarieven .eb-pijl{display:inline-block; transition:transform .18s ease}
.eb-tarieven .eb-rij:hover{background-color:var(--wp--preset--color--blauw-was,#F4F5F6)}
.eb-tarieven .eb-rij:hover h3{color:var(--wp--preset--color--blauw,#4A7D0C)}
.eb-tarieven .eb-rij:hover .eb-actie a{text-decoration:underline; text-underline-offset:3px}
.eb-tarieven .eb-rij:hover .eb-pijl{transform:translateX(4px)}
.eb-tarieven .eb-rij:has(a:focus-visible){outline:3px solid var(--wp--preset--color--blauw-licht,#C3D65A); outline-offset:2px}
.eb-tarieven .eb-rij:has(a:focus-visible) h3{color:var(--wp--preset--color--blauw,#4A7D0C)}

/* Ingangen: hele tegel klikbaar, met dezelfde terugkoppeling als de tariefregels */
.eb-deur a{position:static; text-decoration:none}
.eb-deur a::after{content:""; position:absolute; inset:0; z-index:1}
.eb-deur:hover h2{color:var(--wp--preset--color--blauw,#4A7D0C)}
.eb-deur:hover a{text-decoration:underline; text-underline-offset:3px}
.eb-deur:has(a:focus-visible){outline:3px solid var(--wp--preset--color--blauw-licht,#C3D65A); outline-offset:2px}
.eb-deur:has(a:focus-visible) h2{color:var(--wp--preset--color--blauw,#4A7D0C)}

/* Eerste vraag op de homepage: kan ik hier terecht? */
.eb-kernvraag-binnen{max-width:760px}
.eb-kernvraag h2{margin-top:6px}
.eb-voorwaarden{list-style:none; margin:26px 0 26px; padding:0}
.eb-voorwaarden li{position:relative; padding-left:34px; margin-bottom:14px; font-size:18px; line-height:1.6}
.eb-voorwaarden li::before{content:""; position:absolute; left:0; top:.72em; width:20px; height:2px; background:var(--wp--preset--color--blauw,#4A7D0C)}
.eb-kernvraag-link{margin-top:26px!important}
.eb-kernvraag-link a{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; font-weight:600}
.eb-kernvraag-link a:hover{text-decoration:underline; text-underline-offset:3px}
.eb-kernvraag-link .eb-pijl{display:inline-block; transition:transform .18s ease}
.eb-kernvraag-link a:hover .eb-pijl{transform:translateX(4px)}

/* Logo in de kop iets groter */
.eb-merk svg{height:52px}

/* Gravity Forms in de huisstijl */
.gform_wrapper *{font-family:inherit!important}
.gform_wrapper .gfield_label{display:block; font-size:16px; font-weight:600; color:var(--wp--preset--color--leisteen,#404B55); margin:0 0 8px}
.gform_wrapper .gfield_required{color:var(--wp--preset--color--blauw,#4A7D0C); margin-left:3px}
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]),.gform_wrapper textarea,.gform_wrapper select{width:100%!important; background:#fff!important; border:1px solid var(--wp--preset--color--lijn,#E4E6E8)!important; border-radius:4px!important; padding:12px 14px!important; min-height:46px; font-size:16px!important; line-height:1.5!important; color:var(--wp--preset--color--leisteen,#404B55)!important; box-shadow:none!important; transition:border-color .15s ease, box-shadow .15s ease}
.gform_wrapper textarea{min-height:150px; resize:vertical}
.gform_wrapper input:focus,.gform_wrapper textarea:focus,.gform_wrapper select:focus{border-color:var(--wp--preset--color--blauw,#4A7D0C)!important; outline:none!important; box-shadow:0 0 0 3px rgba(74,125,12,.18)!important}
.gform_wrapper .ginput_complex label,.gform_wrapper .gfield_description{font-size:14px!important; color:var(--wp--preset--color--leisteen-2,#6A7580)!important; font-weight:400!important}
.gform_wrapper .ginput_complex label{margin-top:6px; display:block}
.gform_wrapper .gsection{border-bottom:1px solid var(--wp--preset--color--lijn,#E4E6E8)!important; padding-bottom:10px; margin-top:20px}
.gform_wrapper .gsection_title{font-size:19px!important; font-weight:700!important; margin:0 0 4px!important; color:var(--wp--preset--color--leisteen,#404B55)}
.gform_wrapper .gform_footer{margin-top:28px!important; padding:0!important}
.gform_wrapper .gform_footer input[type=submit],.gform_wrapper .gform_footer button{background:var(--wp--preset--color--blauw,#4A7D0C)!important; color:#fff!important; border:0!important; border-radius:4px!important; padding:14px 30px!important; font-size:16px!important; font-weight:600!important; line-height:1.2!important; height:auto!important; width:auto!important; min-height:0!important; cursor:pointer; transition:background .15s ease}
.gform_wrapper .gform_footer input[type=submit]:hover{background:var(--wp--preset--color--blauw-diep,#2A4560)!important}
.gform_wrapper .gform_footer input[type=submit]:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#C3D65A)!important; outline-offset:3px}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error textarea{border-color:#C0392B!important}
.gform_wrapper .validation_message,.gform_wrapper .gfield_validation_message{color:#C0392B!important; font-size:14px!important; margin-top:6px; background:none!important; border:0!important; padding:0!important}
.gform_wrapper .gform_validation_errors{border:1px solid #C0392B!important; background:#FDF3F2!important; border-radius:4px!important; padding:14px 16px!important; margin-bottom:20px!important; box-shadow:none!important}

/* Meerstapsformulier: voortgangsbalk en knoppen */
.gform_wrapper .gf_progressbar_wrapper{margin-bottom:30px}
.gform_wrapper .gf_progressbar_title{font-size:14px!important; color:var(--wp--preset--color--leisteen-2,#6A7580)!important; font-weight:600!important; margin-bottom:8px!important}
.gform_wrapper .gf_progressbar{background:var(--wp--preset--color--lijn,#E4E6E8)!important; background-image:none!important; border:0!important; border-radius:999px!important; box-shadow:none!important; padding:0!important; height:8px!important; overflow:hidden}
.gform_wrapper .gf_progressbar_percentage{background:var(--wp--preset--color--blauw,#4A7D0C)!important; background-image:none!important; border-radius:999px!important; height:8px!important; box-shadow:none!important; text-indent:-9999px!important; overflow:hidden}
.gform_wrapper .gf_progressbar_percentage span{display:none!important}
.gform_wrapper .gfield_description,.gform_wrapper .gsection_description,.gform_wrapper .gfield_html{font-style:normal!important}
.gform_wrapper .gform_page_footer{margin-top:30px!important; display:flex; gap:12px; flex-wrap:wrap}
.gform_wrapper .gform_page_footer input[type=button],.gform_wrapper .gform_page_footer input[type=submit],.gform_wrapper .gform_page_footer button{background:var(--wp--preset--color--blauw,#4A7D0C)!important; color:#fff!important; border:1px solid var(--wp--preset--color--blauw,#4A7D0C)!important; border-radius:4px!important; padding:14px 30px!important; font-size:16px!important; font-weight:600!important; line-height:1.2!important; height:auto!important; width:auto!important; min-height:0!important; cursor:pointer; margin:0!important}
.gform_wrapper .gform_page_footer .gform_previous_button{background:transparent!important; color:var(--wp--preset--color--blauw,#4A7D0C)!important}
.gform_wrapper .gform_page_footer .gform_previous_button:hover{color:#fff!important}
.gform_wrapper .gform_page_footer input[type=button]:hover,.gform_wrapper .gform_page_footer input[type=submit]:hover,.gform_wrapper .gform_page_footer button:hover{background:var(--wp--preset--color--blauw-diep,#2A4560)!important; border-color:var(--wp--preset--color--blauw-diep,#2A4560)!important; color:#fff!important}

.gform_wrapper .gfield_description i,.gform_wrapper .gfield_description em,.gform_wrapper .gsection_description i,.gform_wrapper .gsection_description em{font-style:normal}

/* Prijstabellen */
.eb-prijstabellen{margin-top:8px}
.eb-prijsgroepen{display:flex; align-items:stretch; gap:18px; flex-wrap:wrap}
.eb-prijsgroep{flex:1 1 420px; min-width:300px; display:flex; flex-direction:column}
.eb-prijsgroep-met{flex:0 1 300px}
.eb-groeplabel{margin:0 0 14px!important; font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--wp--preset--color--leisteen-3,#98A2AB)}
.eb-pk-rij{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; flex:1}
.eb-groeppijl{display:flex; align-items:center; justify-content:center; align-self:center; width:44px; color:var(--wp--preset--color--leisteen-3,#98A2AB); font-size:26px; line-height:1; padding-top:22px}
.eb-pk{display:flex; flex-direction:column; background:#fff; border:1px solid var(--wp--preset--color--lijn,#E4E6E8); border-radius:14px; overflow:hidden; transition:border-color .15s ease, transform .15s ease}
.eb-pk:hover{border-color:var(--wp--preset--color--blauw-licht,#C3D65A); transform:translateY(-2px)}
.eb-pk.is-uitgelicht{border-color:var(--wp--preset--color--blauw,#4A7D0C)}
.eb-pk-kop{position:relative; background:var(--wp--preset--color--blauw-diep,#2A4560); color:#fff; padding:20px 22px 18px; text-align:center}
.eb-pk-kop h3{margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em; color:#fff}
.eb-pk-kop p{margin:4px 0 0; font-size:14px; color:#C3C9D0}
.eb-pk-merk{position:absolute; top:-1px; right:14px; background:var(--wp--preset--color--amber,#FFB20D); color:var(--wp--preset--color--amber-ink,#2B2413); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:0 0 6px 6px}
.eb-pk-prijs{background:var(--wp--preset--color--blauw-was,#F4F5F6); padding:20px 22px; text-align:center; border-bottom:1px solid var(--wp--preset--color--lijn,#E4E6E8)}
.eb-pk-vanaf{display:block; font-size:13px; color:var(--wp--preset--color--leisteen-2,#6A7580); margin-bottom:2px}
.eb-pk-bedrag{display:block; font-size:36px; font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--wp--preset--color--blauw-diep,#2A4560); font-variant-numeric:tabular-nums}
.eb-pk-pp{display:block; font-size:13px; color:var(--wp--preset--color--leisteen-2,#6A7580); margin-top:4px}
.eb-pk-lijst{list-style:none; margin:0; padding:22px 18px 6px; flex:1}
.eb-pk-lijst li{position:relative; padding-left:28px; margin-bottom:12px; font-size:15.5px; line-height:1.5}
.eb-pk-lijst li::before{content:""; position:absolute; left:2px; top:.42em; width:11px; height:6px; border-left:2px solid var(--wp--preset--color--blauw,#4A7D0C); border-bottom:2px solid var(--wp--preset--color--blauw,#4A7D0C); transform:rotate(-45deg)}
.eb-pk-streep{padding:0!important; margin:16px 0!important; height:1px; background:var(--wp--preset--color--lijn,#E4E6E8)}
.eb-pk-streep::before{display:none!important}
.eb-pk-knop{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 18px 20px; padding:12px 16px; border-radius:6px; background:var(--wp--preset--color--blauw,#4A7D0C); color:#fff!important; font-weight:600; font-size:15px; text-decoration:none; transition:background .15s ease}
.eb-pk-knop:hover{background:var(--wp--preset--color--blauw-diep,#2A4560)}
.eb-pk-knop .eb-pijl{transition:transform .18s ease}
.eb-pk:hover .eb-pk-knop .eb-pijl{transform:translateX(4px)}
.eb-pk-strook{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:22px; padding:18px 22px; background:#fff; border:1px solid var(--wp--preset--color--lijn,#E4E6E8); border-radius:14px; text-decoration:none; color:inherit; transition:border-color .15s ease, background .15s ease}
.eb-pk-strook:hover{border-color:var(--wp--preset--color--blauw-licht,#C3D65A); background:var(--wp--preset--color--blauw-was,#F4F5F6)}
.eb-pk-strook-tekst{font-size:15.5px; color:var(--wp--preset--color--leisteen-2,#6A7580)}
.eb-pk-strook-prijs{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:17px; color:var(--wp--preset--color--blauw,#4A7D0C); white-space:nowrap; font-variant-numeric:tabular-nums}
.eb-pk-strook:hover .eb-pijl{transform:translateX(4px)}
.eb-pk-strook .eb-pijl{transition:transform .18s ease}
@media (max-width:900px){.eb-groeppijl{width:100%; padding:6px 0; transform:rotate(90deg)}.eb-prijsgroep-met{flex:1 1 100%}}

.eb-groeppijl{flex:0 0 196px; width:196px; display:flex; align-items:center; justify-content:center; padding-top:26px}
.eb-groeppijl img{width:100%; height:auto; display:block; opacity:.8}
.eb-groeplabel{display:none}
@media (max-width:1100px){.eb-groeppijl{display:none}.eb-groeplabel{display:block}}

/* Uitklapmenu */
.wp-block-navigation__submenu-container{background:#fff!important; border:1px solid var(--wp--preset--color--lijn,#E4E6E8)!important; border-radius:10px!important; box-shadow:0 14px 34px rgba(42,69,96,.10)!important; padding:10px!important; min-width:330px!important; margin-top:10px!important}
.wp-block-navigation__submenu-container li{margin:0!important}
.wp-block-navigation__submenu-container a{display:block; padding:10px 14px!important; border-radius:6px; color:var(--wp--preset--color--leisteen,#404B55)!important; font-size:16px; font-weight:600; line-height:1.35; text-decoration:none!important; transition:background .12s ease, color .12s ease}
.wp-block-navigation__submenu-container a:hover{background:var(--wp--preset--color--blauw-was,#F4F5F6); color:var(--wp--preset--color--blauw,#4A7D0C)!important}
.wp-block-navigation__submenu-container .wp-block-navigation-item__description{display:block; margin-top:2px; font-size:13.5px; font-weight:400; color:var(--wp--preset--color--leisteen-2,#6A7580); white-space:normal}
.eb-submenu-slot{border-top:1px solid var(--wp--preset--color--lijn,#E4E6E8); margin-top:8px!important; padding-top:8px!important}

header.wp-block-template-part{position:relative; z-index:60}
.wp-block-navigation__submenu-container{z-index:70!important}
.wp-block-navigation-item__description{display:block!important; margin-top:2px; font-size:13.5px!important; font-weight:400!important; color:var(--wp--preset--color--leisteen-2,#6A7580)!important; white-space:normal!important; letter-spacing:0}

.wp-block-navigation__submenu-container a,.wp-block-navigation__submenu-container a.wp-block-navigation-item__content{display:block!important; white-space:normal!important}
.wp-block-navigation__submenu-container .wp-block-navigation-item__label{display:block; white-space:normal}

/* Brug over het gat tussen menu-item en uitklap, anders valt de muis erdoorheen */
.wp-block-navigation-item.has-child{position:relative}
.wp-block-navigation__submenu-container::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px; display:block}

/* Uitklap sluit met een kleine vertraging, zodat een schuine muisbeweging hem niet meteen dichtklapt */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container{transition:opacity .18s ease .22s, visibility 0s linear .40s}
.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container{transition:opacity .12s ease 0s, visibility 0s linear 0s}


/* ---- Stappenlijst (Hoe het werkt) ---------------------------------- */
.eb-stappenlijst{
	list-style:none;
	counter-reset:eb-stap;
	margin:2.4rem 0 0;
	padding:0;
	max-width:760px;
}
.eb-stappenlijst > li{
	counter-increment:eb-stap;
	position:relative;
	padding:0 0 2.2rem 76px;
	margin:0;
}
.eb-stappenlijst > li::before{
	content:counter(eb-stap);
	position:absolute;
	left:0;
	top:0;
	width:48px;
	height:48px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--wp--preset--color--blauw-was);
	color:var(--wp--preset--color--blauw-diep);
	font-weight:600;
	font-size:1.15rem;
	line-height:1;
	z-index:1;
}
.eb-stappenlijst > li::after{
	content:"";
	position:absolute;
	left:23.5px;
	top:56px;
	bottom:8px;
	width:2px;
	background:var(--wp--preset--color--lijn);
}
.eb-stappenlijst > li:last-child{padding-bottom:0}
.eb-stappenlijst > li:last-child::after{display:none}
.eb-stappenlijst > li > h3{
	margin:.55rem 0 .45rem;
	font-size:1.2rem;
	line-height:1.3;
	color:var(--wp--preset--color--blauw-diep);
}
.eb-stappenlijst > li > p{
	margin:0 0 .6rem;
	color:var(--wp--preset--color--leisteen);
	max-width:62ch;
}
.eb-stappenlijst > li > p:last-child{margin-bottom:0}
@media (max-width:600px){
	.eb-stappenlijst > li{padding-left:60px;padding-bottom:1.8rem}
	.eb-stappenlijst > li::before{width:40px;height:40px;font-size:1rem}
	.eb-stappenlijst > li::after{left:19.5px;top:48px}
}


/* ---- Persoonsblok (mediator, advocaat) ------------------------------ */
.eb-persoon{
	display:grid;
	grid-template-columns:260px 1fr;
	gap:40px;
	align-items:start;
	margin:2rem 0 0;
}
.eb-persoon img{
	width:100%;
	height:auto;
	border-radius:14px;
	display:block;
}
.eb-persoon .eb-persoon-naam{
	margin:1rem 0 .1rem;
	font-weight:600;
	color:var(--wp--preset--color--blauw-diep);
}
.eb-persoon .eb-persoon-rol{
	margin:0;
	font-size:.92rem;
	color:var(--wp--preset--color--leisteen-2);
}
.eb-persoon p{max-width:62ch}
.eb-persoon blockquote{
	margin:1.2rem 0;
	padding:0 0 0 20px;
	border-left:3px solid var(--wp--preset--color--blauw-was);
	font-size:1.05rem;
	line-height:1.6;
	color:var(--wp--preset--color--blauw-diep);
}
.eb-persoon blockquote p{margin:0}
@media (max-width:781px){
	.eb-persoon{grid-template-columns:1fr;gap:20px}
	.eb-persoon .eb-persoon-portret{max-width:220px}
}

/* ---- Video ---------------------------------------------------------- */
.eb-video{margin:2rem 0}
.eb-video video{
	width:100%;
	max-width:760px;
	height:auto;
	aspect-ratio:16/9;
	display:block;
	border-radius:14px;
	background:var(--wp--preset--color--blauw-diep);
}
.eb-video figcaption{
	margin-top:.6rem;
	font-size:.92rem;
	color:var(--wp--preset--color--leisteen-2);
}

/* ---- Weetjes (kleine kaartjes onder elkaar in een raster) ----------- */
.eb-weetjes{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:16px;
	margin:2rem 0 0;
	padding:0;
	list-style:none;
}
.eb-weetjes > li{
	margin:0;
	padding:22px 24px;
	background:#fff;
	border:1px solid var(--wp--preset--color--lijn);
	border-radius:14px;
}
.eb-weetjes h3{
	margin:0 0 .4rem;
	font-size:1.02rem;
	color:var(--wp--preset--color--blauw-diep);
}
.eb-weetjes p{
	margin:0;
	font-size:.96rem;
	line-height:1.6;
	color:var(--wp--preset--color--leisteen);
	max-width:none;
}

/* ---- De drie mediationkaarten -------------------------------------- */
.eb-mediationkaarten{margin:2rem 0 0}


/* De afsluiter staat op de homepage vol in de breedte; binnen een pagina
   zit hij in de tekstkolom en heeft hij dus zelf ruimte aan de zijkant nodig. */
.eb-pagina-lijf .eb-afsluiter{
	padding-left:40px;
	padding-right:40px;
	border-radius:18px;
}
@media (max-width:600px){
	.eb-pagina-lijf .eb-afsluiter{padding-left:24px;padding-right:24px}
}


/* Het aanvraagformulier mag breder dan de tekstkolom, maar niet zo breed
   dat een invulvak de hele pagina beslaat. */
.eb-formulierblok{max-width:820px}


/* Het kopbeeld is een lage strook; bij foto's waarvan het onderwerp laag in
   het kader zit, schuift de uitsnede mee. Per pagina, want het hangt aan de foto. */
body.page-id-2307 .eb-kopbeeld img{object-position:center 90%} /* strandhuisjes, tafel en bed */


/* De kopstrook was even hoog als de tekst links, dus bij een korte titel kreeg
   de foto rechts nauwelijks ruimte. Nu heeft elke pagina dezelfde kophoogte en
   staat de titel er verticaal in het midden. */
.eb-artikel-kop,
.eb-pakket-kop{
	min-height:290px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.eb-artikel-kop > .eb-artikel-kop-binnen,
.eb-pakket-kop > .eb-pakket-kop-binnen{
	width:100%;
}
@media (max-width:781px){
	.eb-artikel-kop,
	.eb-pakket-kop{min-height:0}
}


/* Het woordje "of" tussen de twee voorwaarden: geen opsommingsregel,
   maar een scharnier tussen de twee bullets. */
.eb-voorwaarden li.eb-of{
	list-style:none;
	padding-left:0;
	margin:.15rem 0 .15rem 34px;
	font-size:.94rem;
	font-style:normal;
	color:var(--wp--preset--color--leisteen-2);
}
.eb-voorwaarden li.eb-of::before,
.eb-voorwaarden li.eb-of::marker{content:none;display:none}

/* ---- Paginakop in een kader --------------------------------------- *
 * Een lijn rondom de tekst, en in de linkerbovenhoek aan de binnenkant
 * een blauw driehoekje dat de hoek vult: een klein tabje.
 * ------------------------------------------------------------------- */
.eb-artikel-kop-binnen,
.eb-pakket-kop-binnen{
	position:relative;
	width:fit-content;
	max-width:580px;
	/* op de lijn van de tekstkolom, niet tegen de rand van de band */
	margin-left:max(0px, calc((100% - 1084px) / 2)) !important;
	margin-right:auto !important;
	padding:28px 32px 28px 32px;
	border:2px solid var(--wp--preset--color--lijn);
	border-radius:16px;
	background:transparent;
	overflow:hidden;
}
.eb-artikel-kop-binnen::before,
.eb-pakket-kop-binnen::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:46px;
	height:46px;
	background:linear-gradient(135deg, var(--wp--preset--color--blauw) 0 50%, transparent 50% 100%);
	border-top-left-radius:14px;
	pointer-events:none;
}
.eb-artikel-kop-binnen > *:first-child,
.eb-pakket-kop-binnen > *:first-child{margin-top:0}
.eb-artikel-kop-binnen > *:last-child,
.eb-pakket-kop-binnen > *:last-child{margin-bottom:0}
@media (max-width:900px){
	.eb-artikel-kop-binnen,
	.eb-pakket-kop-binnen{max-width:none;padding:24px 22px 22px 24px;border-radius:14px}
	.eb-artikel-kop-binnen::before,
	.eb-pakket-kop-binnen::before{width:36px;height:36px;border-top-left-radius:12px}
}

/* ---- Wat er op een telefoon anders moet -------------------------- *
 * Nagelopen op 390px en 768px, 24 augustus 2026.
 * ------------------------------------------------------------------ */

/* De knop "Aanvragen" brak op tabletbreedte middenin het woord af. */
header.wp-block-template-part .wp-block-button__link{
	white-space:nowrap;
}

/* Twee zwevende dingen over de inhoud is er een te veel. Het cijfer
   staat ook al in de balk bovenaan, dus het blokje kan hier weg. De grens
   ligt op 781px: daar klapt het menu ook in, en tot die breedte vult de
   inhoud het scherm zo ver dat het blokje er altijd overheen valt. */
@media (max-width:781px){
	.eb-beoordeling-zwevend{display:none}
}

@media (max-width:600px){

	/* De chatknop iets kleiner en verder in de hoek, zodat hij minder
	   over knoppen in de inhoud valt. */
	.eb-chatknop{
		right:12px;
		bottom:12px;
		padding:10px 16px;
		font-size:.92rem;
	}

	/* Het label "Meest gekozen" lag over de kop van het Pluspakket.
	   Op deze breedte staat het boven de kaart in plaats van erop. */
	.eb-pk{overflow:visible}
	.eb-pk-merk{
		position:static;
		display:block;
		width:fit-content;
		margin:0 auto 10px;
		transform:none;
	}
	.eb-pk-kop{padding-top:16px}
}

/* WordPress klapt het menu pas in onder 600px. Tussen 600 en 900 past het
   niet op een regel: het viel uiteen in "Hoe het / werkt" en "Over het /
   kantoor". Daarom loopt de hamburger hier door tot 900px. */
@media (max-width:900px){
	header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open){
		display:none;
	}
	header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown){
		display:flex;
	}
	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open{
		display:flex;
	}
	header.wp-block-template-part .wp-block-navigation__responsive-container-close{
		display:block;
	}
}

/* ---- Disclaimer onder elk kennisartikel --------------------------- *
 * Staat in templates/single.html, dus automatisch onder elk artikel.
 * Kleur is --leisteen-2 en niet --leisteen-3: lichter dan de lopende
 * tekst, maar met genoeg contrast om nog echt leesbaar te zijn.
 * ------------------------------------------------------------------- */
.eb-disclaimer,
.eb-artikel-inhoud p.eb-disclaimer{
	max-width:680px;
	margin:2.6rem 0 0;
	padding-top:1.1rem;
	border-top:1px solid var(--wp--preset--color--lijn);
	font-size:.92rem;
	line-height:1.6;
	color:var(--wp--preset--color--leisteen-2);
}

/* Secties sluiten op elkaar aan.
   WordPress zet standaard 24px tussen de blokken op het hoogste niveau. Hebben twee
   secties naast elkaar een eigen achtergrondkleur, dan zie je in die 24px de grijze
   paginaondergrond doorschemeren als een dun streepje. De secties hebben zelf al
   ruimte van binnen, dus die naad hoort er niet te zijn. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer{margin-block-start:0}
body.home main.wp-block-group > *{margin-block-start:0}
.eb-afsluiter{margin-block-start:0!important}


/* Beeld in de lopende tekst: zelfde afronding als de kaarten, bijschrift eronder
   in de secundaire kleur. */
.eb-inline-beeld img{border-radius:14px; display:block}
.eb-inline-beeld figcaption{margin-top:10px; font-size:15px; color:var(--wp--preset--color--leisteen-2); line-height:1.5}


/* ------------------------------------------------------------------
   Horizon. De nieuwe vormgeving, vastgelegd in claude/besluit-horizon.md.
   Alles staat onder .hz, zodat het naast de bestaande stijlen kan draaien
   zolang niet elke pagina is omgezet.
   ------------------------------------------------------------------ */

.hz{
  --navy:#314D68; --kaart:#3B5A78; --spook:#466684; --ink:#243B52;
  --flash:#99AF3B; --merk:#4A7D0C; --merknavy:#2A4560;
  --wit:#fff; --stap:#F4F5F6; --spooklicht:#E2E5E8; --warmgrijs:#EBE9E8;
  --body:#505153; --body2:#5A5E63;
  --opdonker:#E0E4E7; --lead:#CBCFD3; --body-d:#BDC2C8; --bij:#BCC3CA; --bij2:#C6CCD2; --label:#B5C94A;
}
.hz, .hz *{box-sizing:border-box}
.hz{margin:0;background:var(--wit);color:var(--body);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.hz img{max-width:100%;display:block}
.hz h1, .hz h2, .hz h3, .hz h4{margin:0;text-wrap:balance}
.hz p{margin:0;text-wrap:pretty}
.hz a{color:inherit}
.hz{--pad:48px}
.hz .binnen{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}


/* ---------- navigatie ---------- */
.hz-nav{position:absolute;top:0;left:0;right:0;z-index:5;
  background:rgba(49,77,104,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12)}
.hz-nav .rij{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.hz .merkblok{display:flex;align-items:center;gap:12px;color:#fff}
.hz .merkplek{width:38px;height:38px;border-radius:9px;border:1.5px dashed rgba(255,255,255,.45);
  display:grid;place-items:center;font-size:8.5px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-align:center;line-height:1.1}
.hz .merknaam{font-size:15px;line-height:1.15;font-weight:600}
.hz .merknaam span{display:block;font-weight:400;font-size:12.5px;color:var(--bij2)}
.hz .menu{display:flex;align-items:center;gap:26px}
.hz .menu a{font-size:14.5px;font-weight:500;color:var(--opdonker);text-decoration:none}
.hz .menu a:hover{color:#fff}
.hz .taal{font-size:12px;font-weight:600;color:#72B439}
.hz .pil{display:inline-block;border-radius:999px;font-weight:700;text-decoration:none;text-align:center}
.hz .pil-blauw{background:var(--flash);color:var(--ink);padding:11px 22px;font-size:14.5px}
.hz .hamburger{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;
  color:#fff;padding:8px 12px;font-size:14px}


/* ---------- hero ---------- */
.hz-hero{position:relative;min-height:700px;display:flex;align-items:center;background-color:#314D68;
  background-image:url(/wp-content/uploads/2019/01/echtscheiding-header.jpg);
  background-size:cover;background-position:center 40%}
.hz-hero > .scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(49,77,104,.96) 0%,rgba(49,77,104,.86) 42%,rgba(49,77,104,.35) 78%,rgba(49,77,104,.5) 100%)}
.hz-hero > .binnen{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:56px;align-items:center;
  padding-top:136px;padding-bottom:68px;width:100%}
.hz .pil-label{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;padding:7px 14px 7px 10px;font-size:12.5px;font-weight:600;color:#D7DBE0}
.hz .pil-label i{width:7px;height:7px;border-radius:50%;background:var(--flash);display:block}
.hz h1{font-size:62px;line-height:1;font-weight:700;letter-spacing:-.03em;color:#fff;max-width:18ch;margin-top:22px}
.hz .lead{font-size:19px;line-height:1.6;color:var(--lead);max-width:40ch;margin-top:16px}
.hz .knoprij{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.hz-btn{background:var(--flash);color:var(--ink);padding:18px 34px;border-radius:999px;
  font-weight:700;font-size:16.5px;text-decoration:none;box-shadow:0 14px 40px rgba(153,175,59,.4);display:inline-block}
.hz .tekstlink{color:#fff;text-decoration:none;font-size:16px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}


/* ---------- glas ---------- */
.hz-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 30px 70px rgba(8,13,17,.5)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hz-glass{background:rgba(23,36,49,.92)}
.hz-glass-soft{background:rgba(23,36,49,.85)}
.hz .pil-label{background:rgba(23,36,49,.8)}
.hz-nav{background:rgba(49,77,104,.9)}

}
.hz-glass-soft{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}


/* ---------- check ---------- */
.hz .check{padding:26px}
.hz .check .label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.hz .check h2{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:8px;line-height:1.2}
.hz .vraag{margin-top:20px}
.hz .vraag p{font-size:14.5px;color:var(--opdonker);margin-bottom:10px}
.hz .keuze{display:flex;gap:10px}
.hz .keuze button{font-family:inherit;font-size:14.5px;font-weight:600;padding:11px 26px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:var(--opdonker);cursor:pointer;
  min-height:44px;transition:background .15s,border-color .15s,color .15s}
.hz .keuze button[aria-pressed="true"]{background:var(--flash);border-color:var(--flash);color:var(--ink)}
.hz .keuze button:focus-visible, .hz-btn:focus-visible, .hz a:focus-visible{outline:2px solid var(--flash);outline-offset:2px}
.hz .uitkomst{margin-top:22px;padding:15px 17px;border-radius:8px;font-size:14.5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--opdonker)}
.hz .uitkomst strong{display:block;font-size:15.5px;margin-bottom:5px}
.hz .uitkomst.ja{background:rgba(102,196,120,.14);border-color:rgba(102,196,120,.4);color:#B8ECC2}
.hz .uitkomst.nee{background:rgba(233,167,94,.14);border-color:rgba(233,167,94,.4);color:#F2D3AC}
.hz .kleineletter{font-size:13.5px;color:#ADB4BB;margin-top:12px}


/* ---------- stedenstrip ---------- */
.hz .strip{background:var(--flash);padding:16px 0;overflow:hidden}
.hz .spoor{display:inline-flex;align-items:center;gap:30px;padding-left:30px;white-space:nowrap;
  animation:marquee 42s linear infinite;will-change:transform}
.hz .spoor span{font-size:15px;font-weight:600;color:var(--ink)}
.hz .spoor i{width:5px;height:5px;border-radius:50%;background:rgba(36,59,82,.4);display:inline-block}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){.hz .spoor{animation:none}
}


/* ---------- secties ---------- */
.hz .sectie{padding:80px 0}
.hz .donker{background:var(--navy)}
.hz .label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.hz .donker h2, .hz .licht h2{font-size:52px;line-height:1.02;font-weight:700;letter-spacing:-.04em;margin-top:14px;max-width:18ch}
.hz .donker h2{color:#fff}
.hz .licht h2{color:var(--merknavy)}
.hz .licht .label{color:var(--merk)}
.hz .sectielead{margin-top:16px;font-size:19px;max-width:60ch}
.hz .donker .sectielead{color:var(--lead)}
.hz .licht .sectielead{color:var(--body2)}


/* ---------- routing ---------- */
.hz .routing{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.hz .route{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:var(--kaart);
  display:flex;flex-direction:column;text-decoration:none}
.hz .route .balk{background:var(--merk);padding:15px 28px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hz .route .beeld{height:150px;background-size:cover;background-position:center}
.hz .route .lijf{padding:28px;display:flex;flex-direction:column;flex:1}
.hz .route h3{font-size:27px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.15}
.hz .route p{font-size:15.5px;color:var(--body-d);margin-top:12px}
.hz .route .meer{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--flash)}
.hz .route:hover .meer{text-decoration:underline;text-underline-offset:3px}


/* ---------- stappen ---------- */
.hz .stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.hz .stap{position:relative;min-height:230px;border-radius:12px;overflow:hidden;background:var(--stap);padding:26px}
.hz .stap:last-child{background:var(--navy)}
.hz .stap .nr{position:absolute;right:-6px;bottom:-28px;font-size:110px;font-weight:700;letter-spacing:-.06em;
  line-height:1;color:var(--spooklicht)}
.hz .stap:last-child .nr{color:var(--spook)}
.hz .stap .inhoud{position:relative}
.hz .stap h4{font-size:19px;line-height:1.3;font-weight:700;color:var(--merknavy)}
.hz .stap p{font-size:15px;margin-top:10px;color:var(--body2)}
.hz .stap:last-child h4{color:#fff}
.hz .stap:last-child p{color:var(--body-d)}


/* ---------- tarieven ---------- */
.hz .tarieven{position:relative;overflow:hidden}
.hz .gloed{position:absolute;top:-160px;left:50%;width:min(900px,150vw);max-width:150vw;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(140,180,220,.22) 0%,rgba(140,180,220,0) 70%);pointer-events:none}
.hz .tarieven .binnen{position:relative}
.hz .pakketten{display:grid;grid-template-columns:1fr 1fr 190px 1fr;gap:20px;align-items:stretch;margin-top:44px}
.hz .pk{display:flex;flex-direction:column;border-radius:14px;overflow:hidden}
.hz .pk .kop{padding:22px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}
.hz .pk .kop b{display:block;font-size:19px;font-weight:700;color:#fff}
.hz .pk .kop span{display:block;font-size:13px;color:var(--bij);margin-top:3px}
.hz .pk .prijs{padding:24px;text-align:center}
.hz .pk .prijs .bedrag{font-size:40px;font-weight:700;letter-spacing:-.035em;color:#fff;line-height:1}
.hz .pk .prijs .vanaf{font-size:16px;font-weight:500;color:var(--bij);margin-right:6px}
.hz .pk .prijs .pp{display:block;font-size:13px;color:var(--bij);margin-top:6px}
.hz .pk ul{list-style:none;margin:0;padding:0 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.hz .pk li{display:flex;gap:10px;font-size:14.5px;color:#D0D4D8;line-height:1.45}
.hz .pk li::before{content:"✓";color:var(--flash);font-weight:700;flex:none}
.hz .pk li.streep{display:block;height:1px;background:rgba(255,255,255,.12);padding:0;margin:5px 0}
.hz .pk li.streep::before{content:none}
.hz .pk .knop{margin:22px 24px 24px;padding:13px;border-radius:999px;text-align:center;font-weight:700;
  font-size:14.5px;text-decoration:none;border:1.5px solid rgba(255,255,255,.3);color:#fff}
.hz-card-featured{border:1px solid rgba(153,175,59,.6);
  background:linear-gradient(180deg,rgba(153,175,59,.22) 0%,rgba(153,175,59,.06) 100%);
  box-shadow:0 24px 60px rgba(153,175,59,.28)}
.hz-card-featured .strip-top{background:var(--flash);padding:8px;text-align:center;font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hz-card-featured .prijs .bedrag{font-size:44px}
.hz-card-featured li{color:#E7EBEE}
.hz-card-featured li::before{color:#C9DB7A}
.hz-card-featured .knop{background:var(--flash);color:var(--ink);border-color:var(--flash)}
.hz .annotatie{display:flex;flex-direction:column;justify-content:space-between;padding:40px 0 48px;text-align:center}
.hz-note{font-family:Caveat,cursive;font-size:28px;line-height:1.15;color:var(--bij2)}
.hz .tussenkop{display:none}
.hz .extra{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.hz .extra div{border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  padding:18px 22px;font-size:15px;color:var(--body-d)}
.hz .extra b{color:#fff}


/* ---------- citaat ---------- */
.hz .citaat{position:relative;min-height:420px;display:flex;align-items:center;
  background-color:var(--navy);background-size:cover;background-position:center 60%}
.hz .citaat .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(49,77,104,.94) 0%,rgba(49,77,104,.8) 55%,rgba(49,77,104,.4) 100%)}
.hz .citaat .binnen{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center;
  padding-top:64px;padding-bottom:64px;width:100%}
.hz .citaat blockquote{margin:0;font-size:34px;line-height:1.25;font-weight:700;letter-spacing:-.03em;color:#fff}
.hz .citaat cite{display:block;font-style:normal;font-size:14px;color:var(--bij2);margin-top:18px}
.hz .stats{display:flex;flex-direction:column;gap:14px}
.hz .stat{display:flex;align-items:baseline;gap:14px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px 22px}
.hz .stat b{font-size:32px;font-weight:700;color:#fff;line-height:1}
.hz .stat span{font-size:13px;color:var(--body-d)}


/* ---------- kennisbank ---------- */
.hz .kb{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.hz .kb a{border:1px solid #E4E6E8;border-radius:12px;padding:24px;text-decoration:none;background:var(--wit);
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.hz .kb a:hover{border-color:var(--merk);transform:translateY(-2px)}
.hz .kb h3{font-size:19px;font-weight:700;color:var(--merknavy);line-height:1.3}
.hz .kb p{font-size:15px;color:var(--body2);margin-top:10px}
.hz .kb .meer{margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;color:var(--merk)}


/* ---------- slot ---------- */
.hz .slot{background:var(--flash);padding:80px 0}
.hz .slot .binnen{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.hz .slot h2{font-size:54px;line-height:1.05;font-weight:700;letter-spacing:-.04em;color:var(--ink);max-width:16ch}
.hz .slot p{font-size:18px;color:#1E3247;opacity:.85;margin-top:14px;max-width:46ch}
.hz .slot .rechts{text-align:right}
.hz .slot .knop{background:var(--ink);color:#fff;padding:18px 34px;border-radius:999px;font-weight:700;
  font-size:16.5px;text-decoration:none;display:inline-block;box-shadow:0 16px 40px rgba(36,59,82,.3)}
.hz .slot .onder{display:block;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}



/* ---------- topbalk met beoordeling ---------- */
.hz .topbalk{background:#243B52;color:#CBCFD3;font-size:13px;position:relative;z-index:6}
.hz .topbalk .binnen{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:9px;flex-wrap:wrap}
.hz .topbalk a{color:#E0E4E7;text-decoration:none}
.hz .topbalk a:hover{text-decoration:underline}
.hz .sterren{display:inline-flex;align-items:center;gap:8px}
.hz .sterren .ster{color:#FFB20D;letter-spacing:1px;font-size:13px}
.hz .sterren b{color:#fff;font-weight:700}


/* ---------- zwevende beoordeling ---------- */
.hz .zwevend{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #E4E6E8;border-radius:12px;padding:10px 14px;
  box-shadow:0 10px 30px rgba(36,59,82,.14);font-size:13px;color:var(--body);text-decoration:none}
.hz .zwevend b{font-size:19px;color:var(--merknavy);line-height:1}
.hz .zwevend .ster{color:#FFB20D;font-size:12px;letter-spacing:1px;display:block}
.hz .zwevend span{line-height:1.25}


/* ---------- voet ---------- */
.hz .voet{background:var(--merknavy);color:#CBCFD3;padding:64px 0 0}
.hz .voet .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.hz .voet h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:16px}
.hz .voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hz .voet a{color:#E0E4E7;text-decoration:none;font-size:15px}
.hz .voet a:hover{text-decoration:underline;text-underline-offset:3px}
.hz .voet address{font-style:normal;font-size:15px;line-height:1.6;color:#BDC2C8;margin-top:14px}
.hz .voetmerk{display:flex;align-items:center;gap:12px;color:#fff}
.hz .voetmerk .merkplek{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.75)}
.hz .voetkeur{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.hz .keurmerk{border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 12px;font-size:11.5px;
  color:var(--bij2);line-height:1.3}
.hz .voetregel{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding:20px 0 28px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--bij)}


/* ---------- beweging op de pakketten ---------- */
.hz .pk{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.hz .pk:hover{transform:translateY(-6px)}
.hz-glass-soft:hover{border-color:rgba(153,175,59,.55);box-shadow:0 22px 50px rgba(8,13,17,.45)}
.hz-card-featured:hover{box-shadow:0 32px 74px rgba(153,175,59,.4)}
.hz .pk .knop{transition:background .18s ease, color .18s ease, border-color .18s ease}
.hz .pk:hover .knop{border-color:var(--flash);background:var(--flash);color:var(--ink)}
.hz .route{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.hz .route:hover{transform:translateY(-4px);border-color:rgba(153,175,59,.5)}
@media (prefers-reduced-motion:reduce){.hz .pk, .hz .route, .hz .pk .knop{transition:none}
.hz .pk:hover, .hz .route:hover{transform:none}

}


/* ---------- responsive ---------- */
@media (max-width:1100px){.hz{--pad:32px}
.hz .pakketten{grid-template-columns:1fr 1fr}
.hz .annotatie{display:none}
.hz .stappen{grid-template-columns:1fr 1fr}
.hz-hero > .binnen{grid-template-columns:minmax(0,1fr) 380px;gap:36px}
.hz h1{font-size:50px}
.hz .donker h2, .hz .licht h2{font-size:42px}
.hz .kb{grid-template-columns:1fr 1fr}
.hz .voet .kolommen{grid-template-columns:1fr 1fr;gap:32px}

}
@media (max-width:900px){.hz .routing{grid-template-columns:1fr}
.hz-hero > .binnen{grid-template-columns:1fr}
.hz-hero{min-height:0}
.hz .check{margin-top:8px}

}
@media (max-width:768px){.hz{--pad:20px}
.hz .menu{display:none}
.hz .hamburger{display:block}
.hz-hero{background-position:center 30%}
.hz-hero > .scrim{background:linear-gradient(180deg,rgba(49,77,104,.5) 0%,rgba(49,77,104,.96) 60%,rgba(49,77,104,.96) 100%)}
.hz-hero > .binnen{padding-top:120px;padding-bottom:44px}
.hz h1{font-size:38px}
.hz .lead{font-size:17px}
.hz .donker h2, .hz .licht h2{font-size:32px}
.hz .sectielead{font-size:17px}
.hz .sectie{padding:56px 0}
.hz .spoor{animation-duration:32s}
.hz .route .beeld{height:120px}
.hz .route h3{font-size:22px}
.hz .stappen{grid-template-columns:1fr}
.hz .stap{min-height:0}
.hz .stap .nr{font-size:84px;bottom:-20px}
.hz .pakketten{grid-template-columns:1fr;gap:16px}
.hz .pk-plus{order:1}
.hz .pk-basis{order:2}
.hz .pk-med{order:3}
.hz .tussenkop{display:block;font-family:Caveat,cursive;font-size:24px;color:var(--bij2);text-align:center;margin-top:10px}
.hz .tk-1{order:0}
.hz .tk-2{order:2}
.hz .extra{grid-template-columns:1fr}
.hz .citaat .binnen{grid-template-columns:1fr;gap:32px}
.hz .citaat blockquote{font-size:24px}
.hz .stats{flex-direction:row;gap:10px;flex-wrap:wrap}
.hz .stat{flex-direction:column;align-items:flex-start;gap:4px;padding:14px;flex:1 1 30%;min-width:0}
.hz .stat b{font-size:24px}
.hz .stat span{font-size:12px;overflow-wrap:anywhere}
.hz .kb{grid-template-columns:1fr}
.hz .voet .kolommen{grid-template-columns:1fr 1fr;gap:28px}
.hz .voet .kolommen > div:first-child{grid-column:1 / -1}
.hz .zwevend{display:none}
.hz .topbalk{font-size:12px}
.hz .topbalk .binnen{justify-content:center;gap:12px}
.hz .slot{padding:56px 0}
.hz .slot .binnen{flex-direction:column;align-items:stretch}
.hz .slot h2{font-size:34px}
.hz .slot .rechts{text-align:left}
.hz .slot .knop{display:block;text-align:center}
.hz-btn{display:block;text-align:center;width:100%}
.hz .knoprij{gap:16px}

}

/* Horizon: correcties */
.hz .hz-nav svg{height:46px;width:auto;display:block}
@media (max-width:768px){.hz .hz-nav svg{height:38px}}
.hz .voet svg{height:30px;width:auto;display:block}

/* Horizon: uitklapmenu op de telefoon */
@media (max-width:768px){
.hz .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
  background:rgba(49,77,104,.98);padding:6px 20px 18px;border-top:1px solid rgba(255,255,255,.12)}
.hz .menu.open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;color:#E0E4E7}
.hz .menu.open .taal{padding:14px 0}
.hz .menu.open a.pil{margin-top:14px;border-bottom:0;text-align:center;color:var(--ink)}
}

/* Horizon: de twee ingangen op een lichte ondergrond.
   De kop, de foto en deze sectie waren alle drie donkerblauw; dat werd te zwaar. */
.hz .zacht{background:var(--stap)}
.hz .zacht .route{background:var(--wit);border:1px solid #E4E6E8;box-shadow:0 12px 34px rgba(36,59,82,.07)}
.hz .zacht .route h3{color:var(--merknavy)}
.hz .zacht .route p{color:var(--body2)}
.hz .zacht .route .meer{color:var(--merk)}
.hz .zacht .route:hover{border-color:var(--merk);box-shadow:0 18px 44px rgba(74,125,12,.16)}

/* Horizon: de uitlegvideo met taalkeuze */
.hz .hz-video{max-width:860px;margin:56px auto 0}
.hz .hz-video-keuze{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.hz .hz-video-keuze button{font-family:inherit;font-size:14px;font-weight:600;padding:9px 20px;border-radius:999px;
  border:1px solid #DCDEE0;background:var(--wit);color:var(--body2);cursor:pointer;min-height:44px;
  transition:background .15s,border-color .15s,color .15s}
.hz .hz-video-keuze button:hover{border-color:var(--merk);color:var(--merk)}
.hz .hz-video-keuze button.aan{background:var(--merk);border-color:var(--merk);color:#fff}
.hz .hz-video video{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:14px;background:var(--navy);
  box-shadow:0 18px 50px rgba(36,59,82,.12)}
.hz .hz-video-bij{margin-top:12px;font-size:15px;color:var(--body2);text-align:center}
@media (max-width:768px){.hz .hz-video{margin-top:36px}}

/* Horizon: vijf stappen in plaats van vier, met kortere koppen */
.hz .stappen{grid-template-columns:repeat(5,1fr);gap:16px}
.hz .stap{padding:22px 20px;min-height:250px}
.hz .stap h4{font-size:18px}
.hz .stap p{font-size:14.5px}
.hz .stap .nr{font-size:92px;right:-4px;bottom:-22px}
@media (max-width:1100px){.hz .stappen{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (max-width:768px){.hz .stappen{grid-template-columns:1fr}
.hz .stap{min-height:0}}

/* Voet: lijsten links uitlijnen met de kop erboven.
   De opsommingen stonden 40px ingesprongen door de standaard ul-vulling. */
.eb-voet ul{list-style:none;padding-left:0;margin-left:0}
.eb-voet ul li{padding-left:0;margin-left:0}

/* ------------------------------------------------------------------
   Proef: paginakop over de volle breedte, in de trant van de homepage.
   Voorlopig alleen op 'Hoe het werkt' (pagina 1832). Bevalt het, dan gaat
   deze regel naar alle pagina's en kan het oude kader met het driehoekje weg.
   ------------------------------------------------------------------ */
body.page-id-1832 .eb-artikel-kop{
  position:relative;display:flex;align-items:center;min-height:clamp(300px,30vw,420px);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto;max-width:none;
  padding:0;background:#314D68;overflow:hidden}
body.page-id-1832 .eb-kopbeeld{position:absolute;inset:0;width:100%;max-width:none;height:100%;margin:0;z-index:0}
body.page-id-1832 .eb-kopbeeld img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
body.page-id-1832 .eb-kopbeeld::after{content:none}
body.page-id-1832 .eb-artikel-kop::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(49,77,104,.94) 0%,rgba(49,77,104,.84) 42%,rgba(49,77,104,.42) 78%,rgba(49,77,104,.58) 100%)}
body.page-id-1832 .eb-artikel-kop-binnen{position:relative;z-index:2;
  width:100%;max-width:1084px;margin:0 auto;padding:56px 0}
body.page-id-1832 .eb-artikel-kop-binnen::before,
body.page-id-1832 .eb-artikel-kop-binnen::after{content:none}
body.page-id-1832 .eb-artikel-kop h1{color:#fff;margin:0;max-width:20ch;
  font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-.03em}
@media (max-width:1224px){body.page-id-1832 .eb-artikel-kop-binnen{padding-inline:clamp(18px,4vw,32px)}}
@media (max-width:900px){
body.page-id-1832 .eb-kopbeeld{display:block}
body.page-id-1832 .eb-artikel-kop-binnen{padding-block:40px}
body.page-id-1832 .eb-artikel-kop::after{background:linear-gradient(180deg,rgba(49,77,104,.45) 0%,rgba(49,77,104,.9) 62%,rgba(49,77,104,.94) 100%)}
}

/* ------------------------------------------------------------------
   Horizon: de kop op de vervolgpagina's, plus het uitklapmenu onder Tarieven.
   Zelfde component als op de homepage; daar zweeft de balk over de foto,
   hier staat hij op een egale donkere band.
   ------------------------------------------------------------------ */
.hz .hz-nav-vast{position:relative;background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
.hz .menu-item{position:relative;display:inline-flex;align-items:center}
.hz .menu-item > a{font-size:14.5px;font-weight:500;color:var(--opdonker);text-decoration:none;
  padding-bottom:4px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.hz .menu-item > a:hover{color:#fff}
.hz .menu-item.is-actief > a{color:#fff;border-bottom-color:var(--flash)}

/* Het uitklapmenu. De padding bovenaan is de onzichtbare brug over het gat,
   anders valt de muis erdoorheen en klapt het meteen weer dicht. */
.hz .submenu{position:absolute;left:-18px;top:100%;padding-top:18px;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .25s}
.hz .menu-item.heeft-sub:hover .submenu,
.hz .menu-item.heeft-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hz .submenu-binnen{background:var(--kaart);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 30px 70px rgba(8,13,17,.5);padding:10px;min-width:340px;display:flex;flex-direction:column}
.hz .submenu-binnen a{display:block;padding:11px 14px;border-radius:9px;text-decoration:none}
.hz .submenu-binnen a:hover{background:rgba(255,255,255,.07)}
.hz .submenu-binnen b{display:block;font-size:14.5px;font-weight:600;color:#fff}
.hz .submenu-binnen span{display:block;font-size:13px;color:var(--bij);margin-top:2px;line-height:1.4}

@media (max-width:768px){
.hz .menu.open .menu-item{display:block;width:100%}
.hz .menu.open .menu-item > a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hz .menu.open .menu-item.is-actief > a{border-bottom-color:var(--flash)}
.hz .submenu{position:static;padding-top:0;opacity:1;visibility:visible;transform:none;transition:none;display:none}
.hz .menu.open .menu-item.heeft-sub .submenu{display:block}
.hz .submenu-binnen{background:none;border:0;box-shadow:none;padding:2px 0 10px 14px;min-width:0}
.hz .submenu-binnen a{padding:9px 0;border-bottom:0}
.hz .submenu-binnen span{display:none}
}

/* Onder 1024px past het menu niet meer naast het logo. Daar gaat het menu
   dus al over op de menuknop, in plaats van pas bij 768px. */
.hz .hz-nav .rij{flex-wrap:nowrap}
.hz .merkblok{flex:0 0 auto}
/* Het menu mag niet meekrimpen: dan schuiven de woorden over elkaar heen. Het
   klapt liever eerder in naar de hamburgerknop. Sinds het item "Pakketten en
   tarieven" heet, ligt die grens op 1180 in plaats van 1024 pixels. */
.hz .menu{flex:0 0 auto}
@media (max-width:1180px){
.hz .menu{display:none}
.hz .hamburger{display:block}
.hz .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
  background:rgba(49,77,104,.98);padding:6px 20px 18px;border-top:1px solid rgba(255,255,255,.12);z-index:30}
.hz .menu.open .menu-item{display:block;width:100%}
.hz .menu.open .menu-item > a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;color:#E0E4E7}
.hz .menu.open .menu-item.is-actief > a{border-bottom-color:var(--flash);color:#fff}
.hz .menu.open .taal{padding:14px 0}
.hz .menu.open a.pil{margin-top:14px;border-bottom:0;text-align:center;color:var(--ink)}
.hz .submenu{position:static;padding-top:0;opacity:1;visibility:visible;transform:none;transition:none;display:none}
.hz .menu.open .menu-item.heeft-sub .submenu{display:block}
.hz .submenu-binnen{background:none;border:0;box-shadow:none;padding:2px 0 10px 14px;min-width:0}
.hz .submenu-binnen a{padding:9px 0;border-bottom:0}
.hz .submenu-binnen span{display:none}
}


/* De paginakolom volgt hetzelfde raster als de kop bovenin: de tekst begint op
   dezelfde lijn als het logo in de navigatie (1084px binnen een balk van 1180px). */
.eb-pagina .eb-kruimelbalk > *,
.eb-pagina .eb-pagina-lijf > .entry-content{max-width:1084px}

/* ---- Paginakop over de foto: het kader hoort om de woorden ---------- *
 * Het oude kader met het driehoekje spande om de hele kolom. Boven een
 * paginabrede foto werkt dat niet: dan is het een streep dwars over het
 * beeld. De omlijsting verhuist dus naar de titel zelf, in hetzelfde
 * matglas als de vragen op de homepage. */
body.page-id-1832 .eb-artikel-kop-binnen{
	width:100%;max-width:1084px;
	margin-left:auto !important;margin-right:auto !important;
	padding:56px 0;border:0;background:none;overflow:visible}
body.page-id-1832 .eb-artikel-kop-binnen::before{content:none}
body.page-id-1832 .eb-artikel-kop::after{
	background:linear-gradient(102deg,rgba(49,77,104,.78) 0%,rgba(49,77,104,.60) 45%,rgba(49,77,104,.28) 80%,rgba(49,77,104,.44) 100%)}
body.page-id-1832 .eb-artikel-kop h1{
	display:inline-block;max-width:22ch;margin:0;color:#fff;
	padding:24px 30px;border-radius:16px;
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
	backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	box-shadow:0 30px 70px rgba(8,13,17,.42);
	font-size:clamp(28px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	body.page-id-1832 .eb-artikel-kop h1{background:rgba(23,36,49,.88)}}
@media (max-width:1224px){
	body.page-id-1832 .eb-artikel-kop-binnen{padding-inline:clamp(18px,4vw,32px)}}
@media (max-width:900px){
	body.page-id-1832 .eb-artikel-kop h1{padding:20px 22px;border-radius:14px}}


/* ================================================================== *
 * VERVOLGPAGINA'S — de onderdelen die op elke inhoudspagina terugkomen
 * ------------------------------------------------------------------
 * De inhoud van een Horizon-pagina zit in een <div class="hz hz-pagina">.
 * Die div laat de paginakolom los, zodat secties over de volle breedte
 * kunnen lopen; de kolom komt daarna terug via .binnen. Zo hoeft er geen
 * apart sjabloon te komen voor elke pagina die om is.
 * ================================================================== */
/* Een Horizon-pagina begint met de kopfoto. De witruimte die het sjabloon boven en
   onder de inhoud zet, zou daar een witte balk tussen de menubalk en de foto maken. */
.eb-pagina-lijf:has(> .entry-content > .hz-pagina){padding:0}
.eb-pagina-lijf > .entry-content:has(> .hz-pagina){max-width:none;padding:0}
.eb-pagina-lijf > .entry-content > .hz-pagina{max-width:none;margin-left:0 !important;margin-right:0 !important}
.hz-pagina{margin-top:0}
.hz-pagina .sectie{padding:76px 0}
.hz-pagina .licht{background:var(--wit)}
.hz-pagina .zacht{background:var(--stap)}
.hz-pagina .licht h2,
.hz-pagina .donker h2{font-size:40px;line-height:1.08;max-width:20ch}
.hz-pagina h3{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hz-pagina p{font-size:16.5px;line-height:1.7;color:var(--body2)}
.hz-pagina .donker p{color:var(--body-d)}
.hz-pagina a.inline{color:var(--merk);text-decoration:underline;text-underline-offset:3px}

/* ---------- leeskolom met meelopende inhoudsopgave ---------- */
.hz .hz-lees{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
.hz .hz-zijkolom{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.hz .hz-toc{border-left:2px solid #E8EAEB;display:flex;flex-direction:column}
.hz .hz-toc a{padding:9px 0 9px 16px;font-size:14.5px;color:#6B7280;text-decoration:none;line-height:1.35}
.hz .hz-toc a:hover{color:var(--merknavy)}
.hz .hz-toc a.is-actief{margin-left:-2px;border-left:2px solid var(--flash);font-weight:600;color:var(--merknavy)}
.hz .hz-toc-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk);margin-bottom:12px}
.hz .hz-helpdesk{border-radius:12px;border:1px solid #E8EAEB;background:var(--stap);padding:20px}
.hz .hz-helpdesk b{display:block;font-size:14.5px;font-weight:700;color:var(--merknavy)}
.hz .hz-helpdesk p{font-size:14px;line-height:1.55;color:#5A5E63;margin-top:6px}
.hz .hz-helpdesk a{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:700;color:var(--merk);text-decoration:none}
.hz .hz-helpdesk a:hover{text-decoration:underline;text-underline-offset:3px}
.hz .hz-toc-mobiel{display:none}

/* de koppen mogen niet onder de balk verdwijnen bij het springen */
.hz-pagina h2[id]{scroll-margin-top:96px}

/* ---------- stapkaart, uitgeklapte versie ---------- */
.hz .hz-stappenlijst{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.hz .hz-stapkaart{position:relative;overflow:hidden;border-radius:12px;background:var(--stap);padding:32px 34px 34px}
.hz .hz-stapkaart:last-child{background:var(--navy)}
.hz .hz-stapkaart .nr{position:absolute;right:8px;top:-16px;font-size:120px;font-weight:700;letter-spacing:-.06em;
  line-height:1;color:#E2E5E8;pointer-events:none}
.hz .hz-stapkaart:last-child .nr{color:var(--spook)}
.hz .hz-stapkaart .inhoud{position:relative;max-width:56ch}
.hz .hz-fase{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--merk)}
.hz .hz-stapkaart:last-child .hz-fase{color:#B5C94A}
.hz .hz-stapkaart h3{margin-top:10px;color:var(--merknavy)}
.hz .hz-stapkaart:last-child h3{color:#fff}
.hz .hz-stapkaart p{font-size:16px;line-height:1.65;color:var(--body2);margin-top:12px}
.hz .hz-stapkaart:last-child p{color:var(--body-d)}
.hz .hz-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hz .hz-chip{font-size:13.5px;font-weight:600;color:var(--merk);background:#fff;border:1px solid #DEE2E6;
  border-radius:999px;padding:7px 14px}
.hz .hz-stapkaart:last-child .hz-chip{color:#E0E4E7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}

/* ---------- twee kaarten met labelbalk ---------- */
.hz .hz-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.hz .hz-duokaart{border-radius:12px;overflow:hidden;border:1px solid #E8EAEB;background:var(--wit);display:flex;flex-direction:column}
.hz .hz-duokaart .balk{padding:15px 28px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hz .hz-duokaart.jij .balk{background:var(--merk)}
.hz .hz-duokaart.kantoor .balk{background:var(--merknavy)}
.hz .hz-duokaart ul{list-style:none;margin:0;padding:26px 28px 28px;display:flex;flex-direction:column;gap:13px}
.hz .hz-duokaart li{display:flex;gap:13px;font-size:15.5px;line-height:1.55;color:#505153}
.hz .hz-duokaart li::before{content:"✓";color:var(--merk);font-weight:700;flex:none}

/* ---------- veelgestelde vragen ---------- */
.hz .hz-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.hz .hz-faq-lijst{display:flex;flex-direction:column;gap:8px}
.hz .hz-faq-item{background:#fff;border:1px solid #E8EAEB;border-radius:12px;overflow:hidden}
.hz .hz-faq-item[open]{border-color:#D2E09A;box-shadow:0 10px 30px rgba(42,69,96,.08)}
.hz .hz-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:600;line-height:1.4;color:var(--merknavy)}
.hz .hz-faq-item summary::-webkit-details-marker{display:none}
.hz .hz-faq-item[open] summary{color:var(--merk)}
.hz .hz-faq-item summary:focus-visible{outline:2px solid var(--merk);outline-offset:-2px}
.hz .hz-faq-icon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;line-height:1;background:#F1F2F4;color:var(--merk);transition:transform .18s ease}
.hz .hz-faq-item[open] .hz-faq-icon{background:var(--merk);color:#fff;transform:rotate(45deg)}
.hz .hz-faq-item .lijf{padding:0 24px 22px;font-size:16px;line-height:1.7;color:#505153;max-width:62ch}
.hz .hz-faq-item .lijf p + p{margin-top:12px}

/* ---------- compacte tariefkaarten ---------- */
.hz .hz-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.hz .hz-teaserkaart{border-radius:14px;padding:24px 26px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:8px}
.hz .hz-teaserkaart.uit{background:rgba(153,175,59,.12);border-color:rgba(153,175,59,.45)}
.hz .hz-teaserkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hz .hz-teaserkop b{font-size:19px;font-weight:700;color:#fff}
.hz .hz-merkpil{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--flash);color:var(--ink);border-radius:999px;padding:4px 10px}
.hz .hz-teaserkaart .bedrag{font-size:32px;font-weight:700;letter-spacing:-.035em;color:#fff;line-height:1}
.hz .hz-teaserkaart .bedrag span{font-size:14px;font-weight:500;color:var(--bij);margin-right:6px}
.hz .hz-teaserkaart p{font-size:14.5px;line-height:1.5;color:var(--body-d);margin:0}
.hz .hz-teaserlink{display:inline-block;margin-top:28px;font-size:15.5px;font-weight:600;color:var(--flash);text-decoration:none}
.hz .hz-teaserlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- smallere schermen ---------- */
@media (max-width:1024px){
	.hz .hz-lees{grid-template-columns:1fr;gap:0}
	.hz .hz-zijkolom{position:static;gap:0}
	.hz .hz-toc{display:none}
	.hz .hz-toc-label{display:none}
	.hz .hz-toc-mobiel{display:block;border:1px solid #E8EAEB;border-radius:12px;background:var(--stap);
		padding:4px 18px;margin-bottom:28px}
	.hz .hz-toc-mobiel summary{padding:14px 0;cursor:pointer;list-style:none;
		font-size:14.5px;font-weight:700;color:var(--merknavy)}
	.hz .hz-toc-mobiel summary::-webkit-details-marker{display:none}
	.hz .hz-toc-mobiel ol{list-style:none;margin:0;padding:0 0 14px;display:flex;flex-direction:column;gap:10px}
	.hz .hz-toc-mobiel a{font-size:14.5px;color:#5A5E63;text-decoration:none}
	.hz .hz-helpdesk{margin-top:36px}
	.hz .hz-faq{grid-template-columns:1fr;gap:32px}
	.hz .hz-teaser{grid-template-columns:1fr}
}
@media (max-width:768px){
	.hz-pagina .sectie{padding:52px 0}
	.hz-pagina .licht h2, .hz-pagina .donker h2{font-size:29px}
	.hz .hz-stapkaart{padding:24px}
	.hz .hz-stapkaart .nr{font-size:84px;right:2px;top:-10px}
	.hz .hz-stapkaart h3{font-size:21px}
	.hz .hz-duo{grid-template-columns:1fr}
	.hz .hz-faq-item summary{font-size:16px;padding:18px 20px;min-height:44px}
	.hz .hz-faq-item .lijf{padding:0 20px 20px}
}


/* ---- De paginakop van een Horizon-pagina ---------------------------- *
 * Foto over de volle breedte, scrim eroverheen, en daarop het kruimelpad,
 * de titel, de lead en de feitenrij. De kop zit in de pagina-inhoud zelf en
 * niet in het sjabloon, want lead en feiten verschillen per pagina.
 * -------------------------------------------------------------------- */
.hz .hz-kop{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(400px,32vw,540px);background:var(--navy)}
.hz .hz-kop .beeld{position:absolute;inset:0;background-size:cover;background-position:50% 40%}
.hz .hz-kop .scrim{position:absolute;inset:0;background:linear-gradient(105deg,
  rgba(49,77,104,.96) 0%,rgba(49,77,104,.88) 46%,rgba(49,77,104,.45) 82%,rgba(49,77,104,.6) 100%)}
.hz .hz-kop .binnen{position:relative;z-index:2;width:100%;padding-block:56px}
.hz .hz-kruimels ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px}
.hz .hz-kruimels li{margin:0}
.hz .hz-kruimels a{color:#ADB4BB;text-decoration:none}
.hz .hz-kruimels a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hz .hz-kruimels .hier{color:#E0E4E7}
.hz .hz-kruimels .scheiding{color:#707479}
.hz .hz-kop h1{font-size:clamp(38px,5vw,62px);line-height:1.02;font-weight:700;letter-spacing:-.03em;
  color:#fff;max-width:18ch;margin-top:22px}
.hz .hz-kop .lead{font-size:19px;line-height:1.6;color:var(--lead);max-width:52ch;margin-top:18px}
.hz .hz-feiten{display:flex;gap:34px;flex-wrap:wrap;max-width:760px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.hz .hz-feit b{display:block;font-size:20px;font-weight:700;color:#fff;line-height:1.2}
.hz .hz-feit span{display:block;font-size:13px;color:#A2A7AC;margin-top:4px}
@media (max-width:768px){
	.hz .hz-kop{min-height:300px}
	.hz .hz-kop .binnen{padding-block:36px 34px}
	.hz .hz-kop .lead{font-size:17px}
	.hz .hz-feiten{gap:18px 26px;margin-top:26px;padding-top:20px}
	.hz .hz-feit{flex:1 1 40%}
}


/* ---- Drie kaarten naast elkaar, licht en donker --------------------- */
.hz .hz-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.hz .hz-drie h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.hz .hz-drie p{font-size:15px;line-height:1.6;color:var(--body-d);margin:0}
.hz .hz-keuze3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.hz .hz-keuzekaart{border:1px solid #E8EAEB;border-radius:12px;padding:24px 26px;background:var(--wit);
  display:flex;flex-direction:column}
.hz .hz-keuzekaart b{display:block;font-size:17px;font-weight:700;color:var(--merknavy)}
.hz .hz-keuzekaart p{font-size:15.5px;line-height:1.6;color:var(--body2);margin-top:10px}
.hz .hz-keuzekaart a{display:inline-block;margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:600;
  color:var(--merk);text-decoration:none}
.hz .hz-keuzekaart a:hover{text-decoration:underline;text-underline-offset:3px}
.hz .hz-losseregel{margin-top:26px;font-size:16px;line-height:1.7;color:var(--body2);max-width:70ch}
.hz .donker .hz-losseregel{color:var(--body-d)}
@media (max-width:900px){
	.hz .hz-drie{grid-template-columns:1fr}
	.hz .hz-keuze3{grid-template-columns:1fr}
}


/* ---- Cijfervakken, personen, punten, uitgelichte artikelen ---------- */
.hz .hz-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:#E8EAEB;
  border:1px solid #E8EAEB;border-radius:12px;overflow:hidden;margin-top:36px}
.hz .hz-cijfer{background:var(--wit);padding:28px 26px}
.hz .hz-cijfer b{display:block;font-size:38px;font-weight:700;letter-spacing:-.035em;color:var(--merknavy);line-height:1}
.hz .hz-cijfer span{display:block;font-size:14px;color:#6B7280;margin-top:8px;line-height:1.45}

.hz .hz-mensen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.hz .hz-mens{border-radius:12px;padding:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.hz .hz-mens .rol{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B5C94A}
.hz .hz-mens b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:10px}
.hz .hz-mens p{font-size:15.5px;line-height:1.65;color:var(--body-d);margin-top:12px}

.hz .hz-punten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.hz .hz-punt{border:1px solid #E8EAEB;border-radius:12px;background:var(--wit);padding:24px 26px}
.hz .hz-punt b{display:block;font-size:17px;font-weight:700;color:var(--merknavy)}
.hz .hz-punt p{font-size:15.5px;line-height:1.6;color:var(--body2);margin-top:10px}

.hz .hz-uitgelicht{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.hz .hz-uitkaart{border:1px solid #E8EAEB;border-radius:12px;background:var(--wit);padding:30px 32px;
  display:flex;flex-direction:column;text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.hz .hz-uitkaart h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--merknavy);line-height:1.2}
.hz .hz-uitkaart p{font-size:15.5px;line-height:1.65;color:var(--body2);margin-top:12px}
.hz .hz-uitkaart .meer{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--merk)}
.hz .hz-uitkaart:hover{border-color:var(--merk);box-shadow:0 18px 44px rgba(74,125,12,.12);transform:translateY(-2px)}
.hz .hz-lijst{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:32px;list-style:none;padding:0}
.hz .hz-lijst li{border-top:1px solid #F0F0F1;margin:0}
.hz .hz-lijst a{display:block;padding:16px 0;font-size:16px;font-weight:500;color:var(--merknavy);text-decoration:none}
.hz .hz-lijst a:hover{color:var(--merk)}

.hz .hz-contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;align-items:start}
.hz .hz-contact address{font-style:normal;font-size:16.5px;line-height:1.75;color:var(--body2)}
.hz .hz-contact .groot{font-size:22px;font-weight:700;color:var(--merk);text-decoration:none;display:inline-block;margin-top:6px}

@media (max-width:900px){
	.hz .hz-cijfers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.hz .hz-mensen{grid-template-columns:1fr}
	.hz .hz-punten{grid-template-columns:1fr}
	.hz .hz-uitgelicht{grid-template-columns:1fr}
	.hz .hz-lijst{grid-template-columns:1fr}
	.hz .hz-contact{grid-template-columns:1fr}
}


/* ---- Onderwerpenlijsten van de kennisbank -------------------------- */
.hz .hz-groepen{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px;margin-top:36px}
.hz .hz-groep h3{font-size:17px;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:6px}
.hz .licht .hz-groep h3, .hz .zacht .hz-groep h3{color:var(--merknavy)}
.hz .hz-groep .hz-lijst{grid-template-columns:1fr;margin-top:8px}
.hz .donker .hz-lijst li{border-top-color:rgba(255,255,255,.12)}
.hz .donker .hz-lijst a{color:#E0E4E7;padding:13px 0}
.hz .donker .hz-lijst a:hover{color:#fff}
.hz .hz-lijst a small{display:block;font-size:13.5px;font-weight:400;color:#6B7280;margin-top:3px;line-height:1.4}
.hz .donker .hz-lijst a small{color:var(--bij)}
@media (max-width:900px){.hz .hz-groepen{grid-template-columns:1fr;gap:32px}}


/* ---- De navigatiebalk blijft in beeld -------------------------------- *
 * Op de vervolgpagina's staat de kop in de flow, dus daar volstaat plakken:
 * de topbalk schuift weg en de navigatiebalk blijft staan.
 * Op de homepage zweeft de balk al over de kopfoto en neemt hij geen ruimte
 * in. Daar wordt hij bij het scrollen vastgezet, precies op het punt waar hij
 * de bovenkant van het scherm raakt, zodat er niets verspringt.
 * --------------------------------------------------------------------- */
:root{--eb-tb:39px}
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:calc(-1 * var(--eb-tb));z-index:40}
html.hz-vast .hz .hz-hero > .hz-nav{position:fixed;top:0;z-index:40}

/* Smaller en dekkend zodra hij vastzit. */
html.hz-vast .hz .hz-nav{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 30px rgba(8,13,17,.35)}
html.hz-vast .hz .hz-nav .rij{padding-block:13px}
html.hz-vast .hz .hz-nav svg{height:34px}

/* De beheerbalk van WordPress staat er bij ingelogde bezoekers overheen. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part{top:calc(32px - var(--eb-tb))}
html.hz-vast body.admin-bar .hz .hz-hero > .hz-nav{top:32px}
@media (max-width:600px){
	body.admin-bar .wp-site-blocks > header.wp-block-template-part{top:calc(-1 * var(--eb-tb))}
	html.hz-vast body.admin-bar .hz .hz-hero > .hz-nav{top:0}
}

/* Voor ingelogde beheerders staat de balk van WordPress er 32 pixels boven;
   de meelopende inhoudsopgave en het springen naar een kop schuiven mee. */
body.admin-bar .hz .hz-zijkolom{top:128px}
body.admin-bar .hz-pagina h2[id]{scroll-margin-top:128px}
@media (max-width:600px){
	body.admin-bar .hz .hz-zijkolom{top:96px}
	body.admin-bar .hz-pagina h2[id]{scroll-margin-top:96px}
}

/* De drie cijfers naast het citaat zijn verschillend breed, waardoor de tekst
   erachter op drie plekken begon. Het getal krijgt daarom een vaste kolom, iets
   ruimer dan het breedste getal, zodat de tekst overal op dezelfde lijn start.
   Op de telefoon staat het getal boven de tekst; daar hoeft die kolom niet. */
.hz .stat b{flex:0 0 auto;min-width:132px}
@media (max-width:768px){
	.hz .stat b{min-width:0}
}


/* ==================================================================== *
 * PAKKETPAGINA'S — sjabloon "pakket"
 * Kop met kruimelpad en feitenrij, daaronder de pakkettekst met rechts een
 * meelopende prijskaart, dan de drie pakketkaarten om te vergelijken.
 * ==================================================================== */

/* WordPress zet tussen de blokken van een groep automatisch witruimte. Hier
   sluiten de secties op elkaar aan, dus die witruimte moet eruit. */
.hz.eb-pakket > *,
.hz .eb-pakket-lijf > *,
.hz .eb-pakket-raster > *,
.hz .eb-pakket-zij > *{margin-block:0}

/* Kop zonder foto: egaal donkerblauw met een gloed rechtsboven. */
.hz .hz-kop.hz-kop-b{min-height:0;background:var(--navy)}
.hz .hz-kop.hz-kop-b .binnen{padding-block:64px 56px}
.hz .hz-kop-b .gloed{left:auto;right:-240px;top:-260px;transform:none}
.hz .hz-kop .pil-label{margin-top:24px}
.hz .hz-kop .pil-label + h1{margin-top:18px}

/* Kruimelpad uit eb_kruimels(): de schuine streep komt uit de CSS. */
.hz .hz-kruimels.auto li + li::before{content:"/";color:#707479;margin-right:10px}
.hz .hz-kruimels li[aria-current]{color:#E0E4E7}

/* Tekst links, prijskaart rechts. */
.hz .eb-pakket-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.hz .eb-pakket-zij{position:sticky;top:96px}
body.admin-bar .hz .eb-pakket-zij{top:128px}

/* De pakkettekst zelf. */
.hz .eb-pakket-inhoud{max-width:680px}
.hz .eb-pakket-inhoud p{font-size:16.5px;line-height:1.75;color:var(--body2);margin-top:14px}
.hz .eb-pakket-inhoud .entry-content > p:first-child{font-size:19px;line-height:1.65;color:var(--merknavy);font-weight:500;margin-top:0}
.hz .eb-pakket-inhoud h2{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.025em;color:var(--merknavy);margin-top:48px;scroll-margin-top:96px}
.hz .eb-pakket-inhoud h3{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--merknavy);margin-top:26px}
.hz .eb-pakket-inhoud h2 + p, .hz .eb-pakket-inhoud h3 + p{margin-top:10px}
.hz .eb-pakket-inhoud ul, .hz .eb-pakket-inhoud ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.hz .eb-pakket-inhoud li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.65;color:var(--body2)}
.hz .eb-pakket-inhoud ul li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--merk);font-weight:700}
.hz .eb-pakket-inhoud li strong{color:var(--merknavy)}
.hz .eb-pakket-inhoud a{color:var(--merk);text-decoration:underline;text-underline-offset:3px}

/* Veelgestelde vragen in de pakkettekst: dezelfde vorm als op Hoe het werkt. */
.hz .eb-pakket-inhoud details.eb-vraag{background:#fff;border:1px solid #E8EAEB;border-radius:12px;overflow:hidden;margin-top:8px}
.hz .eb-pakket-inhoud h2 + details.eb-vraag{margin-top:20px}
.hz .eb-pakket-inhoud details.eb-vraag[open]{border-color:#D2E09A;box-shadow:0 10px 30px rgba(42,69,96,.08)}
.hz .eb-pakket-inhoud details.eb-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--merknavy)}
.hz .eb-pakket-inhoud details.eb-vraag summary::-webkit-details-marker{display:none}
.hz .eb-pakket-inhoud details.eb-vraag summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;line-height:1;
  background:#F1F2F4;color:var(--merk);transition:transform .18s ease}
.hz .eb-pakket-inhoud details.eb-vraag[open] summary{color:var(--merk)}
.hz .eb-pakket-inhoud details.eb-vraag[open] summary::after{background:var(--merk);color:#fff;transform:rotate(45deg)}
.hz .eb-pakket-inhoud details.eb-vraag summary:focus-visible{outline:2px solid var(--merk);outline-offset:-2px}
.hz .eb-pakket-inhoud details.eb-vraag > p{margin:0;padding:0 22px 20px;font-size:16px;line-height:1.7}

/* De prijskaart. */
.hz .eb-prijskaart{border:1px solid #E8EAEB;border-radius:14px;background:var(--wit);padding:28px;
  box-shadow:0 18px 44px rgba(36,59,82,.08);position:static;margin:0}
.hz .eb-prijskaart p{margin:0}
.hz .eb-prijskaart-label{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk)}
.hz .eb-merkje{font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--flash);color:var(--ink);border-radius:999px;padding:4px 10px}
.hz .eb-prijskaart-bedrag{font-size:46px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--merknavy);margin-top:16px}
.hz .eb-prijskaart .eb-vanaf{font-size:16px;font-weight:500;letter-spacing:0;color:#6B7280}
.hz .eb-prijskaart-eenheid{font-size:14px;color:#6B7280;margin-top:6px}
.hz .eb-prijskaart-samen{font-size:14.5px;color:var(--body2);margin-top:2px}
.hz .eb-prijskaart-knop{margin-top:22px}
.hz .eb-prijskaart-knop a{display:block;text-align:center;background:var(--merk);color:#fff;border-radius:999px;
  padding:15px 20px;font-size:15.5px;font-weight:700;text-decoration:none;transition:background .18s ease}
.hz .eb-prijskaart-knop a:hover{background:var(--merknavy)}
.hz .eb-prijskaart-punten{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #F0F0F1;display:flex;flex-direction:column;gap:10px}
.hz .eb-prijskaart-punten li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--body2)}
.hz .eb-prijskaart-punten li::before{content:"\2713";position:absolute;left:0;color:var(--merk);font-weight:700}
.hz .eb-prijskaart-hulp{font-size:14px;line-height:1.55;color:#6B7280;margin-top:18px}
.hz .eb-prijskaart-hulp a{color:var(--merk);font-weight:700;text-decoration:none;white-space:nowrap}

@media (max-width:1024px){
	.hz .eb-pakket-raster{grid-template-columns:1fr;gap:44px}
	.hz .eb-pakket-zij{position:static;max-width:460px}
	.hz .eb-pakket-inhoud{max-width:none}
}
@media (max-width:768px){
	.hz .hz-kop.hz-kop-b .binnen{padding-block:40px 36px}
	.hz .eb-pakket-inhoud h2{font-size:24px;margin-top:40px}
	.hz .eb-pakket-inhoud .entry-content > p:first-child{font-size:17.5px}
	.hz .eb-prijskaart-bedrag{font-size:40px}
}


/* ---- Pakketpagina's, vervolg: zijkaart, persoonskaart, mediation ----- */

/* Zijkaart op pagina's die zelf geen pakket zijn: de drie pakketten op een rij. */
.hz .eb-zijkaart-kop{font-size:17px;line-height:1.45;font-weight:600;color:var(--merknavy);margin-top:12px}
.hz .eb-zijkaart-lijst{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column}
.hz .eb-zijkaart-lijst li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;
  border-top:1px solid #F0F0F1;font-size:15px}
.hz .eb-zijkaart-lijst li:last-child{border-bottom:1px solid #F0F0F1}
.hz .eb-zijkaart-lijst a{color:var(--merknavy);font-weight:600;text-decoration:none}
.hz .eb-zijkaart-lijst a:hover{color:var(--merk)}
.hz .eb-zijkaart-lijst span{font-weight:700;color:var(--merknavy);white-space:nowrap}

/* Persoonskaart. Portretten in zwart-wit, volgens design-uitgangspunten 8b. */
.hz .hz-persoon{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start;margin-top:36px}
.hz .hz-persoon .foto{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--stap)}
.hz .hz-persoon .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hz .hz-persoon .rol{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk)}
.hz .hz-persoon h3{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.025em;color:var(--merknavy);margin-top:8px}
.hz .hz-persoon .keur{font-size:14px;line-height:1.5;color:#6B7280;margin-top:8px}
.hz .hz-persoon .tekst > p:not(.rol):not(.keur){font-size:16.5px;line-height:1.75;color:var(--body2);margin-top:14px;max-width:62ch}
.hz .hz-persoon blockquote{margin:24px 0 0;padding:20px 24px;border-left:3px solid var(--flash);background:var(--stap);
  border-radius:0 12px 12px 0;font-size:18px;line-height:1.55;font-weight:500;color:var(--merknavy);max-width:62ch}
.hz .hz-persoon blockquote p{margin:0;font:inherit;color:inherit}

/* Mediationpakketten: drie kaarten, dezelfde vorm als de hoofdpakketten. */
.hz .hz-medkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}
.hz .pk li.kopje{display:block;padding:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bij)}
.hz .pk li.kopje::before{content:none}
.hz .pk li.past::before{content:"\2022";color:var(--bij)}

/* Vier kaarten in twee kolommen. */
.hz .hz-drie.twee{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
	.hz .hz-persoon{grid-template-columns:1fr;gap:24px}
	.hz .hz-persoon .foto{max-width:280px}
	.hz .hz-medkaarten{grid-template-columns:1fr}
	.hz .hz-drie.twee{grid-template-columns:1fr}
}

/* Stapkaarten in een raster van twee bij twee, voor pagina's zonder zijkolom. */
.hz .hz-stappenlijst.raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.hz .hz-stappenlijst.raster{grid-template-columns:1fr}}

/* Uitsnede per kopfoto. Standaard 40% van boven; bij Scheiding van tafel en bed
   staan de twee huisjes laag in de foto (tussen 55% en 90%), dus daar 80%. */
body.page-id-2307 .hz .hz-kop .beeld{background-position:50% 80%}


/* ==================================================================== *
 * DE VOET — op elke pagina, ook op de homepage
 * Donkerder dan de secties erboven (#243B52), vier kolommen, daaronder de
 * keurmerken en het kantoor, en een onderbalk met de juridische links.
 * ==================================================================== */
.hz .hz-voet{background:#243B52;color:#9CA2A8;padding:56px 0 40px}
.hz .hz-voet-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.hz .hz-voet-logo{display:inline-block}
.hz .hz-voet-logo svg{height:34px;width:auto;display:block}
.hz .hz-voet address{font-style:normal;font-size:14.5px;line-height:1.7;color:#9CA2A8;margin-top:20px;max-width:34ch}
.hz .hz-voet address a{color:#BDC2C8;text-decoration:none}
.hz .hz-voet address a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hz .hz-voet-kop{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--flash);margin:0 0 16px}
.hz .hz-voet nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hz .hz-voet nav li{margin:0;padding:0}
.hz .hz-voet nav a{font-size:14.5px;line-height:1.45;color:#BDC2C8;text-decoration:none}
.hz .hz-voet nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Keurmerken en het kantoor erachter. */
.hz .hz-voet-keur{display:flex;align-items:center;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;
  margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.hz .hz-voet-initiatief{display:flex;align-items:center;gap:16px}
.hz .hz-voet-initiatief span{font-size:13.5px;line-height:1.4;color:#9CA2A8;max-width:18ch}
.hz .hz-voet-initiatief svg{height:52px;width:auto;display:block}
/* Het kantoorlogo is groen. In de voet monochroom, zodat er naast het blauw
   geen tweede merkkleur staat. Het bestand zelf blijft ongemoeid. */
.hz .hz-voet-initiatief svg path{fill:#CFD3D6}
.hz .hz-voet-orde{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hz .hz-voet-orde p{font-size:13.5px;line-height:1.5;color:#9CA2A8;max-width:44ch;margin:0}
/* De keurmerken zijn afbeeldingen, een ervan met een witte achtergrond. Die
   kunnen niet wit worden ingekleurd, dus ze staan op een klein wit vlak. */
.hz .hz-voet .eb-keurmerken{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hz .hz-voet .eb-keurmerk{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:8px 12px;height:48px}
.hz .hz-voet .eb-keurmerk img{height:30px;width:auto;max-width:none;display:block}

/* Onderbalk: copyright links, juridische links rechts. */
.hz .hz-voet-onder{display:flex;align-items:center;justify-content:space-between;gap:14px 32px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#7E8489}
.hz .hz-voet-onder p{margin:0;font-size:13.5px;color:#7E8489}
.hz .hz-voet-onder ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap}
.hz .hz-voet-onder li{margin:0}
.hz .hz-voet-onder a, .hz .hz-voet-onder button{font:inherit;font-size:13.5px;color:#9CA2A8;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.hz .hz-voet-onder a:hover, .hz .hz-voet-onder button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hz .hz-voet a:focus-visible, .hz .hz-voet button:focus-visible{outline:2px solid var(--flash);outline-offset:3px;border-radius:2px}

@media (max-width:900px){
	.hz .hz-voet-raster{grid-template-columns:1fr 1fr;gap:36px 28px}
	.hz .hz-voet-raster > :first-child{grid-column:1 / -1}
}
@media (max-width:560px){
	.hz .hz-voet{padding:44px 0 32px}
	/* Merk en pakketten over de volle breedte, Kennisbank en Kantoor naast elkaar:
	   dat scheelt een flink stuk scrollen. */
	.hz .hz-voet-raster{grid-template-columns:1fr 1fr;gap:32px 20px}
	.hz .hz-voet-raster > :nth-child(2){grid-column:1 / -1}
	/* Groter raakvlak voor een duim. */
	.hz .hz-voet nav ul{gap:2px}
	.hz .hz-voet nav a{display:inline-block;padding:7px 0}
	.hz .hz-voet-onder ul{gap:4px 22px}
	.hz .hz-voet-onder a, .hz .hz-voet-onder button{display:inline-block;padding:7px 0}
	.hz .hz-voet-keur{flex-direction:column;align-items:flex-start}
	.hz .hz-voet-onder{flex-direction:column;align-items:flex-start}
}


/* ==================================================================== *
 * KENNISBANKARTIKELEN — sjabloon "single" (en "kennisbank")
 * Kop zonder foto, tekst van 680px links, rechts een meelopende kolom met
 * de inhoudsopgave en de check-kaart, onder het artikel "Verder lezen".
 * ==================================================================== */
.hz.eb-artikel > *,
.hz .eb-artikel-lijf > *,
.hz .eb-artikel-raster > *,
.hz .eb-artikel-zij > *,
.hz .eb-artikel-inhoud > *{margin-block:0}

/* Kop */
.hz .hz-kop-artikel h1{font-size:clamp(34px,4.4vw,54px);max-width:22ch;margin-top:18px}
.hz .hz-metabalk{display:flex;align-items:center;flex-wrap:wrap;gap:8px 0;margin-top:24px;font-size:13.5px;color:#A2A7AC}
.hz .hz-metabalk span + span::before{content:"\00B7";margin:0 10px;color:#707479}
.hz .hz-metabalk .hz-thema{background:var(--flash);color:var(--ink);border-radius:999px;padding:5px 12px;margin-right:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hz .hz-metabalk .hz-thema + span::before{content:none}
.hz .hz-auteurregel{font-size:14.5px;color:#BDC2C8;margin-top:18px}
.hz .hz-auteurregel a{color:#E0E4E7;text-decoration:underline;text-decoration-color:rgba(224,228,231,.4);text-underline-offset:3px}
.hz .hz-auteurregel a:hover{color:#fff;text-decoration-color:#fff}

/* Tekst links, kolom rechts. De kolom staat in de broncode vóór de tekst, zodat
   de inhoudsopgave op een telefoon bovenaan komt. */
.hz .eb-artikel-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"inhoud zij";gap:64px;align-items:start}
.hz .eb-artikel-inhoud{grid-area:inhoud;max-width:680px}
.hz .eb-artikel-zij{grid-area:zij;position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
body.admin-bar .hz .eb-artikel-zij{top:128px}

/* Leestekst */
.hz .eb-artikel-inhoud p{font-size:16.5px;line-height:1.75;color:var(--body2);margin-top:14px;max-width:66ch}
.hz .eb-artikel-inhoud .entry-content > p:first-child{font-size:19px;line-height:1.65;color:var(--merknavy);font-weight:500;margin-top:0}
.hz .eb-artikel-inhoud h2{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.025em;color:var(--merknavy);margin-top:44px;scroll-margin-top:96px}
.hz .eb-artikel-inhoud h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--merknavy);margin-top:28px;scroll-margin-top:96px}
.hz .eb-artikel-inhoud h2 + p, .hz .eb-artikel-inhoud h3 + p{margin-top:10px}
.hz .eb-artikel-inhoud .entry-content ul, .hz .eb-artikel-inhoud .entry-content ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:66ch}
.hz .eb-artikel-inhoud .entry-content li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.65;color:var(--body2)}
.hz .eb-artikel-inhoud .entry-content ul li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--merk);font-weight:700}
.hz .eb-artikel-inhoud .entry-content ol{counter-reset:stap}
.hz .eb-artikel-inhoud .entry-content ol li{counter-increment:stap}
.hz .eb-artikel-inhoud .entry-content ol li::before{content:counter(stap);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:#F1F2F4;color:var(--merk);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hz .eb-artikel-inhoud li strong, .hz .eb-artikel-inhoud p strong{color:var(--merknavy)}
.hz .eb-artikel-inhoud .entry-content a{color:var(--merk);text-decoration:underline;text-underline-offset:3px}
.hz .eb-artikel-inhoud h2[id], .hz .eb-artikel-inhoud h3[id]{scroll-margin-top:96px}
body.admin-bar .hz .eb-artikel-inhoud h2, body.admin-bar .hz .eb-artikel-inhoud h3{scroll-margin-top:128px}

/* Kader "In het kort" */
.hz .eb-artikel-inhoud .eb-kort{border-left:3px solid var(--flash);background:var(--stap);border-radius:0 12px 12px 0;padding:24px 28px;margin:0 0 30px;max-width:none}
.hz .eb-artikel-inhoud .eb-kort > p{margin:0;max-width:none}
.hz .eb-artikel-inhoud .eb-kort > p:first-child{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk);line-height:1.4}
.hz .eb-artikel-inhoud .eb-kort > p + p{margin-top:10px;font-size:16.5px;line-height:1.65;color:var(--merknavy);font-weight:500}

/* Vraagjes: dezelfde vorm als op de pakketpagina's en Hoe het werkt. */
.hz .eb-artikel-inhoud details.eb-vraag{background:#fff;border:1px solid #E8EAEB;border-radius:12px;overflow:hidden;margin-top:8px}
.hz .eb-artikel-inhoud h2 + details.eb-vraag{margin-top:20px}
.hz .eb-artikel-inhoud details.eb-vraag[open]{border-color:#D2E09A;box-shadow:0 10px 30px rgba(42,69,96,.08)}
.hz .eb-artikel-inhoud details.eb-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--merknavy)}
.hz .eb-artikel-inhoud details.eb-vraag summary::-webkit-details-marker{display:none}
.hz .eb-artikel-inhoud details.eb-vraag summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;line-height:1;
  background:#F1F2F4;color:var(--merk);transition:transform .18s ease}
.hz .eb-artikel-inhoud details.eb-vraag[open] summary{color:var(--merk)}
.hz .eb-artikel-inhoud details.eb-vraag[open] summary::after{background:var(--merk);color:#fff;transform:rotate(45deg)}
.hz .eb-artikel-inhoud details.eb-vraag summary:focus-visible{outline:2px solid var(--merk);outline-offset:-2px}
.hz .eb-artikel-inhoud details.eb-vraag > p{margin:0;padding:0 22px 20px;font-size:16px;line-height:1.7;max-width:none}

/* Disclaimer en auteur onder het artikel */
.hz .eb-artikel-inhoud .eb-disclaimer{margin-top:48px;padding-top:20px;border-top:1px solid #F0F0F1;font-size:13.5px;line-height:1.6;color:#6B7280}
.hz .eb-auteur{display:flex;align-items:flex-start;gap:18px;margin-top:24px;padding:22px 24px;border:1px solid #E8EAEB;border-radius:12px;background:var(--wit)}
.hz .eb-auteur .eb-auteur-foto{flex:0 0 64px;width:64px;height:64px;border-radius:50%;object-fit:cover;filter:grayscale(1);background:var(--stap);display:block}
.hz .eb-auteur p{margin:0;max-width:none}
.hz .eb-auteur .eb-auteur-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk)}
.hz .eb-auteur .eb-auteur-naam{font-size:17px;font-weight:700;color:var(--merknavy);margin-top:6px}
.hz .eb-auteur .eb-auteur-naam a{color:inherit;text-decoration:none}
.hz .eb-auteur .eb-auteur-naam a:hover{color:var(--merk)}
.hz .eb-auteur .eb-auteur-rol{font-size:14px;color:#6B7280;margin-top:2px}
.hz .eb-auteur .eb-auteur-bio{font-size:15px;line-height:1.6;color:var(--body2);margin-top:10px}

/* Verder lezen */
.hz .hz-verder{margin-top:48px}
.hz .hz-verder-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk);margin:0}
.hz .hz-verder ul{list-style:none;margin:14px 0 0;padding:0}
.hz .hz-verder li{border-top:1px solid #F0F0F1;margin:0;padding:0}
.hz .hz-verder li:last-child{border-bottom:1px solid #F0F0F1}
.hz .hz-verder li a{display:block;padding:16px 0;text-decoration:none}
.hz .hz-verder li b{display:block;font-size:17px;font-weight:700;color:var(--merknavy);line-height:1.35}
.hz .hz-verder li span{display:block;font-size:15px;line-height:1.55;color:#6B7280;margin-top:4px}
.hz .hz-verder li a:hover b{color:var(--merk)}
.hz .hz-verder-alle{display:inline-block;margin-top:18px;font-size:15px;font-weight:600;color:var(--merk);text-decoration:none}
.hz .hz-verder-alle:hover{text-decoration:underline;text-underline-offset:3px}

/* Inhoudsopgave (gevuld door eb_inhoudsopgave_script) */
.hz .eb-inhoud{position:static;margin:0;padding:0;border:0;background:none}
.hz .eb-inhoud .eb-inhoud-kop{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk);margin:0 0 12px}
.hz .eb-inhoud ol{list-style:none;margin:0;padding:0;border-left:2px solid #E8EAEB;display:flex;flex-direction:column}
.hz .eb-inhoud li{margin:0;padding:0}
.hz .eb-inhoud li::before{content:none}
.hz .eb-inhoud a{display:block;padding:8px 0 8px 16px;font-size:14.5px;line-height:1.4;color:#6B7280;text-decoration:none}
.hz .eb-inhoud a:hover{color:var(--merknavy)}
.hz .eb-inhoud a[aria-current]{margin-left:-2px;border-left:2px solid var(--flash);font-weight:600;color:var(--merknavy)}

/* Check-kaart */
.hz .hz-checkkaart{border:1px solid #E8EAEB;border-radius:12px;background:var(--stap);padding:22px}
.hz .hz-checkkaart p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body2)}
.hz .hz-checkkaart .hz-checkkaart-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--merk)}
.hz .hz-checkkaart .hz-checkkaart-kop{font-size:17px;font-weight:700;line-height:1.3;color:var(--merknavy);margin:6px 0 8px}
.hz .hz-checkkaart-knop{display:block;margin-top:16px;text-align:center;background:var(--merk);color:#fff;border-radius:999px;padding:13px 18px;
  font-size:15px;font-weight:700;text-decoration:none;transition:background .18s ease}
.hz .hz-checkkaart-knop:hover{background:var(--merknavy)}
.hz .hz-checkkaart .hz-checkkaart-prijs{margin-top:14px;font-size:13.5px;color:#6B7280}
.hz .hz-checkkaart-prijs a{color:var(--merk);font-weight:600;text-decoration:none}
.hz .hz-checkkaart-prijs a:hover{text-decoration:underline;text-underline-offset:3px}

/* De bevoegdheidscheck op de homepage is het doel van "Doe de check". */
.hz #check{scroll-margin-top:96px}

@media (max-width:1024px){
	.hz .eb-artikel-raster{grid-template-columns:1fr;grid-template-areas:"zij" "inhoud";gap:28px}
	.hz .eb-artikel-zij{position:static}
	.hz .eb-artikel-inhoud{max-width:none}
	/* Op een telefoon alleen de inhoudsopgave boven de tekst, als een kader. */
	.hz .eb-artikel-zij .hz-checkkaart{display:none}
	.hz .eb-inhoud{border:1px solid #E8EAEB;border-radius:12px;background:var(--stap);padding:16px 18px}
}
@media (max-width:768px){
	.hz .eb-artikel-inhoud h2{font-size:24px;margin-top:38px}
	.hz .eb-artikel-inhoud p, .hz .eb-artikel-inhoud .entry-content li{font-size:16px}
	.hz .eb-artikel-inhoud .eb-kort{padding:20px 22px}
	.hz .eb-auteur{padding:18px}
}


/* ==================================================================
   Scheiden-online. Wat er voor deze site anders of extra is ten opzichte
   van het Horizon-thema van echtscheiding-buitenland.
   ================================================================== */

/* Horizon-pagina's: de kop en alle secties staan in de pagina-inhoud zelf. */
.eb-horizon-pagina{margin:0;padding:0}
.eb-horizon-pagina > .wp-block-post-content > *{margin-block-start:0;margin-block-end:0}
.eb-horizon-pagina > .wp-block-post-content > .hz-pagina{max-width:none}

/* Het citaat zonder foto: egaal donker, met een zachte gloed in het groen. */
.hz .citaat-zonder-beeld{overflow:hidden}
.hz .citaat-zonder-beeld .scrim{display:none}

/* De uitkomst van de pakketkeuze krijgt een link naar het pakket. */
.hz .uitkomst a{display:inline-block;margin-top:8px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hz .uitkomst.ja{background:rgba(153,175,59,.16);border-color:rgba(153,175,59,.5);color:#D6F1BD}

/* De twee ingangen hebben op deze site geen foto: alleen strook en tekst. */
.hz .route .lijf{padding-top:24px}

/* Formulierpagina's zonder kop en voet (aanmeldformulieren voor mediators). */
.eb-kaal{padding-block:clamp(24px,4vw,48px);background:var(--wp--preset--color--wit)}
.eb-leeg{margin:0;padding:0}
.eb-leeg > .wp-block-post-content > *{margin-block-start:0}

/* De topbalk: de beoordeling is een link naar alle beoordelingen. */
.hz .topbalk a.sterren{text-decoration:none}
.hz .topbalk a.sterren:hover{text-decoration:underline}

/* Portretten in zwart-wit, zoals vastgelegd in de ontwerpuitgangspunten. */
.hz .hz-persoon .foto img, .hz .portret img{filter:grayscale(1)}

/* Zachte secties (lichtgroene achtergrond): label en kop in de donkere merkkleuren,
   net als bij de witte secties. Zonder deze regel kregen ze de kleuren voor een donkere achtergrond. */
.hz .zacht .label{color:var(--merk)}
.hz .zacht h2{color:var(--merknavy)}
.hz-pagina .zacht > .binnen > h2{font-size:40px;line-height:1.08;font-weight:700;letter-spacing:-.04em;margin-top:14px;max-width:20ch}
@media (max-width:768px){ .hz-pagina .zacht > .binnen > h2{font-size:29px} }

/* De beslisboom (gratis scheiden, voorwaarden): knoppen in de merkkleur in plaats van het blauw van de plug-in. */
.decision_tree_area .dt_button{background:var(--wp--preset--color--blauw,#4A7D0C)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:12px 30px!important;font-weight:600!important;min-width:120px;text-align:center;cursor:pointer;transition:background .15s ease}
.decision_tree_area .dt_button:hover{background:var(--wp--preset--color--blauw-diep,#2A4560)!important}

/* De zwevende beoordelingsknop van Feedback Company valt op de telefoon over de menuknop.
   Op smallere schermen staat hij daarom onderaan, boven de plek van de chatknop. */
@media (max-width:900px){
	html body div.__fbcw__sticky__sticky-widget{top:auto!important;bottom:110px!important}
}

/* Het opengeklapte menu op de telefoon: egaal, zodat de koptekst van de pagina er niet doorheen schemert. */
.hz .menu.open{background:#314D68}

/* ==================================================================
   Wit en blauw (versie 0.3.0). Meer wit als achtergrond, het blauw van
   scheiden-online (#314D68) voor de donkere vlakken, groen als accent.
   ================================================================== */

/* Twee witte secties na elkaar: een dunne lijn ertussen. */
.hz-pagina .sectie.licht:not(.zacht) + .sectie.licht:not(.zacht){border-top:1px solid #E8EBEE}

/* Het citaat op de startpagina: licht, met een groene streep. */
.hz .citaat-zonder-beeld{background:var(--stap);min-height:0}
.hz .citaat-zonder-beeld blockquote{color:var(--merknavy);border-left:4px solid var(--flash);padding-left:28px}
.hz .citaat-zonder-beeld cite{color:var(--body2);padding-left:32px}
.hz .citaat-zonder-beeld .stat{background:#fff;border-color:#E2E5E8;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 10px 30px rgba(36,59,82,.06)}
.hz .citaat-zonder-beeld .stat b{color:var(--merk)}
.hz .citaat-zonder-beeld .stat span{color:var(--body2)}

/* Kaarten die voor een donkere ondergrond waren gemaakt, nu ook op wit of lichtgrijs. */
.hz .licht .hz-teaserkaart{background:#fff;border:1px solid #E2E5E8;box-shadow:0 10px 30px rgba(36,59,82,.05)}
.hz .licht .hz-teaserkaart h3, .hz .licht .hz-teaserkop b, .hz .licht .hz-teaserkaart .bedrag{color:var(--merknavy)}
.hz .licht .hz-teaserkaart p{color:var(--body2)}
.hz .licht .hz-teaserkaart.uit{background:#F3F8E8;border-color:#D2E09A}
.hz .licht .hz-teaserlink{color:var(--merk)}
.hz .licht .hz-mens{background:#fff;border:1px solid #E2E5E8;box-shadow:0 10px 30px rgba(36,59,82,.05)}
.hz .licht:not(.zacht) .hz-mens{background:var(--stap)}
.hz .licht .hz-mens .rol{color:var(--merk)}
.hz .licht .hz-mens b{color:var(--merknavy)}
.hz .licht .hz-mens p{color:var(--body2)}

/* Het uitgelichte pakket op blauw: donkere tekst op de groene knop (leesbaarder), en een frissere achtergrond. */
.hz .hz-card-featured .knop{color:var(--ink)}
.hz .hz-card-featured{background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 100%);border-color:rgba(153,175,59,.8)}