/* ============================================================
   lu-split.css — sectie 6 en 7 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).

   In het plan stond dat deze widget géén eigen stylesheet nodig had,
   omdat `.lu-split`, `.lu-figure-col`, `.lu-figure` en de mobiele
   omkering alle vier gedeeld zijn. Dat klopte op één ding na: de bron
   zet op de eerste alinea van deze twee secties een inline
   `style={{ marginTop: 20 }}`, en die hoort niet in de markup thuis.
   Vandaar dit bestand, met die ene regel en niets meer.
   ============================================================ */

.lu-split-text { display: block; min-width: 0; box-sizing: border-box; }

/* De eerste alinea volgt direct op de kop. `.lu-body` staat op (0,1,0)
   met margin-top 16px; deze staat op (0,2,0) en wint dus, zonder van
   laadorde af te hangen. */
.lu-split-text .lu-h2 + .lu-body { margin-top: 20px; }


/* ============================================================
   HTML-VISUALS (3.3.38, 08-10-2026)
   Markup: visual-routering.php, visual-dag-nacht.php. De beelden met Nederlandse tekst in de
   pixels zijn nagebouwd als HTML, zodat de tekst door de vertaallaag loopt.
   Alle regels staan onder .bc-vis.bc-vis-<naam>: niets lekt naar de rest
   van de site, en de extra klasse laat ze winnen van de img-regels van het
   kader. Schaal: --u = 1/breedte van de bron, via een container query.
   Gegenereerd uit de Claude Design-export; wijzig bij voorkeur de bron en
   zet opnieuw om in plaats van hier met de hand.
   ============================================================ */
/* Reset: img-regels van het kader van de widget (border-radius, schaduw,
   width/height 100%, object-fit) mogen de avatars in de visual niet raken.
   Staat vóór de eigen regels van de visual, die met 0,3,0 daarna winnen. */
.bc-vis.bc-vis-routering img {
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: auto;
	object-fit: fill;
	filter: none;
}
.bc-vis.bc-vis-routering {
	width: 100%;
	container-type: inline-size;
	display: block;
	height: 100%;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
}
.bc-vis.bc-vis-routering .bcv-lc {
	--u: calc(100cqw / 1024);
	position: relative;
	aspect-ratio: 4/3;
	background: #f5f4fb;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color: #141464;
	overflow: hidden;
}
.bc-vis.bc-vis-routering .bcv-lc * {
	box-sizing: border-box;
}
.bc-vis.bc-vis-routering .bcv-lc svg {
	display: block;
	flex: none;
}
.bc-vis.bc-vis-routering .bcv-abs {
	position: absolute;
}
.bc-vis.bc-vis-routering .bcv-blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bc-vis.bc-vis-routering .bcv-card {
	background: #fff;
	border: calc(var(--u)*1.5) solid #E3E4EC;
	box-shadow: 0 1px 2px rgba(20,20,100,.08),0 calc(var(--u)*10) calc(var(--u)*28) rgba(20,20,100,.08);
	display: flex;
	flex-direction: column;
}
.bc-vis.bc-vis-routering .bcv-bar {
	height: calc(var(--u)*10);
	border-radius: 999px;
	background: #E3E4EC;
	width: calc(var(--u)*165);
	margin-top: calc(var(--u)*10);
}

/* Reset: img-regels van het kader van de widget (border-radius, schaduw,
   width/height 100%, object-fit) mogen de avatars in de visual niet raken.
   Staat vóór de eigen regels van de visual, die met 0,3,0 daarna winnen. */
.bc-vis.bc-vis-dag-nacht img {
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: auto;
	object-fit: fill;
	filter: none;
}
.bc-vis.bc-vis-dag-nacht {
	width: 100%;
	container-type: inline-size;
	display: block;
	height: 100%;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
}
.bc-vis.bc-vis-dag-nacht .bcv-lc {
	--u: calc(100cqw / 1024);
	position: relative;
	aspect-ratio: 4/3;
	background: #f5f4fb;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color: #141464;
	overflow: hidden;
}
.bc-vis.bc-vis-dag-nacht .bcv-lc * {
	box-sizing: border-box;
}
.bc-vis.bc-vis-dag-nacht .bcv-lc svg {
	display: block;
	flex: none;
}
.bc-vis.bc-vis-dag-nacht .bcv-abs {
	position: absolute;
}
.bc-vis.bc-vis-dag-nacht .bcv-blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bc-vis.bc-vis-dag-nacht .bcv-card {
	background: #fff;
	border: calc(var(--u)*1.5) solid #E3E4EC;
	box-shadow: 0 1px 2px rgba(20,20,100,.08),0 calc(var(--u)*10) calc(var(--u)*28) rgba(20,20,100,.08);
	display: flex;
	flex-direction: column;
}
.bc-vis.bc-vis-dag-nacht .bcv-bar {
	height: calc(var(--u)*10);
	border-radius: 999px;
	background: #E3E4EC;
	width: calc(var(--u)*165);
	margin-top: calc(var(--u)*10);
}


/* -- kader -- */
/* .lu-figure geeft zelf de rand, de hoeken en de schaduw; niets extra nodig. */