/* ============================================================
   BCONNECT — MOBIELE LAAG
   ------------------------------------------------------------
   Eén omkeerbare laag met uitsluitend mobiele correcties.

   HARDE REGELS voor dit bestand:
   - Elke declaratie staat binnen @media (max-width: 767px).
     Boven 767px levert dit bestand nul declaraties op, dus
     desktop en tablet kunnen per definitie niet veranderen.
   - Elke regel is gescoped op de pagina waarvoor hij bedoeld is
     (body.home, body.bc-page-leadgeneratie, …), omdat vrijwel elke widget
     op meerdere pagina's staat.
   - Geen negatieve marges, geen vaste mobiele hoogtes, geen
     transform/zoom-hacks. Alleen echte responsive CSS.

   Wordt sitewide geladen (handle bconnect-mobile) ná alle
   widget-stylesheets, zodat volgorde nooit een rol speelt.
   ============================================================ */

@media (max-width: 767px) {

/* ============================================================
   HOMEPAGE (108) — HERO
   ============================================================ */

/* ---- "Actief op" + kanaal-chips -----------------------------
   Het label stond op dezelfde regel als de chips; samen pasten
   ze niet in 320px content, waardoor "Campagnes" afbrak naar een
   tweede regel en het blok ongelijk werd. Het label krijgt nu een
   eigen regel (flex-basis 100%) en de chips worden compacter,
   zodat Website + WhatsApp + Campagnes vanaf 360px op één regel
   staan. Onder 360px mag flex-wrap ze alsnog netjes afbreken. */
body.home .b5-chiprow {
	gap: 6px;
	margin-top: 12px;
}
body.home .b5-chiplabel {
	flex: 0 0 100%;
	margin-bottom: 2px;
}
body.home .b5-chip {
	gap: 5px;
	padding: 6px 10px;
	font-size: 12px;
}
body.home .b5-chip svg {
	width: 13px;
	height: 13px;
}

/* ---- chat-scene: chat breed, statuskaarten eronder -----------
   Was: een scene met vaste aspect-ratio (520/660) waarin het
   chatvenster op 84% breedte verticaal gecentreerd stond en de
   kaarten er op 62-66% overheen lagen. Die drie samen zijn >150%
   van de scene, dus de kaarten bedekten de chattekst: de
   statusregel van Alex, een bubbel en het invoerveld waren
   onleesbaar. Op een telefoon is er simpelweg geen breedte om
   een chat én kaarten naast elkaar leesbaar te houden.

   Nu is de scene een flex-kolom zonder vaste verhouding: het
   chatvenster over de volle contentbreedte, en daaronder de drie
   meldingen op volgorde onder elkaar (Nieuwe lead → Opvolging
   gestart → Afspraak bevestigd). Alle absolute plaatsing gaat er
   op mobiel uit.

   BELANGRIJK voor de loop: de kaarten worden verborgen met
   opacity, niet met display, dus ze houden hun ruimte vast. De
   chatbubbels staan in een body met een vaste hoogte (250px, uit
   de basis-CSS). De scene houdt daardoor tijdens de hele cyclus
   exact dezelfde hoogte en de pagina eronder verspringt niet. */
body.home .b5-scene {
	aspect-ratio: auto;
	width: 100%;
	max-width: 100%;
	margin: 18px auto 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}
body.home .b5-chatwrap {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 100%;
}
body.home .b5-card {
	position: relative;
	inset: auto;
	width: 100%;
}
body.home .b5-pill {
	position: relative;
	inset: auto;
	align-self: center;
	max-width: 100%;
}

/* ---- loop: uitfaden, resetten, opnieuw -----------------------
   hero-b5.js speelt de tijdlijn onder 767px in een lus. Aan het
   einde van een cyclus zet het `is-cycling` op de scene: het
   berichtenvenster en de drie meldingen faden weg, de JS zet de
   staat terug en haalt de class er weer af, waarna alles opnieuw
   opbouwt. Het chatvenster zelf (kop, invoerveld, "Powered by")
   blijft staan — alleen het gesprek en de meldingen lopen leeg. */
body.home .b5-scene .hv-win-body,
body.home .b5-scene .b5-rev,
body.home .b5-scene .b5-badge,
body.home .b5-scene .b5-list-row {
	transition: opacity .5s var(--ease, cubic-bezier(.2, .7, .2, 1)), transform .5s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
body.home .b5-scene.is-cycling .hv-win-body {
	opacity: 0;
}
body.home .b5-scene.is-cycling .b5-rev.is-on,
body.home .b5-scene.is-cycling .b5-badge.is-on,
body.home .b5-scene.is-cycling .b5-list-row.is-on {
	opacity: 0;
	transform: translateY(8px);
}

/* ---- vensterknopjes weg onder het "Voorbeeld"-label ----------
   De kop van het chatvenster heeft rechtsboven twee sier-icoontjes
   (een "•••" en een chevron naar beneden) die het uiterlijk van een
   echt chatvenster nabootsen. Sinds er een "Voorbeeld"-label in
   diezelfde hoek staat, botsen ze: op 390px ligt de pil (275-358px)
   bovenop de icoontjes (300-354px) en steekt alleen de punt van de
   chevron er onderuit — het leest als een vinkje dat door het label
   heen valt.

   Beide icoontjes gaan er op mobiel uit, niet alleen de chevron:
   de "•••" staat al volledig achter de pil, en zou na het weghalen
   van de chevron naar rechts opschuiven en er juist ónder uitsteken.
   Ze doen niets — het is decoratie van een namaakvenster. Desktop
   houdt ze; daar is de kop breed genoeg en raken pil en icoontjes
   elkaar niet. */
body.home .b5-chatwrap .hv-head-tools {
	display: none;
}

/* ============================================================
   HOMEPAGE (108) — SECUNDAIRE SUBNAVIGATIE
   ------------------------------------------------------------
   De sticky subnav (Uitvoeringsmodellen / Branches / Cases) gaat
   volledig uit op mobiel. display:none op de Elementor-container
   zélf haalt ook de sticky-positionering en de gereserveerde
   hoogte weg — er blijft geen lege strook of marge over.
   Het hoofdmenu en de sticky header blijven ongemoeid.
   ============================================================ */
body.home .e-con:has(> .elementor-widget-bconnect_subnav),
body.home .elementor-widget-bconnect_subnav,
body.home .au-subnav[data-bc-subnav] {
	display: none !important;
}

/* ============================================================
   HOMEPAGE (108) — BRANCHES: band "Niet actief in deze branches"
   ------------------------------------------------------------
   De CTA erft `white-space: nowrap` van de gedeelde .btn-regel en
   werd daardoor 400px breed; de band heeft `overflow:hidden` voor
   zijn gloed-pseudo's, dus de knop werd letterlijk afgesneden.
   De knop mag nu afbreken over meerdere regels en de band krijgt
   iets compactere binnenmarges zodat de tekst meer ruimte houdt.
   Hoogte blijft volledig door de inhoud bepaald.
   ============================================================ */
body.home .bt-band {
	padding: 24px 20px;
	gap: 20px;
}
body.home .bt-band-btn {
	display: flex;
	width: 100%;
	max-width: 100%;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	padding: 13px 18px;
}
body.home .bt-band-h,
body.home .bt-band-p {
	overflow-wrap: break-word;
}
body.home .bt-band-p { margin-bottom: 18px; }

/* ============================================================
   FOOTER — SITEWIDE: uitklapmenu
   ------------------------------------------------------------
   Eerst stond de footer hier in een tweekoloms multi-column
   layout. Dat haalde het dode gat weg dat het 2×2-grid opleverde
   (Bedrijf heeft 7 links, Branches 2), maar de footer bleef met
   alle 14 links en de contactgegevens uitgeschreven 568px hoog —
   op een telefoon een halve schermlengte scrollen langs iets waar
   bijna niemand op klikt.

   Nu hetzelfde patroon als op de huidige productiesite: één kolom
   met de merkregel bovenaan en daaronder per rubriek een rij die
   je openklapt. De onderbalk (copyright, socials, juridische
   links) blijft altijd staan.

   Techniek: de kolommen zijn <details>-elementen (zie de
   footer-widget). Klappen doet de browser zelf, dus er is geen
   click-handler en geen aria-boekhouding; footer.js haalt alleen
   het `open`-attribuut weg onder 768px. Zonder JavaScript staat
   alles open — dan is dit gewoon de oude, lange footer en is er
   geen link onbereikbaar.

   Geldt sitewide: de footer is op elke pagina dezelfde widget.
   Gescoped op de widget-wrapper (0,2,0) in plaats van op een
   body-class, zodat de regels de basis-CSS verslaan zonder van
   laadvolgorde af te hangen.
   ============================================================ */
.elementor-widget-bconnect_footer .site-footer {
	padding: 40px 0 24px;
}
.elementor-widget-bconnect_footer .site-footer .footer-grid {
	display: block;
	padding-bottom: 4px;
}
.elementor-widget-bconnect_footer .site-footer .footer-brand {
	margin-bottom: 22px;
}
.elementor-widget-bconnect_footer .site-footer .footer-brand p {
	margin-top: 10px;
}

/* ---- de uitklaprij zelf --------------------------------------
   Scheidingslijn boven elke rubriek; de laatste krijgt er ook een
   onder, zodat de reeks als één blok leest. De 15px verticale
   padding maakt van de kop een raakvlak van 48px hoog, ook als de
   titel maar 12px is. */
.elementor-widget-bconnect_footer .site-footer .footer-col {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin: 0;
}
.elementor-widget-bconnect_footer .site-footer .footer-col:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.elementor-widget-bconnect_footer .site-footer .footer-col > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 2px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.elementor-widget-bconnect_footer .site-footer .footer-col > summary:focus-visible {
	outline: 2px solid var(--c-sky, #7db6ff);
	outline-offset: -2px;
}
/* De kop staat nu in de summary-flexrij; zijn ondermarge zou daar
   een gat onder de chevron maken in plaats van boven de links. */
.elementor-widget-bconnect_footer .site-footer .footer-col > summary h4 {
	margin-bottom: 0;
}
.elementor-widget-bconnect_footer .site-footer .footer-col-caret {
	display: flex;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .65);
	transition: transform .25s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.elementor-widget-bconnect_footer .site-footer .footer-col[open] .footer-col-caret {
	transform: rotate(180deg);
}
.elementor-widget-bconnect_footer .site-footer .footer-col > ul {
	gap: 14px;
	padding: 2px 2px 18px;
}

/* ---- openklappen met een animatie waar de browser dat kan -----
   ::details-content is de enige manier om de inhoud van een
   <details> te animeren; `interpolate-size` maakt de overgang naar
   `auto` interpoleerbaar. Kent de browser de pseudo niet, dan valt
   dit blok weg en klapt hij direct open — hetzelfde eindresultaat,
   alleen zonder de beweging.

   De transition hangt aan .bc-facc-ready, die footer.js pas ná het
   eerste getekende frame zet. Zonder die rem animeert het
   dichtklappen bij het laden mee (PHP rendert `open`, de JS haalt
   dat weg) en zie je de footer letterlijk in elkaar zakken. */
@supports selector(::details-content) {
	.elementor-widget-bconnect_footer .site-footer .footer-col {
		interpolate-size: allow-keywords;
	}
	.elementor-widget-bconnect_footer .site-footer .footer-col::details-content {
		block-size: 0;
		overflow: hidden;
	}
	.elementor-widget-bconnect_footer .site-footer.bc-facc-ready .footer-col::details-content {
		transition: block-size .28s var(--ease, cubic-bezier(.2, .7, .2, 1)), content-visibility .28s allow-discrete;
	}
	.elementor-widget-bconnect_footer .site-footer .footer-col[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-bconnect_footer .site-footer .footer-col-caret,
	.elementor-widget-bconnect_footer .site-footer.bc-facc-ready .footer-col::details-content {
		transition: none;
	}
}
.elementor-widget-bconnect_footer .site-footer .footer-bottom {
	margin-top: 0;
	padding-top: 18px;
	gap: 14px;
}
.elementor-widget-bconnect_footer .site-footer .footer-bottom-left {
	gap: 12px;
}
/* Het copyright stond op `white-space: nowrap`; samen met het
   merkje en de drie social-iconen paste dat niet op 360px. Het
   mag nu afbreken, zodat de onderregel binnen de container blijft. */
.elementor-widget-bconnect_footer .site-footer .footer-copy {
	white-space: normal;
}

/* ============================================================
   /LEADGENERATIE/ (109) — "Meer leads genereren"
   ============================================================ */

/* ---- secundaire subnavigatie volledig uit -------------------
   Dezelfde aanpak als op de homepage: display:none op de
   Elementor-container haalt sticky-positie én gereserveerde
   hoogte weg. Hoofdmenu en sticky header blijven ongemoeid. */
body.bc-page-leadgeneratie .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-leadgeneratie .elementor-widget-bconnect_subnav,
body.bc-page-leadgeneratie .lg-subnav,
body.bc-page-leadgeneratie .au-subnav[data-bc-subnav] {
	display: none !important;
}

/* ---- hero: de drie kerncijfers ------------------------------
   .lg-hero-proof was een flex-rij met wrap; op mobiel pasten er
   twee cijfers naast elkaar en zakte "Sinds 2010" naar een derde,
   losse regel. Nu een raster van drie gelijke kolommen met
   gecentreerde inhoud. Het cijfer schaalt met de viewport
   (clamp op vw) zodat "Sinds 2010" — het breedste — vanaf 360px
   op één regel blijft; de labels mogen wel afbreken. */
body.bc-page-leadgeneratie .lg-hero-proof,
body.bc-page-meer-rendement .lg-hero-proof,
body.bc-page-automotive .lg-hero-proof,
body.bc-page-integraties .lg-hero-proof,
body.bc-page-home-en-living .lg-hero-proof,
body.bc-page-team .lg-hero-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 8px;
	margin-top: 30px;
	padding-top: 22px;
}
body.bc-page-leadgeneratie .lg-hero-proof li,
body.bc-page-meer-rendement .lg-hero-proof li,
body.bc-page-automotive .lg-hero-proof li,
body.bc-page-integraties .lg-hero-proof li,
body.bc-page-home-en-living .lg-hero-proof li,
body.bc-page-team .lg-hero-proof li {
	align-items: center;
	text-align: center;
	gap: 5px;
	min-width: 0;
}
body.bc-page-leadgeneratie .lg-hero-proof-num,
body.bc-page-meer-rendement .lg-hero-proof-num,
body.bc-page-automotive .lg-hero-proof-num,
body.bc-page-integraties .lg-hero-proof-num,
body.bc-page-home-en-living .lg-hero-proof-num,
body.bc-page-team .lg-hero-proof-num {
	font-size: clamp(15px, 4.3vw, 21px);
	white-space: nowrap;
}
body.bc-page-leadgeneratie .lg-hero-proof-label,
body.bc-page-meer-rendement .lg-hero-proof-label,
body.bc-page-automotive .lg-hero-proof-label,
body.bc-page-integraties .lg-hero-proof-label,
body.bc-page-home-en-living .lg-hero-proof-label,
body.bc-page-team .lg-hero-proof-label {
	font-size: 12px;
	line-height: 1.3;
	max-width: none;
	overflow-wrap: break-word;
}

/* ---- hero: de visual als zelfstandig blok -------------------
   De visual stond direct tegen het laatste cijfer aan en las
   daardoor als onderdeel van "Sinds 2010". De rij-afstand in
   .lg-hero-grid gaat omhoog, zodat er duidelijke lucht tussen de
   cijferrij en de visual staat — ruim genoeg om ook de kaart die
   boven de afbeelding uitsteekt vrij te laten. De visual zelf
   vult de volledige contentbreedte en staat gecentreerd. */
body.bc-page-leadgeneratie .lg-hero-grid {
	gap: 44px;
}
body.bc-page-leadgeneratie .lg-hero-visual {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}
/* De twee zwevende kaarten stonden op vaste px-offsets. Nu
   relatief aan de visual, met een maximumbreedte zodat ze op
   geen enkele schermbreedte buiten de container kunnen vallen. */
body.bc-page-leadgeneratie .lg-hero-float-lead {
	left: 4%;
	right: auto;
	max-width: 72%;
}
body.bc-page-leadgeneratie .lg-hero-float-stat {
	right: 4%;
	left: auto;
	bottom: 8%;
	max-width: 54%;
}

/* ---- processectie: verbindingslijn --------------------------
   Was: één lijn op .sc-flow::before met `top:32px; bottom:32px`.
   32px vanaf de bovenkant is precies het midden van het eerste
   64px-icoon, maar 32px vanaf de ONDERKANT is het midden van de
   laatste tekstregel — niet van het laatste icoon. De lijn liep
   daardoor ±60px door onder de laatste stap.

   Nu tekent elke stap behalve de laatste zijn eigen segment: van
   het midden van zijn eigen icoon (top:32px) tot het midden van
   het icoon van de volgende stap (100% van de eigen hoogte + de
   rij-afstand van het raster). De lijn stopt dus per definitie
   bij het laatste icoon, ongeacht hoe lang de teksten worden.
   Het segment ligt achter het icoon (z-index 0 binnen de stap),
   net als voorheen. */
body.bc-page-leadgeneratie .sc-flow::before {
	display: none;
}
body.bc-page-leadgeneratie .sc-step:not(:last-child)::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 31px;
	top: 32px;
	width: 2px;
	height: calc(100% + var(--space-6));
	border-radius: 2px;
	background: linear-gradient(180deg, var(--c-grad-blue), var(--c-grad-magenta));
}
/* Het losse lijnstukje onder de laatste stap (de decoratieve rail
   boven "En dat zie je terug in de cijfers") vervalt op mobiel. */
body.bc-page-leadgeneratie .sc-bridge-rail {
	display: none;
}

/* ---- leadcalculator: dubbel uitlegblok weg ------------------
   Het chatpaneel herhaalt in bubbels dezelfde instructie die al
   achter de knop "Wat moet ik hier invullen?" staat. Op mobiel
   gaat het hele <aside> uit. Omdat de kaart daar een raster met
   één kolom en auto-rijen is, verdwijnt met het element ook de
   rij zelf: geen lege container, geen achtergrondvlak, geen
   gereserveerde hoogte. De rekenlogica staat los van dit paneel
   en blijft volledig intact. */
body.bc-page-leadgeneratie .au-calc-chat {
	display: none;
}

/* ---- "Gebouwd op jarenlange ervaring" -----------------------
   Vier cijfers in één gecentreerde kolom, cijfer én label
   gecentreerd, en een gelijkmatige, iets compactere tussenruimte
   (was 28px rijafstand met 8px binnen de stat). */
body.bc-page-leadgeneratie .lg-track-stats {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 22px;
}
body.bc-page-leadgeneratie .lg-track-stat {
	align-items: center;
	text-align: center;
	gap: 6px;
}
body.bc-page-leadgeneratie .lg-track-label {
	max-width: 24em;
	text-align: center;
}

/* ---- lead-calculator: helper-bubbels weg --------------------- */
body.bc-page-leadgeneratie .au-calc-hint,
body.bc-page-leadgeneratie .au-calc-help {
	display: none;
}

/* ============================================================
   HOMEPAGE (108) — HERO-VISUAL: COMPACTE ANIMATIE-ZONE
   ------------------------------------------------------------
   PROBLEEM. De scene was een flex-kolom met het chatvenster op
   volle breedte en de drie meldingen daaronder, elk óók op volle
   breedte. Samen 773px hoog terwijl het chatvenster maar 450px is
   — er stond dus ruim 320px gereserveerde ruimte onder de chat.
   Die ruimte is nodig (de kaarten worden met opacity verborgen,
   niet met display, anders verspringt de pagina), maar de tijdlijn
   in hero-b5.js komt pas ná ~12s bij de eerste kaart. Tot dat
   moment keek je op een telefoon naar een leeg vlak van een derde
   schermhoogte, en na elke lus opnieuw.

   AANPAK. De scene is nu een raster: chatvenster over de volle
   breedte, de twee statuskaarten NAAST elkaar in twee kolommen en
   de payoff-pil gecentreerd daaronder. Alles binnen dezelfde
   begrensde container, alles compacter geschaald (kleinere
   icoontegels, titels, checklist en pil). Daarmee reserveert de
   visual alleen nog de hoogte die de eindstand echt nodig heeft
   en verdwijnt het grote lege vlak — zonder één regel copy of één
   animatiestap te verwijderen, en nog steeds zonder layout shift:
   de kaarten houden hun ruimte vast met opacity.

   NABRANDER 04-08-2026 — TOCH IN HET CHATVENSTER. Twee kaarten
   naast elkaar plus de pil reserveerden nog steeds ~150px onder de
   chat, en die stond er de eerste ~12s van elke cyclus leeg bij.
   De drie meldingen worden nu door hero-b5.js verplaatst naar een
   stapel BINNEN .hv-win (zie .b5-mstack verderop) en de leegte
   onder de chat verdwijnt daarmee helemaal. De regels hieronder
   blijven staan als vangnet: zonder JS blijven de kaarten waar
   PHP ze rendert, en dan is dit tweekoloms-raster nog steeds de
   compactste weergave. Ze raken de stapel niet, want daarin zijn
   de kaarten geen grid-items van de scene meer.

   De oude afweging hieronder ("niet over de chat leggen") gold
   voor kaarten op volle grootte die óók het invoerveld en de
   levende bubbels bedekten. De stapel is compacter, start pas ná
   het laatste bericht en laat het invoerveld vrij.
   ============================================================ */
body.home .b5-scene {
	aspect-ratio: auto;
	width: 100%;
	max-width: 100%;
	margin: 14px auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	column-gap: 10px;
	row-gap: 12px;
}
body.home .b5-chatwrap {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 100%;
	grid-column: 1 / -1;
}
/* De twee statuskaarten naast elkaar; gelijke hoogte doordat het
   raster ze stretcht, dus geen trapje in de rij. */
body.home .b5-card {
	position: relative;
	inset: auto;
	width: 100%;
	padding: 12px 13px;
	gap: 9px;
	border-radius: 12px;
}
body.home .b5-card--lead { grid-column: 1; }
body.home .b5-card--follow { grid-column: 2; }
body.home .b5-pill {
	position: relative;
	inset: auto;
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 100%;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

/* Compactere maatvoering binnen de kaarten: op ~150px kolombreedte
   moeten titel, badge en checklist mee terugschalen, anders wordt
   de rij alsnog onnodig hoog. */
body.home .b5-card-row {
	gap: 8px;
	align-items: flex-start;
}
body.home .b5-card-ic {
	width: 25px;
	height: 25px;
	border-radius: 8px;
}
body.home .b5-card-ic svg {
	width: 13px;
	height: 13px;
}
body.home .b5-card-title {
	font-size: 13.5px;
	line-height: 1.25;
}
/* De twee kaarten worden door het raster op gelijke hoogte gezet.
   De "Nieuwe lead"-kaart heeft minder inhoud dan "Opvolging gestart",
   dus zou onderin wit overhouden; de badge zakt daarom naar de
   onderkant en het paar leest als één blok. */
body.home .b5-badge {
	gap: 5px;
	padding: 4px 9px;
	margin-top: auto;
}
body.home .b5-badge span { font-size: 11px; }
body.home .b5-check {
	width: 14px;
	height: 14px;
}
body.home .b5-list { gap: 6px; }
body.home .b5-list-row {
	gap: 6px;
	font-size: 11.5px;
	line-height: 1.3;
	align-items: flex-start;
}
body.home .b5-pill {
	gap: 7px;
	padding: 8px 14px;
	font-size: 12.5px;
}

/* ---- de stapel binnen het chatvenster ------------------------
   hero-b5.js verplaatst de drie meldingen onder 767px naar
   .b5-mstack, tussen de berichtenlijst en het invoerveld in
   .hv-win. De houder is een flex-item van 0px hoog met de stapel
   er absoluut in, dus:
   - het invoerveld en de "Powered by"-regel blijven exact staan,
   - de overlay voegt geen hoogte toe aan de pagina,
   - .hv-win heeft overflow:hidden, dus niets kan buiten het
     venster vallen.
   De stapel ligt vanaf de onderkant naar boven opgebouwd, zodat
   hij groeit naar de berichten toe en niet naar het invoerveld. */
body.home .b5-mstack {
	position: relative;
	z-index: 3;
	flex: none;
	height: 0;
}
body.home .b5-mstack-in {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* 10px lucht tussen de drie blokken; ze overlappen elkaar niet.
	   Eerdere versie stapelde ze met -7px marge, waardoor het één
	   rommelig blok leek. */
	gap: 10px;
	/* De kaarten zijn decoratie in een aria-hidden scene; geen
	   klikdoelen, dus geen muisvangst boven de bubbels. */
	pointer-events: none;
}
body.home .b5-mstack .b5-card,
body.home .b5-mstack .b5-pill {
	position: relative;
	inset: auto;
	width: auto;
	max-width: 100%;
	/* Eigen, kortere schaduw: op de lichte backdrop staat elk blok
	   zo duidelijk los, zonder de zware 44px-plateauschaduw die op
	   desktop over de paginakleur ligt. Zelfde navy-tint. */
	box-shadow: 0 1px 2px rgba(20, 20, 100, .07), 0 8px 20px -8px rgba(20, 20, 100, .24);
}
/* "Afspraak bevestigd" als zelfstandig, gecentreerd blok onder
   "Opvolging gestart" — niet uitgerekt over de volle breedte. */
body.home .b5-mstack .b5-pill {
	align-self: center;
}
/* Binnen de smallere stapel (op 360px ~292px breed) is de
   maatvoering een tik compacter dan in het raster-vangnet
   hierboven: met 2×10px tussenruimte moeten de drie blokken samen
   binnen de berichtenzone blijven, met lucht tot de vensterkop. */
body.home .b5-mstack .b5-card {
	padding: 9px 12px;
	gap: 6px;
}
body.home .b5-mstack .b5-list {
	gap: 3px;
}
body.home .b5-mstack .b5-list-row {
	font-size: 11px;
	line-height: 1.2;
}
body.home .b5-mstack .b5-pill {
	padding: 6px 12px;
	font-size: 11.5px;
	white-space: normal;
	text-align: center;
}

/* ---- backdrop achter de stapel -------------------------------
   Een lichte lavendel-witte laag over UITSLUITEND het
   berichtengedeelte: de hoogte komt als --b5-mbd-h uit
   hero-b5.js (gemeten op .hv-win-body), dus de navy kop, het
   invoerveld en "Powered by Bconnect" blijven vrij.

   Geen harde rechthoek: de boven- en onderrand faden weg met een
   mask, zodat de laag in de bubbels overloopt in plaats van er
   met een lijn bovenop te liggen. De laag faadt in zodra de
   eerste statuskaart aan gaat — CSS-only met :has(), zodat er
   geen extra JS-status bij hoeft. Bij prefers-reduced-motion
   staat de scene niet "armed" en zijn de kaarten meteen zichtbaar;
   de tweede selector dekt dat geval. */
body.home .b5-mstack .b5-mbd {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--b5-mbd-h, 250px);
	background: rgba(244, 245, 251, .7);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 28px, #000 calc(100% - 14px), rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 28px, #000 calc(100% - 14px), rgba(0, 0, 0, 0) 100%);
}
body.home .b5-scene.is-armed .b5-mstack:has(.b5-rev.is-on) .b5-mbd,
body.home .b5-scene:not(.is-armed) .b5-mstack .b5-mbd {
	opacity: 1;
}

/* De verbindingsdraden liepen van het chatvenster naar de plek
   waar de kaarten stónden. Nu ze in het venster liggen, verbindt
   de SVG niets meer en zou hij alleen nog in de hoeken naast het
   venster kunnen opduiken. */
body.home .b5-scene .b5-thread {
	display: none;
}

/* ============================================================
   HOMEPAGE (108) — LOGOBALK "Werkt voor elk merk"
   ------------------------------------------------------------
   .logo-marquee-item had 40px binnenmarge links én rechts. Op een
   band van 320px is dat een kwart van de breedte: de band begon
   met een leeg strookje vóór het eerste logo, er stonden maar twee
   logo's in beeld met 80px gat ertussen, en aan de rechterrand
   viel er standaard één halverwege af. Compactere marge → vanaf de
   eerste frame vier logo's in beeld, gelijkmatig verdeeld.

   De marquee zelf blijft ongemoeid: de track is 4 identieke kopieën
   en de keyframe schuift precies -50% (= 2 kopieën), dus de lus is
   naadloos ongeacht de itembreedte. Een symmetrische margewijziging
   raakt die rekensom niet.
   ============================================================ */
body.home .elementor-widget-bconnect_hero .hh-logobar-section .logo-marquee-item {
	padding: 0 18px;
}
body.home .elementor-widget-bconnect_hero .hh-logobar-section .logo-marquee-item img {
	max-width: 88px;
}

/* ============================================================
   SITEWIDE — ANKERS ONDER DE VASTE HEADER
   ------------------------------------------------------------
   De header is `position: fixed` (76px). Zonder scroll-margin
   landt een #anker-sprong met de sectiekop achter die balk.
   ============================================================ */
section[id],
[data-anchor] {
	scroll-margin-top: 88px;
}
body.admin-bar section[id],
body.admin-bar [data-anchor] {
	scroll-margin-top: 134px;
}

/* ============================================================
   /MEER-RENDEMENT/ (112)
   ============================================================ */

/* ---- secundaire subnavigatie volledig uit -------------------
   Zelfde aanpak als op 108/109: display:none op de Elementor-
   container haalt sticky-positie én gereserveerde hoogte weg, dus
   er blijft geen tweede navigatiebalk over die content bedekt.
   De sticky hoofdheader blijft ongemoeid. */
body.bc-page-meer-rendement .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-meer-rendement .elementor-widget-bconnect_subnav,
body.bc-page-meer-rendement .au-subnav[data-bc-subnav] {
	display: none !important;
}

/* ---- hero-visual eruit, inclusief de ruimte ----------------
   13-08-2026, op verzoek. Het workflow-dashboard is een brede,
   fijnmazige visual met leesbare labels in de kaartjes; op 390px
   staat die op ~350px breed en is er niets meer van te lezen,
   terwijl hij wel ~230px hoogte kost tussen de kop en de eerste
   sectie. `display: none` op de <figure> haalt het rasteritem
   helemaal weg — geen lege rij, geen grid-gap — precies zoals
   het al gebeurt op /automotive/ en /home-en-living/ hierboven.
   Vanaf 768px blijft de visual staan. */
body.bc-page-meer-rendement .mr-hero-figure {
	display: none;
}

/* ---- hero: de drie kerncijfers in drie kolommen -------------
   Was een raster van twee kolommen met "24/7" alleen op een derde
   rij; die halve rij kostte hoogte en liet een leeg vak naast het
   cijfer staan. Nu exact dezelfde opbouw als op /leadgeneratie/:
   drie gelijke kolommen, cijfer en label gecentreerd per kolom en
   dezelfde maten en tussenruimte. Het cijfer schaalt met de
   viewport zodat "< 30 sec" — het breedste — vanaf 360px op één
   regel blijft; de labels mogen wel over twee of drie regels.
   Zie het gelijknamige blok bij pagina 109; de selectors zijn
   samengevoegd zodat beide oplossingspagina's niet uit elkaar
   kunnen lopen. */

/* ============================================================
   VANAF HIER T/M "kanalen": INACTIEF SINDS 13-08-2026.

   De pagina is herbouwd naar de nieuwe Claude Design-opzet. De
   secties waar deze regels bij horen — "Wat we leveren"
   (.sol-pillar*, mr-pillars) en "Kanalen" (.sol-chsplit*,
   mr-channels) — staan niet meer op /meer-rendement/. De regels
   raken dus niets: ze zijn gescoopt op body.bc-page-meer-rendement
   én op classes die daar niet meer voorkomen.

   Ze zijn BEWUST niet weggegooid. Het is nagemeten mobiel maatwerk
   dat direct weer klopt als iemand de oude opzet terugzet (de
   back-up staat op /meer-rendement-oud/ en in postmeta
   `_bc_data_backup_mr_v2`). Blijft de nieuwe opzet staan, dan kan
   dit blok bij de volgende opruimronde weg.

   NOG WEL ACTIEF op deze pagina: de subnav-regel hierboven en de
   blokken "AI handelt af" (.sol-hybrid), "uitvoeringsmodellen"
   (.sol-models) en "track record" (.au-tr-*) verderop.
   ============================================================ */

/* ---- [inactief] "Wat we leveren": pijlerkaarten compact ------
   De kaart had 48px binnenmarge, waardoor er op 320px maar 182px
   contentbreedte overbleef: icoon bóven de kop, kop over drie
   regels, tekst in een smalle kolom. Nu 20px marge en een raster
   met het icoon LINKS en kop + tekst rechts ernaast; de checklist
   loopt daaronder over de volle kaartbreedte, met de workflow-
   visual als afsluiter. `display: contents` op .sol-pillar-head
   maakt de icoontegel en de h3 directe rasteritems, zodat ze in
   dezelfde rij naast elkaar kunnen staan zonder extra markup. */
body.bc-page-meer-rendement .sol-pillar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 14px;
	/* 14px is dezelfde maat als de padding-top van .sol-pillar-list
	   hieronder, zodat titelrij → beschrijving → scheidingslijn →
	   opsomming één gelijkmatig ritme houden in alle drie de kaarten.
	   Met 12px week de kaart met een tweeregelige titel af. */
	row-gap: 14px;
	padding: 20px;
}
body.bc-page-meer-rendement .sol-pillar-head {
	display: contents;
}
body.bc-page-meer-rendement .sol-pillar-tile {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
}
body.bc-page-meer-rendement .sol-pillar-tile svg {
	width: 21px;
	height: 21px;
}
body.bc-page-meer-rendement .sol-pillar-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 18px;
	line-height: 1.22;
	letter-spacing: -0.015em;
}
/* De beschrijving stond in kolom 2, dus ingesprongen tot onder de
   titel terwijl de scheidingslijn, de opsomming en de visual op de
   linkerrand van de kaart beginnen. Dat las als twee verschillende
   marges in één kaart. Nu over de volle kaartbreedte, links gelijk
   met de rest; alleen de titelrij (icoon + kop) blijft horizontaal. */
