/* Plubos Kabeltechniek — thema-CSS
   Concept: de werktekening van een infranetwerk. Bron van waarheid voor de
   look is het goedgekeurde prototype (klanten/Plubos Kabeltechniek/design/).
   Kleuren, fonts en maten komen uit theme.json; hier staan alleen de
   vormen die een blok niet zelf kan. Klassen beginnen met pb-.

   Inhoud:
   1. Basis          5. Secties
   2. Kop en voet    6. Dienstpagina
   3. Knoppen        7. Formulier
   4. Werktekening   8. Mobiel
*/

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

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

:root {
	--pb-navy: var(--wp--preset--color--primary);
	--pb-navy-diep: var(--wp--preset--color--primary-dark);
	--pb-blauw: var(--wp--preset--color--secondary);
	--pb-groen: var(--wp--preset--color--merkgroen);
	--pb-groen-knop: var(--wp--preset--color--accent);
	--pb-groen-helder: var(--wp--preset--color--groen-helder);
	--pb-inkt: var(--wp--preset--color--ink);
	--pb-grijs: var(--wp--preset--color--muted);
	--pb-lijn: var(--wp--preset--color--border);
	--pb-lijn-donker: var(--wp--custom--lijn-donker);
	--pb-mist: var(--wp--preset--color--surface);
	--pb-papier: var(--wp--preset--color--papier);
	--pb-wit: var(--wp--preset--color--white);
	--pb-mono: var(--wp--preset--font-family--mono);
	--pb-display: var(--wp--preset--font-family--display);
	--pb-r: var(--wp--custom--radius);
	--pb-wrap: var(--wp--custom--wrap);
	--pb-rand: 24px;
	--pb-sectie: var(--wp--preset--spacing--xxl);
	/* Het merkaccent uit de logo-P: blauw naar groen, alleen als dunne lijn. */
	--pb-merklijn: linear-gradient(90deg, var(--pb-blauw), var(--pb-groen));
	--pb-blueprint: var(--wp--custom--blueprint);
}

html { scroll-padding-top: 96px; }
body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }

/* Secties sluiten op elkaar aan: geen blockGap tussen kop, main en voet, en
   niet tussen de secties van een pagina (die hebben hun eigen padding). */
.wp-site-blocks > .pb-main,
.wp-site-blocks > .pb-site-voet,
.wp-site-blocks > footer { margin-block-start: 0; }
.pb-main > .wp-block-post-content > * { margin-block: 0; }

:focus-visible {
	outline: 3px solid var(--pb-blauw);
	outline-offset: 2px;
}

/* Binnenbreedte van een sectie: de "wrap" uit het prototype. */
.pb-binnen {
	width: 100%;
	max-width: calc(var(--pb-wrap) + 2 * var(--pb-rand));
	margin-inline: auto;
	padding-inline: var(--pb-rand);
}

/* Mono-labels: technische aanduidingen op de tekening. */
.pb-code,
.pb-mono {
	font-family: var(--pb-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .08em;
	color: var(--pb-blauw);
	margin: 0;
}

/* Rasters: WordPress zet flow-marges op elk kind, en zijn regel komt na de
   onze. Dubbele klasse wint het gelijkspel (checklist: layoutregels). */
.pb-raster.pb-raster > *,
.pb-raster.pb-raster > * + * { margin-block: 0; }

/* ---------- 2. Kop en voet ---------- */

.pb-site-kop {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--pb-lijn);
}
.pb-site-kop::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--pb-merklijn);
}
.pb-kop.pb-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
	margin: 0 auto;
}
.pb-kop > * { margin: 0 !important; }
.pb-kop .wp-block-site-logo {
	flex: 0 1 auto;
	min-width: 0;
}
.pb-kop .wp-block-site-logo img {
	width: 100%;
	max-width: 262px;
	height: auto;
}
.pb-kop .wp-block-navigation {
	font-family: var(--pb-display);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--pb-navy);
	gap: 26px;
}
.pb-kop .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 6px;
	text-decoration: none;
}
.pb-kop .wp-block-navigation .wp-block-navigation-item__content::after,
.pb-voet-lijst a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--pb-groen);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pb-kop .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.pb-kop .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.pb-voet-lijst a:hover::after { transform: scaleX(1); }
.pb-kop .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--pb-lijn) !important;
	border-radius: var(--pb-r);
	padding: 8px 0;
	min-width: 240px !important;
	font-weight: 500;
}
.pb-kop .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 18px;
}
.pb-kop .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.pb-kop .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--pb-mist);
}

.pb-kop__rechts.pb-kop__rechts {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}
.pb-kop__rechts > * { margin: 0 !important; }
.pb-kop__tel {
	font-family: var(--pb-mono);
	font-weight: 500;
	font-size: .875rem;
	white-space: nowrap;
}
.pb-kop__tel a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--pb-navy);
	text-decoration: none;
}
.pb-kop__tel a::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--pb-groen);
	-webkit-mask: var(--pb-ic-tel) center / contain no-repeat;
	mask: var(--pb-ic-tel) center / contain no-repeat;
}

/* Mobiel menu (core-overlay) in de huisstijl. */
.pb-kop .wp-block-navigation__responsive-container.is-menu-open {
	padding: 88px var(--pb-rand) 32px;
	background: var(--pb-wit) !important;
	color: var(--pb-navy) !important;
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	gap: 0;
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--pb-lijn);
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 0;
	font-size: 1.125rem;
	font-weight: 700;
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	padding: 0 0 8px 16px;
	font-size: 1rem;
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border: 0;
}
.pb-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0;
	font-weight: 500;
	font-size: 1rem;
}
.pb-kop .wp-block-navigation__responsive-container-open,
.pb-kop .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	justify-content: center;
	align-items: center;
	color: var(--pb-navy);
}
.pb-kop .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* Voet */
.pb-site-voet {
	position: relative;
	background: var(--pb-navy-diep);
	color: #a9c6d8;
}
.pb-site-voet::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--pb-merklijn);
}
.pb-voet {
	padding-block: 56px 0;
}
.pb-voet__raster.pb-voet__raster {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
}
.pb-voet p,
.pb-voet li,
.pb-voet a {
	font-size: .9375rem;
	line-height: 1.7;
	color: #a9c6d8;
}
.pb-voet a { text-decoration: none; }
.pb-voet a:hover { color: var(--pb-wit); }
.pb-voet__merk {
	font-family: var(--pb-display);
	font-weight: 800;
	font-size: 1.1875rem;
	color: var(--pb-wit) !important;
	margin: 0 0 14px;
}
.pb-voet h2 {
	font-family: var(--pb-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pb-wit);
	margin: 0 0 14px;
}
.pb-voet-lijst.pb-voet-lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}
.pb-voet-lijst a {
	position: relative;
	display: inline-flex;
	min-height: 24px;
	align-items: center;
}
.pb-voet-lijst a::after { background: var(--pb-groen-helder); }
.pb-voet__balk.pb-voet__balk {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	border-top: 1px solid var(--pb-lijn-donker);
	margin-top: 44px;
	padding-block: 20px;
}
.pb-voet__balk p {
	font-family: var(--pb-mono);
	font-size: .8125rem;
	color: #7fa7bf;
	margin: 0;
}
.pb-voet__balk a { color: #cfe2ee; font-weight: 600; font-size: .8125rem; }

/* ---------- 3. Knoppen ---------- */

.wp-block-buttons.pb-knoppen { gap: 14px; }
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	transition: background-color .16s, color .16s, border-color .16s;
}
/* Secundair: lijn in marineblauw, op een lichte achtergrond. */
.wp-block-button.is-style-secundair > .wp-block-button__link {
	background: transparent;
	color: var(--pb-navy);
	border-color: var(--pb-navy);
}
.wp-block-button.is-style-secundair > .wp-block-button__link:hover,
.wp-block-button.is-style-secundair > .wp-block-button__link:focus {
	background: var(--pb-navy);
	color: var(--pb-wit);
}
/* Licht: lijn in wit, op een donkere achtergrond. */
.wp-block-button.is-style-licht > .wp-block-button__link {
	background: transparent;
	color: var(--pb-wit);
	border-color: rgba(255, 255, 255, .5);
}
.wp-block-button.is-style-licht > .wp-block-button__link:hover,
.wp-block-button.is-style-licht > .wp-block-button__link:focus {
	background: var(--pb-wit);
	color: var(--pb-navy);
	border-color: var(--pb-wit);
}

