/* ------------------------------------------------------------------
   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:#C6D3E8; 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:#CFDAEC; 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(18,47,99,.70) 16%,
		rgba(18,47,99,.20) 52%,
		rgba(18,47,99,.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,#122F63);
	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:#B7C6DE}
.eb-voet :is(p,li,address){color:#B7C6DE}
.eb-voet a{color:#D3DEEF; font-weight:400}
.eb-voet a:hover{color:var(--wp--preset--color--wit)}
.eb-voet h2,.eb-voet h3,.eb-voet h4{
	color:#7E93B5; 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:#7E93B5;
}
.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,#1B5FD9); color:#fff; font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; box-shadow:0 6px 22px rgba(18,47,99,.26); transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.eb-chatknop:hover{background:var(--wp--preset--color--blauw-diep,#122F63); transform:translateY(-2px); box-shadow:0 10px 28px rgba(18,47,99,.32)}
.eb-chatknop:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#8FB6F5); 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,#DCE3EE); box-shadow:0 -6px 26px rgba(18,47,99,.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,#5A6B87)}
.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,#1B5FD9); color:#fff}
.eb-knop-in:hover{background:var(--wp--preset--color--blauw-diep,#122F63)}
.eb-knop-uit{background:transparent; color:var(--wp--preset--color--leisteen-2,#5A6B87); border-color:var(--wp--preset--color--lijn,#DCE3EE)}
.eb-knop-uit:hover{color:var(--wp--preset--color--blauw-diep,#122F63); border-color:#B9C6DA}
.eb-cookiebalk button:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#8FB6F5); 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:#7E93B5}
.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:#C6D3E8!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,#EEF3FE)}
.eb-tarieven .eb-rij:hover h3{color:var(--wp--preset--color--blauw,#1B5FD9)}
.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,#8FB6F5); outline-offset:2px}
.eb-tarieven .eb-rij:has(a:focus-visible) h3{color:var(--wp--preset--color--blauw,#1B5FD9)}

/* 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,#1B5FD9)}
.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,#8FB6F5); outline-offset:2px}
.eb-deur:has(a:focus-visible) h2{color:var(--wp--preset--color--blauw,#1B5FD9)}

/* 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,#1B5FD9)}
.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,#1B5FD9); 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,#1B5FD9)!important; outline:none!important; box-shadow:0 0 0 3px rgba(27,95,217,.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,#1B5FD9)!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,#122F63)!important}
.gform_wrapper .gform_footer input[type=submit]:focus-visible{outline:3px solid var(--wp--preset--color--blauw-licht,#8FB6F5)!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,#1B5FD9)!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]{background:var(--wp--preset--color--blauw,#1B5FD9)!important; color:#fff!important; border:1px solid var(--wp--preset--color--blauw,#1B5FD9)!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,#1B5FD9)!important}
.gform_wrapper .gform_page_footer input[type=button]:hover,.gform_wrapper .gform_page_footer input[type=submit]:hover{background:var(--wp--preset--color--blauw-diep,#122F63)!important; border-color:var(--wp--preset--color--blauw-diep,#122F63)!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,#8FB6F5); transform:translateY(-2px)}
.eb-pk.is-uitgelicht{border-color:var(--wp--preset--color--blauw,#1B5FD9)}
.eb-pk-kop{position:relative; background:var(--wp--preset--color--blauw-diep,#122F63); 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:#B9C9E8}
.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,#EEF3FE); 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,#122F63); 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,#1B5FD9); border-bottom:2px solid var(--wp--preset--color--blauw,#1B5FD9); 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,#1B5FD9); 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,#122F63)}
.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,#8FB6F5); background:var(--wp--preset--color--blauw-was,#EEF3FE)}
.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,#1B5FD9); 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(18,47,99,.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,#EEF3FE); color:var(--wp--preset--color--blauw,#1B5FD9)!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:#0A1A38; --kaart:#0F2247; --spook:#16305E; --ink:#08152E;
  --flash:#4E8CFF; --merk:#1B5FD9; --merknavy:#122F63;
  --wit:#fff; --stap:#F2F5FB; --spooklicht:#DDE5F3; --warmgrijs:#EBE9E8;
  --body:#505153; --body2:#5A5E63;
  --opdonker:#DBE4F5; --lead:#C3D0E6; --body-d:#B3C3DE; --bij:#93A8CA; --bij2:#A8BCDD; --label:#7FB0FF;
}
.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(10,26,56,.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:#7FA3E8}
.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:#0A1A38;
  background-image:url(https://ontwikkel.echtscheiding-buitenland.nl/wp-content/uploads/2026/08/shutterstock_1653684463-1536x1024.jpg);
  background-size:cover;background-position:center 40%}
.hz-hero > .scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,26,56,.96) 0%,rgba(10,26,56,.86) 42%,rgba(10,26,56,.35) 78%,rgba(10,26,56,.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:#CFDCF3}
.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(78,140,255,.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(4,12,30,.5)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hz-glass{background:rgba(16,34,68,.92)}
.hz-glass-soft{background:rgba(16,34,68,.85)}
.hz .pil-label{background:rgba(16,34,68,.8)}
.hz-nav{background:rgba(10,26,56,.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:#9FB4D6;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(8,21,46,.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(78,140,255,.28) 0%,rgba(78,140,255,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:#C8D5EA;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(78,140,255,.6);
  background:linear-gradient(180deg,rgba(78,140,255,.22) 0%,rgba(78,140,255,.06) 100%);
  box-shadow:0 24px 60px rgba(78,140,255,.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:#E2EBFA}
.hz-card-featured li::before{color:#9EC4FF}
.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-image:url(https://ontwikkel.echtscheiding-buitenland.nl/wp-content/uploads/2026/08/rustige-hoek-bij-het-raam.jpg);background-size:cover;background-position:center 60%}
.hz .citaat .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,26,56,.94) 0%,rgba(10,26,56,.8) 55%,rgba(10,26,56,.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:#0D2245;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(8,21,46,.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:#08152E;color:#C3D0E6;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:#DBE4F5;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(8,21,46,.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:#C3D0E6;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:#DBE4F5;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:#B3C3DE;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(78,140,255,.55);box-shadow:0 22px 50px rgba(4,12,30,.45)}
.hz-card-featured:hover{box-shadow:0 32px 74px rgba(78,140,255,.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(78,140,255,.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(10,26,56,.5) 0%,rgba(10,26,56,.96) 60%,rgba(10,26,56,.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(10,26,56,.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:#DBE4F5}
.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(8,21,46,.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(27,95,217,.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 #D9DEE6;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(8,21,46,.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:#0A1A38;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(10,26,56,.94) 0%,rgba(10,26,56,.84) 42%,rgba(10,26,56,.42) 78%,rgba(10,26,56,.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(10,26,56,.45) 0%,rgba(10,26,56,.9) 62%,rgba(10,26,56,.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(4,12,30,.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(10,26,56,.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:#DBE4F5}
.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(10,26,56,.78) 0%,rgba(10,26,56,.60) 45%,rgba(10,26,56,.28) 80%,rgba(10,26,56,.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(4,12,30,.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(16,34,68,.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 #E4EAF4;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 #E4EAF4;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:#DDE5F3;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:#7FB0FF}
.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 #D7E2F5;
  border-radius:999px;padding:7px 14px}
.hz .hz-stapkaart:last-child .hz-chip{color:#DBE4F5;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 #E4EAF4;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 #E4EAF4;border-radius:12px;overflow:hidden}
.hz .hz-faq-item[open]{border-color:#C9DAFB;box-shadow:0 10px 30px rgba(18,47,99,.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:#EEF3FC;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(78,140,255,.12);border-color:rgba(78,140,255,.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 #E4EAF4;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(10,26,56,.96) 0%,rgba(10,26,56,.88) 46%,rgba(10,26,56,.45) 82%,rgba(10,26,56,.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:#9FB4D6;text-decoration:none}
.hz .hz-kruimels a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hz .hz-kruimels .hier{color:#DBE4F5}
.hz .hz-kruimels .scheiding{color:#5D7599}
.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:#93A8CA;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 #E4EAF4;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:#E4EAF4;
  border:1px solid #E4EAF4;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:#7FB0FF}
.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 #E4EAF4;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 #E4EAF4;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(27,95,217,.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 #EEF1F6;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:#DBE4F5;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(4,12,30,.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}
}