body.bc-page-meer-rendement .sol-pillar-p {
	grid-column: 1 / -1;
	grid-row: 2;
	font-size: 14.5px;
	line-height: 1.6;
}
/* De basisregel duwt de lijst met `margin: auto 0 0` naar de
   onderkant van de flex-kaart; in een raster moet die auto eruit. */
body.bc-page-meer-rendement .sol-pillar-list {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
	padding-top: 14px;
	gap: 9px;
}
body.bc-page-meer-rendement .sol-pillar-list li {
	padding-left: 24px;
	font-size: 13.5px;
	line-height: 1.45;
}

/* ---- [inactief] workflow-visuals IN de bijbehorende kaart ----
   De drie visuals stonden als losse strip ná de kaarten, terwijl
   elke visual bij precies één pijler hoort. Op mobiel gaat de
   strip uit en verschijnt de figure die de widget binnen de kaart
   meerendert (zie class-mr-pillars-widget.php). Volgorde 1:1 met
   de pijlers: opvolging → verrijken → afhandeling.

   De radius moet met `.elementor-widget-container`-specificiteit,
   want Elementor-core zet `.elementor img { border-radius: 0 }`
   (0,1,1) en dat verslaat een kale .mr-workflow-img (0,1,0). */
body.bc-page-meer-rendement .sol-ph-strip-sec {
	display: none;
}
body.bc-page-meer-rendement .sol-pillar-fig {
	display: block;
	grid-column: 1 / -1;
	grid-row: 4;
	margin: 2px 0 0;
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
	border: 1px solid var(--c-border-soft, #ECEEF4);
	background: var(--c-bg-tint, #F4F5FA);
}
body.bc-page-meer-rendement .sol-pillar-fig .mr-workflow-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card, 14px);
}