/* ---------- 4. Werktekening ---------- */
/* Hoek-tekens, schaalbalk en genummerde markers: het handtekeningelement. */

.pb-foto {
	position: relative;
	overflow: hidden;
	border-radius: var(--pb-r);
}
.pb-foto > .wp-block-image,
.pb-foto > .wp-block-image img {
	margin: 0;
	width: 100%;
	height: 100%;
}
.pb-foto > .wp-block-image img {
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
}
/* Twee hoek-tekens (linksboven, rechtsonder), zoals op een tekening. */
.pb-foto--hoeken::before,
.pb-foto--hoeken::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, .7);
	z-index: 3;
	pointer-events: none;
}
.pb-foto--hoeken::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.pb-foto--hoeken::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.pb-stempel.pb-stempel {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pb-wit);
	background: rgba(4, 40, 60, .72);
	padding: 5px 10px;
	border-radius: 2px;
}

/* Hero-foto: vier hoeken, schaalbalk en markers. */
.pb-werktekening {
	position: relative;
	overflow: hidden;
	min-height: 600px;
}
.pb-werktekening > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.pb-werktekening > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pb-werktekening::before {
	/* De foto loopt van links in de navy over: tekst en beeld als één vlak. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(4, 40, 60, .85) 0%, rgba(4, 40, 60, .15) 40%, transparent 100%);
	pointer-events: none;
}
.pb-werktekening::after {
	content: "PLUBOS · SCHAAL 1:1";
	position: absolute;
	z-index: 4;
	inset: 18px;
	pointer-events: none;
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	color: var(--pb-wit);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 2px;
	--h: rgba(255, 255, 255, .55);
	background:
		linear-gradient(var(--h), var(--h)) top left / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) top left / 2px 22px no-repeat,
		linear-gradient(var(--h), var(--h)) top right / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) top right / 2px 22px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom left / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom left / 2px 22px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom right / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom right / 2px 22px no-repeat,
		/* Schaalbalk: vier vakjes, om en om gevuld. */
		repeating-linear-gradient(90deg, #fff 0 26px, transparent 26px 52px) center bottom 20px / 104px 6px no-repeat;
	opacity: .9;
}

/* Markers: een lijst met labels. Het lijstitem is de tekstballon, de
   genummerde cirkel hangt eronder op het punt in de foto. De posities
   horen bij deze foto en staan dus hier, niet bij de redactie. */
.pb-markers.pb-markers {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
	z-index: 5;
	counter-reset: marker;
	pointer-events: none;
}
.pb-markers > li {
	counter-increment: marker;
	position: absolute;
	margin: 0;
	padding: 8px 13px;
	transform: translate(-50%, calc(-100% - 24px));
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: transparent;
	background: transparent;
	border-radius: 2px;
	pointer-events: auto;
	transition: color .16s, background-color .16s;
}
.pb-markers > li::before {
	content: counter(marker, decimal-leading-zero);
	position: absolute;
	left: 50%;
	top: calc(100% + 24px - 17px);
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border-radius: 50%;
	background: var(--pb-wit);
	color: var(--pb-navy);
	font-family: var(--pb-mono);
	font-size: .75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .25);
	animation: pb-puls 2.8s ease-out infinite;
	transition: background-color .16s, color .16s, transform .16s;
}
.pb-markers > li::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: transparent;
	transition: border-color .16s;
}
.pb-markers > li:hover {
	color: var(--pb-wit);
	background: var(--pb-navy);
}
.pb-markers > li:hover::after { border-top-color: var(--pb-navy); }
.pb-markers > li:hover::before {
	background: var(--pb-groen);
	color: var(--pb-wit);
	transform: scale(1.12);
	animation: none;
}
.pb-markers > li:nth-child(1) { left: 52%; top: 60%; }
.pb-markers > li:nth-child(2) { left: 78%; top: 80%; }
.pb-markers > li:nth-child(3) { left: 72%; top: 33%; }
.pb-markers > li:nth-child(2)::before { animation-delay: .9s; }
.pb-markers > li:nth-child(3)::before { animation-delay: 1.8s; }
@keyframes pb-puls {
	0% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 0 0 5px rgba(255, 255, 255, .7); }
	70%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 0 0 16px rgba(255, 255, 255, 0); }
}

/* ---------- 5. Secties ---------- */

.pb-sectie {
	padding-block: var(--pb-sectie);
	position: relative;
}
.pb-sectie--mist { background: var(--pb-mist); }
.pb-sectie--papier { background: var(--pb-papier); }

.pb-sectiekop {
	max-width: 680px;
	margin-bottom: 42px;
}
.pb-sectiekop > * { margin-block: 0; }
.pb-sectiekop h2 { font-size: var(--wp--preset--font-size--xxl); }
.pb-sectiekop p {
	color: var(--pb-grijs);
	margin-top: 13px;
	font-size: var(--wp--preset--font-size--m);
}
/* Maatlijn onder een sectiekop: gestippeld, zoals op een tekening. */
.pb-sectiekop::after {
	content: "";
	display: block;
	margin-top: 20px;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--pb-lijn) 0 8px, transparent 8px 14px);
}
.pb-sectiekop--zonder-lijn::after { content: none; }

/* Accentlijn onder een kop in een split. */
.pb-accentkop::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 16px 0 2px;
	background: linear-gradient(90deg, var(--pb-blauw) 8%, var(--pb-groen) 92%);
}

