/* ============================================================
   lu-werkt.css — sectie 5 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "4-6 SPLITS" (het deel dat alleen deze
   sectie gebruikt).

   `.lu-split`, `.lu-figure-col`, `.lu-figure` en `.lu-figure.is-bare`
   staan in de gedeelde stylesheet: drie lu-widgets gebruiken ze. Hier de
   stappenlijst en de twee marge-correcties van deze split.
   ============================================================ */

.lu-werkt-split { margin-top: clamp(30px, 3.4vw, 40px); }
.lu-werkt-col { display: block; min-width: 0; box-sizing: border-box; }
.lu-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lu-step { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; }
.lu-step-num { width: 34px; height: 34px; flex: none; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 15px; }
.lu-step h3 { margin: 0; }
.lu-step p { margin: 8px 0 0; }
.lu-werkt-split .lu-linkline { margin-top: 22px; }

/* De accentwoorden van deze kop breken lelijk af rond 800px. In de bron
   staat daarvoor `#hoe-het-werkt .lu-h2 .accent`, met een ID-selector op
   een anker dat hier een control-default is: wijzigt de redacteur het
   anker, dan valt de regel stil weg. Onder de widgetnaam kan dat niet. */
@media (min-width: 768px) {
	.elementor-widget-bconnect_lu_werkt .lu-h2 .accent { white-space: nowrap; }
}

/* ============================================================
   HARDENING

   `.lu-steps` is een <ol>. Het thema en Elementor zetten daar allebei
   `list-style` en een `padding-left` op — een kale `ol` staat op (0,0,1)
   en `.elementor ol` op (0,1,1), terwijl `.lu-steps` op (0,1,0) staat.
   Die tweede wint dus van de bronregel hierboven, en dan staan er
   opsommingstekens vóór de genummerde bollen. Onder de widgetnaam komt
   het op (0,2,0) en staat het vast.

   `.lu-step` is een <li> met `display: flex`; `.elementor li` zet daar
   niets op, maar `list-item` als display-waarde komt van de browser en
   moet expliciet overschreven blijven.
   ============================================================ */
.elementor-widget-bconnect_lu_werkt .lu-steps { list-style: none; margin: 0; padding: 0; }
.elementor-widget-bconnect_lu_werkt .lu-steps > li { display: flex; margin: 0; list-style: none; }
.elementor-widget-bconnect_lu_werkt .lu-steps > li::marker { content: ""; }


/* ============================================================
   HTML-VISUALS (3.3.38, 08-10-2026)
   Markup: visual-ai-suggestie.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-ai-suggestie 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-ai-suggestie {
	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-ai-suggestie .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-ai-suggestie .bcv-lc * {
	box-sizing: border-box;
}
.bc-vis.bc-vis-ai-suggestie .bcv-lc svg {
	display: block;
	flex: none;
}
.bc-vis.bc-vis-ai-suggestie .bcv-abs {
	position: absolute;
}
.bc-vis.bc-vis-ai-suggestie .bcv-blob {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bc-vis.bc-vis-ai-suggestie .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-ai-suggestie .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. */