/* ---- "AI handelt af": de grote afhandelingvisual ------------
   Zelfde radius-correctie, plus compactere sectieruimte zodat de
   uitvoeringsmodellen er direct onder beginnen in plaats van na
   een blok witruimte. */
body.bc-page-meer-rendement .elementor-widget-container .sol-hybrid-img,
body.bc-page-meer-rendement .sol-hybrid-img {
	border-radius: var(--radius-card, 14px);
	overflow: hidden;
}
body.bc-page-meer-rendement .sol-hybrid {
	padding: var(--space-7) 0 var(--space-6);
}
body.bc-page-meer-rendement .sol-hybrid-grid {
	gap: 22px;
}

/* ---- uitvoeringsmodellen: direct onder de visual ------------ */
body.bc-page-meer-rendement .sol-models {
	padding: var(--space-7) 0;
}
body.bc-page-meer-rendement .sol-models .au-head {
	margin-bottom: var(--space-5);
}

/* ---- [inactief] kanalen: twee gelijkwaardige blokken --------
   E-mail en WhatsApp stonden als twee volle-breedte rijen onder
   elkaar (icoon links, tekst rechts). Op mobiel is dat onnodig
   hoog; nu twee gelijke kolommen met een compact blok per kanaal.

   Binnen de kaart: icoon en kanaalnaam naast elkaar in één
   titelrij (verticaal op elkaar gecentreerd, 10px ertussen) en de
   beschrijving daaronder over de volle kaartbreedte, links
   uitgelijnd. `display: contents` op .sol-chsplit-rowtext maakt
   de naam en de regel directe rasteritems, zodat de naam naast het
   icoon kan staan terwijl de tekst eronder de volle breedte pakt —
   zonder de markup te verbouwen. Eerder stond de icoontegel bóven
   de naam; dat kostte een extra regel hoogte per kaart. */