/* Donkere band met blauwdrukraster (hero, traject, veiligheid, CTA). */
.pb-band {
	position: relative;
	background-color: var(--pb-navy-diep);
	color: var(--pb-wit);
	overflow: hidden;
}
.pb-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--pb-blueprint);
	background-size: 40px 40px;
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}
.pb-band > * { position: relative; z-index: 1; }
.pb-band h1,
.pb-band h2,
.pb-band h3 { color: var(--pb-wit); }
.pb-band p { color: #c6dcea; }

/* Hero homepage */
.pb-hero { padding: 0; }
.pb-hero__raster.pb-hero__raster {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	min-height: 600px;
	max-width: none;
	padding: 0;
}
.pb-hero__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: calc(var(--pb-wrap) * .48 + var(--pb-rand));
	margin-left: auto;
	padding: 64px 48px 64px var(--pb-rand);
}
.pb-hero__tekst > * { margin-block: 0; }
.pb-hero h1 {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.02;
	margin: 0 0 10px;
}
.pb-hero h1 em {
	font-style: normal;
	color: var(--pb-groen-helder);
}
.pb-subline.pb-subline {
	font-family: var(--pb-mono);
	color: #9fc4dc;
	font-size: .875rem;
	letter-spacing: .04em;
	margin-bottom: 18px;
}
.pb-hero__intro.pb-hero__intro {
	color: #d1e3ef;
	font-size: var(--wp--preset--font-size--l);
	max-width: 500px;
}
.pb-hero .pb-knoppen { margin-top: 28px; }

/* Specificatiestrook */
.pb-spec {
	background: var(--pb-navy);
	color: #c4dbea;
	border-top: 1px solid var(--pb-lijn-donker);
}
.pb-spec__rij.pb-spec__rij {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pb-spec__cel {
	padding: 18px 22px;
	border-right: 1px solid var(--pb-lijn-donker);
}
.pb-spec__cel:first-child { padding-left: 0; }
.pb-spec__cel:last-child { border-right: 0; }
.pb-spec__cel > * { margin: 0; }
.pb-spec__k {
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7fa9c2;
}
.pb-spec__v.pb-spec__v {
	font-family: var(--pb-display);
	font-weight: 700;
	color: var(--pb-wit);
	font-size: 1.1875rem;
	margin-top: 4px;
}

/* Disciplines als legenda */
.pb-disc.pb-disc {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border: 1px solid var(--pb-lijn);
}
.pb-disc__kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 22px;
	background: var(--pb-wit);
	border-right: 1px solid var(--pb-lijn);
}
.pb-disc__kaart:last-child { border-right: 0; }
.pb-disc__kaart > * { margin-block: 0; }
.pb-disc__kaart .pb-code { margin-bottom: 14px; }
.pb-disc__kaart::before {
	/* Pictogram per discipline, in merkgroen. */
	content: "";
	order: 1;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	background: var(--pb-groen);
	-webkit-mask: var(--pb-ic, none) center / contain no-repeat;
	mask: var(--pb-ic, none) center / contain no-repeat;
}
.pb-disc__kaart .pb-code { order: 0; }
.pb-disc__kaart > :not(.pb-code) { order: 2; }
.pb-disc__kaart h3 {
	font-size: 1.0625rem;
	margin-bottom: 7px;
}
.pb-disc__kaart h3 a {
	color: inherit;
	text-decoration: none;
}
/* De hele kaart is klikbaar via de link in de kop. */
.pb-disc__kaart h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pb-disc__kaart p:not(.pb-code) {
	font-size: .875rem;
	color: var(--pb-grijs);
	line-height: 1.5;
}
.pb-disc__kaart .pb-meer {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--pb-mono);
	font-weight: 600;
	font-size: .75rem;
	color: var(--pb-blauw);
}
.pb-disc__kaart::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--pb-groen);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s;
}
.pb-disc__kaart:hover::after,
.pb-disc__kaart:focus-within::after { transform: scaleX(1); }
.pb-disc__kaart:hover .pb-meer { color: var(--pb-navy); }

.pb-ic--kabel { --pb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 12h6M16 12h6'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.pb-ic--grond { --pb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 18h18M6 18V9l6-4 6 4v9'/%3E%3C/svg%3E"); }
.pb-ic--elektro { --pb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.pb-ic--montage { --pb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.pb-ic--brand { --pb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 3c3 4 6 6 6 10a6 6 0 0 1-12 0c0-4 3-6 6-10z'/%3E%3C/svg%3E"); }
:root {
	--pb-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--pb-ic-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* Traject: van A tot Z */
.pb-traject {
	padding-block: var(--pb-sectie);
}
.pb-band__beeld.pb-band__beeld {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	opacity: .2;
}
.pb-band__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pb-traject h2 {
	font-size: var(--wp--preset--font-size--xxl);
	max-width: 640px;
	margin: 0 0 14px;
}
.pb-lead.pb-lead {
	font-size: var(--wp--preset--font-size--l);
	max-width: 600px;
	margin: 0;
}
.pb-stappen.pb-stappen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid #1c435f;
	margin: 36px 0 32px;
}
.pb-stap {
	position: relative;
	padding: 22px 22px 26px 0;
	border-right: 1px solid #1c435f;
}
.pb-stap + .pb-stap { padding-left: 22px; }
.pb-stap:last-child { border-right: 0; }
.pb-stap::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 3px;
	background: var(--pb-merklijn);
}
.pb-stap + .pb-stap::before { left: 22px; }
.pb-stap > * { margin: 0; }
.pb-stap .pb-code { color: var(--pb-groen-helder); }
.pb-stap h3 {
	font-size: 1.125rem;
	margin: 11px 0 6px;
}
.pb-stap p:not(.pb-code) {
	color: #a9c6d8;
	font-size: .875rem;
	line-height: 1.5;
}

/* Split: tekst naast foto */
.pb-split.pb-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}
.pb-split--boven.pb-split--boven { align-items: start; }
.pb-split__tekst > * { margin-block: 0; }
.pb-split__tekst > * + * { margin-top: 16px; }
.pb-split__tekst h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
.pb-split__tekst p { color: var(--pb-grijs); }
.pb-band .pb-split__tekst p { color: rgba(255, 255, 255, .78); }
.pb-split--foto-rechts > .pb-foto { order: 2; }

/* Vinkjeslijst: getint chipje met vinkje */
.pb-vinkjes.pb-vinkjes {
	list-style: none;
	padding: 0;
	margin-top: 20px;
	display: grid;
	gap: 12px;
}
.pb-vinkjes > li {
	position: relative;
	padding-left: 36px;
	color: var(--pb-inkt);
	margin: 0;
}
.pb-vinkjes > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--wp--preset--color--groen-licht);
}
.pb-vinkjes > li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 14px;
	height: 14px;
	background: var(--pb-groen);
	-webkit-mask: var(--pb-ic-check) center / contain no-repeat;
	mask: var(--pb-ic-check) center / contain no-repeat;
}
.pb-vinkjes--blauw > li { padding-left: 31px; font-size: .9375rem; }
.pb-vinkjes--blauw > li::before { width: 21px; height: 21px; border-radius: 5px; background: var(--wp--preset--color--blauw-licht); }
.pb-vinkjes--blauw > li::after { left: 4px; top: 5px; width: 13px; height: 13px; background: var(--pb-blauw); }
.pb-vinkjes--twee.pb-vinkjes--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }

/* Sectoren: drie fotopanelen over de volle breedte */
.pb-sectoren.pb-sectoren {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--pb-navy-diep);
}
.pb-sector {
	position: relative;
	min-height: clamp(440px, 60vh, 600px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.pb-sector + .pb-sector { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }
.pb-sector > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.pb-sector > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.pb-sector:hover > .wp-block-image img { transform: scale(1.06); }
.pb-sector::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(4, 40, 60, .93) 6%, rgba(4, 40, 60, .5) 44%, rgba(4, 40, 60, .1) 76%);
}
.pb-sector .pb-code {
	text-transform: uppercase;
	position: absolute;
	top: 22px;
	left: 26px;
	z-index: 2;
	color: var(--pb-wit);
	letter-spacing: .16em;
	opacity: .85;
}
.pb-sector__label {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(24px, 2vw, 40px);
}
.pb-sector__label > * { margin: 0; }
.pb-sector__label h3 {
	color: var(--pb-wit);
	font-size: clamp(1.375rem, 1.8vw, 1.8125rem);
}
.pb-sector__label p {
	color: #cfe2ee;
	font-size: .875rem;
	margin-top: 6px;
	max-width: 34ch;
}
.pb-sector__label::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 16px;
	background: var(--pb-merklijn);
}

/* Werk in beeld: fotokaarten */
.pb-galerij.pb-galerij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.pb-gkaart {
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	background: var(--pb-wit);
	overflow: hidden;
}
.pb-gkaart > .wp-block-image { margin: 0; }
.pb-gkaart > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.pb-gkaart__tekst { padding: 14px 16px 16px; }
.pb-gkaart__tekst > * { margin: 0; }
.pb-gkaart__tekst .pb-code {
	font-weight: 600;
	font-size: .6875rem;
	text-transform: uppercase;
}
.pb-gkaart__tekst h3 {
	font-size: .9375rem;
	margin-top: 2px;
}

/* Certificeringen */
.pb-certs.pb-certs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.pb-cert.pb-cert {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 30px 20px;
	min-height: 136px;
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	background: var(--pb-wit);
}
.pb-cert img {
	max-height: 76px;
	max-width: 132px;
	width: auto;
	height: auto;
}

/* Afsluitende band met oproep */
.pb-cta.pb-cta {
	background-color: var(--pb-navy);
	text-align: center;
	padding-block: 66px;
}
.pb-cta__binnen { max-width: 640px; margin-inline: auto; padding-inline: var(--pb-rand); }
.pb-cta__binnen > * { margin-block: 0; }
.pb-cta h2 { font-size: clamp(1.625rem, 3.4vw, 2.375rem); }
.pb-cta p {
	color: #a9c6d8;
	margin: 12px auto 0;
	max-width: 520px;
}
.pb-cta .pb-knoppen { margin-top: 26px; justify-content: center; }

/* ---------- 6. Dienstpagina ---------- */

/* Paginakop: tekst links, foto rechts, op de blauwdruk */
.pb-paginakop .pb-split { padding-block: 54px; gap: 44px; }
.pb-paginakop h1 {
	font-size: var(--wp--preset--font-size--xxxl);
	margin: 0;
}
.pb-paginakop .pb-kop-lead.pb-kop-lead {
	font-family: var(--pb-mono);
	color: var(--pb-groen-helder);
	font-size: .9375rem;
	letter-spacing: .03em;
	margin-top: 10px;
}
.pb-paginakop .pb-split__tekst p:not(.pb-kop-lead) {
	color: #cfe2ee;
	max-width: 470px;
}
.pb-paginakop .pb-knoppen { margin-top: 24px; }
.pb-paginakop--smal .pb-split { grid-template-columns: minmax(0, 1fr); }

/* Kruimelpad (dynamisch blok plubos/kruimelpad) */
.pb-kruimels {
	font-family: var(--pb-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	color: #8fb6cf;
	margin: 0 0 16px;
}
.pb-kruimels ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 9px;
}
.pb-kruimels li { display: inline-flex; gap: 9px; align-items: center; }
.pb-kruimels li + li::before { content: "/"; }
.pb-kruimels a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	min-height: 24px;
	align-items: center;
}
.pb-kruimels a:hover { color: var(--pb-wit); }

/* Lopende tekst */
.pb-proza { max-width: 720px; }
.pb-proza > * { margin-block: 0; }
.pb-proza > * + * { margin-top: 16px; }
.pb-proza p { font-size: var(--wp--preset--font-size--l); }
.pb-proza strong { color: var(--pb-navy); font-weight: 600; }
.pb-proza h2 { margin-top: 40px; font-size: clamp(1.5rem, 3vw, 2rem); }
.pb-proza h3 { margin-top: 28px; }

/* Pillen */
.pb-pillen.pb-pillen {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.pb-pillen > li {
	margin: 0;
	border: 1.5px solid var(--pb-lijn);
	border-radius: 40px;
	padding: 9px 18px 9px 34px;
	font-family: var(--pb-mono);
	font-weight: 500;
	font-size: .8125rem;
	color: var(--pb-navy);
	background: var(--pb-wit);
	position: relative;
}
.pb-pillen > li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--pb-blauw);
}
.pb-pillen > li:nth-child(even)::before { background: var(--pb-groen); }

/* Genummerd onderdeel */
.pb-secnum.pb-secnum {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pb-secnum > * { margin: 0; }
.pb-secnum__n {
	font-family: var(--pb-mono);
	font-weight: 600;
	font-size: .875rem;
	color: var(--pb-wit);
	background: var(--pb-navy);
	width: 34px;
	height: 34px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.pb-secnum__lab {
	font-family: var(--pb-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pb-grijs);
}
.pb-band .pb-secnum__n {
	background: transparent;
	color: var(--pb-groen-helder);
	border: 1px solid rgba(143, 208, 106, .5);
}
.pb-band .pb-secnum__lab { color: rgba(255, 255, 255, .6); }

.pb-onderlijst.pb-onderlijst {
	display: grid;
	gap: 22px;
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--pb-lijn);
}
.pb-onderlijst > * { margin: 0; }
.pb-onderlijst h3 {
	font-size: .875rem;
	display: inline-block;
	margin: 0 0 10px;
	padding-bottom: 11px;
	background: var(--pb-merklijn) left bottom / 100% 2px no-repeat;
}
.pb-onderlijst .pb-vinkjes { margin-top: 0; gap: 9px; }

/* Kabeltypen als doorsnede-tekening */
.pb-kabels.pb-kabels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--pb-lijn);
	background: var(--pb-wit);
}
.pb-kabel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px 26px 30px;
	border-right: 1px solid var(--pb-lijn);
	overflow: hidden;
}
.pb-kabel:last-child { border-right: 0; }
.pb-kabel > * { margin: 0; }
.pb-kabel::before {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	margin-bottom: 22px;
	background: var(--pb-navy);
	-webkit-mask: var(--pb-dsn) center / contain no-repeat;
	mask: var(--pb-dsn) center / contain no-repeat;
	transition: background-color .3s;
}
.pb-kabel:hover::before { background: var(--pb-blauw); }
.pb-kabel::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 0;
	background: var(--pb-groen);
	transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.pb-kabel:hover::after { width: 100%; }
