/* kg-correcties.css — handmatige correcties op de gegenereerde lagen.
 *
 * Dit bestand wordt NIET door tools/genereer_css.py geschreven. Alles wat je in
 * de kg-blok-* of kg-base bestanden zet gaat bij de volgende generatie verloren;
 * hier niet. Laadt als laatste van de bloklagen, dus zonder !important is dit al
 * sterker dan de gegenereerde regels.
 *
 * Zet bij elke regel waarom hij hier staat, anders is over een maand niet meer
 * te zien of hij nog nodig is.
 */

/* Het subherobeeld werd bovenaan uitgesneden doordat Avada op de container een
 * eigen background-position meegeeft die na onze laag komt. Verzoek Rick 28-08. */
.kg .subhero-bg {
	background-position: center !important;
}

/* De oproepkaart in het projectraster draagt twee klassen: .pcard en .cta-card.
 * Allebei zetten ze een achtergrond en een tekstkleur. In het concept stond dat
 * in een stylesheet met .cta-card NA .pcard, dus won de kaart. Bij ons laden de
 * bloklagen op bestandsnaam, en kg-blok-projectgrid.css komt na kg-blok-cta.css.
 * Even specifiek, later in de keten: .kg .pcard{background:#fff} won, waardoor de
 * donkere oproepkaart wit werd met donkere letters.
 *
 * Hier hersteld met een selector die beide klassen noemt (0,3,0). Die wint van
 * allebei, ongeacht de laadvolgorde — dat is duurzamer dan de bestandsvolgorde
 * bijsturen, want die verandert zodra er een bloklaag bijkomt.
 *
 * Let op: dit soort botsing kan bij elke klasse spelen die in twee lagen voorkomt.
 * Gemeten met de berekende stijl, niet op het oog. */