body.bc-page-meer-rendement .sol-chsplit-featured {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}
body.bc-page-meer-rendement .sol-chsplit-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	/* align-content MOET hier staan. De twee kaarten zijn rasteritems
	   van .sol-chsplit-featured en worden op gelijke hoogte gerekt; in
	   de kaart met de kortste tekst verdeelt een raster die extra
	   hoogte over zijn auto-rijen. De titelrij werd daardoor hoger en
	   het icoon en de naam (align-self: center) zakten ~10px naar
	   beneden, dus stonden de twee titelrijen niet op één lijn. Met
	   align-content: start houden de rijen hun eigen hoogte en blijft
	   de extra ruimte onderaan de kaart. */
	align-content: start;
	column-gap: 10px;
	row-gap: 10px;
	min-width: 0;
	padding: 14px 13px;
	background: var(--c-bg-tint, #F4F5FA);
	border: 1px solid var(--c-border-soft, #ECEEF4);
	border-radius: 14px;
}
body.bc-page-meer-rendement .sol-chsplit-rowtext {
	display: contents;
}
body.bc-page-meer-rendement .sol-chsplit-row .sol-chsplit-ic {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-meer-rendement .sol-chsplit-row .sol-chsplit-name {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}
body.bc-page-meer-rendement .sol-chsplit-row .sol-chsplit-line {
	grid-column: 1 / -1;
	grid-row: 2;
	text-align: left;
}
body.bc-page-meer-rendement .sol-chsplit-ic {
	width: 38px;
	height: 38px;
	border-radius: 11px;
}
body.bc-page-meer-rendement .sol-chsplit-ic svg {
	width: 19px;
	height: 19px;
}
body.bc-page-meer-rendement .sol-chsplit-name {
	font-size: 15px;
	/* De 4px onderrand van de kolom-variant hoort niet meer bij een
	   titelrij: de row-gap van het raster regelt die ruimte nu. */
	margin-bottom: 0;
}
body.bc-page-meer-rendement .sol-chsplit-line {
	font-size: 13px;
	line-height: 1.5;
}
/* Het label "Ook beschikbaar via" stond op dezelfde regel als de
   eerste chip, waardoor "Live chat" losraakte van de twee chips
   op de regel eronder. Label krijgt een eigen regel. */
body.bc-page-meer-rendement .sol-chsplit-pills {
	gap: 8px;
	margin-top: 20px;
}
body.bc-page-meer-rendement .sol-chsplit-pills-label {
	flex: 0 0 100%;
	margin: 0 0 2px;
	font-size: 13px;
}
body.bc-page-meer-rendement .sol-chsplit-pill {
	padding: 6px 12px;
	font-size: 12.5px;
	white-space: normal;
}
/* De kanaalvisual sluit direct onder de blokken aan. */
body.bc-page-meer-rendement .sol-chsplit-grid {
	gap: 26px;
}
body.bc-page-meer-rendement .sol-chsplit-figure {
	width: 100%;
	max-width: 100%;
}
body.bc-page-meer-rendement .elementor-widget-container .sol-chsplit-img,
body.bc-page-meer-rendement .sol-chsplit-img {
	border-radius: var(--radius-card, 14px);
}

/* ---- track record: cijfers binnen hun kolom ----------------
   `2.500.000` staat op white-space:nowrap. In een tweekoloms
   raster is de kolom smaller dan dat getal, en omdat een
   rasteritem niet onder zijn min-content krimpt zou de hele rij
   breder worden dan de bank. min-width:0 + iets kleinere
   lange-getalvariant houdt alles binnen de sectie. */
body.bc-page-meer-rendement .au-tr-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 8px;
}
body.bc-page-meer-rendement .au-tr-stat {
	min-width: 0;
	padding: 4px 6px;
}
body.bc-page-meer-rendement .au-tr-stat .au-num {
	font-size: clamp(28px, 8vw, 38px);
}
body.bc-page-meer-rendement .au-tr-stat .au-tr-num-long {
	font-size: clamp(19px, 5.6vw, 26px);
}
body.bc-page-meer-rendement .au-tr-label {
	font-size: 13px;
	max-width: 13em;
}
/* Onder 360px past 2.500.000 niet meer naast een buur: dan één
   kolom, nog steeds gecentreerd. */
body.bc-page-meer-rendement .sol-tg-inner {
	padding: 0 20px;
}

/* ============================================================
   /AUTOMOTIVE/ (117) + /HOME-EN-LIVING/ (126)
   ------------------------------------------------------------
   Twee branchepagina's met dezelfde opbouw (au-hero-schil,
   au-subnav, au-leak/au-help, calculator, track record), dus de
   meeste regels gelden voor beide. Waar de markup verschilt
   (hl2-hero, hl-track, hl-proof) staat een eigen blok.
   ============================================================ */

/* ---- secundaire subnavigatie volledig uit -------------------
   Op beide pagina's stond een tweede, sticky navigatiebalk
   ("Voor wie / Cases / Bereken je leads / Integraties …") onder
   de hoofdheader. Twee balken op elkaar kostte ~51px extra en
   bedekte de bovenkant van elke sectie waar je naartoe sprong.
   display:none op de Elementor-container haalt sticky-positie en
   gereserveerde hoogte in één keer weg. */
body.bc-page-automotive .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-automotive .elementor-widget-bconnect_subnav,
body.bc-page-automotive .au-subnav[data-bc-subnav],
body.bc-page-home-en-living .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-home-en-living .elementor-widget-bconnect_subnav,
body.bc-page-home-en-living .au-subnav[data-bc-subnav] {
	display: none !important;
}

/* ---- hero: badge eruit, content omhoog, tekst compacter -----
   De pil bovenaan ("Voor dealers, holdings en importeurs" /
   "Voor keuken-, kozijn- en woningverbeteringsbedrijven") duwde
   de kop en de CTA omlaag; op home & living was hij zelfs 58px
   hoog omdat hij over twee regels liep. Weg op mobiel, plus
   minder padding boven de hero en iets kleinere koptypografie:
   de H1 en de primaire knop komen daardoor merkbaar eerder in
   beeld zonder dat het gedrongen wordt. */
body.bc-page-automotive .au-eyebrow-pill,
body.bc-page-home-en-living .au-eyebrow-pill {
	display: none;
}
body.bc-page-automotive .au-hero,
body.bc-page-home-en-living .au-hero {
	min-height: 0;
	padding: 24px 0 40px;
}
body.bc-page-automotive .au-hero h1,
body.bc-page-home-en-living .au-hero h1 {
	margin: 0 0 14px;
	font-size: clamp(25px, 6.8vw, 31px);
	line-height: 1.14;
}

/* ---- /automotive/: kop groter, minder lucht onder de hero ---
   De kop las klein tegen de rest van de hero (25px op 360px) en
   tussen de cijferrij en "Werkt voor elk merk in de automotive"
   stond 72px lucht — 40px onderrand van de hero plus 32px
   bovenrand van de logobalk. Kop een maat groter en die 72px
   terug naar 48px, zodat de hero gevulder oogt zonder dat er
   iets tegen elkaar aan komt te staan. */
body.bc-page-automotive .au-hero h1 {
	font-size: clamp(28px, 7.7vw, 34px);
	line-height: 1.13;
}
body.bc-page-automotive .au-hero,
body.bc-page-home-en-living .au-hero {
	padding-bottom: 28px;
}
body.bc-page-automotive .au-logobar,
body.bc-page-home-en-living .au-logobar {
	padding-top: 20px;
}
body.bc-page-automotive .au-hero .lead,
body.bc-page-home-en-living .au-hero .lead {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 22px;
}
/* ---- secundaire CTA gecentreerd onder de primaire ----------
   Zelfde patroon als op de twee oplossingspagina's: een kolom in
   plaats van een wrappende rij, zodat "Bekijk automotive-cases"
   expliciet gecentreerd staat i.p.v. links te belanden. Tekst en
   pijl staan in dezelfde inline-flow en schuiven dus samen mee.
   De verticale afstand blijft de 14px die de rij-gap hier al gaf. */
body.bc-page-automotive .au-hero-actions,
body.bc-page-home-en-living .au-hero-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}
body.bc-page-automotive .au-hero-actions .au-textlink,
body.bc-page-home-en-living .au-hero-actions .au-textlink {
	align-self: center;
	text-align: center;
}

/* ---- hero-visual eruit, inclusief de ruimte ----------------
   De 16:9-visual met de chat-overlay klopte op mobiel niet: de
   overlay is op vaste px-offsets gepositioneerd en liep bij deze
   breedte over de rand van het onderliggende beeld. display:none
   op .au-hero-shot haalt het rasteritem helemaal weg, dus er
   blijft geen rij en geen grid-gap over en de sectie eronder
   sluit direct aan. Tablet en desktop (>=768px) blijven zoals ze
   waren. */
body.bc-page-automotive .au-hero-shot,
body.bc-page-home-en-living .au-hero-shot {
	display: none;
}

/* ---- hero: de drie kerncijfers in drie kolommen ------------
   Stonden in twee kolommen met "Sinds 2010" alleen op een derde
   rij; die halve rij kostte hoogte en liet een leeg vak naast het
   cijfer staan. Nu dezelfde drie gecentreerde kolommen als op de
   twee oplossingspagina's — zie het gelijknamige blok daar, waar
   de selectors van alle vier de pagina's samen staan zodat ze
   niet uit elkaar kunnen lopen. */

/* ---- lead-calculator: de twee helper-bubbels weg -----------
   Het chatpaneel herhaalt in bubbels wat het invoerveld al
   vraagt ("Vul je gemiddelde bezoekersaantal in…" / "Geen idee?
   Kijk in je analytics…"). Op mobiel gaat het hele <aside> uit;
   de kaart is daar een raster met auto-rijen, dus met het
   element verdwijnt ook de rij: geen leeg vlak, geen
   gereserveerde hoogte. De rekenlogica staat er los van. */
body.bc-page-automotive .au-calc-chat,
body.bc-page-home-en-living .au-calc-chat {
	display: none;
}

/* ---- track record: cijfers netjes in 2x2 ------------------
   /automotive/ ging onder 460px naar één kolom, waardoor de vier
   cijfers een lange losse kolom werden. Nu overal 2x2 met
   min-width:0, zodat 2.500.000 (white-space: nowrap) zijn kolom
   niet kan oprekken. */
body.bc-page-automotive .au-track-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 14px;
}
body.bc-page-automotive .au-track-stat {
	min-width: 0;
	gap: 6px;
}
body.bc-page-automotive .au-track-num {
	font-size: clamp(28px, 8.4vw, 40px);
}
body.bc-page-automotive .au-track-num-long {
	font-size: clamp(19px, 5.8vw, 27px);
}
body.bc-page-automotive .au-track-label {
	font-size: 13px;
	max-width: 13em;
}
/* De breedtereservering (zodat het plusje achter 2.000 en 60 niet
   meeschuift) wordt door au-track.js gemeten en als min-width gezet;
   zie de toelichting bij .lg-track-count hierboven. */