.pb-kabel .pb-code { letter-spacing: .16em; text-transform: uppercase; font-size: .6875rem; }
.pb-kabel h3 {
	font-size: 1.1875rem;
	line-height: 1.25;
	margin: 7px 0 12px;
}
.pb-kspec.pb-kspec {
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pb-groen-knop);
	border: 1px solid rgba(74, 128, 57, .35);
	padding: 4px 9px;
}
.pb-dsn--ls { --pb-dsn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='24' stroke-dasharray='3 3' opacity='.45'/%3E%3Ccircle cx='23' cy='23' r='8.4'/%3E%3Ccircle cx='41' cy='23' r='8.4'/%3E%3Ccircle cx='23' cy='41' r='8.4'/%3E%3Ccircle cx='41' cy='41' r='8.4'/%3E%3C/svg%3E"); }
.pb-dsn--ms { --pb-dsn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='24' stroke-dasharray='3 3' opacity='.45'/%3E%3Ccircle cx='32' cy='20.5' r='9.8'/%3E%3Ccircle cx='22' cy='38' r='9.8'/%3E%3Ccircle cx='42' cy='38' r='9.8'/%3E%3C/svg%3E"); }
.pb-dsn--signaal { --pb-dsn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='24' stroke-dasharray='3 3' opacity='.45'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Ccircle cx='45' cy='32' r='6'/%3E%3Ccircle cx='38.5' cy='43.3' r='6'/%3E%3Ccircle cx='25.5' cy='43.3' r='6'/%3E%3Ccircle cx='19' cy='32' r='6'/%3E%3Ccircle cx='25.5' cy='20.7' r='6'/%3E%3Ccircle cx='38.5' cy='20.7' r='6'/%3E%3C/svg%3E"); }
.pb-dsn--glas { --pb-dsn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='23' stroke-dasharray='3 3' opacity='.45'/%3E%3Ccircle cx='32' cy='32' r='12.5'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='32' cy='32' r='2.4'/%3E%3Ccircle cx='38.1' cy='35.5' r='2.4'/%3E%3Ccircle cx='32' cy='39' r='2.4'/%3E%3Ccircle cx='25.9' cy='35.5' r='2.4'/%3E%3Ccircle cx='25.9' cy='28.5' r='2.4'/%3E%3Ccircle cx='32' cy='25' r='2.4'/%3E%3Ccircle cx='38.1' cy='28.5' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); }

/* Beeldband over de volle breedte */
.pb-beeldband {
	position: relative;
	min-height: clamp(300px, 44vh, 460px);
	overflow: hidden;
}
.pb-beeldband > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.pb-beeldband > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pb-beeldband::after {
	content: "";
	position: absolute;
	inset: 18px;
	z-index: 2;
	pointer-events: none;
	--h: rgba(255, 255, 255, .6);
	background:
		linear-gradient(var(--h), var(--h)) top left / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) top left / 2px 22px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom right / 22px 2px no-repeat,
		linear-gradient(var(--h), var(--h)) bottom right / 2px 22px no-repeat;
}
.pb-beeldband__tag.pb-beeldband__tag {
	position: absolute;
	left: 0;
	bottom: 38px;
	z-index: 3;
	margin: 0;
	background: var(--pb-navy);
	color: var(--pb-wit);
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 12px 22px 12px 26px;
}
.pb-beeldband__tag strong { color: var(--pb-groen-helder); font-weight: 500; }

/* Veiligheidsband */
.pb-veilig { padding-block: 76px; }
.pb-veilig h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.pb-badge.pb-badge {
	display: inline-flex;
	align-self: flex-start;
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pb-groen-helder) !important;
	border: 1px solid rgba(143, 208, 106, .4);
	padding: 7px 13px;
}
.pb-genummerd.pb-genummerd {
	list-style: none;
	counter-reset: punt;
	margin: 28px 0 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
}
.pb-genummerd > li {
	counter-increment: punt;
	display: flex;
	gap: 20px;
	align-items: baseline;
	margin: 0;
	padding: 17px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .92);
}
.pb-genummerd > li::before {
	content: counter(punt, decimal-leading-zero);
	font-family: var(--pb-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	color: var(--pb-groen-helder);
	flex: none;
	min-width: 22px;
}

/* Contactblok */
.pb-contact.pb-contact {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: start;
}
.pb-contact__gegevens > * { margin-block: 0; }
.pb-contact__gegevens > * + * { margin-top: 14px; }
.pb-contact__gegevens h2 { font-size: 1.5rem; }
.pb-contact__gegevens h3 { font-size: 1rem; margin-top: 28px; }
.pb-contact__gegevens p { color: var(--pb-grijs); }
.pb-contact__gegevens a { color: var(--pb-navy); }

/* ---------- 7. Formulier (kernplugin, blok kern072/formulier) ---------- */

.k72-formulier {
	background: var(--pb-wit);
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	padding: 32px;
}
.k72-formulier__velden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 20px;
}
.k72-formulier__veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k72-formulier__veld.is-breed { grid-column: 1 / -1; }
.k72-formulier label {
	font-family: var(--pb-display);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--pb-navy);
}
.k72-formulier__optioneel {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: .875rem;
	color: var(--pb-grijs);
}
.k72-formulier input:not([type="hidden"]),
.k72-formulier select,
.k72-formulier textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--pb-inkt);
	background: var(--pb-wit);
	border: 1px solid #b9c6ce;
	border-radius: var(--pb-r);
}
.k72-formulier textarea { min-height: 150px; resize: vertical; }
.k72-formulier input:focus,
.k72-formulier select:focus,
.k72-formulier textarea:focus {
	outline: 3px solid var(--pb-blauw);
	outline-offset: 0;
	border-color: var(--pb-blauw);
}
.k72-formulier__veld.is-fout input,
.k72-formulier__veld.is-fout select,
.k72-formulier__veld.is-fout textarea { border-color: #b3261e; }
.k72-formulier__fout { color: #b3261e; font-size: .875rem; }
.k72-formulier__melding {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid #b3261e;
	background: #fdf0ef;
	color: var(--pb-inkt);
}
.k72-formulier__val {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.k72-formulier__voet { margin-top: 24px; }
.k72-formulier__knop {
	cursor: pointer;
	border: 2px solid transparent;
	min-height: 52px;
}
.k72-formulier__kleine-letters {
	margin: 16px 0 0;
	font-size: .875rem;
	color: var(--pb-grijs);
}
.k72-formulier__gelukt {
	padding: 28px 32px;
	border-left: 4px solid var(--pb-groen);
	background: var(--wp--preset--color--groen-licht);
	border-radius: var(--pb-r);
}
.k72-formulier__gelukt > * { margin: 0; }
.k72-formulier__gelukt > * + * { margin-top: 8px; }

/* Plaatshouders in de editor */
.k72-formulier-plaatshouder,
.pb-kruimels-plaatshouder {
	padding: 20px;
	border: 1px dashed var(--pb-lijn);
	background: var(--pb-mist);
	color: var(--pb-inkt);
	font-size: .9375rem;
}

/* Paginakop zonder foto (contact, overzichten, 404, zoeken) */
.pb-paginakop--smal > .pb-binnen { padding-block: 54px 50px; }
.pb-paginakop--smal > .pb-binnen > * { margin-block: 0; }
.pb-paginakop--smal > .pb-binnen > * + * { margin-top: 12px; }
.pb-paginakop--smal h1,
.pb-paginakop .wp-block-query-title,
.pb-paginakop .wp-block-post-title {
	color: var(--pb-wit);
	font-size: var(--wp--preset--font-size--xxxl);
}
.pb-paginakop--smal p:not(.pb-kop-lead) { color: #cfe2ee; max-width: 560px; }
.pb-paginakop--smal .pb-knoppen { margin-top: 24px; }

/* Zoekveld in de huisstijl */
.pb-zoekveld { max-width: 560px; margin-top: 24px !important; }
.pb-zoekveld .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	gap: 8px;
}
.pb-zoekveld .wp-block-search__input {
	min-height: 52px;
	padding: 0 16px;
	font-size: 1rem;
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	background: var(--pb-wit);
	color: var(--pb-inkt);
}
.pb-zoekveld .wp-block-search__button {
	margin: 0;
	min-height: 52px;
	padding: 0 22px;
	background: var(--pb-groen-knop);
	color: var(--pb-wit);
	border: 0;
	border-radius: var(--pb-r);
	font-family: var(--pb-display);
	font-weight: 700;
}

/* Overzichten */
.pb-overzicht .wp-block-post-featured-image { margin: 0; }
.pb-overzicht .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.pb-overzicht .wp-block-post-title { font-size: 1.125rem; margin-top: 4px; }
.pb-overzicht .wp-block-post-title a { color: var(--pb-navy); text-decoration: none; }
.pb-overzicht .wp-block-post-excerpt { font-size: .9375rem; color: var(--pb-grijs); margin-top: 8px; }
.pb-paginering { margin-top: 40px; gap: 8px; font-family: var(--pb-mono); }
.pb-paginering a,
.pb-paginering span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Contact staat in het mobiele menu; op breed doet de knop "Offerte aanvragen" dat. */
@media (min-width: 1141px) {
	.pb-kop .pb-nav__contact { display: none; }
}
/* Core schakelt pas onder 600px naar het mobiele menu; met vijf menu-items,
   telefoon en knop past de kop daarboven niet. Eigen breekpunt. */
@media (max-width: 1140px) {
	.pb-kop .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.pb-kop .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.pb-kop .wp-block-navigation { order: 3; }
}
@media (max-width: 560px) {
	/* Op de telefoon wijkt de knop voor het logo; offerte staat in het menu. */
	.pb-kop .pb-kop__knop { display: none !important; }
	.pb-kop .wp-block-site-logo { min-width: 180px; }
}

/* ---------- 8. Mobiel ---------- */

@media (max-width: 1000px) {
	.pb-voet__raster.pb-voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.pb-kabels.pb-kabels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-kabel:nth-child(2n) { border-right: 0; }
	.pb-kabel:nth-child(-n+2) { border-bottom: 1px solid var(--pb-lijn); }
}

/* De kop schakelt naar het mobiele menu; telefoon en knop wijken. */
@media (max-width: 1260px) {
	.pb-kop__tel { display: none; }
}
@media (max-width: 860px) {
	.pb-kop.pb-kop { min-height: 68px; }
	.pb-kop .wp-block-site-logo img { max-width: 190px; }

	.pb-hero__raster.pb-hero__raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.pb-hero__tekst { max-width: none; margin: 0; padding: 44px var(--pb-rand); order: 2; }
	.pb-werktekening { min-height: 360px; order: 1; }
	.pb-markers.pb-markers { display: none; }

	.pb-split.pb-split,
	.pb-contact.pb-contact { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	/* Foto altijd boven de tekst (072design-rules, Mobiel). */
	.pb-split > .pb-foto,
	.pb-split--foto-rechts > .pb-foto { order: -1; }
	.pb-paginakop .pb-split { padding-block: 0 44px; gap: 28px; }
	.pb-paginakop .pb-foto { margin-inline: calc(-1 * var(--pb-rand)); border-radius: 0; }

	.pb-galerij.pb-galerij,
	.pb-certs.pb-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-sectoren.pb-sectoren { grid-template-columns: minmax(0, 1fr); }
	.pb-sector { min-height: 360px; }
	.pb-sector + .pb-sector { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }

	.pb-spec__rij.pb-spec__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-spec__cel:nth-child(2) { border-right: 0; }
	.pb-spec__cel:nth-child(odd) { padding-left: 0; }

	.pb-stappen.pb-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-stap { border-bottom: 1px solid #1c435f; }
	.pb-stap:nth-child(2) { border-right: 0; }
	.pb-stap:nth-child(3) { padding-left: 0; }
	.pb-stap:nth-child(3)::before { left: 0; }

	.pb-disc.pb-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-disc__kaart { border-bottom: 1px solid var(--pb-lijn); }
	.pb-disc__kaart:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
	/* Knoppen gestapeld op volle breedte, gelijke maat; hiërarchie via kleur. */
	.wp-block-buttons.pb-knoppen { flex-direction: column; align-items: stretch; }
	.wp-block-buttons.pb-knoppen > .wp-block-button { width: 100%; }
	.wp-block-buttons.pb-knoppen .wp-block-button__link { width: 100%; }

	/* Kabeltypen twee naast elkaar, met een kleinere tekening. */
	.pb-kabel { padding: 22px 16px 20px; }
	.pb-kabel::before { width: 60px; height: 60px; margin-bottom: 14px; }
	.pb-kabel h3 { font-size: 1rem; }
	.pb-beeldband__tag.pb-beeldband__tag { font-size: .625rem; padding: 10px 15px; bottom: 22px; }

	/* Certificeringen en specificaties als veegrij. */
	.pb-certs.pb-certs,
	.pb-spec__rij.pb-spec__rij {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		position: relative;
	}
	.pb-certs.pb-certs { gap: 14px; padding-bottom: 2px; }
	/* Zonder scroll-padding schuift de eerste kaart bij het snappen tegen de rand. */
	.pb-certs.pb-certs,
	.pb-spec__rij.pb-spec__rij { scroll-padding-inline: var(--pb-rand); }

	/* Disciplines compact: pictogram links, de hele kaart is de link. */
	.pb-disc__kaart {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
		padding: 20px;
	}
	.pb-disc__kaart::before { grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0; }
	.pb-disc__kaart > * { grid-column: 2; }
	.pb-disc__kaart .pb-code { margin-bottom: 4px; }
	.pb-disc__kaart .pb-meer { display: none; }
	.pb-certs::-webkit-scrollbar,
	.pb-spec__rij::-webkit-scrollbar { display: none; }
	.pb-cert.pb-cert { flex: 0 0 64%; scroll-snap-align: center; }
	.pb-spec__cel { flex: 0 0 auto; min-width: 52%; scroll-snap-align: start; border-right: 1px solid var(--pb-lijn-donker) !important; padding-left: 22px !important; }
	.pb-spec__cel:first-child { padding-left: 0 !important; }
	.pb-spec__cel:last-child { border-right: 0 !important; }
	.pb-spec__v.pb-spec__v { white-space: nowrap; }

	.pb-galerij.pb-galerij,
	.pb-vinkjes--twee.pb-vinkjes--twee,
	.pb-disc.pb-disc,
	.pb-stappen.pb-stappen { grid-template-columns: minmax(0, 1fr); }
	.pb-disc__kaart { border-right: 0; }
	.pb-stap { border-right: 0; padding-left: 0 !important; }
	.pb-stap::before { left: 0 !important; }

	.k72-formulier { padding: 22px 18px; }
	.k72-formulier__velden { grid-template-columns: minmax(0, 1fr); }
	.k72-formulier__knop { width: 100%; }

	.pb-voet__raster.pb-voet__raster { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.pb-markers > li::before { animation: none; }
	.pb-sector > .wp-block-image img,
	.pb-kabel::after,
	.pb-disc__kaart::after { transition: none; }
}

/* In de editor: niets verbergen of laten bewegen wat de redactie moet zien. */
.editor-styles-wrapper .pb-markers > li::before { animation: none; }
.editor-styles-wrapper .pb-site-kop { position: relative; top: 0; }

/* ---------- 9. Secties voor de overige pagina's (oktober 2026) ---------- */

/* Kaarten in drie kolommen: werkvormen, nieuwbouw/bestaand, functies */
.pb-kaarten.pb-kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.pb-kaarten--twee.pb-kaarten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-kaart {
	position: relative;
	padding: 26px 24px;
	background: var(--pb-wit);
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
}
.pb-kaart::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 40px;
	height: 3px;
	background: var(--pb-merklijn);
}
.pb-kaart > * { margin-block: 0; }
.pb-kaart > * + * { margin-top: 10px; }
.pb-kaart h3 { font-size: 1.125rem; }
.pb-kaart p { color: var(--pb-grijs); font-size: .9375rem; }
.pb-kaart a:not(.wp-block-button__link) { color: var(--pb-blauw); font-weight: 600; }
.pb-sectie--mist .pb-kaart,
.pb-sectie--papier .pb-kaart { border-color: transparent; }

/* Uitgelichte prijs */
.pb-prijs {
	margin-top: 28px;
	padding: 24px 28px;
	background: var(--wp--preset--color--groen-licht);
	border-left: 4px solid var(--pb-groen);
	border-radius: 0 var(--pb-r) var(--pb-r) 0;
	max-width: 720px;
}
.pb-prijs > * { margin-block: 0; }
.pb-prijs > * + * { margin-top: 8px; }
.pb-prijs__bedrag.pb-prijs__bedrag {
	font-family: var(--pb-display);
	font-size: 1.25rem;
	color: var(--pb-navy);
}
.pb-prijs__bedrag strong { font-size: 2rem; font-weight: 800; }
.pb-prijs p:not(.pb-prijs__bedrag) { color: var(--pb-inkt); font-size: .9375rem; }

/* Twee kolommen tekst */
.pb-twee.pb-twee {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 48px;
	margin-top: 32px;
}
.pb-twee > * > * { margin-block: 0; }
.pb-twee > * > * + * { margin-top: 10px; }
.pb-twee h3 { font-size: 1.125rem; }

/* Ankers naar onderdelen op de pagina */
.pb-pillen a { color: inherit; text-decoration: none; }
.pb-pillen a::after { content: ""; position: absolute; inset: 0; }
.pb-pillen > li:has(a):hover { border-color: var(--pb-blauw); }

/* Keurmerken met tekst */
.pb-certkaarten.pb-certkaarten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.pb-certkaart {
	padding: 24px 22px;
	background: var(--pb-wit);
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
}
.pb-certkaart > * { margin-block: 0; }
.pb-certkaart > * + * { margin-top: 8px; }
.pb-certkaart .wp-block-image { height: 76px; display: flex; align-items: center; margin-bottom: 14px; }
.pb-certkaart .wp-block-image img { max-height: 76px; max-width: 140px; width: auto; }
.pb-certkaart h3 { font-size: 1.0625rem; }
.pb-certkaart p { font-size: .875rem; color: var(--pb-grijs); }

/* Uitklapbare tekst (beleidsverklaring) */
.pb-uitklap {
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	background: var(--pb-wit);
	max-width: 820px;
}
.pb-uitklap > summary {
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--pb-display);
	font-weight: 700;
	color: var(--pb-navy);
	list-style-position: inside;
}
.pb-uitklap[open] > summary { border-bottom: 1px solid var(--pb-lijn); }
.pb-uitklap > :not(summary) { margin: 16px 22px 0; }
.pb-uitklap > :last-child { margin-bottom: 22px; }

/* Lijst in lopende tekst: het merkvinkje, rustig */
.pb-proza ul:not(.pb-vinkjes):not(.pb-pillen) { padding-left: 1.25em; }
.pb-proza li + li { margin-top: 6px; }

/* Projecten */
.pb-filter ul {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pb-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--pb-lijn);
	border-radius: 40px;
	font-family: var(--pb-mono);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--pb-navy);
	text-decoration: none;
}
.pb-filter a:hover { border-color: var(--pb-blauw); }
.pb-filter a[aria-current="page"] { background: var(--pb-navy); border-color: var(--pb-navy); color: var(--pb-wit); }
.pb-projecten .wp-block-post-terms a { color: inherit; text-decoration: none; }
.pb-projecten .pb-gkaart { display: flex; flex-direction: column; }
.pb-projecten .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.pb-projecten .pb-gkaart { position: relative; }
.pb-projecten .pb-gkaart:hover { border-color: var(--pb-blauw); }

.pb-project.pb-project {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}
.pb-project__beeld { margin: 0 0 28px; }
.pb-project__beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pb-r); }
.pb-project__zij {
	position: sticky;
	top: 110px;
	padding: 24px;
	background: var(--pb-mist);
	border-radius: var(--pb-r);
}
.pb-project__zij > * { margin-block: 0; }
.pb-project__zij > * + * { margin-top: 16px; }
.pb-project__zij h2 { font-size: 1.125rem; }
.pb-projectgegevens { margin: 0; display: grid; gap: 12px; }
.pb-projectgegevens dt {
	font-family: var(--pb-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pb-grijs);
}
.pb-projectgegevens dd { margin: 2px 0 0; color: var(--pb-navy); font-weight: 600; }
.pb-project-intro { color: #cfe2ee; max-width: 640px; font-size: var(--wp--preset--font-size--l); }
.pb-proza .wp-block-gallery { margin-top: 28px; gap: 12px; }
.pb-proza .wp-block-gallery img { border-radius: var(--pb-r); }

@media (max-width: 860px) {
	.pb-kaarten.pb-kaarten,
	.pb-certkaarten.pb-certkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-project.pb-project { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pb-project__zij { position: static; }
}
@media (max-width: 640px) {
	.pb-kaarten.pb-kaarten,
	.pb-kaarten--twee.pb-kaarten--twee,
	.pb-twee.pb-twee { grid-template-columns: minmax(0, 1fr); }
	.pb-certkaarten.pb-certkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pb-certkaart { padding: 18px 16px; }
	.pb-prijs { padding: 20px; }
	.pb-prijs__bedrag.pb-prijs__bedrag { font-size: 1.0625rem; }
	.pb-prijs__bedrag strong { font-size: 1.625rem; }
}

/* Ploegen inhuren: één donkere band, uitleg links, prijskaart rechts,
   regionaal en landelijk als twee cellen eronder. */
.pb-ploegen { padding-block: var(--pb-sectie); }
.pb-ploeg.pb-ploeg {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 56px;
	align-items: start;
}
.pb-ploeg__tekst > * { margin-block: 0; }
.pb-ploeg__tekst > * + * { margin-top: 16px; }
.pb-ploeg__tekst h2 { font-size: var(--wp--preset--font-size--xxl); }
.pb-vinkjes--licht > li { color: rgba(255, 255, 255, .92); }
.pb-vinkjes--licht > li::before { background: rgba(143, 208, 106, .16); }
.pb-vinkjes--licht > li::after { background: var(--pb-groen-helder); }
.pb-ploeg__tekst .pb-vinkjes { margin-top: 24px; }

.pb-prijskaart {
	position: relative;
	padding: 32px 30px 30px;
	background: var(--pb-wit);
	color: var(--pb-inkt);
	border-radius: var(--pb-r);
}
.pb-prijskaart::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	border-radius: var(--pb-r) var(--pb-r) 0 0;
	background: var(--pb-merklijn);
}
.pb-band .pb-prijskaart p { color: var(--pb-inkt); }
.pb-prijskaart > * { margin-block: 0; }
.pb-prijskaart__label.pb-prijskaart__label {
	font-family: var(--pb-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pb-grijs);
}
.pb-prijskaart__bedrag.pb-prijskaart__bedrag {
	margin-top: 6px;
	font-family: var(--pb-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	line-height: 1;
	color: var(--pb-navy);
}
.pb-prijskaart__eenheid.pb-prijskaart__eenheid {
	margin-top: 10px;
	font-weight: 600;
	color: var(--pb-navy);
}
.pb-prijskaart__toelichting.pb-prijskaart__toelichting {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pb-lijn);
	font-size: .9375rem;
	color: var(--pb-grijs);
}
.pb-prijskaart .pb-knoppen { margin-top: 22px; }
.pb-prijskaart .wp-block-button,
.pb-prijskaart .wp-block-button__link { width: 100%; }

.pb-stappen--twee.pb-stappen--twee {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 48px 0 0;
}

@media (max-width: 860px) {
	.pb-ploeg.pb-ploeg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.pb-stappen--twee.pb-stappen--twee { grid-template-columns: minmax(0, 1fr); }
	.pb-stappen--twee .pb-stap { border-right: 0; padding-left: 0; }
	.pb-stappen--twee .pb-stap::before { left: 0; }
}

/* ---------- 10. Vaste vormen voor tekstsecties ---------- */
/* Regel: elke sectie heeft een vorm uit het ontwerp. Een tekstsectie zonder
   beeld is altijd "kop links, tekst rechts" (pb-intro), nooit een losse
   kolom met een lege rechterhelft. */

.pb-intro.pb-intro {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 24px 64px;
	align-items: start;
}
.pb-intro__kop > * { margin: 0; }
.pb-intro__kop h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.pb-intro__kop h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 18px;
	background: linear-gradient(90deg, var(--pb-blauw) 8%, var(--pb-groen) 92%);
}
.pb-intro__tekst > * { margin-block: 0; }
.pb-intro__tekst > * + * { margin-top: 16px; }
.pb-intro__tekst p { font-size: var(--wp--preset--font-size--l); }
.pb-intro + * { margin-top: 40px !important; }
.pb-intro + .pb-uitklap { max-width: none; }