.kg .pcard.cta-card {
	background: linear-gradient(160deg, #0d1f12, #122a18);
	border-color: var(--kg-donker);
	color: #fff;
	justify-content: center;
	padding: 34px 30px;
	gap: 14px;
}

.kg .pcard.cta-card h3 {
	color: #fff;
}

/* De tijdlijn-as begon 320px te hoog en eindigde 104px te laag.
 *
 * `.tl-as` is `position:absolute; top:0; bottom:0` en zoekt dus zijn maat bij de
 * dichtstbijzijnde voorouder MET een positie. In het concept is dat het element dat
 * de items bevat; bij ons zit daar `.tl-omhulsel` tussen — een wrapper die wij zelf
 * hebben toegevoegd en die in het concept niet bestaat, dus waar de generator ook
 * geen regel voor kon meenemen. Zonder `position` viel de as terug op een hogere
 * voorouder, inclusief de sectiekop erboven.
 *
 * Gemeten op /ons-verhaal/: as 2910px hoog tegen 2476px in het concept, met 320px
 * boven het eerste item en 104px onder het laatste. Zichtbaar als een gouden lijn
 * die al naast de kop begint, en de jaartallen sloegen een scrollstap te laat om.
 * De omhulsel zelf was met 2486px wel de goede hoogte. */
.kg .tl-omhulsel {
	position: relative;
}

/* De verhaalhero mist twee stukjes ruimte die het concept INLINE meegeeft.
 *
 * Het concept schrijft daar `<nav class="crumbs" style="position:static;
 * margin-bottom:34px">` en `<div class="hero-cta" style="margin-top:34px">`. Inline
 * stijl staat niet in het <style>-blok, dus tools/genereer_css.py kan hem per definitie
 * niet meenemen — die leest alleen de stylesheet. Zo verdwenen beide marges zonder dat
 * er iets aan de bron ontbrak.
 *
 * Gemeten op /ons-verhaal/: 0px tussen de introtekst en de knoppen, tegen 34px in het
 * concept. `.crumbs` staat standaard absoluut (als overlay in de subhero); in deze hero
 * hoort hij in de tekststroom mee te lopen.
 *
 * Let hierop bij elk blok dat "bijna goed" staat: het concept legt opmaak op drie
 * plekken neer — de stylesheet, een inline style en soms een klasse die JS zet. */
.kg .vh-hero .crumbs {
	position: static;
	margin-bottom: 34px;
}
.kg .vh-hero .hero-cta {
	margin-top: 34px;
}

/* De puntjesnavigatie en de verhaallijn zijn `position:fixed`, maar ze staan in een
 * Avada-container die een eigen stapelcontext maakt. Daardoor kon een decoratieve laag
 * uit de hero eroverheen liggen.
 *
 * Gemeten op /werken-bij/: `document.elementFromPoint()` op het midden van de
 * navigatie gaf `span.merk` in plaats van de navigatie zelf, en de knoppen waren dus
 * niet aan te klikken. Positie en z-index van de nav waren identiek aan het concept —
 * het verschil zat volledig in de container eromheen.
 *
 * z-index op de nav zelf helpt niet: die geldt binnen de context van diezelfde
 * container. De container moet omhoog. 290 en niet hoger, zodat de nav onder de
 * header (z-index 300) blijft en het opengeklapte megamenu er overheen valt. */
.fusion-fullwidth:has( .kg-el--stipnav ) {
	position: relative;
	z-index: 290;
}

/* Verzoek Rick 02-09: het subherobeeld op de CONTACTPAGINA hoger uitsnijden.
 *
 * De regel hierboven (`background-position: center`) geldt sitebreed en blijft staan;
 * deze is bewust op de pagina gescopet via de body-klasse, zodat de andere subhero's
 * niet meeschuiven. Wil je het overal, dan kan de waarde in die eerste regel om. */
.page-id-391 .kg .subhero-bg {
	background-position: center 28% !important;
}

/* Het vestigingsbeeld op /contact/ was 34px te hoog.
 *
 * Het concept geeft `.vest2 img` per pagina een andere hoogte: op contact
 * `clamp(240px,24vw,340px)` en op ons-verhaal `clamp(260px,26vw,380px)`. Allebei die
 * regels belanden in kg-blok-vestigingen.css, want de generator deelt in op de vraag
 * op hoeveel pagina's de KLASSE voorkomt — niet op de vraag of de regels hetzelfde
 * zeggen. De laatste wint dan op beide pagina's, en dat was toevallig die van
 * ons-verhaal. Gemeten: 374px tegen 340px in het concept.
 *
 * Hier gescopet op de contactpagina, want kg-correcties.css wordt niet door de
 * generator overschreven. Er staan er 45 van dit soort botsingen in de lagen; die
 * horen in de generator opgelost te worden, zie de projectstand. */
.page-id-391 .kg .vest2 img {
	height: clamp( 240px, 24vw, 340px );
}

/* De vestigingenband miste zijn lichte achtergrond op /contact/.
 *
 * De regel `.kg .vestigingen { background: var(--kg-licht) }` staat in
 * kg-pagina-ons-verhaal.css, want de generator zag die klasse maar op één conceptpagina.
 * Op /contact/ heet dezelfde band in het concept `.projecten` en krijgt hij zijn
 * achtergrond uit een gedeelde laag; ons element schrijft altijd `.vestigingen`, dus daar
 * bleef de sectie doorzichtig. Gemeten: rgb(244,245,241) tegen transparant.
 *
 * Hier in de correctielaag, zodat het blok zijn achtergrond meeneemt waar hij ook staat. */
.kg .vestigingen {
	background: var( --kg-licht );
}

/* Het oproepblok onder de tekst houden, niet naast de kaart.
 *
 * Verzoek Rick 02 en 03-09: de kennisartikelen in de opmaak van het nieuwsbericht. Sinds
 * die omzetting schrijven ze `.art-grid` uit, hetzelfde raster van tekst plus een kolom
 * van 340px. Een kennisartikel heeft daarin een DERDE kind: `.gart-cta`, het oproepblok
 * onderaan. Die klasse komt niet uit ons element maar staat letterlijk in het tekstveld,
 * en blijft dus `gart-` heten ook nu de rest `art-` is. Hernoemen zou betekenen dat we
 * in de inhoud van de klant gaan zitten wijzigen.
 *
 * Met automatische plaatsing belandt dat derde kind in kolom 2 en duwt het de kaart een
 * rij omlaag. Vandaar alle drie expliciet. Op het nieuwsbericht, dat maar twee kinderen
 * heeft, verandert dit niets: daar geeft de automaat exact dezelfde plaatsing. */
.kg .art-grid > .art-tekst {
	grid-column: 1;
	grid-row: 1;
}
.kg .art-grid > .art-zijbalk {
	grid-column: 2;
	grid-row: 1;
}
.kg .art-grid > .gart-cta {
	grid-column: 1;
	grid-row: 2;
	/* Even breed als de tekst erboven. De kolom is 754px, maar `.art-tekst` houdt zich
	   op 680 voor de leesregel; liep het oproepblok door tot 754, dan stak het aan de
	   rechterkant uit. In het concept zijn die twee even breed (allebei 760). */
	max-width: 680px;
}

/* Zelfde breekpunt als de bloklaag, die het raster hier op een kolom zet. Zonder dit
   blijft de kaart in een tweede kolom hangen die dan niet meer bestaat. */
@media ( max-width: 1080px ) {
	.kg .art-grid > .art-tekst,
	.kg .art-grid > .art-zijbalk,
	.kg .art-grid > .gart-cta {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Labels: het concept heeft TWEE ontwerpen onder dezelfde klassenaam `.art-chip`.
 *
 * Op een artikelpagina staan ze in `.art-chips` (kop) of `.mk-chips` (de kaarten
 * eronder): 12,5px, halfvet, in gewone schrijfwijze. Op het nieuwsoverzicht staan ze in
 * `.art-meta` op een kaart: 11px, vet, HOOFDLETTERS, wijdere letterafstand en een
 * donkerder groen. Twee ontwerpen, twee pagina.s, dezelfde klasse.
 *
 * Onze generator voegt alle regels met dezelfde selector samen in een laag, en dan wint
 * simpelweg wie het laatst staat. Gevolg: de hoofdletters van het overzicht lekten naar
 * de artikelkoppen, en tegelijk kregen de overzichtskaarten de maatvoering van het
 * artikel (12,5px in plaats van 11, halfvet in plaats van vet, het lichtere groen).
 * Allebei fout, in tegengestelde richting, uit een en dezelfde botsing. Gemeten
 * 03-09-2026 tegen het concept.
 *
 * Dit is een van de 45 botsingen die in de projectstand als openstaand punt staan; de
 * structurele oplossing hoort in genereer_css.py, die zulke regels per gebruikscontext
 * zou moeten scheiden in plaats van ze op klassenaam samen te voegen. Tot die tijd
 * herstellen we hier wat zichtbaar is. */
.kg .art-chips .art-chip,
.kg .mk-chips .art-chip {
	text-transform: none;
}
.kg .art-meta .art-chip {
	/* `inline-block` wordt in de flex-context van .art-meta een block, net als in het
	   concept; met het geerfde inline-flex werd het een flexbox en week de hoogte af. */
	display: inline-block;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	border-color: var( --kg-groen-donker );
	color: var( --kg-groen-donker );
}

/* ==========================================================================
   De WITTE artikelvariant weer bruikbaar — 03-09-2026
   --------------------------------------------------------------------------
   Besluit FJ 03-09: wit is de standaard voor een artikel, groen alleen voor
   berichten OVER Klaassen zelf (jubileum, personeel). Daarmee komt de
   kennisvariant (`gart-`) weer in gebruik. Die was sinds 02/03-09 buiten
   gebruik en miste twee dingen.

   1. `.gart-grid` bestond in GEEN enkele laag.
      `artikeltekst.php` schrijft `<voorvoegsel>-grid` uit zodra er iets naast
      de tekst hoort, dus bij wit `gart-grid`. Het concept kent die klasse niet
      (daar staat een kennisartikel in één kolom van 760px met de kaart erboven);
      wij zetten hem wél naast de tekst, dus wij moeten hem ook stileren.
      Hieronder de spiegel van `.art-grid`, inclusief de expliciete plaatsing
      van de drie kinderen — zelfde reden als bij `.art-grid` hierboven: het
      oproepblok `.gart-cta` komt uit het rijke tekstveld en zou met
      automatische plaatsing de kaart een rij omlaag duwen.

   2. Het kruimelpad was wit op wit.
      `.kg .crumbs` staat op rgba(255,255,255,.72), want het is ontworpen als
      overlay op een donkere subhero. `.gart-kop` heeft achtergrond --kg-wit.
      Gemeten op de CONCEPTPAGINA zelf (/v2/artikel-energielabels): kleur
      rgba(255,255,255,.72) op rgb(255,255,255) — daar is het kruimelpad dus
      net zo onzichtbaar. Dit is een bewuste AFWIJKING van het concept: een
      onleesbaar kruimelpad nemen we niet over.
   ========================================================================== */

.kg .gart-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 70px;
	align-items: start;
}

/* De leesregel gelijk aan die van het nieuwsbericht: de kolom is 754px breed,
   maar de tekst houdt zich op 680 (in het concept zijn tekst en oproepblok
   allebei 760 in de smalle opzet). */
.kg .gart-grid > .gart-tekst {
	grid-column: 1;
	grid-row: 1;
	max-width: 680px;
}

.kg .gart-grid > .art-zijbalk {
	grid-column: 2;
	grid-row: 1;
}

.kg .gart-grid > .gart-cta {
	grid-column: 1;
	grid-row: 2;
	max-width: 680px;
}

/* Zelfde breekpunt als `.art-grid` in de bloklaag. */
@media ( max-width: 1080px ) {
	.kg .gart-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.kg .gart-grid > .gart-tekst,
	.kg .gart-grid > .art-zijbalk,
	.kg .gart-grid > .gart-cta {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Het kruimelpad op de lichte kop. Kleuren uit de tokens, zodat Klaassen ze in
   Theme Options kan blijven wijzigen. --kg-grijs op wit is 4,9:1 en --kg-tekst
   13:1; allebei ruim boven de norm. */
.kg .gart-kop .crumbs,
.kg .gart-kop .crumbs a {
	color: var( --kg-grijs );
}

.kg .gart-kop .crumbs a:hover {
	color: var( --kg-groen-donker );
}

.kg .gart-kop .crumbs .sep {
	color: var( --kg-lijn );
	opacity: 1;
}

.kg .gart-kop .crumbs [aria-current] {
	color: var( --kg-tekst );
}

/* ==========================================================================
   Projectfilter: de twee gaten die het stil lieten falen — 04-09-2026
   --------------------------------------------------------------------------
   Gemeld door FJ: het filter op de homepage doet niets, en "10 projecten
   zichtbaar" staat scheef op /projecten/ en op de homepage. Het bleken twee
   ontbrekende CSS-regels, niet twee bugs in het script.

   Gemeten in de browser: na een klik op "Bedrijfshuisvesting" krijgt op de
   HOMEPAGE 8 van de 12 kaarten netjes de klasse `uit` en meldt de teller
   "4 projecten zichtbaar" — maar er blijven er 12 zichtbaar. Op /projecten/
   werkt dezelfde klik wel (62 -> 10). Het script is dus in orde; het verschil
   zit in de opmaak.

   1. Er bestond alleen `.kg .pcard.uit { display:none }`.
      Het concept kent twee kaartopbouwen: `.pcard` op het overzicht /projecten/
      en `.proj` op de homepage en de expertisepagina's. `kg-blok-projectfilter.js`
      bedient allebei — de klasse `uit` wordt op allebei gezet — maar de regel die
      hem verbergt bestond maar voor één van de twee. Het filter "werkte" dus wel,
      alleen zag je er niets van.

      Het script zet ook `kaart.hidden = true`, en normaal zou dat al genoeg zijn.
      Dat helpt hier niet: `.proj` heeft een eigen display-waarde en die wint van
      de browserregel `[hidden]{display:none}`. Vandaar dat we het expliciet doen.

   2. `.kg-sr-only` bestond nergens.
      Het script hangt een aria-live-melding in de filterbalk zodat een klik ook
      hoorbaar is voor wie niet meekijkt. Die krijgt de klasse `kg-sr-only` — maar
      zonder bijbehorende regel is dat gewoon een alinea, en dan staat de tekst
      "10 projecten zichtbaar" zichtbaar en ongepositioneerd onder de knoppen.
      Avada heeft wel een eigen `.sr-only`, maar daar leunen we niet op: die is van
      het thema en kan bij een update verdwijnen.
   ========================================================================== */

.kg .proj.uit,
.kg .pcard.uit {
	display: none;
}

/* Alleen voor schermlezers: uit beeld, maar wel voorleesbaar. Niet
   `display:none` en niet `visibility:hidden`, want dan slaat de schermlezer hem
   over en is de melding alsnog stil. */
.kg .kg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Ruimte tussen de filterknoppen op /nieuws/ — 04-09-2026
   --------------------------------------------------------------------------
   Gemeld door FJ: de tags op de nieuwspagina plakken aan elkaar. Gemeten: de
   horizontale tussenruimte was precies 0 px. `.filterbar` had in de HELE
   opmaak geen enkele regel, dus stond hij op `display:block` met knoppen die
   elkaar letterlijk raken.

   Dit is geen omissie van de generator: het CONCEPT heeft de klasse ook alleen
   in de markup staan en nergens een bijbehorende regel. Daar plakken ze dus
   net zo goed; het is nooit opgevallen. Zelfde soort gat als het wit-op-witte
   kruimelpad op de lichte artikelkop.

   De maat is niet verzonnen maar overgenomen van de rest van de site, zodat de
   drie filterbalken zich hetzelfde gedragen:
       /projecten/   .filters  display:flex; flex-wrap:wrap; gap:10px
       homepage      .filter   display:flex; flex-wrap:wrap; gap:9px
       /nieuws/      .filterbar  <- had niets
   Tien pixels, gelijk aan het overzicht op /projecten/ — dat is de dichtstbij
   liggende tegenhanger: ook een filterbalk boven een raster met kaarten.

   `flex-wrap: wrap` is niet optioneel. Zonder die regel zouden de zeven knoppen
   op een smal scherm niet meer afbreken maar op één rij blijven staan en
   horizontale overloop veroorzaken. Met `gap` geldt de ruimte dan meteen ook
   tussen de rijen.
   ========================================================================== */

.kg .filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   De sticky header plakte nergens — 08-09-2026, gemeld door Rick

   `header.site` staat op `position:sticky;top:0` (uit het concept), maar een
   sticky element beweegt alleen binnen de box van zijn OUDER. Gemeten op / en
   /expertise/ is die keten zes lagen diep en elke laag precies zo hoog als de
   header zelf:

       header.site                     91px  sticky
       .kg.kg-el--megamenu             91px   <- elementwrapper
       .fusion-column-wrapper          91px
       .fusion-layout-column           91px
       .fusion-builder-row             91px
       .fusion-fullwidth               91px
       .fusion-tb-header               91px   <- hier zetten we hem
       #wrapper                      9740px   <- eerste ouder met paginahoogte

   Nul speling, dus de header schuift gewoon mee omhoog. In het concept is
   `header.site` een direct kind van `body` en is die ruimte er wel.

   NIET de oorzaak: de `overflow-x:clip` op `#boxed-wrapper`. Dat is de
   gebruikelijke verdachte bij een sticky die niet plakt, maar `clip` maakt —
   anders dan `hidden` — geen scrollcontainer. Getest door hem in de browser op
   `visible` te zetten: geen verschil. Hetzelfde geldt voor `overflow-x:hidden`
   op de body; die propageert naar de viewport.

   Daarom zetten we sticky op `.fusion-tb-header`: de buitenste headerlaag,
   waarvan de ouder wél de hele pagina hoog is. `header.site` mag zijn eigen
   sticky houden, die is binnen zijn 91px-ouder een no-op.

   Gemeten na de fix op /, /expertise/, /contact/, /nieuws/, /werken-bij/ en
   /projecten/: header blijft op y=0 na 1400px scrollen, het megamenu klapt open
   onder de header (y=90) en ligt bovenop, geen horizontale overloop.
   ========================================================================== */

.fusion-tb-header {
	position: sticky;
	top: 0;
}

/* Ingelogd staat de WP-adminbalk vast bovenaan; zonder deze regel schuift de
 * header eronder. Alleen zichtbaar voor beheerders, maar dat zijn juist de
 * mensen die de site beoordelen. Maten komen van WordPress zelf: 32px, en
 * onder 782px wordt de balk 46px hoog en scrollt hij mee (dus dan geen offset). */
body.admin-bar .fusion-tb-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fusion-tb-header {
		top: 0;
	}
}

/* ==========================================================================
   Het mobiele menu — 08-09-2026, feedback Rick

   Vier punten: de uitklapmodule werkte niet, de icoontjes stonden niet rechts,
   er zat geen scheidingslijn onder de items en het geheel moest moderner.

   Het eerste punt was een echt gat, geen slordigheid: het concept zet de
   megapanelen onder 1040px op `display:none !important` en heeft er geen
   mobiele variant voor. Alles onder Expertise, Werkwijze en Over ons — 3 van de
   6 hoofditems — was op een telefoon dus niet te bereiken. Op desktop verandert
   hieronder niets: alle regels hangen aan `.nav-links.open`, en die klasse
   bestaat alleen als het mobiele menu openstaat.

   De knop `.sub-toggle` wordt door kg-site.js aangemaakt. Dat is bewust een
   echte <button> naast de link en niet een klik op de link zelf: zo blijft
   "Expertise" gewoon naar /expertise/ gaan en is uitklappen ook met toetsenbord
   en schermlezer te doen.
   ========================================================================== */

/* De knop bestaat in de DOM op elke breedte; op desktop doet hij niet mee. */
.kg .nav-links .sub-toggle {
	display: none;
}

@media (max-width: 1279px) {

	/* --- het paneel als geheel ------------------------------------------ */
	/* Volle resterende schermhoogte met eigen scroll: het menu is uitgeklapt
	   langer dan een telefoonscherm, en zonder dit scrolt de PAGINA achter het
	   menu door in plaats van de lijst zelf. */
	.kg .nav-links.open {
		max-height: calc(100dvh - 90px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 2px 24px 22px;
		gap: 0;
	}

	/* --- de rij: tekst links, knop rechts, lijn eronder ------------------ */
	.kg .nav-links.open > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--kg-lijn);
	}

	.kg .nav-links.open > li:last-child {
		border-bottom: 0;
	}

	.kg .nav-links.open > li > a {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		padding: 15px 0;
		font-size: 16px;
	}

	/* Het chevronnetje uit de desktopnavigatie zit IN de link en zou naast de
	   knop een tweede pijltje geven. */
	.kg .nav-links.open > li > a .chev {
		display: none;
	}

	.kg .nav-links.open > li > a[aria-current="page"] {
		color: var(--kg-groen-donker);
	}

	/* --- de uitklapknop -------------------------------------------------- */
	/* 44x44 is het kleinste raakvlak dat op een telefoon nog betrouwbaar te
	   raken is; de negatieve marge houdt het pijltje toch op de rechterrand. */
	.kg .nav-links.open > li > .sub-toggle {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -12px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--kg-donker);
		cursor: pointer;
	}

	.kg .nav-links.open > li > .sub-toggle .sub-chev {
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .22s ease;
	}

	.kg .nav-links.open > li.sub-open > .sub-toggle {
		color: var(--kg-groen-donker);
	}

	.kg .nav-links.open > li.sub-open > .sub-toggle .sub-chev {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* --- het paneel: van overlay naar uitklapblok ------------------------ */
	/* `grid-template-rows: 0fr -> 1fr` animeert naar de eigen hoogte van de
	   inhoud. Met een vaste max-height zou het paneel of afgeknepen worden of
	   traag "nahangen" bij een korte lijst. Het !important is nodig omdat
	   kg-base hier `display:none !important` zet. */
	.kg .nav-links.open > li > .mega {
		display: grid !important;
		grid-template-rows: 0fr;
		transition: grid-template-rows .28s ease;
		flex: 1 0 100%;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border: 0;
		box-shadow: none;
		z-index: auto;
	}

	.kg .nav-links.open > li.sub-open > .mega {
		grid-template-rows: 1fr;
	}

	.kg .nav-links.open > li > .mega > .mega-inner {
		overflow: hidden;
		min-height: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* --- de inhoud van het paneel, platgeslagen -------------------------- */
	/* Op desktop zijn dit drie kolommen naast elkaar. Op een telefoon wordt dat
	   één lijst; de drie rasters hieronder zijn de enige plekken waar dat moet. */
	.kg .nav-links.open .mega.exp .mega-inner,
	.kg .nav-links.open .mega.over .mega-inner,
	.kg .nav-links.open .mega-grid,
	.kg .nav-links.open .mega.over ul {
		display: block;
	}

	/* Kopje plus zin herhalen alleen het hoofditem waar je net op tikte. */
	.kg .nav-links.open .mega-intro {
		display: none;
	}

	/* Het uitgelichte beeldtegeltje is 230px hoog; in een uitklaplijst is dat
	   geen uitgelicht item meer maar een blokkade. */
	.kg .nav-links.open .mega-feat {
		display: none;
	}

	.kg .nav-links.open .mega-cat {
		margin: 0 0 4px;
	}

	.kg .nav-links.open .mega-cat-t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0 8px;
		font-size: 13px;
		letter-spacing: .04em;
	}

	/* Eén doorlopende lijn links laat zien dat dit een niveau dieper is,
	   zonder in te springen met ruimte die er op 390px niet is. */
	.kg .nav-links.open .mega-subs li a,
	.kg .nav-links.open .mega-link,
	.kg .nav-links.open .mega.over a:not(.mega-feat) {
		display: block;
		padding: 11px 0 11px 14px;
		border-left: 2px solid var(--kg-lijn);
		border-radius: 0;
		font-size: 15px;
	}

	.kg .nav-links.open .mega-subs li a:hover,
	.kg .nav-links.open .mega-link:hover,
	.kg .nav-links.open .mega.over a:not(.mega-feat):hover {
		border-left-color: var(--kg-goud);
		background: none;
	}

	/* De omschrijvingsregel onder een menulink maakt de lijst bijna twee keer
	   zo lang; op deze breedte wint het overzicht. */
	.kg .nav-links.open .mega-link .d {
		display: none;
	}

	/* De groeiende onderstreping van de desktopnavigatie staat op `bottom:26px`.
	   In de uitgeklapte lijst is de link 52px hoog, dus die lijn valt dwars DOOR de
	   tekst -- het leest als doorhalen. Op een telefoon blijft hover bovendien
	   plakken na een tik, dus je houdt hem in beeld. Hier heeft hij geen functie. */
	.kg .nav-links.open > li > a::after {
		display: none;
	}

	/* De sublinks dragen een negatieve marge voor hun hover-achtergrondje op
	   desktop; daardoor viel de accentlijn links buiten de lijst. */
	.kg .nav-links.open .mega-subs li a {
		margin: 0;
		color: var(--kg-donker);
	}

	/* Het pijltje-op-hover uit de desktoplijst blijft op touch zichtbaar hangen. */
	.kg .nav-links.open .mega-subs li a::after {
		content: none;
	}

	/* Feedback Rick 08-09: het Werkwijze-paneel was smal en brak de items over drie
	   regels. Oorzaak: `.mega.werk .mega-inner` is OOK een kolomraster, en hierboven
	   stonden alleen `.exp` en `.over` met naam genoemd. Gemeten stond de lijst op
	   123px binnen een paneel van 342px. Nu generiek: elk paneel is op deze breedte
	   een blok, ongeacht welke van de drie vormen het is. Dat dekt meteen een vierde
	   vorm die er later bij komt. */
	.kg .nav-links.open .mega-inner {
		display: block;
	}

	/* Feedback Rick 08-09: de items onder Over ons in dezelfde stijl als de andere
	   submenu's. Die vorm gebruikt op desktop de KOP-stijl (Montserrat 700) omdat het
	   daar tegels zijn; in een uitklaplijst staan ze naast de sublinks van Expertise
	   en Werkwijze (Open Sans 600) en dan valt het verschil op als een fout.
	   `.t` moet mee: dat is het kind dat het lettertype draagt. */
	.kg .nav-links.open .mega-link,
	.kg .nav-links.open .mega-link .t,
	.kg .nav-links.open .mega.over a:not(.mega-feat) {
		font-family: var(--kg-body);
		font-weight: 600;
		font-size: 15px;
		color: var(--kg-donker);
	}

	.kg .nav-links.open .mega-subs {
		margin: 0 0 10px;
	}
}

@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
	.kg .nav-links.open > li > .mega,
	.kg .nav-links.open > li > .sub-toggle .sub-chev {
		transition: none;
	}
}

/* ==========================================================================
   Opsommingen in rijke tekst — 08-09-2026, verzoek Rick

   Gevraagd: `.kg ul { padding-left:20px; padding-bottom:20px; }`. Bewust NIET zo
   overgenomen, en dit is waarom: binnen `.kg` zijn verreweg de meeste `ul`'s geen
   opsomming maar opmaak — gemeten over acht pagina's 105 lijsten, waarvan er 101
   `list-style:none` hebben: het megamenu (`nav-links`, `mega-subs`), de
   voettekstkolommen, `hoe-points`, `pts`, de chips. Die staan allemaal bewust op
   `padding-left: 0`; 20px erbij zou het menu en de footer laten verspringen.

   De vier lijsten die het WEL betreft staan in rijke tekst en hebben `disc`. Daar
   plakten de bolletjes tegen de linkerrand omdat de reset in kg-base alle padding
   weghaalt. Rijke tekst kan alleen ontstaan in de containers hieronder -- dat zijn
   de enige velden waar een redacteur een opsomming kan typen (`kg_rijke_tekst()`).
   Zo krijgt de nieuwe tekst op /algemene-voorwaarden/ het meteen goed mee.

   Werkt er later een derde tekstveld bij, dan hoort de klasse hier ook bij.
   ========================================================================== */

.kg .gart-tekst ul,
.kg .gart-tekst ol,
.kg .art-tekst ul,
.kg .art-tekst ol,
.kg .wb-hfd ul,
.kg .wb-hfd ol {
	padding-left: 20px;
	padding-bottom: 20px;
}

/* ==========================================================================
   Telefoonnummer als knop in de header — 08-09-2026, verzoek Rick

   Het nummer stond als kale tekst tussen de navigatie en de groene CTA en las
   daardoor niet als iets waar je op kunt tikken. Nu een omlijnde pil met een
   telefoonicoon ervoor: duidelijk een knop, maar rustiger dan de groene CTA
   ernaast, zodat die de eerste blijft.

   Let op bij het aanpassen: hover verandert alleen kleuren, geen border-breedte
   en geen padding. Dat is bewust -- zie het punt over de verspringende pagina;
   een knop die bij hover 1px dikker wordt, duwt de hele headerrij op.
   ========================================================================== */

.kg .nav-tel {
	/* GEEN display hier. Deze laag komt na kg-base, dus een `display` zonder
	   mediaquery wint van de `display:none` die kg-base onder 1040px zet -- dan
	   staat de knop op elke breedte, ook op een telefoon. De display staat daarom
	   in de twee mediaqueries hieronder. */
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1.5px solid var(--kg-lijn);
	border-radius: 999px;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.kg .nav-tel:hover,
.kg .nav-tel:focus-visible {
	border-color: var(--kg-groen);
	background: rgba(0, 166, 81, .07);
	color: var(--kg-groen-donker);
}

.kg .nav-tel-icoon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: none;
	/* Donkergroen, verzoek Rick 08-09-2026. `--kg-groen-donker` IS #138558: de token
	   wijst naar Avada s --awb-color5 en die staat op precies die waarde (nagemeten in
	   de browser). Via de token, zodat het meebeweegt als het thema van kleur verandert. */
	color: var(--kg-groen-donker);
}

.kg .nav-tel-icoon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* De knop verdween al vanaf 1040px, samen met de navigatie: kg-base zet
   `.nav-tel` daar op `display:none`. Op een tablet is daar ruimte zat voor, dus
   hij blijft nu staan tot 768px -- verzoek Rick 08-09-2026. Daaronder valt hij
   vanzelf weg, want dan geldt de regel uit kg-base weer. */
@media (min-width: 768px) {
	.kg .nav-tel {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	.kg .nav-tel {
		display: none;
	}
}

/* ==========================================================================
   Reveals sneller en eerder — 08-09-2026, verzoek Rick

   Klacht: na scrollen staat een sectie ruim een seconde leeg (Hoe we het doen,
   Ontdek ons werk, de referenties). Dat was de optelsom van twee dingen:

     1. de overgang duurde 0,7s voor opacity EN transform;
     2. de waarnemer keek met `rootMargin: 0px 0px -8% 0px`, dus een blok telde
        pas mee als het al 8% van de schermhoogte IN beeld stond.

   Samen: je scrolt, je ziet niets, en pas daarna begint een trage fade. Nu 0,32s
   en de trigger staat in kg-site.js vóór de onderrand, zodat een sectie al aan
   het invaden is als hij in beeld komt. Het effect blijft, het wachten niet.

   Bewust NIET de reveals helemaal weggehaald: ze horen bij het concept en op de
   eerste viewport zijn ze het duidelijkst zichtbaar.
   ========================================================================== */

.kg .reveal {
	transition-duration: .32s;
}

/* ==========================================================================
   Tellers laten de pagina niet meer hobbelen — 08-09-2026, melding Rick

   Elk oplopend getal (`data-tel`, `.tel`, de cijferrij in de hero) schreef per
   frame een nieuwe waarde. In een proportioneel lettertype is elk cijfer anders
   breed, en het aantal cijfers groeit ook nog van 1 naar 4. Gemeten op /175-jaar/:
   288 verschuivingen en een CLS van 1,3 -- de watermerkjaren staan daar op
   font-size 320px, dus elke pixel telt vierhonderdvoudig mee.

   Twee maatregelen samen:
     - `tabular-nums` hieronder houdt de cijfers onderling even breed;
     - de JS reserveert vóór het tellen de breedte van de EINDstand
       (`breedteVastzetten()` in kg-blok-hoofdstuk.js en kg-blok-werkenbij.js).

   Zonder de tweede blijft het aantal cijfers de boosdoener; zonder de eerste
   wiebelt het getal binnen die vaste breedte. Allebei nodig dus.
   ========================================================================== */

.kg .hs-jaar,
.kg .stat .num,
.kg .stat strong,
.kg [data-tel],
.kg .tel {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Losse woorden onder koppen — 08-09-2026, melding Rick

   Op 390px eindigden veel koppen met één woord op de laatste regel: de H1 van de
   homepage ("generaties"), "Vooral hóe we bouwen.", de H3's bij Hoe we het doen,
   elf koppen op Ons verhaal, de kaarttitels op Nieuws en Projecten. Geteld over zes
   pagina's: 44 koppen.

   Twee maatregelen, en ze vullen elkaar aan:

     1. `text-wrap: balance` laat de browser de regels even lang maken in plaats van
        elke regel maximaal te vullen. Dat alleen bracht het van 44 naar 12.
     2. `kg_koppen_afsluiten()` in kg-site.js plakt de laatste twee woorden aan
        elkaar met een vaste spatie. Samen met balance: van 44 naar 1.

   De browser past `balance` alleen toe op korte blokken (tot een handvol regels);
   dat is precies waar koppen onder vallen en lopende tekst niet. Gemeten na afloop
   op 360, 390 en 768px: nul horizontale overloop.
   ========================================================================== */

/* HERZIEN 08-09-2026, tweede meting.  stond hier eerst wel, en
   leek een verbetering: van 44 naar 12 koppen. Die meting keek echter alleen naar de
   LAATSTE regel. Tel je elke regel die uit één woord bestaat -- en dat is wat je ziet
   -- dan is balance juist SLECHTER: 25 tegen 22 zonder. Het breekt bovendien koppen
   die anders passen, om de regels even breed te maken: "Woningbouw in vier vormen"
   werd "Woningbouw" + "in vier vormen". Daarom eruit; de vaste spatie uit
   kg-site.js doet het werk. */

/* Het vette deel van de jubileumbadge is een eenheid: op 390px brak
   "175 JAAR" af tot "175" en "JAAR" onder elkaar (melding Rick 08-09-2026).
   Alleen dat deel vastzetten, niet de hele badge -- die is met hoofdletters en
   letterruimte te breed voor een telefoon en moet juist wel kunnen afbreken. */
.kg .jub-pill b {
	white-space: nowrap;
}

/* De CTA in de header was 54px hoog tegenover 43px voor de telefoonknop ernaast;
   met deze maten staan ze in verhouding. Opgegeven door Rick 08-09-2026.
   De header zelf blijft 91px, dus dit verschuift verder niets. */
.kg header .nav-actions .btn {
	padding: 9px 16px;
	font-size: 14px;
}

/* Het gouden kader achter het beeld van "Hoe we het doen" — 08-09-2026, Rick.
   De wrapper .hoe-beeld draagt de klasse kader-goud; .hoe-media zelf kan dat niet,
   want die knipt met overflow:hidden juist het uitstekende deel weg.
   .hoe-media moet boven het kader liggen: het pseudo-element is absoluut
   gepositioneerd en zou anders over het beeld heen vallen. */
.kg .hoe-beeld {
	position: relative;
}

.kg .hoe-beeld .hoe-media {
	position: relative;
	z-index: 1;
}

/* Het beloftesblok stond op de papierkleur (#faf9f5) en gaat naar zuiver wit.
   Opgegeven door Rick 08-09-2026. De tekst is donker (#2b2b27 / #15170f), dus dit
   raakt het contrast niet; nagemeten voor de zekerheid. */
.kg .belofte {
	background: #ffffff;
}

/* Meer lucht tussen de sectiekop en het projectraster — 08-09-2026, Rick.
   Sinds het filter van de homepage af is, volgt het raster direct op de tekst: er
   zat nog 14px tussen, terwijl er onder het raster 48px staat. De selector grijpt
   alleen aan als het raster DIRECT op de kop volgt, dus op /projecten/ -- waar de
   filterbalk ertussen staat -- verandert er niets. */
.kg .projecten .head-row + .proj-grid {
	margin-top: 34px;
}

/* De jubileumbadge paste op 390px niet en brak over drie regels, met "vakmanschap"
   alleen op de laatste. Op 10,5px met krappere letterruimte past de hele tekst op
   één regel (gemeten: 330px breed in een venster van 390) en blijft hij leesbaar --
   het is een bovenkopje in hoofdletters, geen lopende tekst. Melding Rick 08-09-2026.
   Het vaste "175 JAAR" uit de regel hierboven blijft ook hier gelden. */
@media (max-width: 480px) {
	.kg .jub-pill {
		font-size: 10.5px;
		letter-spacing: .04em;
		padding: 6px 11px;
		gap: 6px;
	}
}

/* De pijl in de formulierknop plakte tegen de tekst ("Verstuur bericht→"), op de
   homepage en op /contact/. Dat is een Avada-knop; de kg-knoppen zetten zelf al
   `gap: 10px` tussen tekst en pijl. Zelfde maat aangehouden, zodat de knop naast de
   andere knoppen niet uit de toon valt. Melding Rick 08-09-2026. */
.kg button.fusion-button[type="submit"],
.kg .fusion-form-form-wrapper .fusion-button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* De keurmerken zitten in één logostrook, dus ze waren niet los aan te wijzen: geen
   tooltip en geen eigen link. kg_keurmerk_vlakken() in footer.php legt er nu zeven
   doorzichtige vlakken overheen, één per keurmerk. Melding Rick 08-09-2026. */
.kg .footer-certs-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.kg .footer-certs-wrap .cert-vlak {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	border-radius: 3px;
	transition: background-color .16s ease;
}

.kg .footer-certs-wrap .cert-vlak:hover,
.kg .footer-certs-wrap .cert-vlak:focus-visible {
	background: rgba(255, 255, 255, .12);
}

/* Het nieuwsblok op een projectpagina verbergen als er niets in staat — 08-09-2026,
   melding Rick: "Het laatste nieuws over dit project – Geen nieuwsbericht over dit
   project gevonden." stond zichtbaar op alle 58 pagina's.

   Het blok koppelt berichten aan een project via het veld `_m2m_related_project`.
   Vier berichten hebben dat veld, dus op vier projectpagina's is er wél nieuws --
   het blok moet dus blijven, niet weg. Avada's post_cards kent geen "verberg als
   leeg"; bij een lege uitkomst rendert het `<h2 class="fusion-nothing-found">`.
   Daar grijpen we op aan: de hele sectie eromheen valt weg.

   `:has()` is hier precies het juiste gereedschap en wordt breed ondersteund. In een
   browser die het niet kent blijft de melding staan -- zichtbaar, niet stuk. */
.fusion-fullwidth:has(.fusion-nothing-found) {
	display: none;
}

/* De CTA-knop op de projectpagina's — 08-09-2026, melding Rick: die pagina's
   eindigden met alleen tekstlinks naar mail en telefoon.

   Eigen klasse in plaats van de bestaande `.btn`: die is opgemaakt binnen `.kg`, en
   de container van dit blok draagt die klasse niet. Hem alsnog `kg` geven zou de
   kg-reset over de titel en de checklist in dat blok leggen -- meer verandering dan
   de bedoeling. De maten komen wel van `.btn`, zodat de knop naast de rest van de
   site niet uit de toon valt. Wit op de donkere band, net als de knoppen in de
   subheros. */
.kg-cta-knoprij {
	margin-bottom: 22px;
}

a.kg-cta-knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kg-kop, inherit);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 999px;
	border: 1.5px solid #fff;
	background: #fff;
	color: var(--kg-donker, #15170f);
	text-decoration: none;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

a.kg-cta-knop:hover,
a.kg-cta-knop:focus-visible {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

a.kg-cta-knop span {
	transition: transform .22s ease;
}

a.kg-cta-knop:hover span {
	transform: translateX(4px);
}

/* Het blok met de projectgegevens als kaart — 08-09-2026, melding Rick: het oogde
   een stuk minder dan de rest van de site. Opmaak overgenomen van `.kort-card`
   ("In het kort" op de expertisepagina's): papierkleur, dunne lijn, gouden streep
   links, en per rij dezelfde raster- en hoverbehandeling.

   De klasse `kg-projectkaart` staat op de kolom zelf (via ~/kg_projectkaart.php in
   alle 62 projecten). Aangrijpen op `.fusion-builder-column-4` zou wankel zijn: dat
   nummer hangt af van de volgorde van de kolommen op de pagina.

   Let op: dit blok staat BUITEN `.kg` (het is de inhoud van het project, niet een
   kg-element), dus de selectors hieronder mogen daar niet op leunen. */
.kg-projectkaart .fusion-column-wrapper {
	background: var(--kg-papier, #faf9f5);
	border: 1px solid var(--kg-lijn, #e6e3db);
	border-radius: var(--kg-radius, 14px);
	padding: 30px 32px !important;
	position: relative;
	overflow: hidden;
}

/* De gouden streep links, zoals bij de kort-card. */
.kg-projectkaart .fusion-column-wrapper::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--kg-goud, #c9a962);
	border-radius: 3px;
}

/* De kopjes: klein, in kapitalen, goud -- de kort-card doet het net zo. */
.kg-projectkaart h2,
.kg-projectkaart h3,
.kg-projectkaart h4 {
	font-size: 13px !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--kg-goud, #c9a962) !important;
	font-weight: 700 !important;
	margin: 0 0 18px !important;
}

.kg-projectkaart h2:not(:first-child),
.kg-projectkaart h3:not(:first-child),
.kg-projectkaart h4:not(:first-child) {
	margin-top: 26px !important;
}

/* De tabel met locatie en categorie wordt een rijtje zoals in de kort-card:
   een smalle labelkolom en de waarde ernaast, met een lijn ertussen. */
.kg-projectkaart table {
	width: 100%;
	border-collapse: collapse;
	background: none;
	border: 0;
	margin: 0;
}

.kg-projectkaart table tr {
	border-top: 1px solid var(--kg-lijn, #e6e3db);
}

.kg-projectkaart table tr:first-child {
	border-top: 0;
}

.kg-projectkaart table td {
	padding: 12px 0 !important;
	border: 0 !important;
	background: none !important;
	vertical-align: top;
	font-size: 15px;
}

.kg-projectkaart table td:first-child {
	width: 92px;
	padding-right: 14px !important;
	color: var(--kg-grijs, #6b6f6a);
	font-size: 13.5px;
}

.kg-projectkaart table td:last-child {
	font-weight: 600;
}

/* De opsomming onder "Bijzonderheden" krijgt de gouden stip van de kort-card. */
.kg-projectkaart ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kg-projectkaart ul li {
	position: relative;
	padding: 9px 0 9px 18px;
	border-top: 1px solid var(--kg-lijn, #e6e3db);
	font-size: 15px;
}

.kg-projectkaart ul li:first-child {
	border-top: 0;
}

.kg-projectkaart ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kg-goud, #c9a962);
}

/* De opsomming had naast onze gouden stip ook nog het open bolletje van de
   standaardopmaak staan -- twee tekens per regel. Die eerste komt van Avada s
   lijstopmaak, die de list-style op het LI zet en niet op de UL. */
.kg-projectkaart ul li {
	list-style: none !important;
	list-style-type: none !important;
}

.kg-projectkaart ul li::marker {
	content: "";
}

/* De koppen stonden gecentreerd (instelling van de fusion_title), terwijl de
   kort-card ze links zet. Hier gelijkgetrokken, inclusief de tabel eronder. */
.kg-projectkaart h2,
.kg-projectkaart h3,
.kg-projectkaart h4,
.kg-projectkaart .fusion-title,
.kg-projectkaart table td {
	text-align: left !important;
}

/* Het blok met verwante projecten onder een projectpagina staat al onder een eigen
   kop ("Meer projecten bekijken") in een container met eigen ruimte. De sectie van
   het projectgrid brengt daar nog eens 104px boven en onder bij, en dan zweven de
   drie kaarten in een leeg vlak. Alleen hier bijgesteld, via de klasse kg-verwant;
   op /projecten/ en de homepage blijft de ruimte zoals hij was. — 08-09-2026 */
.kg-el--projectgrid.kg-verwant section {
	padding-top: 0;
	padding-bottom: 8px;
	background: transparent;
}
/* De kaarten staan in een eigen wrap met 28px zijruimte; hier zit het grid al in de
   Avada-kolom en dan loopt de eerste kaart 28px uit de pas met de kop erboven. */
.kg-el--projectgrid.kg-verwant .wrap {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/* Tweede CTA-knop op de projectpagina's, direct onder de omschrijving — verzoek Rick
   08-09-2026. De knop onderaan staat pas na het nieuws- en het projectenblok.

   Eigen kleurvariant, want `kg-cta-knop` hierboven is WIT met een witte rand: die is
   gemaakt voor het donkere info-block met beeldachtergrond. Onder de omschrijving is
   de achtergrond licht en zou zo'n knop onzichtbaar zijn. Deze volgt daarom de knop
   in de header: #138558 met witte letters. */
a.kg-cta-knop--groen {
	background: #138558;
	border-color: #138558;
	color: #fff;
}

a.kg-cta-knop--groen:hover,
a.kg-cta-knop--groen:focus-visible {
	background: transparent;
	border-color: #138558;
	color: #138558;
}

/* De knoprij staat als laatste in de contentkolom. Daar staat al ruimte onder vanuit
   de container; boven de knop moet er wel lucht bij, anders plakt hij tegen de laatste
   alinea of het laatste beeld van de omschrijving. */
/* De knoprij staat in de kolom van de LAYOUTSECTIE, niet in de container van de
   omschrijving; zonder uitlijning plakt hij tegen de vensterrand. De tekst ernaast
   staat op `(venster - 1164) / 2 + 40`, gemeten over twaalf breedtes van 390 tot
   1920: de rij is 1164 breed en gecentreerd, en de kolom springt 40px in. Onder de
   rijbreedte valt beide weg en houdt de container 30px over. */
.kg-cta-knoprij.kg-cta-onder {
	box-sizing: border-box;
	/* de kolomwrapper is een flexcontainer: zonder breedte krimpt deze div naar de
	   knop en centreren de auto-marges hem midden op de pagina */
	width: 100%;
	max-width: 1164px;
	margin: 34px auto 0;
	padding-left: 40px;
	padding-right: 40px;
	/* de sectie centreert zijn tekst; de knop hoort links, bij de lopende tekst */
	text-align: left;
}

.kg-cta-knoprij.kg-cta-onder p {
	margin: 0;
	text-align: left;
}

@media (max-width: 1163px) {
	.kg-cta-knoprij.kg-cta-onder {
		max-width: none;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Doorverwijzing onder de opsomming van een duurzaamheidsthema — 08-09-2026, verzoek
   Rick: de thema's moesten ook naar de expertise- of werkwijzepagina wijzen waar het
   onderwerp uitgewerkt staat. De contactknop (.theme-xlink) blijft rechts bij de
   foto; deze staat links bij de tekst, waar toch loze ruimte was. */
.themas .theme-verder {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-weight: 700;
	font-size: 15px;
	color: var(--kg-donkergroen, #138558);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.themas .theme-verder:hover,
.themas .theme-verder:focus-visible {
	border-bottom-color: currentColor;
}

.themas .theme-verder .arrow {
	transition: transform .2s ease;
}

.themas .theme-verder:hover .arrow {
	transform: translateX(4px);
}

/* De knop in het vaste afsluitblok — 08-09-2026. Het blok wordt door het element ín
   de tekstkolom gezet (.gart-tekst / .art-tekst), en daar geldt de link-opmaak van
   de lopende tekst: groen en onderstreept. Bij de drie kennisartikelen viel het blok
   toevallig NAAST die kolom en bleef de knop goud; hier moet het expliciet terug.
   Specificiteit: .kg .gart-cta a.btn (0,3,1) wint van .kg .gart-tekst a (0,2,1). */
.kg .gart-cta a.btn {
	color: var(--kg-goud, #c9a962);
	text-decoration: none;
}

.kg .gart-cta a.btn:hover,
.kg .gart-cta a.btn:focus-visible {
	color: var(--kg-donker, #15170f);
	background: var(--kg-goud, #c9a962);
	text-decoration: none;
}

/* Het hofleverancier-wapen op /certificeringen/ — 08-09-2026, melding Rick: daar stond
   een zelfgetekend kroontje in plaats van het echte predicaat.

   Het wapen is 137x147 en zit vol detail; in de 64px-kolom van de band wordt dat een
   onleesbaar plaatje. Vandaar een bredere kolom en een groter beeld, en de bovenkant
   op één lijn met de kop ernaast (de band lijnt op `start` uit). */
.kg .hof-band-in:has(.hb-wapen) {
	grid-template-columns: 96px 1fr;
	gap: 28px;
}

.kg .hb-wapen {
	width: 96px;
	height: auto;
	display: block;
	margin-top: -6px;
}

@media (max-width: 980px) {
	.kg .hof-band-in:has(.hb-wapen) {
		grid-template-columns: 72px 1fr;
		gap: 20px;
	}

	.kg .hb-wapen {
		width: 72px;
	}
}

/* "Jouw collega's" op /werken-bij/ — 08-09-2026, melding Rick: tekst over de foto's
   heen was onoverzichtelijk en de drie kaarten hadden elk een andere maat.

   Nu drie gelijke kaarten met het beeld boven en de tekst eronder, zoals de andere
   kaarten op de site. De oude regels (.wb-mens met absolute img, verloop en .mq
   eroverheen) staan nog in kg-pagina-werken-bij.css maar grijpen nergens meer aan;
   die is gegenereerd, dus daar niets in wijzigen. */
/* `:has()` erbij voor de specificiteit: kg-pagina-werken-bij.css zet hier
   `1.15fr .85fr` neer en wordt na dit bestand geladen. */
.kg .wb-mensgrid:has(.wb-menskaart) {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}

.kg .wb-menskaart {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(201, 169, 98, .35);
	border-radius: 16px;
	overflow: hidden;
}

.kg .wb-menskaart .mk-beeld {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kg .wb-menskaart .mk-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.kg .wb-menskaart:hover .mk-beeld img {
	transform: scale(1.04);
}

.kg .wb-menskaart .mk-tekst {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.kg .wb-menskaart .q {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #fff;
	flex: 1;
}

.kg .wb-menskaart .wie {
	font-family: var(--kg-kop);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kg-goud, #c9a962);
}

@media (max-width: 900px) {
	.kg .wb-mensgrid:has(.wb-menskaart) {
		grid-template-columns: 1fr;
	}
}

/* Het vacatureblok op /werken-bij/ op een groene achtergrond — 08-09-2026, melding
   Rick: "Drie vlakken achter elkaar met een lichte achtergrond maakt het flets."

   Dezelfde gradient als het mensenblok erboven, zodat de pagina een ritme krijgt van
   licht en donker in plaats van drie lichte vlakken achter elkaar. De witte kaarten
   blijven wit: op groen springen ze er juist uit, en hun eigen opmaak (gouden tag,
   groene link) blijft leesbaar. */
.kg .wb-hfd.wb-h-vac {
	background: linear-gradient(160deg, #0d1f12, #122a18);
}

.kg .wb-hfd.wb-h-vac .wb-kop {
	color: #fff;
}

.kg .wb-hfd.wb-h-vac .wb-kop .groen {
	color: var(--kg-goud, #c9a962);
}

.kg .wb-hfd.wb-h-vac .wb-lead {
	color: rgba(255, 255, 255, .78);
}

.kg .wb-hfd.wb-h-vac .wb-hoofdstuk .hnr {
	color: var(--kg-donker, #15170f);
}

/* De open-sollicitatiekaart was papierkleur met een gouden stippellijn; op de donkere
   ondergrond werkt hij beter als doorzichtig vlak met dezelfde lijn. */
.kg .wb-hfd.wb-h-vac .wb-vac.open-vac {
	background: rgba(255, 255, 255, .06);
	border: 1.5px dashed rgba(201, 169, 98, .7);
}

.kg .wb-hfd.wb-h-vac .wb-vac.open-vac h3,
.kg .wb-hfd.wb-h-vac .wb-vac.open-vac .feit {
	color: #fff;
}

.kg .wb-hfd.wb-h-vac .wb-vac.open-vac .wb-vaclink {
	color: var(--kg-goud, #c9a962);
	border-bottom-color: rgba(201, 169, 98, .8);
}

/* Meer lucht tussen de filterbalk en het projectraster op /projecten/ — 08-09-2026,
   melding Rick. Er zat 10px tussen; de knoppen plakten daardoor tegen de eerste rij
   kaarten. Ter vergelijking: op /nieuws/ staat 57px tussen de balk en de kaarten,
   maar daar zit de teller ("12 artikelen") ertussen. Hier is 34px aangehouden,
   dezelfde maat als tussen de sectiekop en het raster op de homepage.

   `.reveal` erbij voor de specificiteit: kg-pagina-projecten.css zet hier
   `margin: 30px 0 10px` neer en wordt na dit bestand geladen. Die klasse staat er
   altijd op — het script voegt alleen `in` toe, het haalt niets weg. */
.kg .filters.reveal {
	margin-bottom: 34px;
}

/* Op smalle schermen wrappen de knoppen over meerdere regels en komt er vanzelf
   ruimte bij; daar is 34px te veel van het goede. */
@media (max-width: 600px) {
	.kg .filters.reveal {
		margin-bottom: 18px;
	}
}

/* De contactknop staat sinds 08-09-2026 ÍN de tekstkolom van het project, niet meer
   in de kolom van de layoutsectie. Melding Rick: hij hoorde onder de tekst te staan,
   niet onder de galerij.

   Daardoor is de uitlijning hierboven (max-width 1164 + 40px inspringing) hier niet
   nodig: de knop volgt gewoon de kolom waar hij in staat. Wat blijft is lucht boven
   de knop, zodat hij niet tegen de laatste alinea plakt. */
.kg-cta-intekst {
	margin-top: 26px;
	text-align: left;
}

.kg-cta-intekst p {
	margin: 0;
	text-align: left;
}

/* Vangnet voor een megamenupaneel zonder intro — 09-09-2026.

   `.mega-inner` is een grid van drie kolommen (intro | inhoud | uitgelicht), maar de
   intro wordt alleen gerenderd als het menu-item een omschrijving heeft. Ontbreekt die,
   dan schuiven de inhoud en de foto een kolom naar links en blijft rechts een leeg vlak
   staan. Zo stond het paneel onder "Over ons" tot vandaag: tegels op x=218 in plaats van
   501, foto tot 1079 in plaats van 1382.

   Dat is opgelost door het menu-item een omschrijving te geven, maar de volgende die een
   paneel toevoegt en dat veld leeg laat, loopt er weer in. Deze regel vangt dat op: is er
   geen .mega-intro, dan wordt de uitgelichte tegel expliciet in de derde kolom gezet en
   de inhoud in de tweede. Het paneel mist dan wel zijn kop, maar hij staat niet scheef. */
.kg .mega-inner:not(:has(.mega-intro)) > :first-child {
	grid-column: 2;
}

.kg .mega-inner:not(:has(.mega-intro)) > .mega-feat {
	grid-column: 3;
}

/* De omschrijving onder een tegeltitel in het megamenu stond op gewicht 700 — even vet
   als de titel erboven, waardoor er geen rangorde in de tegel zat. Opgegeven door Rick
   09-09-2026. De kleur (#6b6f6a) zorgde al voor onderscheid, het gewicht nu ook. */
.kg .mega-link .d {
	font-weight: 500;
}

/* Overgangen uit tijdens het meten — 09-09-2026.

   `hoogteVastzetten()` in kg-blok-tabs.js opent elk item even om de grootste hoogte te
   bepalen. Dat wisselen gaat via een klasse, en de CSS animeert die verandering: meet
   je direct daarna, dan meet je een tussenstand. De uitkomst wisselde daardoor per
   keer tussen 681 en 726px, en bij de laagste knipte `overflow: hidden` de knop "Meer
   over duurzaamheid" van de homepage af (melding Rick 09-09-2026).

   Deze klasse staat er alleen tijdens de meetlus op, een fractie van een seconde. */
.kg .kg-meten,
.kg .kg-meten * {
	transition: none !important;
	animation: none !important;
}

/* ==========================================================================
   Donkergroen terug in het ritme van de secties — 09-09-2026, verzoek Rick:
   "Donkergroen moet af en toe terugkomen. Nu staan er soms drie blokken achter
   elkaar met een lichte achtergrond."

   Gemeten over twaalf pagina's, met de TEKSTKLEUR als maat: witte tekst betekent
   een donkere ondergrond. Dat werkt ook bij een blok als `.statement`, dat een
   beeld met een donkere overlay draagt en geen background-color heeft — een
   eerdere meting op background-color zag dat blok aan voor licht en leverde een
   verkeerd beeld op.

   Zes pagina's hadden drie of meer lichte blokken op een rij. Deze blokken
   onderbreken die reeksen; ze zijn gekozen op hun plek IN de reeks, zodat er
   nergens twee donkere blokken tegen elkaar komen te staan.

   DE KLEUR IS DIE VAN DE HOMEPAGE: `linear-gradient(160deg, #0d1f12, #122a18)`, zoals
   `.hoe` en `.testimonial` daar gebruiken en zoals hij ook in kg-blok-belofte.css,
   -cta.css en -artikel.css staat. Eerst stond hier de gradient van /werken-bij/
   (200deg, vanaf #12291a via #15170f) -- die komt uit het concept, is groener aan de
   ene kant en bijna zwartbruin aan de andere, en viel meteen op als een andere kleur
   (melding Rick 09-09-2026).

   LET OP DE SELECTOR. De element-wrapper (.kg-el--mensen) staat er niet voor de
   sier: kg-blok-*.css wordt NA dit bestand geladen en zet daar `.kg .vestigingen`
   op een lichte kleur. Met dezelfde specificiteit wint de laatste, en dan krijg je
   witte tekst op een lichte ondergrond -- precies wat de eerste poging opleverde.
   Dit is vandaag de vierde keer; de pagina-CSS is gegenereerd en mag niet met de
   hand bewerkt worden, dus elke correctie hier moet het van specificiteit hebben.
   ========================================================================== */

.kg .kg-el--mensen .mensen,
.kg .kg-el--vestigingen .vestigingen {
	background: linear-gradient(160deg, #0d1f12, #122a18);
}

/* De kop, het bovenkopje en de inleiding staan standaard op donkere tekst. */
.kg .kg-el--mensen .mensen .section-title,
.kg .kg-el--vestigingen .vestigingen .section-title,
.kg .kg-el--mensen .mensen .lead-sub,
.kg .kg-el--vestigingen .vestigingen .lead-sub,
.kg .kg-el--mensen .mensen .regio,
.kg .kg-el--vestigingen .vestigingen .regio {
	color: #fff;
}

.kg .kg-el--mensen .mensen .lead-sub,
.kg .kg-el--vestigingen .vestigingen .lead-sub,
.kg .kg-el--mensen .mensen .regio,
.kg .kg-el--vestigingen .vestigingen .regio {
	color: rgba(255, 255, 255, .78);
}

.kg .kg-el--mensen .mensen .eyebrow,
.kg .kg-el--vestigingen .vestigingen .eyebrow {
	color: var(--kg-goud, #c9a962);
}

.kg .kg-el--mensen .mensen .eyebrow::before,
.kg .kg-el--vestigingen .vestigingen .eyebrow::before {
	background: var(--kg-goud, #c9a962);
}

/* De kaarten in beide blokken zijn wit; op groen springen ze er juist uit, dus die
   blijven. Alleen de lijnen eromheen moeten mee — een grijze lijn op groen leest
   als vuil. */
.kg .kg-el--mensen .mensen .m-kaart,
.kg .kg-el--vestigingen .vestigingen .vest2 {
	border-color: rgba(255, 255, 255, .12);
}

/* De schuifknoppen van de mensencarrousel stonden op een lichte ondergrond. */
.kg .kg-el--mensen .mensen .mcknop {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

.kg .kg-el--mensen .mensen .mcknop:hover:not(:disabled) {
	background: rgba(255, 255, 255, .2);
}

.kg .kg-el--mensen .mensen .mcknop:disabled {
	opacity: .35;
}

/* Nog twee blokken donkergroen — 09-09-2026, zelfde verzoek van Rick.

   `.rollen` breekt op /werkwijze/ de reeks rollen-begrippen-faq; `.art-meer` doet dat
   op de twaalf artikelpagina's, waar kop, beeld, tekst en "meer" allemaal licht waren.

   De element-wrapper staat weer in de selector: zonder die extra klasse wint
   kg-blok-*.css, dat na dit bestand wordt geladen. Zie het blok hierboven.

   HET CONTACTBLOK OP DE HOMEPAGE IS BEWUST OVERGESLAGEN. Dat zou daar de laatste
   lichte reeks breken, maar het bevat het contactformulier: invoervelden, labels, een
   privacyvinkje en een knop moeten dan allemaal mee, en een formulier op donkergroen
   vraagt om een eigen ronde met contrastmetingen. Drie lichte blokken achter elkaar
   is daar het kleinere kwaad. */

.kg .kg-el--rollen .rollen,
.kg .kg-el--artikelmeer .art-meer {
	background: linear-gradient(160deg, #0d1f12, #122a18);
}

.kg .kg-el--rollen .rollen .section-title,
.kg .kg-el--artikelmeer .art-meer .meer-kop,
.kg .kg-el--artikelmeer .art-meer .meer-kop h2 {
	color: #fff;
}

.kg .kg-el--rollen .rollen .lead-sub {
	color: rgba(255, 255, 255, .78);
}

.kg .kg-el--rollen .rollen .eyebrow {
	color: var(--kg-goud, #c9a962);
}

.kg .kg-el--rollen .rollen .eyebrow::before {
	background: var(--kg-goud, #c9a962);
}

/* De kop van het werkwijzeblok draagt een accentkleur op een deel van de tekst; op
   donker moet dat goud worden, anders valt het groen weg tegen de ondergrond. */
.kg .kg-el--rollen .rollen .kop-accent {
	color: var(--kg-goud, #c9a962);
}

/* De kaarten blijven wit: op groen springen ze eruit en hun eigen opmaak klopt al.
   Alleen de lijn eromheen moet mee. */
.kg .kg-el--rollen .rollen .rol-card,
.kg .kg-el--artikelmeer .art-meer .meer-kaart {
	border-color: rgba(255, 255, 255, .12);
}

/* "Bekijk alle artikelen" stond in het groen van de lichte ondergrond. */
.kg .kg-el--artikelmeer .art-meer .meer-alles {
	color: var(--kg-goud, #c9a962);
}

/* Ook /werken-bij/ op de homepagekleur — 09-09-2026, melding Rick: "Dit is een hele
   andere kleur groen. Graag de kleuren van de homepagina gebruiken."

   Die pagina kwam uit het concept met een eigen gradient: 200deg, van #12291a via
   #15170f (bijna zwartbruin) naar #0a1a0f. Naast de homepage, waar `.hoe` en
   `.testimonial` op 160deg #0d1f12 → #122a18 staan, leest dat als een andere kleur.
   Nu overal hetzelfde.

   De regels zelf staan in kg-pagina-werken-bij.css, en dat bestand is GEGENEREERD door
   tools/genereer_css.py -- daar mag niets met de hand in. Vandaar hier, met de
   element-wrapper voor de specificiteit: dat bestand wordt na dit geladen. */
.kg .kg-el--wbblok .wb-hfd.wb-h-mensen,
.kg .kg-el--wbblok .wb-hfd.wb-h-vac {
	background: linear-gradient(160deg, #0d1f12, #122a18);
}

/* De hero hoort NIET in dat rijtje -- 09-09-2026, melding Rick: "de achtergrond van de
   hero graag wit, het groene vlak rechts wel laten staan."

   Terecht, en het was mijn eigen fout van diezelfde dag. De hero van /werken-bij/ is in
   het concept licht: `linear-gradient(170deg, #FFFFFF, #F7F5F0)` met een zacht gouden
   schijnsel, en het donkere vlak rechts is een apart element (`.wb-paneel`, 56% breed
   en schuin afgesneden). Door de hele hero op de donkere sectiekleur te zetten viel dat
   onderscheid weg EN werd de kop onleesbaar: alle tekst in de linkerkolom is donker
   (#15170f op de kop, #6b6f6a op de lead), want die is voor een lichte ondergrond
   gemaakt. "Bouw je mee?" stond zwart op donkergroen.

   De les: bij het gelijktrekken van kleuren eerst kijken of een vlak een ACHTERGROND is
   of een decor waar donkere tekst overheen ligt. Een gradient vervangen zonder de
   tekstkleuren ernaast te meten is te snel. */

/* Eén groen per rol — 09-09-2026, na "Graag de kleuren van de homepagina gebruiken" en
   "Groen en donkergroen mag apart van elkaar".

   Er stonden drie groenen door elkaar als groot vlak. Nu heeft elke rol er precies één:

     knop en accent   #138558  (--kg-groen-donker) -- blijft, op verzoek van Rick
     herovlak         #0d5e3f  (--kg-groen-diep)
     sectie en footer #0d1f12 -> #122a18, 160deg -- de homepagegradient

   `.vh-hero` op /ons-verhaal/ stond op #138558 en week daarmee af van alle subhero's,
   die #0d5e3f gebruiken. Naar het diepe groen gebracht, niet andersom: #138558 is de
   knopkleur, en die moet als groot vlak niet gaan concurreren met de knoppen erop.

   Zichtbaar effect is klein -- over elke hero ligt een beeld met een donkere overlay --
   maar tijdens het laden zie je de basiskleur wél, en dan hoort hij te kloppen. */
.kg .kg-el--vhhero .vh-hero {
	background: var(--kg-groen-diep, #0d5e3f);
}

/* Privacylink in het akkoordvakje -- 09-09-2026.
   De link wordt door inc/privacylink.php in het label gezet (niet in de labeltekst zelf:
   Avada gebruikt die tekst ook in het value-attribuut van de checkbox). Zonder onderstreping
   is hij niet van de omringende vette labeltekst te onderscheiden. */
.kg .fusion-form-checkbox label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.kg .fusion-form-checkbox label a:hover,
.kg .fusion-form-checkbox label a:focus-visible {
	color: #138558;
}

/* Chips zonder bestemming -- 09-09-2026.
   Een chip die geen eigen onderwerpspagina heeft, wordt een <span> in plaats van een <a>
   (inc/chiplinks.php). Hij houdt dezelfde vorm, want als label draagt hij nog betekenis,
   maar hij mag zich niet als knop gedragen. kg-blok-chips.css wordt NA dit bestand
   geladen, dus de elementnaam erbij om het van specificiteit te winnen. */
.kg span.tag-chip {
	cursor: default;
}

.kg span.tag-chip:hover {
	background: rgba(43, 43, 39, .05);
	color: var(--kg-tekst);
	border-color: var(--kg-lijn);
}

/* Reveals uit in de Live editor -- 09-09-2026, melding Rick.
   "Bij het live aanpassen van het blok verdwijnt de container. De aanpassingen worden
   wel op de juiste manier opgeslagen."

   Klopt allebei. De editor vervangt bij elke wijziging het blok door verse HTML uit een
   AJAX-render. Die nieuwe knopen dragen wel `.reveal` (opacity 0 in kg-base.css) maar
   worden door de IntersectionObserver nooit gezien -- die was al opgezet op de oude
   knopen. Het blok staat er dus wel, volledig onzichtbaar. Op de voorkant is niets aan
   de hand, want daar wordt de pagina in een keer opgebouwd.

   Avada zet op de body van de editor `fusion-builder-live dont-animate`. Dat tweede
   woord zegt precies wat hier moet gebeuren. */
body.fusion-builder-live .kg .reveal,
body.dont-animate .kg .reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Hoofdstuk met achtergrondbeeld -- 09-09-2026, verzoek Rick voor het slotblok
   van /175-jaar/: "groen blok onderaan een achtergrond afbeelding toevoegen met
   een donker gradient".

   Zelfde opzet als het statementblok: het beeld is een eigen laag onder de inhoud,
   met de gradient ertussen. Zo blijft de gradient los te regelen en houdt de sectie
   zijn eigen achtergrondkleur als het beeld niet laadt.

   De gradient gebruikt de donkergroenen van de homepagina (#0d1f12 en #122a18), zodat
   dit blok in hetzelfde kleurritme valt als de andere donkere vlakken. */
.kg .hoofdstuk.hs-met-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.kg .hoofdstuk.hs-met-bg .hs-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.kg .hoofdstuk.hs-met-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, rgba(13, 31, 18, .93), rgba(18, 42, 24, .78));
}

/* Het grote jaartal op de achtergrond staat op een lichte dekking die is afgestemd
   op een vlakke kleur. Boven een foto valt het daardoor weg; iets meer dekking en
   het leest weer als watermerk. */
.kg .hoofdstuk.hs-met-bg .hs-jaar.jaar-in {
	opacity: .16;
}

/* Beeldgallerijen in een nieuwsbericht binnen de tekstkolom -- 09-09-2026,
   melding Rick: "hoe kan het dat de uitlijning van de berichten wederom kapot is".

   In een bericht staat elk blok in een Avada-container van de volle breedte. Onze
   artikelelementen zetten daarbinnen zelf een `.wrap` van max-width var(--kg-max); een
   Avada-gallerij doet dat niet en liep van rand tot rand, 1440px breed in een kolom van
   1220, met de linkerfoto half buiten beeld. Zeven berichten hebben er een.

   De maat hoort op de CONTAINER, niet op de gallerij zelf. Een eerdere poging zette
   max-width op `.awb-gallery-wrapper`, maar die staat in een flexkolom die met zijn
   inhoud meekrimpt: de gallerij klapte daardoor naar nul breed. De container is een
   gewoon blok en gedraagt zich wel.

   `:has()` omdat alleen de container mét gallerij smaller moet; de andere containers in
   een bericht regelen hun breedte al zelf via `.wrap`. */
body.single-post .fusion-fullwidth:has(.awb-gallery-wrapper) {
	max-width: var(--kg-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}

/* Leesbreedte in het slotblok -- 09-09-2026, regel aangeleverd door Rick.
   De tekst staat daar gecentreerd over de volle kolom; 54 tekens per regel houdt hem
   leesbaar. */
.kg .hs-slot p {
	max-width: 54ch;
}

/* Hofleverancier: groter wapen en de link op een eigen regel -- 09-09-2026, melding Rick.

   Het bronbestand is 137x147 en er is geen scherpere versie: het wapen in
   `-onder.png` en `-naast.png` is even groot. 136px is dus de grens waarboven het gaat
   uitvergroten. Komt er ooit een hoge-resolutieversie van Klaassen, dan kan dit omhoog;
   dat staat al als openstaand punt voor de keurmerklogo's.

   De link stond achter de lopende tekst op dezelfde regel en verdween daardoor in de
   alinea. Als laatste kind van de alinea mag hij een blok zijn. */
.kg .hof-band-in:has(.hb-wapen) {
	grid-template-columns: 136px 1fr;
}

.kg .hb-wapen {
	width: 136px;
}

.kg .hb-tekst p > a:last-child {
	display: block;
	margin-top: 14px;
}

@media (max-width: 980px) {
	.kg .hof-band-in:has(.hb-wapen) {
		grid-template-columns: 104px 1fr;
	}

	.kg .hb-wapen {
		width: 104px;
	}
}

/* Werken-bij, 10-09-2026: accenten in koppen op een lichte achtergrond in het donkere huisgroen,
   net als de hero en de knoppen. Het lichte groen (--kg-groen) is bedoeld voor donkere vlakken;
   op wit haalt het maar 2,3:1 contrast. De donkere secties (mensen, vacatures) houden hun goud. */
.kg .kg-el--wbblok .wb-hfd:not(.wb-h-mensen):not(.wb-h-vac) .wb-kop .groen {
  color: var(--kg-groen-donker);
}

/* Blok gerelateerd, 10-09-2026: vier kaarten (de andere werkwijze-onderdelen) in vier kolommen;
   in het raster van drie stond de vierde alleen op een tweede rij. De 980px-regel van het
   kennisblok is hier herhaald, want deze selector is specifieker. */
.kg .kennis-grid.kennis-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
  .kg .kennis-grid.kennis-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .kg .kennis-grid.kennis-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Keurmerklogos in de footer (10-09-2026).
   Verzoek Rick: de logostrook vervangen door losse logo's, allemaal even groot en gelijk
   uitgelijnd, met een tooltip. kg_keurmerk_logos() in footer.php zet elk logo in een witte
   tegel, net als het Hofleverancier-schild, op gelijke oppervlakte: een vierkant logo oogt
   anders twee keer zo zwaar als een woordmerk. De tooltip is een eigen element en geen
   title-attribuut, zodat hij ook bij toetsenbordfocus verschijnt. Negen logo's: in één
   rij op een breed scherm, daaronder drie bij drie.
   Het schild zelf: padding en hoogte op aanwijzing van Rick. */
.kg .footer-keurmerken .hofbadge {
	padding: 5px;
}

.kg .footer-keurmerken .hofbadge img {
	height: 110px;
}

.kg .footer-keurmerken .cert-logos {
	flex: 1 1 720px;
	max-width: 1000px;
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kg .footer-keurmerken .cert-logos > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kg .footer-keurmerken .cert-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.kg .footer-keurmerken .cert-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.kg .footer-keurmerken .cert-logo:hover,
.kg .footer-keurmerken .cert-logo:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

.kg .footer-keurmerken .cert-logo:focus-visible {
	outline: 2px solid var(--kg-goud, #C9A962);
	outline-offset: 3px;
}

/* De tooltip. Het pijltje hangt aan de tegel en niet aan de tooltip, zodat het ook
   onder het midden van de tegel blijft staan als de tooltip aan de rand uitlijnt. */
.kg .footer-keurmerken .cert-tip {
	--tip-x: -50%;
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	z-index: 20;
	width: 240px;
	padding: 11px 13px;
	border-radius: 10px;
	background: #fff;
	color: var(--kg-tekst, #2b2b27);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
	opacity: 0;
	visibility: hidden;
	transform: translate(var(--tip-x), 4px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
	pointer-events: none;
}

.kg .footer-keurmerken .cert-tip strong {
	display: block;
	margin-bottom: 3px;
	font-family: var(--kg-kop, 'Montserrat', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--kg-donker, #15170f);
}

.kg .footer-keurmerken .cert-logo::after {
	content: "";
	position: absolute;
	bottom: calc(100% + 5px);
	left: 50%;
	z-index: 21;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility 0s linear .16s;
	pointer-events: none;
}

.kg .footer-keurmerken .cert-logo:hover .cert-tip,
.kg .footer-keurmerken .cert-logo:focus-visible .cert-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(var(--tip-x), 0);
	transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

.kg .footer-keurmerken .cert-logo:hover::after,
.kg .footer-keurmerken .cert-logo:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transition: opacity .16s ease, visibility 0s;
}

/* De buitenste tegels: tooltip naar binnen, anders valt hij buiten beeld. */
.kg .footer-keurmerken .cert-logos > li:first-child .cert-tip {
	--tip-x: 0%;
	left: 0;
	right: auto;
}

.kg .footer-keurmerken .cert-logos > li:last-child .cert-tip {
	--tip-x: 0%;
	left: auto;
	right: 0;
}

@media (max-width: 1180px) {
	.kg .footer-keurmerken .cert-logos {
		flex: 0 1 470px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kg .footer-keurmerken .cert-logos > li:nth-child(3n+1) .cert-tip {
		--tip-x: 0%;
		left: 0;
		right: auto;
	}

	.kg .footer-keurmerken .cert-logos > li:nth-child(3n+2) .cert-tip {
		--tip-x: -50%;
		left: 50%;
		right: auto;
	}

	.kg .footer-keurmerken .cert-logos > li:nth-child(3n) .cert-tip {
		--tip-x: 0%;
		left: auto;
		right: 0;
	}
}

@media (max-width: 760px) {
	.kg .footer-keurmerken .cert-logos {
		flex: 1 1 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	.kg .footer-keurmerken .cert-logo {
		height: 64px;
	}

	.kg .footer-keurmerken .cert-tip {
		width: min(240px, 78vw);
	}
}

/* Sterretje bij verplichte velden in het groen (10-09-2026, verzoek Rick).
   Avada zet het als <abbr class="fusion-form-element-required"> in het label; de akkoordvakjes
   hebben er sinds 10-09 ook een (inc/privacylink.php). In een placeholder staat het sterretje
   als gewone tekst en krijgt het de kleur van de placeholder: een deel van een placeholder is
   niet apart te kleuren. */
.kg .fusion-form .fusion-form-element-required {
	color: var(--kg-groen-donker, #138558);
}

/* Sterretje in het groen, ook buiten de kg-blokken (10-09-2026).
   /solliciteren/ (#1528) is een gewone Avada-pagina zonder kg-blokken: om dat formulier zit
   geen .kg-omhulsel, dus de regel hierboven kwam er niet aan en het sterretje bleef grijs.
   Deze regel geldt voor elk Avada-formulier. Buiten .kg is --kg-groen-donker misschien niet
   gedefinieerd; vandaar de terugvalkleur. */
.fusion-form .fusion-form-element-required {
	color: var(--kg-groen-donker, #138558);
}

/* Keuzelijst in de kg-formulieren: één pijltje (10-09-2026, melding Rick: "dubbel icoon").
   Onze CSS geeft de select een eigen pijl als achtergrondbeeld; Avada zet er daarnaast een
   .select-arrow met een SVG in. Samen gaven ze op /contact/ een dubbel pijltje. Het pijltje van
   het ontwerp blijft; dat van Avada gaat weg, maar alleen binnen .kg. Buiten .kg, zoals op
   /solliciteren/, is dat van Avada het enige pijltje. */
.kg .fusion-form .fusion-select-wrapper .select-arrow {
	display: none;
}

/* Privacylink ook buiten de kg-blokken onderstreept (10-09-2026). /solliciteren/ is een gewone
   Avada-pagina zonder .kg-omhulsel; daar was de link groen en niet onderstreept, op de
   homepage en /contact/ wel onderstreept in de kleur van het label. */
.fusion-form .fusion-form-checkbox label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.fusion-form .fusion-form-checkbox label a:hover,
.fusion-form .fusion-form-checkbox label a:focus-visible {
	color: #138558;
}

/* --- Rijen die buiten het venster steken (11-09-2026) ----------------------------
   In een container op volle breedte zet Avada de rij inline op width:104% met
   margin-left/right calc(-4%/2), en geeft de kolom-wrapper die 2% als marge terug.
   De inhoud stond dus goed, maar de rij zelf stak 32px (op 1600) of 8px (op 390)
   aan beide kanten buiten het venster; afgeklemd en onzichtbaar. Voor rijen met één
   kolom met een Klaassen-blok halen we beide marges weg. min-width:0 is nodig
   omdat de rij een flex-item is: zonder die regel houdt de inline breedte van 104%
   hem op een telefoon op 406px. Gemeten op 9 pagina's op 1600 en 390: alle
   uitstekende rijen weg, blokken op dezelfde plek. Eén citaat in de reviews wordt op
   390 één regel langer: dat paste eerder op 0,03px na, door Avada's afronding. */
.fusion-fullwidth.hundred-percent-fullwidth > .fusion-builder-row:has(> .fusion_builder_column_1_1:only-child .kg-el) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
}
.fusion-fullwidth.hundred-percent-fullwidth > .fusion-builder-row > .fusion_builder_column_1_1:only-child:has(.kg-el) > .fusion-column-wrapper {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Blok "gerelateerd" in de donkere variant -- 15-09-2026, verzoek Rick: op /certificeringen/
   het blok "Onze vakgebieden" donkergroen. Per blok instelbaar (variant="donker" op
   kg_gerelateerd), want hetzelfde blok staat ook in de project- en vacaturesjablonen, op de
   werkwijzepagina's en op /ons-verhaal/; die blijven licht.

   De kleuren zijn die van de donkere blokken op de homepage: de gradient van .hoe en
   .testimonial, en het lichte goud van de belofteband en de cta-kaart voor bovenkopje, accent
   en knop. De kaarten blijven wit, net als bij rollen en artikelmeer (09-09); alleen hun lijn
   gaat mee. De element-wrapper staat in de selector: kg-blok-kennis.css laadt na dit bestand. */
.kg .kg-el--gerelateerd .kg-gerelateerd--donker {
	background: linear-gradient(160deg, #0d1f12, #122a18);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker .section-title {
	color: #fff;
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker .section-title .kop-accent,
.kg .kg-el--gerelateerd .kg-gerelateerd--donker .eyebrow {
	color: var(--kg-goud-licht, #d8bc7e);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker .eyebrow::before {
	background: var(--kg-goud-licht, #d8bc7e);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker .kennis-card {
	border-color: rgba(255, 255, 255, .12);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker a.kennis-card:hover {
	border-color: rgba(216, 179, 119, .5);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker a.kennis-card:focus-visible {
	outline-color: var(--kg-goud-licht, #d8bc7e);
}

/* De knop zoals op de cta-kaart: goud omlijnd, bij aanwijzen goud gevuld. */
.kg .kg-el--gerelateerd .kg-gerelateerd--donker .kennis-cta .btn-ghost {
	background: transparent;
	border-color: var(--kg-goud-licht, #d8bc7e);
	color: var(--kg-goud-licht, #d8bc7e);
}

.kg .kg-el--gerelateerd .kg-gerelateerd--donker .kennis-cta .btn-ghost:hover,
.kg .kg-el--gerelateerd .kg-gerelateerd--donker .kennis-cta .btn-ghost:focus-visible {
	background: var(--kg-goud-licht, #d8bc7e);
	border-color: var(--kg-goud-licht, #d8bc7e);
	color: #0d1f12;
}

/* Hofband: het logo van de footer -- 15-09-2026, verzoek Rick: "Graag hetzelfde logo van
   Hofleverancier als in de footer, deze is namelijk heel erg slecht leesbaar."

   De band op /certificeringen/ toonde het transparante wapen (137x147) los op donkergroen: het
   lichtgrijze ruitvlak en de kleine letters vielen weg tegen de ondergrond. Nu staat daar het
   beeld van de footer (klaassen-hofleverancier-onder.webp, 233x215: hetzelfde wapen met "Bij
   Koninklijke beschikking hofleverancier" eronder, op wit), in dezelfde witte tegel als in de
   footer: 5px wit eromheen, hoek 12px.

   Kolom 155px, tussenruimte 60px en het beeld op width:auto zijn de waarden van Rick (15-09).
   Het beeld wordt dan 155px breed (de kolom begrenst het) en de tegel met zijn witrand 165px;
   de witrand valt dus 10px in de tussenruimte. Zo zag Rick het ook toen hij de waarden koos.
   Selector met .hof-band erbij, zodat dit wint van de twee eerdere hb-wapen-blokken hierboven,
   ook binnen hun mediaquery van 980px. */
.kg .hof-band .hof-band-in:has(.hb-wapen) {
	grid-template-columns: 155px 1fr;
	gap: 60px;
}

.kg .hof-band .hb-wapen {
	box-sizing: content-box;
	width: auto;
	height: auto;
	padding: 5px;
	background: #fff;
	border-radius: 12px;
	margin-top: 0;
}

/* Op een telefoon logo boven de tekst: naast 155px plus 60px bleef er op 390px nog zo'n 135px
   over voor de tekst. Het logo blijft daar op de maat van de desktop (155px): met width:auto
   werd het 233px, de ware grootte van het bestand, en op een telefoonscherm (2x of 3x) is dat
   uitvergroot en dus weer onscherp. */
@media (max-width: 600px) {
	.kg .hof-band .hof-band-in:has(.hb-wapen) {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	.kg .hof-band .hb-wapen {
		max-width: 155px;
	}
}

/* Volgorde op kleinere schermen -- 15-09-2026, regels van Rick, letterlijk overgenomen.
   1. Hofband (/certificeringen/): onder 600px, waar logo en tekst onder elkaar staan, komt de
      tekst eerst en het logo eronder.
   2. Banen (kg_banen, op de expertise- en gebouwtypepagina's, /certificeringen/ en
      /duurzaam-bouwadvies/): tot en met 980px, waar beeld en tekst onder elkaar staan, komt de
      tekst eerst en het beeld eronder. Ook bij de omgekeerde rijen. */
@media (max-width: 600px) {
.kg .hof-band .hb-wapen {order: 2;}
}

@media (max-width: 980px) {
.kg .baan .beeld {order:2;}}

/* Belofte: kader na de rest op kleinere schermen -- 15-09-2026, regel van Rick, letterlijk
   overgenomen. Tot en met 980px komt .kaderwrap in section#belofte als laatste. */
@media (max-width: 980px) {
section#belofte .kaderwrap {order:2;}
}

/* Contactblok op de homepage onder 980px in één kolom -- 15-09-2026, verzoek Rick: "Zou je de
   section.contact op de homepagina responsive na willen lopen?"

   kg-blok-overig.css zet `.kg .contact .inner` altijd op twee kolommen (1fr 1fr). De regel die
   dat onder 980px naar één kolom zet, staat in kg-blok-hoe.css met precies dezelfde selector,
   maar dat bestand laadt EERDER dan kg-blok-overig.css. Bij gelijke specificiteit wint de laatste,
   dus die mediaqueryregel deed niets: op 390px werd de formulierkaart 270px breed en stond de
   tekstkolom (kop, inleiding, e-mail en telefoon) grotendeels buiten beeld, afgeklemd, zodat de
   pagina niet horizontaal scrolde en niemand het zag. Op 600px paste het net, met een smalle
   kaart, een knop over twee regels en een losse "je" in de kop; op 768px een los sterretje achter
   "privacybeleid".
   Hier, in het laatst geladen bestand en met de element-wrapper erbij, zodat de laadvolgorde niet
   meer uitmaakt. Volgorde zoals in de HTML: eerst het formulier, dan de tekst.

   Dezelfde dode regel in kg-blok-hoe.css hoorde ook `.kg .news-lead` (het uitgelichte bericht van
   kg_nieuws, alleen op de homepage) naar één kolom te zetten. Ook die basisregel (1.15fr 1fr) staat
   in kg-blok-overig.css, dus ook die bleef twee kolommen: op 390px werd de foto 39px breed.
   `.kg .belofte .grid` uit diezelfde regel werkt wel: zijn basisregel staat in een bestand dat
   eerder laadt. */
@media (max-width: 980px) {
	.kg .kg-el--contact .contact .inner,
	.kg .kg-el--nieuws .news-lead {
		grid-template-columns: 1fr;
	}
}

/* Formulierkaart na de tekst op kleinere schermen -- 15-09-2026, regel van Rick: "Graag op de
   mobiele versie .form-card {order:2;}. Dit geldt voor alle pagina's."
   .form-card komt alleen uit kg_contact (nu alleen op de homepage); de regel geldt ook voor elke
   pagina waar dat blok later bij komt. Breekpunt 980px: tot en met 980 staan kaart en tekst onder
   elkaar (zie "Contactblok op de homepage onder 980px in één kolom" hierboven); vanaf 981 staan
   ze naast elkaar, en daar zou order:2 de kaart naar rechts verplaatsen. */
@media (max-width: 980px) {
.kg .form-card {order:2;}
}

/* Jaarrij in de hero van /ons-verhaal/ op een telefoon -- 15-09-2026, regel van Rick (gap 5px
   onder 600px). Basis is gap 22px (kg-pagina-ons-verhaal.css). Op 360 en 390 liep "2026" daarmee
   tot 409px, dus buiten het venster (afgeklemd, geen horizontale scroll).
   De element-wrapper staat in de selector: op /ons-verhaal/ laadt kg-pagina-ons-verhaal.css NA dit
   bestand, en met Ricks selector `.kg .vh-jaren` won de basisregel (gemeten: gap bleef 22px). */
@media (max-width: 600px) {
.kg .kg-el--vhhero .vh-jaren {gap: 5px;}
}

/* Header op laptop- en telefoonbreedtes -- 15-09-2026, responsive controle van de hele site;
   keuze van Rick: "Voorstel".

   Het probleem. Logo (188px), menu (700px), telefoonknop (202px) en "Neem contact op" (160px)
   hebben met hun ruimte samen zo'n 1420px nodig, maar de hamburger kwam pas onder 1041px. Van
   1041 tot en met 1439px liep de rij rechts over de rand: op 1280 en 1366 werd "Neem contact op"
   afgeknipt (afgeklemd, geen horizontale scroll, dus onopgemerkt). Op een telefoon passen logo,
   knop en hamburger pas vanaf ~410px; op 360px viel de hamburger helemaal buiten beeld en kon het
   menu niet open. Gemeten over alle 129 pagina's.

   De oplossing:
   - tot en met 1279px de hamburger. De mobiele menuregels in dit bestand gelden daarom tot 1279px
     (die mediaqueries stonden op 1040px; zie "het paneel als geheel" hierboven). De regels die
     kg-base.css onder 1040px zet, staan hieronder nog eens voor 1041-1279px, want kg-base is
     gegenereerd en wordt niet met de hand bewerkt;
   - van 1280 tot en met 1439px het volledige menu, met de telefoonknop alleen als icoon. Het
     nummer blijft in de HTML en voor schermlezers leesbaar;
   - vanaf 1440px zoals het was;
   - op een telefoon een compactere contactknop en tot 400px een iets kleiner logo; onder 360px
     geen contactknop (Contact staat in het menu). De maten van Rick van 08-09 (9px 16px, 14px)
     blijven boven 640px. */
@media (min-width: 1041px) and (max-width: 1279px) {
	.kg .nav-links {
		display: none;
	}
	.kg .burger {
		display: block;
	}
	.kg .nav-links.open {
		display: flex;
		position: absolute;
		top: 90px;
		left: 0;
		right: 0;
		flex-direction: column;
		background: #fff;
		padding: 18px 28px;
		gap: 4px;
		border-bottom: 1px solid var(--kg-lijn);
		box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
	}
	.kg .nav-links.open > li > a {
		padding: 14px 0;
	}
	.kg .nav-links.open > li::after {
		display: none;
	}
	.kg .mega {
		display: none !important;
	}
}

@media (min-width: 1280px) and (max-width: 1439px) {
	.kg .nav-tel .nav-tel-nummer {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.kg .nav-tel {
		padding: 9px 11px;
	}
}

@media (max-width: 640px) {
	.kg header .nav-actions .btn {
		padding: 8px 12px;
		font-size: 13px;
	}
	.kg .nav,
	.kg .nav-actions {
		gap: 10px;
	}
}

@media (max-width: 400px) {
	.kg .logo img {
		height: 38px;
	}
}

@media (max-width: 359px) {
	.kg header .nav-actions .btn {
		display: none;
	}
}

/* Responsive reparaties na de controle van de hele site -- 15-09-2026, verzoek Rick: "Wil je de
   hele website responsive nalopen?"

   Gemeten: alle 129 openbare adressen op 12 breedtes (320-1920) in een echte Chrome zonder
   mobiele emulatie, plus een tweede ronde die alleen tekst telt die echt buiten beeld of buiten
   een afknippende rand valt. Nergens scrolde een pagina horizontaal: alles was afgeklemd en dus
   onzichtbaar kwijt. De proeven met deze regels (ingeprikt in de browser, 11 pagina's op 6
   breedtes) staan in de projectstand. De header staat in een eigen blok hierboven.

   A. Vangnet voor lange woorden. Chrome breekt Nederlandse woorden niet af (hyphens:auto doet
      niets); overflow-wrap breekt een woord alleen als het echt niet op een regel past.
      Voorbeelden: "gezondheidscentrum" in een subhero, "Bouwplaatsbezoek" in een archiefkaart,
      "Energieprestatievergoeding" in een projectlijst. */
.kg h1, .kg h2, .kg h3, .kg h4, .kg h5, .kg h6,
.kg p, .kg li, .kg dd, .kg blockquote,
.fusion-title-heading,
.post-content h1, .post-content h2, .post-content h3, .post-content h4,
.fusion-text p, .fusion-text li, .fusion-checklist .fusion-li-item-content,
.kg .kort-row .v, .kg .faq-q {
	overflow-wrap: break-word;
}

/* B. Avada-titels in het project- en vacaturesjabloon staan op 48px vast. Op 320px was de
      projecttitel tot 267px breder dan het scherm ("levensloopwoningen"). Op een telefoon
      meeschalen. */
@media (max-width: 767px) {
	.fusion-title h1.fusion-title-heading {
		font-size: clamp(26px, 7.5vw, 48px) !important;
		line-height: 1.12 !important;
	}
	.fusion-title h2.fusion-title-heading {
		font-size: clamp(24px, 6.5vw, 40px) !important;
		line-height: 1.15 !important;
	}
}

/* C. Tabellen in de projectkaart (62 projecten), in de zijkolom van een vacature en op /solliciteren/
      (page-id-1528; alle tabellen op de site zijn tweekoloms label/waarde, gecontroleerd 15-09). Op een
      telefoon kregen de cellen white-space:nowrap, zodat een waarde niet kon omslaan en uit de
      kaart liep; op 768px was de kaart 183px breed en vielen de waarden er helemaal uit. Nu
      gewoon omslaan, een lange waarde (e-mailadres, adres) mag breken, en tot en met 1024px
      staat het label boven de waarde. Hele tabel op display:block, anders rekent de browser
      nog als tabel. */
.kg-projectkaart table td,
.single-vacature .table-2 table td,
.page-id-1528 .table-2 table td {
	white-space: normal !important;
	overflow-wrap: anywhere;
}
@media (max-width: 1024px) {
	.kg-projectkaart table,
	.kg-projectkaart tbody,
	.kg-projectkaart tr,
	.kg-projectkaart td,
	.single-vacature .table-2 table,
	.single-vacature .table-2 tbody,
	.single-vacature .table-2 tr,
	.single-vacature .table-2 td,
	.page-id-1528 .table-2 table,
	.page-id-1528 .table-2 tbody,
	.page-id-1528 .table-2 tr,
	.page-id-1528 .table-2 td {
		display: block;
		width: auto !important;
	}
	.kg-projectkaart table td:first-child,
	.single-vacature .table-2 table td:first-child,
	.page-id-1528 .table-2 table td:first-child {
		padding: 12px 0 2px !important;
	}
	.kg-projectkaart table td:last-child,
	.single-vacature .table-2 table td:last-child,
	.page-id-1528 .table-2 table td:last-child {
		padding: 0 0 12px !important;
	}
}

/* D. Kaarten en rijen die niet konden krimpen onder hun langste woord (een gridkolom 1fr of een
      flexitem heeft als minimum de breedte van het langste woord). Het uitgelichte bericht op de
      homepage (foto 39px breed op 390, zie ook het blok "Contactblok ... één kolom"), het
      uitgelichte project, de vacaturekaarten, "In het kort", de FAQ-vraag met zijn icoon en de
      kop van het kennisblok ("sportaccommodaties"). */
@media (max-width: 980px) {
	.kg .kg-el--nieuws .news-lead,
	.kg .kg-el--projectgrid .proj-lead {
		grid-template-columns: minmax(0, 1fr);
	}
}
.kg .kg-el--projectgrid .proj-lead .body > * {
	max-width: 100%;
}
@media (max-width: 600px) {
	.kg .kg-el--nieuws .news-lead .lead-body,
	.kg .kg-el--projectgrid .proj-lead .body {
		padding: 28px 24px;
	}
	.kg .kg-el--wbblok .wb-vac {
		padding: 26px 22px;
	}
	/* Het accentdeel van een kop blijft op desktop bij elkaar (kg-base: nowrap). */
	.kg .kop-accent {
		white-space: normal;
	}
}
.kg .kg-el--wbblok .wb-vacgrid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px) {
	.kg .kg-el--wbblok .wb-vacgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.kg .kort-row {
	grid-template-columns: 92px minmax(0, 1fr);
}
.kg .faq-q > :not(.faq-ic),
.kg .head-row > * {
	min-width: 0;
}

/* Jaarrij op smalle telefoons mee laten schalen -- 16-09-2026, akkoord Rick: "Graag meeschalen op
   smalle telefoons."

   De drie delen van "1851 -> 2026" hebben een minimum in hun clamp (84px voor het jaartal, 44px
   voor het beginjaar, 24px voor de pijl). Onder 420px past de rij daarmee niet: op 320px liep
   "2026" 55px buiten beeld en op 360px 15px, ook met de gap van 5px van 15-09. Hier schalen alle
   drie met dezelfde factor mee met de schermbreedte, met de oude minima als bovengrens -- op
   420px is 20vw precies 84px, dus vanaf daar verandert er niets.
   De element-wrapper staat in de selector omdat kg-pagina-ons-verhaal.css NA dit bestand laadt. */
@media (max-width: 419px) {
	.kg .kg-el--vhhero .vh-jaren .tot {
		font-size: min(20vw, 84px);
	}
	.kg .kg-el--vhhero .vh-jaren .van {
		font-size: min(10.4vw, 44px);
	}
	.kg .kg-el--vhhero .vh-jaren .pijl {
		font-size: min(5.7vw, 24px);
	}
}

/* Keurmerkenbalk onderaan op wit (17-09-2026).
   Besluit FJ met vormgever Dennis: de keurmerken staan niet meer tussen de linkkolommen en de
   onderbalk, maar helemaal onderaan, ONDER copyright en socials, in een witte balk over de volle
   breedte. Op wit hoeft een logo niet meer in een eigen witte tegel, dus die vervallen en de logo's
   staan dichter op elkaar: Hofleverancier links, de overige keurmerken rechts uitgelijnd.
   footer.php zet de balk buiten de .wrap van de footer (met een eigen .wrap erin) en geeft de
   footer de klasse met-keurmerken. Dit blok overschrijft het blok van 10-09 hierboven; de
   gelijke-oppervlakteregel voor de logomaat (kg_keurmerk_logo_maat) is ongewijzigd.
   Terugdraaien: dit blok weg en footer.php terug uit ~/werk/footer-voor-balk-*.php. */
.kg footer.site.met-keurmerken {
	padding-bottom: 0;
}

.kg footer.site.met-keurmerken > .wrap {
	padding-bottom: 40px;
}

.kg footer.site > .footer-keurmerken {
	display: block;
	margin: 0;
	padding: 20px 0;
	border: 0;
	background: #fff;
	text-align: left;
}

.kg footer.site .footer-keurmerken > .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 48px;
}

.kg footer.site .footer-keurmerken .hofbadge {
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.kg footer.site .footer-keurmerken .hofbadge img {
	height: 100px;
	width: auto;
}

.kg footer.site .footer-keurmerken .cert-logos {
	flex: 0 1 auto;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	--cert-tussen: 15px;
	gap: 12px var(--cert-tussen);
	margin: 0;
}

.kg footer.site .footer-keurmerken .cert-logo {
	height: auto;
	padding: 4px;
	border-radius: 6px;
	background: none;
}

.kg footer.site .footer-keurmerken .cert-logo:hover,
.kg footer.site .footer-keurmerken .cert-logo:focus-visible {
	transform: translateY(-2px);
	box-shadow: none;
}

.kg footer.site .footer-keurmerken .cert-logo:focus-visible {
	outline-color: var(--kg-groen-donker, #138558);
}

/* Geen tooltip meer (17-09-2026, FJ): bij aanwijzen alleen het omhoogbewegen. De tekst blijft
   wel in de HTML en is alleen visueel verborgen, zodat een schermlezer via aria-describedby de
   omschrijving nog voorleest. Het pijltje (::after) vervalt ook. */
.kg footer.site .footer-keurmerken .cert-tip,
.kg footer.site .footer-keurmerken .cert-logo:hover .cert-tip,
.kg footer.site .footer-keurmerken .cert-logo:focus-visible .cert-tip {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	box-shadow: none;
	transition: none;
}

.kg footer.site .footer-keurmerken .cert-logo::after {
	display: none;
}

/* Carrousel zodra de logo's niet meer op één rij passen (17-09-2026, FJ).
   Niet meer onder elkaar: kg-blok-keurmerken.js meet of de logo's naast het schild passen en
   zet anders .is-carrousel op het venster eromheen. Het schild blijft altijd links staan.
   De strook is doorlopend: de lijst staat er twee keer in en schuift de helft op. Daarom in
   carrouselstand een marge rechts van elk logo in plaats van gap: dan is de helft precies één
   set, en loopt de naad niet een halve tussenruimte scheef. */
.kg footer.site .footer-keurmerken .cert-logos > li {
	flex: none;
}

.kg footer.site .footer-keurmerken .cert-venster {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	/* ruimte voor het omhoogbewegen bij aanwijzen, anders knipt overflow het af */
	padding: 4px 0;
	margin: -4px 0;
}

.kg footer.site .footer-keurmerken .cert-venster.is-carrousel {
	justify-content: flex-start;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.kg footer.site .footer-keurmerken .is-carrousel .cert-logos {
	flex: none;
	width: max-content;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	animation: kg-cert-carrousel var(--cert-duur, 30s) linear infinite;
}

.kg footer.site .footer-keurmerken .is-carrousel .cert-logos > li {
	margin-right: var(--cert-tussen);
}

.kg footer.site .footer-keurmerken .is-carrousel:hover .cert-logos,
.kg footer.site .footer-keurmerken .is-carrousel:focus-within .cert-logos {
	animation-play-state: paused;
}

@keyframes kg-cert-carrousel {
	to {
		transform: translateX(-50%);
	}
}

/* Wie minder beweging wil: geen animatie en geen klonen, wel zelf opzij te vegen. */
@media (prefers-reduced-motion: reduce) {
	.kg footer.site .footer-keurmerken .cert-venster.is-carrousel {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.kg footer.site .footer-keurmerken .is-carrousel .cert-logos {
		animation: none;
	}

	.kg footer.site .footer-keurmerken .is-carrousel .kloon {
		display: none;
	}
}

@media (max-width: 600px) {
	.kg footer.site .footer-keurmerken > .wrap {
		gap: 20px 24px;
	}

	.kg footer.site .footer-keurmerken .hofbadge img {
		height: 80px;
	}
}

/* Tussenlijntje op mobiel (17-09-2026, FJ): subtiele verticale lijn tussen het
   Hofleverancier-schild en de keurmerkencarrousel. Een pseudo-element op het schild en geen
   border op het venster: het venster heeft een mask die een rand mee zou laten vervagen. */
@media (max-width: 600px) {
	.kg footer.site .footer-keurmerken > .wrap {
		column-gap: 20px;
	}

	.kg footer.site .footer-keurmerken .hofbadge {
		position: relative;
		padding-right: 20px;
	}

	.kg footer.site .footer-keurmerken .hofbadge::after {
		content: "";
		position: absolute;
		top: 15%;
		right: 0;
		width: 1px;
		height: 70%;
		background: rgba(13, 31, 18, .14);
	}
}

/* Mobiele verbeterpunten FJ (17-09-2026) -- selectors als `.kg-el--projectgrid.kg`: onder een projectpagina staan
   .kg en .kg-el-- op HETZELFDE element zonder .kg eromheen, dus `.kg .kg-el--projectgrid` greep daar niet.
   Zelfde specificiteit, werkt in beide situaties.
   Projecten en referenties als veegstrook, nieuwskaarten met een vierkant beeld en de knop onder
   de berichten, en de footer in twee kolommen. Proef eerst ingeprikt in de browser op 390, daarna hier. */

/* 1. Projecten (.proj-grid: homepage en "Meer projecten" onder elk project) en referenties
   (.test-grid: homepage en de zes expertisepagina's) als veegstrook tot en met 767px.
   Een kaart is 85% breed, zodat de volgende net in beeld komt; de strook loopt door tot de
   schermrand en lijnt met scroll-padding toch uit met de rest van de pagina. De stippen
   eronder komen uit kg-blok-swipe.js. */
@media (max-width: 767px) {
	.kg-el--projectgrid.kg .proj-grid,
	.kg-el--testimonial.kg .test-grid {
		--swipe-rand: 28px;
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--swipe-rand);
		margin-inline: calc(-1 * var(--swipe-rand));
		padding: 8px var(--swipe-rand) 14px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.kg-el--projectgrid.kg .proj-grid::-webkit-scrollbar,
	.kg-el--testimonial.kg .test-grid::-webkit-scrollbar {
		display: none;
	}

	.kg-el--projectgrid.kg .proj-grid > .proj,
	.kg-el--testimonial.kg .test-grid > .test-card {
		scroll-snap-align: start;
		min-width: 0;
	}

	/* Het optillen bij aanwijzen blijft op een touchscherm hangen na een tik, en in een
	   veegstrook wordt het bovendien afgeknipt. */
	.kg-el--projectgrid.kg .proj-grid > .proj:hover,
	.kg-el--testimonial.kg .test-grid > .test-card:hover {
		transform: none;
	}

	/* De stippen: een per kaart, de actieve als langwerpig streepje. De knop zelf is 24px
	   hoog om hem te kunnen raken; het zichtbare deel is 6px. */
	.kg .kg-swipe-stippen {
		display: flex;
		justify-content: center;
		gap: 2px;
		margin-top: 6px;
	}

	.kg .kg-swipe-stip {
		position: relative;
		width: 16px;
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: var(--kg-groen-donker, #138558);
		transition: width .25s ease;
	}

	.kg .kg-swipe-stip::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		right: 5px;
		height: 6px;
		margin-top: -3px;
		border-radius: 3px;
		background: currentColor;
		opacity: .25;
		transition: opacity .25s ease;
	}

	.kg .kg-swipe-stip.is-actief {
		width: 34px;
	}

	.kg .kg-swipe-stip.is-actief::before {
		opacity: 1;
	}

	.kg .kg-swipe-stip:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 1px;
		border-radius: 6px;
	}

	.kg-el--testimonial.kg .kg-swipe-stip {
		color: var(--kg-goud-licht, #D8B377);
	}
}

@media (max-width: 600px) {
	.kg-el--projectgrid.kg .proj-grid,
	.kg-el--testimonial.kg .test-grid {
		--swipe-rand: 20px;
	}
}

@media (min-width: 768px) {
	.kg .kg-swipe-stippen {
		display: none;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.kg .kg-swipe-stip,
	.kg .kg-swipe-stip::before {
		transition: none;
	}
}

/* 2. Nieuws op de homepage: de twee kleine kaarten kregen op een telefoon een staand beeld
   over de volle kaarthoogte. Nu een vierkant beeld, en de knop "Bekijk alle berichten" onder
   de drie berichten in plaats van onder de kop (nieuws.php zet hem op beide plekken; hier
   staat welke te zien is). */
.kg-el--nieuws.kg .nieuws-meer {
	display: none;
}

@media (max-width: 767px) {
	.kg-el--nieuws.kg .ncard {
		align-items: center;
	}

	/* Ingesprongen met eigen ronde hoeken: een vierkant tegen de kaartrand liet wit boven en
	   onder het beeld staan. */
	.kg-el--nieuws.kg .ncard .thumb {
		flex: 0 0 104px;
		align-self: center;
		aspect-ratio: 1 / 1;
		height: auto;
		margin-left: 14px;
		border-radius: 12px;
	}

	.kg-el--nieuws.kg .head-row .btn {
		display: none;
	}

	.kg-el--nieuws.kg .nieuws-meer {
		display: flex;
		justify-content: center;
		margin-top: 28px;
	}
}

/* 3. Footer in twee kolommen tot en met 980px: de twee vestigingen naast elkaar, dan Expertise
   naast Over ons en Contact naast Juridisch. Tot 980 stond het raster al op twee kolommen,
   maar de vestigingen namen daar samen één kolom in, waardoor de paren scheef liepen
   (vestigingen | Expertise, Over ons | Contact, Juridisch alleen). Onder 600px was het één
   kolom. */
@media (max-width: 980px) {
	.kg footer.site .footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}

	.kg footer.site .footer-grid > div:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}

	.kg footer.site .footer-grid .vestiging + .vestiging {
		margin-top: 0;
	}

	.kg footer.site .footer-grid .footer-regio {
		grid-column: 1 / -1;
	}
}

/* Veegstrook onder een projectpagina tot de schermrand (17-09-2026, FJ). Het blok "Meer projecten"
   (.kg-verwant) staat in de Avada-kolom van het projectsjabloon, en die staat op elke breedte 30px van
   de rand; de strook rekende met de wrap-padding (20 of 28px) en stopte daardoor 10px voor de rand.
   Gemeten op 320, 390, 600, 601, 700 en 767. */
@media (max-width: 767px) {
	.kg-el--projectgrid.kg-verwant .proj-grid {
		--swipe-rand: 30px;
	}
}

/* Link onder een tijdlijnmoment (17-09-2026, FJ): zelfde vorm als "Lees het volledige bericht" in het
   nieuwsblok. Op /ons-verhaal/ verwijst het 2026-moment naar /175-jaar/. */
.kg .tl-item .tl-meer {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--kg-kop);
	font-size: 15px;
	font-weight: 700;
	color: var(--kg-groen-donker);
	text-decoration: none;
}

.kg .tl-item .tl-meer:hover,
.kg .tl-item .tl-meer:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}