body.bc-page-home-en-living .hl-track .hl-tr-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 8px;
}
body.bc-page-home-en-living .hl-track .hl-tr-stat {
	min-width: 0;
	padding: 6px 6px;
	gap: 8px;
}
body.bc-page-home-en-living .hl-track .hl-tr-stat .au-num {
	font-size: clamp(28px, 8.4vw, 40px);
}
body.bc-page-home-en-living .hl-track .hl-tr-stat .au-tr-num-long {
	font-size: clamp(19px, 5.8vw, 27px);
}
body.bc-page-home-en-living .hl-track .hl-tr-label {
	font-size: 13px;
	max-width: 11em;
}

/* ---- typografie en verticale ruimte compacter -------------
   Beide pagina's zijn ~19.000px lang op mobiel. De sectiekoppen
   en de sectiepadding komen een stap terug; body-tekst blijft op
   15px zodat het leesbaar blijft. Alleen ritme, geen kleuren of
   copy. */
body.bc-page-automotive section.au-sec,
body.bc-page-home-en-living section.au-sec {
	padding-top: 48px;
	padding-bottom: 48px;
}
body.bc-page-automotive .au-h2,
body.bc-page-home-en-living .au-h2,
body.bc-page-home-en-living .hl-head h2 {
	font-size: clamp(23px, 6.4vw, 29px);
	line-height: 1.16;
}
/* .au-head stond alleen voor 117 in deze regel, terwijl de
   segmentsectie op /home-en-living/ (hl-segments) ook .au-head
   gebruikt — daar bleef de basismarge van 64px staan, en dat was
   het lege vlak tussen de intro en de eerste segmentkaart. */
body.bc-page-automotive .au-head,
body.bc-page-home-en-living .au-head,
body.bc-page-home-en-living .hl-head {
	margin-bottom: 26px;
}
body.bc-page-automotive .au-lead,
body.bc-page-home-en-living .au-lead,
body.bc-page-home-en-living .hl-track .hl-tr-body {
	font-size: 15px;
	line-height: 1.62;
}

/* ---- /home-en-living/: klantcases binnen het scherm -------
   De kaarten hadden 48px binnenmarge (var(--space-7)); op 320px
   bleef er 237px inhoud over en liepen de metriek-rijen en het
   citaat tot tegen de rand. Nu 20px marge en compactere blokken.
   De metriek-rijen worden een raster met een vaste eerste kolom,
   zodat 30%+, 08:00–23:30 en 8,7 onder elkaar op dezelfde lijn
   beginnen in plaats van per rij te verspringen (de flex-variant
   gaf elk cijfer zijn eigen breedte). */
body.bc-page-home-en-living .hl-maincase,
body.bc-page-home-en-living .hl-qcard {
	padding: 20px;
	gap: 16px;
	border-radius: var(--radius-card, 14px);
}
body.bc-page-home-en-living .hl-maincase-brand,
body.bc-page-home-en-living .hl-qcard-head {
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
body.bc-page-home-en-living .hl-maincase-logo.has-img,
body.bc-page-home-en-living .hl-qcard-logo.has-img {
	min-width: 0;
	max-width: 100%;
	height: 52px;
	padding: 0 14px;
}
body.bc-page-home-en-living .hl-maincase-logo.has-img img,
body.bc-page-home-en-living .hl-qcard-logo.has-img img {
	max-height: 34px;
	max-width: 128px;
}
body.bc-page-home-en-living .hl-maincase-ctx {
	font-size: 15px;
	line-height: 1.62;
}
body.bc-page-home-en-living .hl-maincase-quote p,
body.bc-page-home-en-living .hl-quote p {
	font-size: 15.5px;
	line-height: 1.5;
}
body.bc-page-home-en-living .hl-maincase-stats {
	gap: 12px;
}
body.bc-page-home-en-living .hl-stat-row {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	min-width: 0;
}
body.bc-page-home-en-living .hl-stat-row .au-num {
	min-width: 0;
	font-size: clamp(26px, 7.6vw, 34px);
}
body.bc-page-home-en-living .hl-stat-row .au-num.is-narr {
	min-width: 0;
	font-size: clamp(17px, 5vw, 22px);
}
body.bc-page-home-en-living .hl-stat-cap {
	font-size: 13.5px;
	line-height: 1.4;
}

/* ---- inbox-mockup: labels uit de kop ------------------------
   De kop van "Alles komt samen in één inbox" is een flexrij:
   icoontegel, tekst, en rechts de labels "Voorbeeld" en "Live".
   Op een telefoon namen die twee labels samen ±145px van de
   348px brede kaart in, waardoor er voor de titel nog 91px
   overbleef en "Alles komt samen in één inbox" over drie à vier
   regels brak — één woord per regel. Op /home-en-living/ speelde
   hetzelfde met alleen "Live" (198px voor de titel, twee regels).

   Op mobiel gaan de labels eruit, zodat de kop de volle breedte
   van de kaart krijgt en het vak gewoon gevuld is met zijn tekst.
   Desktop houdt de labels: daar is de ruimte er wél en past het
   naast de titel op één regel.

   LET OP bij /automotive/: het label "Voorbeeld" is er 05-08-2026
   bij gezet omdat de gesprekken in deze mockup verzonnen zijn en
   het er anders uitziet alsof we echte leadgegevens in een
   screenshot zetten. Dat argument geldt op mobiel net zo goed,
   maar het label is op verzoek weggehaald (06-08-2026). Wil je de
   melding terug zonder het label, dan is de plek de subregel
   (.ksm-sub) — die staat er op elke breedte. */
body.bc-page-automotive .ksm-head .ksm-voorbeeld,
body.bc-page-automotive .ksm-head .ksm-live,
body.bc-page-home-en-living .ksm-head .ksm-voorbeeld,
body.bc-page-home-en-living .ksm-head .ksm-live {
	display: none;
}

/* ============================================================
   /KLANTCASES/ (115) + /REVIEWS/ (121)
   ============================================================ */

/* ---- track record: de paarse kaart liep uit beeld ----------
   ZELFDE BLOK, TWEE PAGINA'S (17-08-2026). `.kc-stats` staat ook
   op /reviews/ (daar als `.kc-stats.rvp-stats`, gerenderd door
   rv-stats), met exact dezelfde vier cijfers en dezelfde
   `.au-tr-num-long` op 2.500.000. Die pagina had geen scope in
   deze laag en was dus nog kapot: gemeten op 375px waren de
   kolommen 252,3 + 148,6 = 401px + 16px padding in een kaart van
   335px, dus 82px liep buiten beeld en werd weggeclipt. De
   selectors hieronder dekken nu beide pagina's; de uitleg
   eronder geldt woordelijk voor allebei.

   DE OORZAAK. `.kc-stats-row` stond op `repeat(2, 1fr)` en `1fr`
   is in werkelijkheid `minmax(auto, 1fr)`: de kolom mag niet
   kleiner worden dan de min-content van zijn inhoud. Die inhoud
   is een `.au-num` met `white-space: nowrap` op clamp(48px…80px),
   dus "2.500.000" eist alleen al 177px op. Gemeten op 320px:
   kaart 280px breed, maar de twee kolommen samen 361,7px — de
   rechterkolom liep 90px buiten de kaart en werd door de
   `overflow: hidden` van de kaart afgekapt. Vandaar de halve
   cijfers aan de rechterrand; een scrollbar kreeg je juist níet,
   omdat het clippen de overflow verbergt.

   DE FIX. `minmax(0, 1fr)` haalt die bodem eruit, `min-width: 0`
   op de cel doet hetzelfde voor de flexkolom erbinnen, en de
   cijfers gaan een paar stappen terug zodat ze binnen hun
   kolom passen in plaats van hem op te rekken. Twee kolommen,
   twee rijen, gelijke breedtes, de scheidingslijnen en de
   afgeronde hoeken van de kaart blijven zoals ze waren.
   ============================================================ */
body.bc-page-klantcases .kc-stats-row,
body.bc-page-reviews .kc-stats-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 18px 10px;
}
body.bc-page-klantcases .kc-stat,
body.bc-page-reviews .kc-stat {
	min-width: 0;
	padding: 16px 10px;
}
body.bc-page-klantcases .kc-stat .au-num,
body.bc-page-reviews .kc-stat .au-num {
	font-size: clamp(26px, 8.4vw, 40px);
}
/* Het lange getal (2.500.000) krijgt de compacte variant, anders
   is het in een kolom van ~130px nog steeds te breed. */
body.bc-page-klantcases .kc-stat .au-num.au-tr-num-long,
body.bc-page-reviews .kc-stat .au-num.au-tr-num-long {
	font-size: clamp(17px, 5.4vw, 26px);
}
body.bc-page-klantcases .kc-stat-label,
body.bc-page-reviews .kc-stat-label {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.4;
}

/* ---- casekaarten: logo, branche en resultaat als één kop ----
   Logo, branchebadge en de hoofdmetriek stonden als drie losse
   blokken onder elkaar met 24px ertussen (bij Bowerkt: logo,
   dan "Kantoorinrichting · Webshop", dan ver eronder "6 jaar").
   Ze horen bij dezelfde case, dus ze schuiven naar één compacte
   informatiekop: logo links, badge ernaast (of eronder als hij
   niet naast past — flex-wrap mag afbreken), en direct daaronder
   het resultaat met zijn label. Titel en uitleg volgen daarna. */
body.bc-page-klantcases .kc-case-head {
	gap: 8px 10px;
	margin-bottom: 10px;
}
body.bc-page-klantcases .kc-case-logo {
	height: 46px;
	padding: 7px 12px;
}
body.bc-page-klantcases .kc-case-logo img {
	height: 28px;
	max-width: 128px;
}
body.bc-page-klantcases .kc-case-head .kc-pill {
	padding: 6px 12px;
	font-size: 12px;
	white-space: normal;
}
/* Het resultaat hoort visueel bij de kop, niet bij de titel: de
   marge erboven gaat eruit en het cijfer wordt een stap kleiner
   zodat het de kaart niet domineert. */
body.bc-page-klantcases .kc-case-stat {
	margin-top: 2px;
}
body.bc-page-klantcases .kc-case-stat .au-num {
	font-size: clamp(30px, 9vw, 44px);
}
body.bc-page-klantcases .kc-case-statlabel {
	margin-top: 6px;
	font-size: 13.5px;
}
body.bc-page-klantcases .kc-case-title {
	margin: 16px 0 12px;
	font-size: clamp(20px, 5.8vw, 25px);
	line-height: 1.18;
}
body.bc-page-klantcases .kc-case-text {
	font-size: 15px;
	line-height: 1.62;
}
/* Beeld en tekstkolom blijven binnen dezelfde marges; de kaarten
   zijn nergens breder dan hun container. */
body.bc-page-klantcases .kc-case {
	gap: 18px;
}
body.bc-page-klantcases .kc-case-media,
body.bc-page-klantcases .kc-case-body {
	min-width: 0;
}
body.bc-page-klantcases .kc-caselist {
	gap: 40px;
}

/* ============================================================
   /OVER-BCONNECT/ (116) — "Onze beloftes"
   ------------------------------------------------------------
   De kaarten hadden de icoontegel bóven de titel, waardoor elke
   kaart drie regels hoog begon voordat er inhoud stond. Nu icoon
   LINKS met titel en uitleg rechts ernaast, in hetzelfde patroon
   als de pijlerkaarten op /meer-rendement/: `display: contents`
   bestaat hier niet want icoon, titel en tekst zijn al directe
   kinderen van de kaart, dus het raster kan ze meteen plaatsen.
   Het icoon staat verticaal gecentreerd op de titelregel.
   Afgeronde hoeken, rand en schaduw blijven ongewijzigd.
   ============================================================ */
body.bc-page-over-bconnect .ob-hybrid-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 14px;
	row-gap: 6px;
	padding: 18px;
}
body.bc-page-over-bconnect .ob-hybrid-icon {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0;
}
body.bc-page-over-bconnect .ob-hybrid-title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
}
body.bc-page-over-bconnect .ob-hybrid-text {
	grid-column: 2;
	grid-row: 2;
	font-size: 14px;
	line-height: 1.55;
}

}