/* Factoren: genummerde legenda op een witte kaart */
.pb-factoren {
	padding: 26px 28px 8px;
	background: var(--pb-wit);
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
}
.pb-factoren > * { margin: 0; }
.pb-factoren__titel.pb-factoren__titel {
	font-family: var(--pb-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pb-grijs);
}
.pb-genummerd--licht.pb-genummerd--licht { margin-top: 14px; border-top-color: var(--pb-lijn); }
.pb-genummerd--licht > li { color: var(--pb-inkt); border-bottom-color: var(--pb-lijn); }
.pb-genummerd--licht > li:last-child { border-bottom: 0; }
.pb-genummerd--licht > li::before { color: var(--pb-blauw); }
.pb-split--boven + .pb-kaarten { margin-top: 40px !important; }

/* Tegels: korte namen in een raster (sponsoring) */
.pb-tegels.pb-tegels {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.pb-tegels > li {
	margin: 0;
	padding: 18px 20px;
	background: var(--pb-wit);
	border: 1px solid var(--pb-lijn);
	border-radius: var(--pb-r);
	color: var(--pb-grijs);
	font-size: .875rem;
}
.pb-tegels > li strong {
	display: block;
	font-family: var(--pb-display);
	font-size: 1rem;
	color: var(--pb-navy);
}

/* Uitgelichte kaart: de ploeg, op merkblauw */
.pb-kaart--uitgelicht {
	background: var(--pb-navy);
	border-color: var(--pb-navy);
	color: var(--pb-wit);
}
.pb-kaart--uitgelicht h3 { color: var(--pb-wit); }
.pb-kaart--uitgelicht p { color: #c6dcea; }
.pb-kaart--uitgelicht .pb-code { color: var(--pb-groen-helder); }
.pb-kaart__prijs.pb-kaart__prijs { color: var(--pb-wit); }
.pb-kaart__prijs strong { font-family: var(--pb-display); font-size: 1.5rem; }
.pb-kaart--uitgelicht .pb-knoppen { margin-top: 18px; }
.pb-kaart--uitgelicht .wp-block-button,
.pb-kaart--uitgelicht .wp-block-button__link { width: 100%; }

.pb-stappen--drie.pb-stappen--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
	.pb-intro.pb-intro { grid-template-columns: minmax(0, 1fr); }
	.pb-tegels.pb-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-stappen--drie.pb-stappen--drie { grid-template-columns: minmax(0, 1fr); }
	.pb-stappen--drie .pb-stap { border-right: 0; padding-left: 0; }
	.pb-stappen--drie .pb-stap::before { left: 0; }
}

/* In de editor zit om de foto nog een schaalvak; laat dat het hele vlak vullen,
   anders vult de achtergrondfoto zijn band niet. */
.editor-styles-wrapper :is(.pb-werktekening, .pb-sector, .pb-beeldband, .pb-band) > .wp-block-image > div,
.editor-styles-wrapper :is(.pb-werktekening, .pb-sector, .pb-beeldband, .pb-band) > .wp-block-image .components-resizable-box__container {
	width: 100% !important;
	height: 100% !important;
}
.editor-styles-wrapper :is(.pb-werktekening, .pb-sector, .pb-beeldband, .pb-band) > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Op de telefoon is kaart- en staptekst gewoon lopende tekst: niet onder 16px
   (doorloop-poort). Op breder scherm blijft hij rustig kleiner dan de body. */
@media (max-width: 781px) {
	.pb-kaart p:not(.pb-code),
	.pb-disc__kaart p:not(.pb-code),
	.pb-stap p:not(.pb-code),
	.pb-overzicht .wp-block-post-excerpt { font-size: 1rem; }
}

/* Lange vakwoorden in een projecttitel ("Middenspanningskabels") passen op de
   telefoon niet op de standaard h1-maat en braken midden in het woord. De
   kabelkaartjes op Kabelwerk krijgen om dezelfde reden iets minder binnenrand. */
@media (max-width: 640px) {
	.single-project .pb-paginakop .wp-block-post-title { font-size: 1.625rem; }
	.pb-kabel.pb-kabel { padding-inline: 12px; }
}