/* Reveal van de nieuwe lijnsegmenten, in hetzelfde patroon als de
   bestaande scenario-animatie (.sc-flow::before schaalde van
   scaleY(0) naar 1 zodra de sectie in beeld kwam). Als aparte
   top-level query, zodat dit bestand nergens geneste at-regels
   nodig heeft. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	body.bc-page-leadgeneratie .sc-step:not(:last-child)::before {
		transform-origin: top center;
		transition: transform .8s var(--ease) .1s;
	}
	body.bc-page-leadgeneratie .sc-section:not(.is-inview) .sc-step:not(:last-child)::before {
		transform: scaleY(0);
	}
	body.bc-page-leadgeneratie .sc-section.is-settled .sc-step:not(:last-child)::before {
		transition: none;
		transform: none;
	}
}

/* ============================================================
   HAMBURGERKNOP — tot 1025px, want dáár is de knop zichtbaar
   ------------------------------------------------------------
   Aparte top-level query: de knop staat vanaf 1025px op
   `display: none`, dus boven die grens levert dit blok net zo
   goed niets op als de 767px-laag hierboven. Onder 1025px is het
   de énige navigatieknop, en daar zaten twee bugs in:

   1) HET ICOON STOND 6px RECHTS VAN HET MIDDEN. Hello's reset.css
      zet `[type=button], button { padding: .5rem 1rem }`. De knop
      is 40x40 met 1px rand, dus het contentvak werd 6px breed.
      `place-items: center` zou de 18px-span dan symmetrisch laten
      overlopen, maar de span heeft `margin: 0 auto` en een auto-
      marge kan niet negatief worden: die valt terug op 0 en lijnt
      de span dus links in dat 6px-vak uit. Padding op 0 en de
      auto-marges weg → de span centreert weer echt.

   2) DE KNOP WERD ROZE BIJ AANRAKEN. Dezelfde reset heeft
      `[type=button]:hover, [type=button]:focus { background-color:
      #c36; color: #fff }` met specificiteit 0,2,0 — dat verslaat
      `.nav-toggle` (destijds 0,1,0; nu `button.nav-toggle`,
      0,1,1 — zie header.css). Na één tik op de hamburger stond er
      dus een #c36-vlak in de header. Hier expliciet terug naar de
      ruststand, in twee varianten: de normale witte header en de
      transparante variant boven een donkere hero.

   Verticaal stond de knop al goed: de drie streepjes liggen op
   -6/0/+6 rond het midden van de span, en de span zit door
   `place-items: center` op de knop-as. Logo, CTA en knop delen
   daardoor één middenlijn (nagemeten: alle drie cy 54 op 320-480).
   ============================================================ */
@media (max-width: 1024px) {
	.site-header .nav-toggle {
		/* width MOET hier expliciet staan. Toen dit werd opgeschreven
		   verloor `.nav-toggle { width: 40px }` (0,1,0) van
		   `[type=button] { width: auto }` uit reset.css (ook 0,1,0,
		   maar later in de cascade) — de knop was dus nooit 40px breed,
		   hij was 18px content + 2x16px padding. Haal je alleen de
		   padding weg, dan klapt hij dicht naar 20px. Inmiddels staat
		   die regel in header.css op `button.nav-toggle` (0,1,1) en
		   wint hij zelf al van de reset, maar deze regel blijft staan:
		   `.site-header .nav-toggle` is 0,2,0 en wint van beide, en de
		   hoogte en flex-eigenschappen hieronder horen hier hoe dan ook. */
		width: 40px;
		height: 40px;
		/* De knop is een flex-item in .nav en mocht dus krimpen: op 320px
		   was hij 20px breed, op 480px 36px. Het icoon zat daardoor wel
		   gecentreerd maar de knop zelf werd een steeds smallere sliver.
		   flex: none houdt hem overal vierkant 40x40. */
		flex: 0 0 auto;
		padding: 0;
		place-items: center;
	}
	.site-header .nav-toggle span,
	.site-header .nav-toggle span::before,
	.site-header .nav-toggle span::after {
		margin-left: 0;
		margin-right: 0;
	}
	.site-header .nav-toggle:hover,
	.site-header .nav-toggle:focus,
	.site-header .nav-toggle:focus-visible {
		background-color: var(--c-white, #fff);
		border-color: var(--c-border, #E2E4EC);
		color: var(--c-navy, #141464);
	}
	.site-header.header-on-dark:not(.is-scrolled) .nav-toggle:hover,
	.site-header.header-on-dark:not(.is-scrolled) .nav-toggle:focus,
	.site-header.header-on-dark:not(.is-scrolled) .nav-toggle:focus-visible {
		background-color: rgba(20, 20, 100, 0.04);
		border-color: rgba(20, 20, 100, 0.18);
	}
	/* De streepjes blijven navy; reset.css zet alleen `color`, en de
	   streepjes gebruiken een eigen background. Expliciet vastzetten
	   zodat een toekomstige currentColor-wijziging ze niet wit maakt. */
	.site-header .nav-toggle:hover span,
	.site-header .nav-toggle:hover span::before,
	.site-header .nav-toggle:hover span::after,
	.site-header .nav-toggle:focus span,
	.site-header .nav-toggle:focus span::before,
	.site-header .nav-toggle:focus span::after {
		background: var(--c-navy, #141464);
	}
}

/* ============================================================
   MOBIELE CTA-ESTAFETTE (04-08-2026) — één CTA tegelijk
   ------------------------------------------------------------
   Op mobiel stond dezelfde CTA twee keer in beeld: de knop
   "Plan een adviesgesprek" in de header én de grote hero-knop
   eronder. Boven de vouw is de hero-knop nu de enige knop; de
   header-knop komt terug zodra die hero-knop uit beeld is, zodat
   er tijdens het hele scrollen precies één CTA zichtbaar is.

   Aparte top-level query en NIET per pagina gescoopt, want dit
   is de sitewide header en geen widget die op meerdere pagina's
   staat — zelfde uitzondering als het hamburger-blok hieronder.
   Boven 767px levert dit blok nul declaraties op, dus tablet en
   desktop blijven per definitie ongemoeid: daar houdt de header
   zijn CTA altijd.

   `.bc-cta-armed` staat al in de PHP-render, zodat de knop bij de
   eerste paint weg is en er geen flits van twee knoppen is.
   header.js haalt die class weg op pagina's zonder CTA boven de
   vouw, en zet `.bc-cta-on` zodra de eerste content-CTA uit beeld
   scrolt. Zonder JS zet een <noscript>-regel in de header-widget
   de knop onvoorwaardelijk terug.
   ============================================================ */
@media (max-width: 767px) {
	.site-header.bc-cta-armed .nav-cta .btn {
		display: none;
	}
	.site-header.bc-cta-armed.bc-cta-on .nav-cta .btn {
		display: inline-flex;
	}
}

/* De knop komt aanzetten i.p.v. te knallen. Bewust ZONDER
   `both`/`forwards`: een fill-mode laat de eindwaarde
   `transform: none` permanent staan en dan is `.btn:active`
   (translateY(1px) scale(.99)) dood — een animatie verslaat een
   gewone declaratie. Zonder fill-mode geldt het keyframe alleen
   tijdens die 260ms. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.site-header.bc-cta-armed.bc-cta-on .nav-cta .btn {
		animation: bcHdrCtaIn .26s var(--ease);
	}
}
@keyframes bcHdrCtaIn {
	from { opacity: 0; transform: translateY(-6px) scale(.94); }
	to   { opacity: 1; transform: none; }
}

/* De backdrop van de mobiele status-overlay faadt in; korte transitie
   en alleen als de bezoeker beweging niet heeft afgezet. Aparte
   top-level query zodat dit bestand geen geneste at-regels nodig
   heeft (zelfde patroon als de scenario-animatie hierboven). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	body.home .b5-mstack .b5-mbd {
		transition: opacity .45s var(--ease, cubic-bezier(.2, .7, .2, 1));
	}
}

/* ============================================================
   MOBIELE HEADER — ÉÉN LOGO-STAP (04-08-2026)
   ------------------------------------------------------------
   Er waren drie verschillende balken tijdens één keer scrollen:
   1. boven: logo 42px, geen CTA;
   2. gescrold: `.site-header.is-scrolled .nav-brand img` zette de
      hoogte op 28px — een verkleining zonder aanleiding;
   3. met CTA: de knop van 184px duwde het logo als flex-item dicht
      tot een vak van 102px bij 390px. Omdat een SVG in een <img>
      binnen zijn vak past (preserveAspectRatio), was de zichtbare
      inkt daar nog maar ~20px hoog: het logo leek verdrukt.

   Nu: het logo blijft 42px zolang er geen CTA staat (stap 2 valt
   dus weg) en verkleint precies één keer, op het moment dat de
   CTA verschijnt.

   In die derde stand is de knop compacter (12px i.p.v. 13,5px en
   smallere binnenmarges) en krijgt het logo de ruimte die
   daarmee vrijkomt. De maat komt niet uit een vaste waarde of een
   vw-berekening maar uit de layout zelf: `height: auto` +
   `max-height: 30px` + `max-width: 100%` maakt het vak precies zo
   groot als er past, met de juiste verhouding, zodat de inkt het
   vak vult i.p.v. erin te zwemmen. Gemeten: 25px hoog op 390px en
   de volle 30px vanaf ~425px, tegen ~20px inkt daarvoor.

   /kennismaken/ (body.bc-conversie) verbergt de hele nav; daar
   staat geen CTA, dus daar mag het logo niet meekrimpen.
   ============================================================ */
@media (max-width: 767px) {
	/* stap 2 vervalt: gescrold zonder CTA blijft het logo groot */
	.site-header.is-scrolled:not(.bc-cta-on) .nav-brand img {
		height: 42px;
	}
	/* stap 3: de enige verkleining */
	body:not(.bc-conversie) .site-header.bc-cta-on .nav-brand img {
		height: auto;
		width: auto;
		max-height: 34px;
		max-width: 100%;
	}
	body:not(.bc-conversie) .site-header.bc-cta-on .nav-brand {
		/* mag krimpen op zeer smalle telefoons, maar dan schaalt het
		   logo netjes mee i.p.v. dat het vak leeg loopt */
		min-width: 0;
	}
	body:not(.bc-conversie) .site-header.bc-cta-on .nav {
		gap: 8px;
	}
	body:not(.bc-conversie) .site-header.bc-cta-on .nav-cta .btn {
		padding: 9px 13px;
		font-size: 12px;
	}
}

/* Zeer smalle telefoons (SE-formaat): daar past het label van de
   knop met 12px nog steeds maar net, en houdt het logo 12px inkt
   over. De knop mag daar nog een maat kleiner, zodat het logo
   ~15px haalt. Aparte top-level query, geen geneste at-regel. */
@media (max-width: 340px) {
	body:not(.bc-conversie) .site-header.bc-cta-on .nav-cta .btn {
		padding: 8px 10px;
		font-size: 11px;
	}
}

/* ============================================================
   OPLOSSINGSPAGINA'S (109 + 112) — HERO EN PROBLEEMSECTIE
   04-08-2026
   ------------------------------------------------------------
   Eén top-level query voor de twee oplossingspagina's, omdat de
   opdracht ze expliciet gelijk wil houden. Alles staat binnen
   max-width: 767px, dus tablet en desktop leveren nul
   declaraties op.
   ============================================================ */
@media (max-width: 767px) {

/* ---- label boven de hero op één regel -----------------------
   De labels heten sinds 04-08-2026 "Meer leads genereren" en
   "Meer rendement uit leads en klanten" (het woord "Oplossing"
   en de punt zijn eruit, in de widget-defaults). Het tweede
   label is met 35 tekens nog steeds het langste: op de
   basismaat met 0,14em letterafstand brak dat op een telefoon
   over twee regels. Een iets kleinere responsive maat plus
   compactere letterafstand houdt het op één regel vanaf 360px,
   zonder woordafbreking (hyphens blijft uit; break-word alleen
   als vangnet bij extreem smalle schermen). */
body.bc-page-leadgeneratie .lg-hero-copy .lg-eyebrow,
body.bc-page-meer-rendement .au-hero-copy .lg-eyebrow {
	font-size: clamp(10px, 2.85vw, 12px);
	letter-spacing: 0.07em;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* ---- minder lucht boven het label --------------------------
   De hero begon met 64px bovenmarge onder een 108px hoge vaste
   header; dat las als een leeg vlak. 20px eraf. De rest van de
   hero (titel, tekst, primaire CTA) blijft ongemoeid. */
body.bc-page-leadgeneratie .lg-hero,
body.bc-page-meer-rendement .mr-hero {
	padding-top: 44px;
}

/* ---- secundaire CTA gecentreerd onder de primaire ----------
   .lg-hero-actions / .au-hero-actions was een flex-rij met wrap:
   de knop nam de volle breedte en de tekstlink zakte eronder,
   links uitgelijnd. Nu een kolom, zodat de link expliciet
   gecentreerd staat i.p.v. per ongeluk links te belanden. De
   verticale afstand blijft 22px (dezelfde gap als voorheen) en
   tekst en pijl blijven één geheel: de pijl staat in dezelfde
   inline-flow als het label, dus centreren verplaatst ze samen. */
body.bc-page-leadgeneratie .lg-hero-actions,
body.bc-page-meer-rendement .au-hero-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 22px;
}
body.bc-page-leadgeneratie .lg-hero-actions .lg-textlink,
body.bc-page-meer-rendement .au-hero-actions .au-textlink {
	align-self: center;
	text-align: center;
}

/* ---- hero-visual: de twee zwevende kaarten eruit ------------
   "Nieuwe lead" en "Gemiddelde reactietijd" liggen absoluut over
   de visual, met een eigen zweef-animatie. Op een telefoon
   bedekken ze de helft van het beeld en de bovenste steekt boven
   de afbeelding uit. display:none haalt het element én zijn
   animatie weg; omdat ze absoluut gepositioneerd zijn is er geen
   rasterrij of hoogte die achterblijft.

   Daarmee vervalt ook de reden voor de extra rij-afstand in
   .lg-hero-grid: die 44px stond er om de uitstekende kaart vrij
   te laten. Terug naar 28px, gelijk aan de andere sectiegaten.
   De hoofdvisual en zijn gradient-gloed blijven volledig intact. */
body.bc-page-leadgeneratie .lg-hero-float {
	display: none;
}
body.bc-page-leadgeneratie .lg-hero-grid {
	gap: 28px;
}

/* ---- "Het probleem": kop gecentreerd, lijst links ----------
   Was: alles links, kop op 30px/33px over vier regels en de
   intro in navy semibold op 19px — die las als een tweede kop
   in plaats van als subtitel.

   Nu: eyebrow, kop en intro gecentreerd; de opsomming blijft
   links uitgelijnd (leesbaarheid van een lijst gaat vóór
   symmetrie). De kop is responsive en compacter, zodat
   "97% van je websitebezoekers vertrekt zonder contact op te
   nemen" op 360px binnen drie regels blijft. Geen geforceerde
   woordafbrekingen: hyphens blijft manual en text-wrap: balance
   uit de basisregel verdeelt de regels.

   De intro krijgt exact de subtitelstijl van "Wat we leveren"
   (.lg-intro): dezelfde --fs-lead, gewicht 400, zachtere kleur,
   regelhoogte 1,55.

   Kop, intro en lijst staan alle drie in dezelfde kolom van
   .lg-prob-left, dus ze delen per definitie één contentbreedte;
   de max-width van 900px op de kop gaat eraf zodat die niet mee
   kan gaan schuiven. De verticale ruimtes zijn gelijkgetrokken op
   16px: eyebrow → kop → intro → lijst. */
body.bc-page-leadgeneratie .lg-prob-head {
	max-width: none;
	text-align: center;
}
body.bc-page-leadgeneratie .lg-prob-head .lg-h2 {
	font-size: clamp(22px, 6.1vw, 27px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	hyphens: manual;
	-webkit-hyphens: manual;
}
body.bc-page-leadgeneratie .lg-prob-head .lg-eyebrow {
	margin-bottom: 16px;
}
body.bc-page-leadgeneratie .lg-prob-points {
	margin-top: 16px;
}
body.bc-page-leadgeneratie .lg-prob-lead {
	/* Gewicht en kleur zijn die van .lg-intro in "Wat we leveren"
	   (400 en --c-text-muted, i.p.v. semibold navy). De maat volgt de
	   richtlijn van 16px en is daarmee één stap kleiner dan de 19px
	   die --fs-lead op mobiel oplevert — bewust, want dit is een
	   subtitel onder een kop en geen tweede kop. */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--c-text-muted);
	text-align: center;
	margin: 0 0 16px;
}
body.bc-page-leadgeneratie .lg-prob-points .lg-col-list li {
	text-align: left;
}

/* ---- cijferblokken: geen wiebelende breedte tijdens het tellen
   De tel-animaties starten pas als het blok in beeld komt (zie
   scenario.js en lg-track.js). Op mobiel staan de track-record-
   cijfers gecentreerd, dus daar zou een groeiend getal het blok
   optisch laten verschuiven; de teller reserveert daarom de
   breedte van zijn eindwaarde. In de scenario-kaart lijnen de
   cijfers links uit en is de reservering alleen een garantie
   tegen verspringende cijferbreedtes. */
/* De breedtereservering tegen verspringen zit niet meer in CSS: de
   widget-JS meet de echte breedte van de eindwaarde en zet die als
   min-width op de teller (Bconnect.armCount). Een reservering in `ch`
   was te ruim — 1ch is de breedte van een "0" en een duizendscheiding
   is smaller, dus bij "2.000" stond het plusje er zichtbaar te ver
   vandaan. Op mobiel staan de trackcijfers gecentreerd; de gemeten
   reservering houdt het cijfer daar binnen een vast vak. */
body.bc-page-leadgeneratie .lg-track-count {
	text-align: center;
}
}


/* ============================================================
   SITEWIDE PATROON — ICOON EN TITEL IN ÉÉN RIJ (04-08-2026)
   ------------------------------------------------------------
   Op de meeste kaarten in dit thema staat de icoontegel BOVEN de
   titel. Op een telefoon kost dat per kaart een hele regel hoogte
   en gaat de titel los van zijn icoon lezen. Op verzoek staat de
   titel nu overal NAAST de tegel, met de toelichting, lijst en
   link daaronder over de volle kaartbreedte.

   Het patroon is elke keer hetzelfde:
   - de kaart wordt een raster `auto minmax(0, 1fr)`;
   - tegel in kolom 1 rij 1, titel in kolom 2 rij 1 (verticaal op
     elkaar gecentreerd);
   - al het andere `grid-column: 1 / -1`;
   - zit de titel in een tussen-div, dan `display: contents` op die
     div zodat de kinderen directe rasteritems worden;
   - `align-content: start`, want kaarten die naast elkaar in een
     raster staan worden op gelijke hoogte gerekt en zouden hun
     auto-rijen anders oprekken (dan zakt de titelrij naar beneden
     en staan twee kaarten niet meer op één lijn).

   De titel moet binnen twee regels blijven. Naast een tegel van
   40-52px blijft er 150-250px over, dus de koptypografie gaat per
   blok een maat omlaag; per blok staat erbij hoeveel.
   ============================================================ */
@media (max-width: 767px) {

/* ---- /automotive/ + /home-en-living/: au-help-kaarten -------
   au-help.css zet de kop al naast de tegel (raster `auto 1fr`).
   Alleen de maat moest omlaag: op 22px brak "Meer rendement uit
   leads en klanten" over vier regels in de 152px die naast de
   tegel overblijft. Op 17px past hij op twee regels vanaf 360px,
   en met een tegel van 44px i.p.v. 52px is er ook nog 8px extra
   tekstbreedte. */
body.bc-page-automotive .au-help-card,
body.bc-page-home-en-living .au-help-card {
	column-gap: 12px;
	row-gap: 12px;
	align-content: start;
}
body.bc-page-automotive .au-help-card .au-help-tile,
body.bc-page-home-en-living .au-help-card .au-help-tile {
	width: 44px;
	height: 44px;
	border-radius: 12px;
}
body.bc-page-automotive .au-help-card .au-help-tile svg,
body.bc-page-home-en-living .au-help-card .au-help-tile svg {
	width: 22px;
	height: 22px;
}
body.bc-page-automotive .au-help-card h3,
body.bc-page-home-en-living .au-help-card h3 {
	font-size: 17px;
	line-height: 1.22;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

/* ---- /tarieven/: "Wat bepaalt je prijs" (tv-factor) --------- */
body.bc-page-tarieven .tv-factor {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 10px;
}
body.bc-page-tarieven .tv-factor .tv-factor-ic {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-tarieven .tv-factor .tv-factor-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 16px;
	line-height: 1.25;
}
body.bc-page-tarieven .tv-factor > *:not(.tv-factor-ic):not(.tv-factor-h) {
	grid-column: 1 / -1;
}

/* ---- /integraties/: categoriekaarten (ig-cat) --------------- */
body.bc-page-integraties .ig-cat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 12px;
}
body.bc-page-integraties .ig-cat .ig-cat-tile {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-integraties .ig-cat .ig-cat-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 16.5px;
	line-height: 1.25;
}
body.bc-page-integraties .ig-cat > *:not(.ig-cat-tile):not(.ig-cat-h) {
	grid-column: 1 / -1;
}

/* ---- /integraties/ + /partner-programma/: sol-pillar --------
   Zelfde behandeling als op /meer-rendement/: `display: contents`
   op .sol-pillar-head maakt tegel en kop directe rasteritems. */
body.bc-page-partner-programma .sol-pillar,
body.bc-page-integraties .sol-pillar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 14px;
	padding: 20px;
}
body.bc-page-partner-programma .sol-pillar-head,
body.bc-page-integraties .sol-pillar-head {
	display: contents;
}
body.bc-page-partner-programma .sol-pillar .sol-pillar-tile,
body.bc-page-integraties .sol-pillar .sol-pillar-tile {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
}
body.bc-page-partner-programma .sol-pillar .sol-pillar-tile svg,
body.bc-page-integraties .sol-pillar .sol-pillar-tile svg {
	width: 22px;
	height: 22px;
}
body.bc-page-partner-programma .sol-pillar .sol-pillar-h,
body.bc-page-integraties .sol-pillar .sol-pillar-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 17px;
	line-height: 1.22;
	text-wrap: balance;
}
body.bc-page-partner-programma .sol-pillar .sol-pillar-p,
body.bc-page-integraties .sol-pillar .sol-pillar-p {
	grid-column: 1 / -1;
	grid-row: 2;
	font-size: 14.5px;
	line-height: 1.6;
}
body.bc-page-partner-programma .sol-pillar .sol-pillar-list,
body.bc-page-integraties .sol-pillar .sol-pillar-list {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
	padding-top: 14px;
	gap: 9px;
}

/* ---- /vacatures/: vacaturekaarten -------------------------- */
body.bc-page-vacatures .vc-job-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 12px;
}
body.bc-page-vacatures .vc-job-card .vc-job-tile {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-vacatures .vc-job-card .vc-job-title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 17px;
	line-height: 1.22;
	text-wrap: balance;
}
body.bc-page-vacatures .vc-job-card > *:not(.vc-job-tile):not(.vc-job-title) {
	grid-column: 1 / -1;
}

/* ---- /partner-programma/: doelgroepkaarten (pt-who) -------- */
body.bc-page-partner-programma .pt-who {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 10px;
}
body.bc-page-partner-programma .pt-who .pt-who-tile {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-partner-programma .pt-who .pt-who-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 17px;
	line-height: 1.22;
	text-wrap: balance;
}
body.bc-page-partner-programma .pt-who .pt-who-p {
	grid-column: 1 / -1;
}

/* ---- /partner-programma/: genummerde stappen --------------- */
body.bc-page-partner-programma .pt-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 14px;
	row-gap: 0;
}
body.bc-page-partner-programma .pt-step .pt-step-num {
	grid-column: 1;
	grid-row: 1;
}
body.bc-page-partner-programma .pt-step .pt-step-text {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/* ---- /contact/: kanaalkaarten ------------------------------ */
body.bc-page-contact .ct-channel ,
body.bc-page-contact-aanvragen .ct-channel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	column-gap: 12px;
	row-gap: 10px;
}
body.bc-page-contact .ct-channel .ct-channel-ic ,
body.bc-page-contact-aanvragen .ct-channel .ct-channel-ic {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}
body.bc-page-contact .ct-channel .ct-channel-h ,
body.bc-page-contact-aanvragen .ct-channel .ct-channel-h {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 16.5px;
	line-height: 1.25;
}
body.bc-page-contact .ct-channel > *:not(.ct-channel-ic):not(.ct-channel-h) ,
body.bc-page-contact-aanvragen .ct-channel > *:not(.ct-channel-ic):not(.ct-channel-h) {
	grid-column: 1 / -1;
}
}

/* ============================================================
   /OVER-BCONNECT/ (116) — DE LOSSE PUNT ONDER DE KOP
   17-08-2026
   ============================================================ */

/* De hero-kop is `Alles wat we doen, draait om <span class="ob-grad">
   Great Conversations</span>.` — de punt zit in `title_b`, dus als
   los tekstknooppunt NA de span.

   DE OORZAAK. `.ob-page .ob-grad` (over.css, de hardeningsregel van
   de widget-opsplitsing) zet `display: inline-block`. Een inline-
   block breekt niet af tussen zijn eigen regels maar wordt één
   blok: zodra "Great Conversations" op 375px over twee regels moet,
   is dat blok net zo breed als de hele kop (327px gemeten) en is er
   voor de punt geen ruimte meer op die regel. De punt zakte dus als
   vijfde regel naar beneden en stond daar alleen, gecentreerd
   onder de kop.

   DE FIX. `display: inline` — dan breekt de accenttekst gewoon mee
   in de regelval van de kop en volgt de punt direct op de laatste
   letter. De gradient blijft heel: `-webkit-box-decoration-break`
   staat op `slice` (de standaard), dus de achtergrond wordt over
   de twee regelfragmenten heen als één doorlopend verloop
   geschilderd en pas daarna in stukken geknipt. Gemeten: de kop
   ging van 5 regels / 180px naar 3 regels / 108px en de punt staat
   op dezelfde regel als "Conversations".

   Waarom de hele pagina en niet alleen de h1: elke ob-kop op deze
   pagina heeft dezelfde bouw (accent-span + punt in title_b), dus
   dezelfde bug ligt op de loer zodra een accentwoord afbreekt.
   Nagemeten op 375px: de vijf ob-h2's houden exact dezelfde hoogte
   (31/31/62/62/62px) en dezelfde regelval, dus deze regel verandert
   vandaag alleen de h1.
   ============================================================ */
@media (max-width: 767px) {

body.bc-page-over-bconnect .ob-grad {
	display: inline;
}

}

/* ============================================================
   /TEAM/ (127) — HERO: OVERFLOW, CTA'S EN DE MENSEN-KAART
   17-08-2026
   ============================================================ */

/* ---- de pagina was 428px breed op een scherm van 375px ------
   DE OORZAAK. team.css stapelt de hero al onder 1024px met
   `.tmp-hero .au-hero-stack { grid-template-columns: 1fr }`, en
   `1fr` is `minmax(auto, 1fr)`: de kolom mag niet kleiner worden
   dan de min-content van zijn inhoud. Die inhoud is de mensen-
   kaart, en die kan niet krimpen omdat de avatarcluster erin
   vastligt op 8 × 56px met -14px overlap = 350px, plus 2 × 28px
   kaartpadding = 406px. De kolom werd dus 408px in een container
   met 335px ruimte, en omdat de container zelf wél op 375px stond
   liep álles — kop, lead, knop, cijfers, kaart — 53px buiten
   beeld. Vandaar de horizontale schuifbalk en de knop die rechts
   werd afgesneden.

   DE FIX. `minmax(0, 1fr)` haalt die bodem eruit (`min-width: 0`
   op de twee rasteritems doet hetzelfde voor de blokken erbinnen)
   en de avatarcluster wordt kleiner, zodat de kaart ook echt
   binnen 335px past in plaats van alleen maar afgekapt te worden.
   Gemeten na de fix: `document.scrollWidth` 375 = clientWidth 375,
   en geen enkel element op de pagina heeft nog een scrollWidth
   groter dan zijn clientWidth. */
@media (max-width: 767px) {

body.bc-page-team .tmp-hero .au-hero-stack {
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
}
body.bc-page-team .tmp-hero .au-hero-copy,
body.bc-page-team .tmp-hero-visual {
	min-width: 0;
}

/* ---- de hero mag hoger beginnen ----------------------------
   De effectieve padding-top kwam niet uit team.css (`.tmp-hero`
   = 74px) maar uit `.au-hero` in au-hero.css: gelijke
   specificiteit (0,1,0) en dat bestand laadt later, dus 64px won.
   Met de vaste header van 108px erboven stond het eyebrow 69px
   onder de balk. 24px is genoeg lucht op een telefoon; de hero
   werd daarmee 957 → 766px hoog. */
body.bc-page-team .tmp-hero {
	padding-top: 24px;
	padding-bottom: 44px;
}

/* ---- de twee hero-CTA's onder elkaar, link gecentreerd -----
   `.tmp-hero-actions` was een flex-rij met wrap en
   `justify-content: flex-start`: de knop nam de volle breedte en
   "Lees ons verhaal" zakte eronder, links uitgelijnd. Zelfde
   patroon als /leadgeneratie/, /meer-rendement/, /automotive/ en
   /home-en-living/ hierboven: een kolom met een gestrekte knop en
   een expliciet gecentreerde tekstlink, zodat die niet per
   ongeluk links belandt. */
body.bc-page-team .tmp-hero-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 22px;
}
body.bc-page-team .tmp-hero-actions .au-textlink {
	align-self: center;
	text-align: center;
}

/* ---- de mensen-kaart compacter -----------------------------
   De kaart was op een telefoon net zo groot als op desktop: 56px
   avatars, 42px icoontegel en 28px padding. Alles gaat een stap
   terug. De avatars zijn de maat die telt: 8 × 40px met -10px
   overlap + 10px padding = 250px min-content, ruim binnen de
   299px die de kaart binnen zijn padding overhoudt — dus de
   kaart bepaalt nu zelf zijn breedte in plaats van door de
   cluster opgerekt te worden. */
body.bc-page-team .tmp-people-card {
	padding: 18px;
	border-radius: 16px;
}
body.bc-page-team .tmp-people-head {
	gap: 10px;
}
body.bc-page-team .tmp-people-glyph {
	width: 34px;
	height: 34px;
	border-radius: 11px;
}
body.bc-page-team .tmp-people-glyph svg {
	width: 17px;
	height: 17px;
}
body.bc-page-team .tmp-people-title {
	font-size: 15px;
}
body.bc-page-team .tmp-people-status {
	font-size: 12px;
}
body.bc-page-team .tmp-avatar {
	width: 40px;
	height: 40px;
	margin-left: -10px;
	border-width: 2px;
	font-size: 15px;
}
body.bc-page-team .tmp-avatar-more {
	font-size: 11.5px;
}
body.bc-page-team .tmp-people-stack {
	margin-top: 16px;
	padding-left: 10px;
}
body.bc-page-team .tmp-people-cap {
	margin-top: 14px;
	font-size: 13px;
}

/* "Een selectie van het team" hoort bij de avatarrij eronder,
   niet bij de kop erboven, maar had `margin: 0 0 8px` en plakte
   daardoor tegen de statusregel aan — het las als een derde
   regel van de kaartkop die per ongeluk buiten de indent van de
   titel viel. Een marge erboven zet hem los als aankondiging van
   de rij. De 8px onder kan eraf: de cluster brengt zelf 16px mee
   en aangrenzende blokmarges vallen samen op de grootste. */
body.bc-page-team .tmp-people-selectie {
	margin: 14px 0 0;
}

/* ============================================================
   /KENNISMAKEN/ — DE PLANNER DIRECT IN BEELD
   ------------------------------------------------------------
   Op mobiel stapelde deze hero als eyebrow -> H1 -> intro -> drie
   voordeelblokken -> pas dan de agenda. Gemeten op 375x812: de
   planningskaart begon op 1180px, dus je moest drie schermen
   scrollen voordat je uberhaupt zag dat je iets kon inplannen. Op
   een pagina waarvan het inplannen van een gesprek het enige doel
   is, is dat de verkeerde volgorde. Na deze regels begint de kaart
   op 144px, direct onder de logobalk.

   Geen context kwijt: de planningskaart heeft zijn eigen kop
   ("Plan je adviesgesprek") en die zegt hetzelfde als de H1.

   BEWUST GEEN `display: contents` HIER.
   De eerste opzet zette .km-copy op `display: contents` om ook
   tussen de H1 en de intro te kunnen schuiven. Dat werkt, maar het
   is levensgevaarlijk: valt de media query ooit weg — door een
   CSS-aggregator die hem verkeerd nest, of doordat iemand het blok
   verplaatst — dan verliest .km-copy op DESKTOP zijn box, vallen de
   expliciete `grid-column`/`grid-row` uit kennismaken.css op de
   grond, en worden H1, intro en voordelen los in het tweekoloms
   raster geplaatst. Resultaat: de H1 springt naar de rechterkolom
   boven de agenda. Dat is precies zo gemeld.

   Het is ook niet nodig. De gewenste volgorde is agenda -> eyebrow
   -> tekst, en dat zijn exact de drie bestaande gridkinderen. Dus
   volstaat `order` op die drie, zonder de boomstructuur aan te
   raken.

   DAARMEE IS DEZE REGEL VEILIG BUITEN ZIJN MEDIA QUERY: op desktop
   staan alle drie de items met expliciete `grid-column`/`grid-row`
   geplaatst, en `order` verzet geen expliciet geplaatst griditem.
   Lekt dit blok ooit naar desktop, dan gebeurt er dus niets.

   `order` verzet alleen de VISUELE volgorde; in de DOM blijft
   eyebrow -> tekst -> agenda staan. Goed voor SEO (de H1 blijft
   vooraan) en het geeft geen rare tabvolgorde, want in .km-copy
   zit geen enkele link of knop — nagemeten: 0 focusbare elementen.
   ============================================================ */
body.bc-page-kennismaken .km-plan-col {
	order: 1;
	/* de widget zet onder 1024px een marge boven de kaart; die hoort
	   bij "kaart onder de tekst" en moet er hier juist af */
	margin-top: 0;
}
body.bc-page-kennismaken .km-eyebrow {
	order: 2;
	margin-top: 34px;
}
body.bc-page-kennismaken .km-copy {
	order: 3;
}

/* ---- kop: alleen het logo ----------------------------------
   Op deze pagina is inplannen het enige doel, dus de knop "Plan
   een adviesgesprek" wijst naar de pagina waar je al staat en het
   hamburgermenu is een uitnodiging om weg te klikken. Beide eruit
   op mobiel; het logo blijft staan als merkherkenning en als weg
   terug, precies zoals in de boekingsschermen die als voorbeeld
   dienden.

   `bc-conversie` verbergt de nav al, maar de CTA komt terug zodra
   de header-JS `.bc-cta-on` zet bij het scrollen. Daarom hier
   expliciet en op de body-scope, zodat die klasse er niet
   overheen kan. */
body.bc-page-kennismaken .site-header .nav-cta,
body.bc-page-kennismaken .site-header.bc-cta-on .nav-cta,
body.bc-page-kennismaken .site-header .nav-toggle,
body.bc-page-kennismaken .site-header .nav-links {
	display: none;
}

/* ============================================================
   /DIGITALE-KLANTENSERVICE/ (190) + /AI-CHATBOT/ (191)
   ------------------------------------------------------------
   Twee pagina's met dezelfde opbouw: een sectiehero met de
   generieke `bconnect_subnav` eronder, dus één blok voor beide.
   ============================================================ */

/* ---- secundaire subnavigatie volledig uit -------------------
   Zelfde aanpak als op 108/109/112 en op de twee branchepagina's:
   op beide pagina's stond een tweede, sticky navigatiebalk onder
   de hoofdheader. Twee balken op elkaar kostte ~51px extra en
   bedekte de bovenkant van elke sectie waar je naartoe sprong —
   gemeten op 390px bij scrollY 1800: de balk lag 51,39px over
   #dk-probleem. display:none op de Elementor-container haalt
   sticky-positie én gereserveerde hoogte in één keer weg. Het
   hoofdmenu en de sticky header blijven ongemoeid.

   Deze twee ontbraken hier: /digitale-klantenservice/ is op
   01-09-2026 gebouwd en /ai-chatbot/ op 02-09-2026, en bij beide
   is dit blok niet meegekomen. */
body.bc-page-digitale-klantenservice .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-digitale-klantenservice .elementor-widget-bconnect_subnav,
body.bc-page-digitale-klantenservice .au-subnav[data-bc-subnav],
body.bc-page-ai-chatbot .e-con:has(> .elementor-widget-bconnect_subnav),
body.bc-page-ai-chatbot .elementor-widget-bconnect_subnav,
body.bc-page-ai-chatbot .au-subnav[data-bc-subnav] {
	display: none !important;
}

}