/*
 * baroquebows.com — ontwerp (2026-10-31)
 *
 * Eén stylesheet voor de vernieuwde site. De pagina's zijn in Divi 5 opgebouwd
 * met gewone modules die een klasse bb-* dragen; de opmaak staat hier en niet
 * in honderden module-instellingen. Geladen door site/04-ontwerp.php, na de
 * stylesheets van Divi.
 *
 * Kleuren: ivoor en papier als ondergrond, inkt voor tekst, pernambuco (het
 * roodbruine hout van de stokken) als accent, messing voor fijne lijnen.
 * Letters: Cormorant Garamond voor koppen (zelfde letter als het logo), Inter
 * voor lopende tekst. Beide SIL OFL, lokaal in platform-assets/fonts/.
 */
:root {
	--bb-papier: #fffdf9;
	--bb-ivoor: #f6f1e9;
	--bb-ivoor-donker: #ece4d6;
	--bb-kaart: #fbfaf7;
	--bb-inkt: #1f1b17;
	--bb-tekst: #3b342e;
	--bb-grijs: #6b625a;
	--bb-hout: #7a3b22;
	--bb-hout-donker: #5e2c19;
	--bb-messing: #b08d57;
	--bb-lijn: #e3d9c8;
	--bb-kop: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--bb-lijf: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bb-breed: 1200px;
	--bb-smal: 760px;
	--bb-radius: 6px;
}

/* ---------- basis ---------- */
body, #page-container, #main-content { background: var(--bb-papier); }
body, body p, body li, body dd, body dt, #main-content .et_pb_text {
	font-family: var(--bb-lijf);
	font-size: 17px;
	line-height: 1.7;
	color: var(--bb-tekst);
	font-weight: 400;
}
h1, h2, h3, h4, h5, h6,
#main-content .et_pb_text h1, #main-content .et_pb_text h2, #main-content .et_pb_text h3 {
	font-family: var(--bb-kop);
	color: var(--bb-inkt);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.15;
	padding-bottom: 0;
	text-transform: none;
}
#main-content h1 { font-size: clamp(38px, 5vw, 60px); margin: 0 0 18px; }
#main-content h2 { font-size: clamp(28px, 3.2vw, 38px); margin: 0 0 16px; }
#main-content h3 { font-size: 24px; margin: 0 0 12px; }
a { color: var(--bb-hout); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bb-hout-donker); }
.bb-tekst a:not(.bb-knop) { text-decoration: underline; text-decoration-color: rgba(122, 59, 34, .35); }
.bb-tekst a:not(.bb-knop):hover { text-decoration-color: currentColor; }
.bb-tekst p:last-child { padding-bottom: 0; }
::selection { background: #ead7c3; }

/* ---------- secties en rijen ---------- */
#main-content .bb-sectie { padding: clamp(56px, 7vw, 96px) 0; background: transparent; }
#main-content .bb-sectie--ivoor { background: var(--bb-ivoor); }
.bb-sectie .bb-rij { width: 88%; max-width: var(--bb-breed); padding: 0; }
.bb-sectie .bb-rij + .bb-rij { margin-top: 40px; }
.bb-sectie .bb-rij.bb-smal { max-width: var(--bb-smal); }
.bb-sectie .bb-rij .et_pb_column { margin-bottom: 0; }

/* ---------- knoppen en kleine elementen ---------- */
.bb-eyebrow {
	font-family: var(--bb-lijf);
	font-size: 13px !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bb-hout) !important;
	font-weight: 600 !important;
	padding-bottom: 12px !important;
	line-height: 1.4 !important;
}
.bb-intro { font-size: 20px !important; line-height: 1.6 !important; color: var(--bb-grijs) !important; max-width: 40em; }
.bb-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
a.bb-knop {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--bb-hout);
	color: #fff !important;
	font-family: var(--bb-lijf);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .2s ease;
}
a.bb-knop:hover { background: var(--bb-hout-donker); transform: translateY(-1px); }
a.bb-knop--licht { background: transparent; color: var(--bb-inkt) !important; box-shadow: inset 0 0 0 1.5px var(--bb-inkt); }
a.bb-knop--licht:hover { background: var(--bb-inkt); color: #fff !important; }
.bb-nieuw {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--bb-hout);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.bb-talen { color: var(--bb-grijs) !important; font-size: 15px !important; font-style: italic; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bb-hout); outline-offset: 3px; }

/* ---------- kop (Theme Builder-kop 347) ---------- */
.et-l--header .bb-kop {
	padding: 0 !important;
	background: rgba(255, 253, 249, .94) !important;
	border-bottom: 1px solid var(--bb-lijn);
	position: relative;
	z-index: 50;
}
.et-l--header .bb-kop__rij { width: 92%; max-width: 1280px; padding: 14px 0 !important; }
.bb-menu, .bb-menu .et_pb_menu__wrap, .bb-menu .et_pb_menu_inner_container { background: transparent !important; }
.bb-menu .et_pb_menu__logo img { height: 52px; width: auto; max-height: none; }
.bb-menu .et_pb_menu__logo-wrap { flex: 0 0 auto; }
.bb-menu .et_pb_menu__wrap { justify-content: flex-end; flex: 1 1 auto; }
.bb-menu .et_pb_menu__menu, .bb-menu .et_pb_menu__menu > nav, .bb-menu .et-menu-nav { margin-left: auto; }
.bb-menu .et-menu > li { padding-left: 0; padding-right: 0; }
.bb-menu .et-menu > li > a {
	font-family: var(--bb-lijf);
	font-size: 15px;
	font-weight: 500;
	color: var(--bb-inkt) !important;
	padding: 10px 14px !important;
	border-radius: 999px;
	opacity: 1 !important;
}
.bb-menu .et-menu > li > a:hover { background: var(--bb-ivoor); }
.bb-menu .et-menu > li.current-menu-item > a,
.bb-menu .et-menu > li.current-menu-ancestor > a { color: var(--bb-hout) !important; }
.bb-menu .et-menu > li.bb-menu-knop > a { background: var(--bb-hout); color: #fff !important; margin-left: 8px; padding: 10px 20px !important; }
.bb-menu .et-menu > li.bb-menu-knop > a:hover { background: var(--bb-hout-donker); }
.bb-menu .et-menu .menu-item-has-children > a:first-child::after { color: var(--bb-grijs); top: 50%; transform: translateY(-50%); right: 10px; font-size: 16px; }
.bb-menu .et-menu .menu-item-has-children > a { padding-right: 26px !important; }
.bb-menu .et-menu li ul.sub-menu {
	border-top: 0;
	border-radius: var(--bb-radius);
	box-shadow: 0 18px 40px rgba(31, 27, 23, .14);
	padding: 8px 0;
	background: var(--bb-papier);
	width: 230px;
}
.bb-menu .et-menu li ul.sub-menu li { padding: 0 8px; width: 100%; }
.bb-menu .et-menu li ul.sub-menu a { width: 100%; padding: 9px 14px; border-radius: 4px; font-size: 15px; color: var(--bb-inkt) !important; font-family: var(--bb-lijf); }
.bb-menu .et-menu li ul.sub-menu a:hover { background: var(--bb-ivoor); opacity: 1; }
.bb-menu .mobile_menu_bar::before { color: var(--bb-inkt) !important; font-size: 34px; }
.bb-menu .et_mobile_menu {
	border-top: 2px solid var(--bb-hout);
	background: var(--bb-papier) !important;
	box-shadow: 0 18px 40px rgba(31, 27, 23, .14);
	padding: 8px 0;
}
.bb-menu .et_mobile_menu li a { font-family: var(--bb-lijf); font-size: 17px; color: var(--bb-inkt) !important; border-bottom: 1px solid var(--bb-lijn); padding: 12px 6%; }
.bb-menu .et_mobile_menu .bb-menu-knop > a { color: var(--bb-hout) !important; font-weight: 600; }
@media (max-width: 1180px) {
	.bb-menu .et-menu > li > a { padding: 10px 10px !important; font-size: 14px; }
}
@media (max-width: 980px) {
	.bb-menu .et_pb_menu__logo img { height: 44px; }
	.et-l--header .bb-kop__rij { padding: 10px 0 !important; }
}

/* ---------- paginakop ---------- */
#main-content .bb-paginakop {
	padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
	background:
		linear-gradient(180deg, var(--bb-ivoor) 0%, var(--bb-papier) 100%);
	border-bottom: 1px solid var(--bb-lijn);
}
.bb-paginakop .bb-rij { max-width: 980px; }
.bb-paginakop h1 { margin-bottom: 10px !important; }
.bb-paginakop .bb-intro { font-family: var(--bb-kop); font-style: italic; font-size: 24px !important; color: var(--bb-grijs) !important; }

/* ---------- home: opening ---------- */
#main-content .bb-hero { padding: clamp(48px, 7vw, 104px) 0; background: linear-gradient(180deg, var(--bb-ivoor), var(--bb-papier)); }
.bb-hero .bb-hero__rij { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); }
.bb-hero .bb-hero__rij > .et_pb_column { width: auto !important; flex: 1 1 0; margin: 0 !important; }
.bb-hero h1 { font-size: clamp(40px, 5.4vw, 66px) !important; }
.bb-hero .bb-intro { font-family: var(--bb-kop); font-style: italic; font-size: 26px !important; color: var(--bb-hout) !important; }
.bb-hero__foto img, .bb-foto--zacht img, .bb-foto--portret img, .bb-duo img {
	border-radius: var(--bb-radius);
	box-shadow: 0 30px 60px -28px rgba(31, 27, 23, .45);
}
.bb-hero__foto img { aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; }

/* ---------- home: aanbod en tegels ---------- */
#main-content .bb-aanbod-sectie { padding-top: 0; }
ul.bb-aanbod { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
ul.bb-aanbod li { padding: 0; margin: 0; }
ul.bb-aanbod a {
	display: block;
	height: 100%;
	padding: 24px 22px 26px;
	border: 1px solid var(--bb-lijn);
	border-top: 3px solid var(--bb-messing);
	border-radius: var(--bb-radius);
	background: var(--bb-papier);
	color: var(--bb-tekst) !important;
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1.55;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
ul.bb-aanbod a:hover { border-top-color: var(--bb-hout); box-shadow: 0 16px 34px -20px rgba(31, 27, 23, .35); transform: translateY(-2px); }
ul.bb-aanbod strong { color: var(--bb-inkt); font-weight: 600; }
#main-content .bb-collectie-sectie { padding-top: 0; }
ul.bb-tegels { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
ul.bb-tegels li { padding: 0; margin: 0; }
a.bb-tegel {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--bb-radius);
	background: var(--bb-kaart);
	border: 1px solid transparent;
	text-decoration: none !important;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* De achtergrond blijft bij hover gelijk: de stokfoto's zijn op precies deze
 * kaartkleur gezet (platform-assets/stokken/), een donkerder vlak maakte hun
 * rechthoek zichtbaar (melding Marcel 2026-11-01). Rand, schaduw en een kleine
 * lift dragen de hover. */
a.bb-tegel:hover { border-color: var(--bb-lijn); box-shadow: 0 16px 34px -20px rgba(31, 27, 23, .35); transform: translateY(-2px); }
.bb-tegel__beeld { display: flex; align-items: center; justify-content: center; height: 132px; padding: 0 14px; }
.bb-tegel__beeld img { max-height: 70px; width: 100%; object-fit: contain; transform: rotate(-8deg); transition: transform .3s ease; }
a.bb-tegel:hover .bb-tegel__beeld img { transform: rotate(-4deg) scale(1.03); }
.bb-tegel__naam { display: block; padding: 0 18px 18px; font-family: var(--bb-kop); font-size: 24px; font-weight: 600; color: var(--bb-inkt); }
.bb-tegel__naam::after { content: " →"; color: var(--bb-hout); font-family: var(--bb-lijf); font-size: 18px; }

/* ---------- home: diensten ---------- */
.bb-diensten__rij { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); }
.bb-diensten__rij > .et_pb_column { width: auto !important; flex: 1 1 0; margin: 0 !important; }
ul.bb-diensten { list-style: none; padding: 0 !important; margin: 0 0 8px; }
ul.bb-diensten li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--bb-lijn); font-size: 18px; color: var(--bb-inkt); }
ul.bb-diensten li::before { content: ""; position: absolute; left: 0; top: 26px; width: 18px; height: 1.5px; background: var(--bb-hout); }

/* ---------- lopende tekst met beeld ---------- */
.bb-bio { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 72px); }
.bb-bio > .et_pb_column { margin: 0 !important; }
.bb-bio > .et_pb_column:first-child { flex: 3 1 0; width: auto !important; }
.bb-bio > .et_pb_column:last-child { flex: 2 1 0; width: auto !important; position: sticky; top: 24px; }
.bb-bio > .et_pb_column:last-child .et_pb_image + .et_pb_image { margin-top: 24px; }
.bb-lopend { max-width: 68ch; }
.bb-lopend ul { padding-left: 1.1em !important; }
.bb-lopend li { padding-bottom: 10px; }
.bb-lopend blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--bb-messing);
	border-color: var(--bb-messing) !important;
}
.bb-lopend blockquote p { font-family: var(--bb-kop); font-size: 22px !important; line-height: 1.5 !important; font-style: italic; color: var(--bb-inkt) !important; }
.bb-foto--portret img { width: 100%; }
/* Close-ups met gelijkgetrokken achtergrond: vrij op de pagina, geen lijst. */
.bb-foto--vrij img { box-shadow: none !important; border-radius: 0 !important; }
.bb-duo { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; }
.bb-duo > .et_pb_column { width: auto !important; margin: 0 !important; }
.bb-duo.et_pb_row_1-3_2-3 { grid-template-columns: 1fr 2fr; }

/* ---------- collectie: strijkstokken ---------- */
.bb-periode, .bb-periode h2 { text-align: center; }
.bb-periode h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 1.5px;
	margin: 0 auto 22px;
	background: var(--bb-messing);
}
.bb-periode p { text-align: left; }
/* Elke strijkstok op een bijna witte kaart (--bb-kaart; klant 2026-11-01:
 * "iets lichter of wit" in plaats van ivoor). De foto's zijn op precies deze
 * kleur gelijkgetrokken (platform-assets/stokken/), dus foto en kaart lopen
 * naadloos in elkaar over; op een ivoren sectie draagt de rand de kaart. */
.bb-rij.bb-stok {
	background: var(--bb-kaart);
	border: 1px solid transparent;
	border-radius: var(--bb-radius);
	padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 44px) clamp(18px, 2.4vw, 28px) !important;
}
.bb-sectie--ivoor .bb-rij.bb-stok { border-color: var(--bb-lijn); }
.bb-stok__foto { margin-bottom: 18px !important; }
.bb-rij.bb-stok img { width: 100%; }
.bb-stok__tekst { max-width: 70ch; margin: 0 auto !important; text-align: center; }
.bb-stok__tekst p { font-size: 16px !important; color: var(--bb-tekst); }
.bb-galerij { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bb-galerij > .et_pb_column { width: auto !important; margin: 0 !important; }
.bb-galerij img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--bb-radius); }

/* ---------- lijsten (clients, journal) ---------- */
ul.bb-kolommen { list-style: none; padding: 0 !important; columns: 3 240px; column-gap: 40px; margin-top: 24px; }
ul.bb-kolommen--vier { columns: 4 200px; }
ul.bb-kolommen li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--bb-lijn); font-size: 16px; }
ul.bb-links { list-style: none; padding: 0 !important; }
ul.bb-links li { padding: 12px 0; border-bottom: 1px solid var(--bb-lijn); }
ul.bb-links li a { text-decoration: none !important; font-weight: 500; }
ul.bb-links li a::after { content: " ↗"; color: var(--bb-messing); font-size: 14px; }
.bb-lijst h2 { max-width: 30ch; }

/* ---------- contact ---------- */
.bb-contact { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; }
.bb-contact > .et_pb_column { width: auto !important; margin: 0 !important; }
.bb-kaart { height: 100%; padding: clamp(24px, 3vw, 40px) !important; background: var(--bb-ivoor); border-radius: var(--bb-radius); }
ul.bb-reis { list-style: none; padding: 0 !important; margin: 0 0 20px; }
ul.bb-reis li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--bb-lijn); }
.bb-icoon { flex: 0 0 26px; width: 26px; height: 26px; fill: var(--bb-hout); margin-top: 2px; }
dl.bb-gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 8px 28px; margin: 0; }
dl.bb-gegevens dt { font-weight: 600; color: var(--bb-inkt); }
dl.bb-gegevens dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- afspraak ---------- */
#main-content .bb-cta { background: var(--bb-inkt); padding: clamp(56px, 7vw, 88px) 0; }
.bb-cta .bb-rij { text-align: center; }
.bb-cta h2 { color: var(--bb-papier) !important; }
.bb-cta .bb-knoppen { justify-content: center; }
.bb-cta a.bb-knop--licht { color: var(--bb-papier) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 253, 249, .6); }
.bb-cta a.bb-knop--licht:hover { background: var(--bb-papier); color: var(--bb-inkt) !important; }

/* ---------- voet (Theme Builder-voet 354) ---------- */
.et-l--footer .bb-voet { background: #171411 !important; padding: 64px 0 28px !important; }
.bb-voet .bb-rij { width: 88%; max-width: var(--bb-breed); }
.bb-voet, .bb-voet p, .bb-voet li { color: #cfc4b4 !important; font-size: 15px !important; }
.bb-voet a { color: #f6f1e9 !important; text-decoration: none !important; border: 0 !important; }
.bb-voet a:hover { color: #d9b98a !important; }
.bb-voet__logo { width: 252px; max-width: 100%; height: auto; }
.bb-voet .bb-talen { color: #a99d8c !important; margin-top: 16px; }
.bb-voet__titel { font-size: 12px !important; letter-spacing: .18em; text-transform: uppercase; color: #d9b98a !important; font-weight: 600; padding-bottom: 12px !important; }
ul.bb-voet__lijst { list-style: none; padding: 0 !important; margin: 0; }
ul.bb-voet__lijst li { padding: 4px 0; }
.bb-voet__onder { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; margin-top: 8px; }
.bb-voet__onder p { font-size: 13px !important; color: #8f8576 !important; }
.bb-voet__rij { display: flex; gap: 40px; }
.bb-voet__rij > .et_pb_column { margin: 0 !important; }

/* ---------- smal ---------- */
@media (max-width: 980px) {
	.bb-hero .bb-hero__rij, .bb-diensten__rij, .bb-bio, .bb-voet__rij { flex-direction: column; align-items: stretch; }
	.bb-bio > .et_pb_column:last-child { position: static; }
	.bb-hero .bb-hero__rij > .et_pb_column, .bb-diensten__rij > .et_pb_column,
	.bb-bio > .et_pb_column:first-child, .bb-bio > .et_pb_column:last-child, .bb-voet__rij > .et_pb_column { width: 100% !important; flex: none !important; }
	.bb-hero .bb-hero__rij { gap: 32px; }
	ul.bb-aanbod { grid-template-columns: 1fr 1fr; }
	ul.bb-tegels { grid-template-columns: repeat(3, 1fr); }
	.bb-contact, .bb-duo, .bb-duo.et_pb_row_1-3_2-3 { grid-template-columns: 1fr; }
	.bb-galerij { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	body, body p, body li { font-size: 16px; }
	ul.bb-aanbod { grid-template-columns: 1fr; }
	ul.bb-tegels { grid-template-columns: 1fr 1fr; gap: 12px; }
	.bb-tegel__beeld { height: 84px; }
	.bb-tegel__naam { font-size: 20px; padding: 0 14px 14px; }
	.bb-galerij { grid-template-columns: 1fr; }
	.bb-sectie .bb-rij { width: 90%; }
	#main-content .bb-paginakop .bb-intro, .bb-hero .bb-intro { font-size: 21px !important; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	a.bb-tegel:hover, a.bb-tegel:hover .bb-tegel__beeld img, ul.bb-aanbod a:hover, a.bb-knop:hover { transform: none; }
}

/* ---------- cookiemelding (platform-50) ----------
 * Kleuren komen uit huisstijl.css (config/app.php); hier alleen vorm en letter. */
.itmb-cookies { font-family: var(--bb-lijf); border-radius: 10px !important; box-shadow: 0 24px 60px -20px rgba(31, 27, 23, .45) !important; }
.itmb-cookies .itmb-cookies__titel { font-family: var(--bb-kop) !important; font-size: 22px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--bb-inkt) !important; }
.itmb-cookies .itmb-cookies__knop, .itmb-cookies__heropen { border-radius: 999px !important; font-family: var(--bb-lijf); font-weight: 600; min-height: 44px; }

/* ---------- klantwerving (2026-11-01) ---------- */
/* Vertrouwen: orkesten waarin de strijkstokken bespeeld worden. */
#main-content .bb-bewijs-sectie { padding: 8px 0 clamp(40px, 5vw, 64px); }
.bb-bewijs, .bb-bewijs p { text-align: center !important; }
.bb-bewijs__kop { font-size: 13px !important; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-grijs) !important; font-weight: 600 !important; padding-bottom: 14px !important; }
ul.bb-bewijs__lijst { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
ul.bb-bewijs__lijst li { padding: 0; font-family: var(--bb-kop); font-size: 21px; font-weight: 500; font-style: italic; color: var(--bb-inkt); }
.bb-bewijs__meer { padding-top: 14px !important; font-size: 15px !important; }
.bb-bewijs__meer a { font-weight: 600; text-decoration: none !important; }

/* Werkwijze in drie stappen. */
ol.bb-stappen { list-style: none; counter-reset: stap; padding: 0 !important; margin: 28px 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
ol.bb-stappen li {
	counter-increment: stap;
	position: relative;
	padding: 56px 24px 26px;
	background: var(--bb-papier);
	border: 1px solid var(--bb-lijn);
	border-radius: var(--bb-radius);
	font-size: 16px;
	line-height: 1.6;
}
ol.bb-stappen li::before {
	content: counter(stap);
	position: absolute;
	top: 18px;
	left: 24px;
	font-family: var(--bb-kop);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: var(--bb-hout);
}
ol.bb-stappen strong { display: block; margin-bottom: 6px; font-family: var(--bb-kop); font-size: 22px; font-weight: 600; color: var(--bb-inkt); }
.bb-werkwijze h2 { max-width: 24ch; }

/* Over Basil op de homepage: foto links. */
.bb-over > .et_pb_column:first-child { flex: 2 1 0; }
.bb-over > .et_pb_column:last-child { flex: 3 1 0; position: static; align-self: center; }

/* Knop met chat-icoon. */
.bb-knop__icoon { width: 18px; height: 18px; margin-right: 8px; fill: currentColor; flex: 0 0 auto; }
.bb-cta .bb-intro { color: #cfc4b4 !important; margin: 0 auto 8px; text-align: center; }

/* Contactpagina: gegevens en formulier naast elkaar. */
#bericht { scroll-margin-top: 110px; }
.bb-formulier__kop { margin-bottom: 18px !important; }
.bb-kaartlink { font-weight: 600; text-decoration: none !important; }
.bb-formulier .itmb-cf { max-width: none; font-family: var(--bb-lijf); }
.bb-formulier .itmb-cf input, .bb-formulier .itmb-cf select, .bb-formulier .itmb-cf textarea {
	border: 1px solid var(--bb-lijn) !important;
	border-radius: var(--bb-radius) !important;
	background: var(--bb-papier) !important;
	font-family: var(--bb-lijf);
	font-size: 16px;
}
.bb-formulier .itmb-cf input:focus, .bb-formulier .itmb-cf select:focus, .bb-formulier .itmb-cf textarea:focus { border-color: var(--bb-hout) !important; outline: 2px solid rgba(122, 59, 34, .2); }
.bb-formulier .itmb-cf button[type="submit"] {
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--bb-hout);
	color: #fff;
	font-family: var(--bb-lijf);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.bb-formulier .itmb-cf button[type="submit"]:hover { background: var(--bb-hout-donker); }

/* Juridische tekst: rustige tussenkoppen. */
.bb-juridisch h2 { font-size: 28px !important; margin-top: 40px !important; }
.bb-juridisch h2:first-child { margin-top: 0 !important; }
.bb-juridisch h3 { font-family: var(--bb-lijf) !important; font-size: 17px !important; font-weight: 600 !important; margin: 22px 0 6px !important; }

/* Onderbalk voet: wettelijke gegevens mogen afbreken. */
.bb-voet__onder p { line-height: 1.7 !important; }

@media (max-width: 600px) {
	dl.bb-gegevens { grid-template-columns: 1fr; gap: 2px 0; }
	dl.bb-gegevens dd { margin-bottom: 10px; overflow-wrap: anywhere; }
}
@media (max-width: 980px) {
	ol.bb-stappen { grid-template-columns: 1fr; }
	.bb-over > .et_pb_column:first-child, .bb-over > .et_pb_column:last-child { flex: none !important; }
}

/* Kop-en-slof-tweeluiken (platform-assets/stokken/*-detail.webp, 2026-11-01):
 * kleine bronbeelden, dus op begrensde hoogte en gecentreerd in plaats van over
 * de volle kaartbreedte opgerekt. */
.bb-rij.bb-stok--detail .bb-stok__foto img { width: auto !important; max-width: 100%; max-height: 170px; margin: 0 auto; display: block; }
@media (max-width: 600px) { .bb-rij.bb-stok--detail .bb-stok__foto img { max-height: 120px; } }

/* ---------- instrumentpagina's: zachte kaarten (2026-11-01) ----------
 * Marcel koos variant B ("soft cards") na de tijdlijn: per strijkstok een
 * kaart zonder rand, met een zachte schaduw; links periode, datering en
 * gewicht, rechts foto en onderschrift. Kaart en foto's op --bb-kaart (bijna
 * wit, klant 2026-11-01), dus naadloos. Geen lijnen. */
.bb-sectie .bb-rij.bb-tijd {
	display: grid !important;
	grid-template-columns: 200px 1fr;
	gap: 12px clamp(24px, 3.5vw, 44px);
	background: var(--bb-kaart);
	border-radius: 14px;
	box-shadow: 0 22px 48px -30px rgba(31, 27, 23, .45);
	padding: clamp(24px, 3vw, 36px) clamp(22px, 3.2vw, 44px) !important;
	margin: 0 auto 32px !important;
}
.bb-sectie .bb-rij.bb-tijd:last-child { margin-bottom: 0 !important; }
.bb-rij.bb-tijd > .et_pb_column { width: auto !important; margin: 0 !important; }
.bb-tijd__periode { font-family: var(--bb-kop) !important; font-size: 28px !important; font-weight: 600 !important; line-height: 1.15 !important; color: var(--bb-inkt) !important; padding-bottom: 4px !important; }
.bb-tijd__wanneer { font-size: 14px !important; line-height: 1.5 !important; color: var(--bb-grijs) !important; padding-bottom: 12px !important; }
.bb-tijd__gewicht { display: inline-block; padding: 3px 12px !important; border-radius: 999px; background: var(--bb-hout); color: #fff !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em; }
.bb-tijd .bb-stok__foto { margin-bottom: 14px !important; }
.bb-tijd .bb-stok__foto img { width: 100%; display: block; }
.bb-tijd .bb-stok__tekst { text-align: left; max-width: 62ch; margin: 0 !important; }
.bb-tijd .bb-stok__tekst p { font-size: 16px !important; }

/* Instrumentkeuze onder de paginatitel. */
nav.bb-instrumenten { margin-top: 26px; }
nav.bb-instrumenten ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
nav.bb-instrumenten li { padding: 0; margin: 0; }
nav.bb-instrumenten a { display: inline-block; padding: 8px 18px; border: 1px solid var(--bb-lijn); border-radius: 999px; background: var(--bb-papier); color: var(--bb-inkt) !important; font-size: 15px; font-weight: 500; text-decoration: none !important; transition: border-color .2s ease, background-color .2s ease; }
nav.bb-instrumenten a:hover { border-color: var(--bb-hout); }
nav.bb-instrumenten a[aria-current="page"] { background: var(--bb-hout); border-color: var(--bb-hout); color: #fff !important; }

@media (max-width: 760px) {
	.bb-sectie .bb-rij.bb-tijd { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px 24px !important; margin-bottom: 20px !important; }
	.bb-tijd__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
	.bb-tijd__label p { padding-bottom: 0 !important; }
	.bb-tijd__periode { font-size: 23px !important; }
	nav.bb-instrumenten a { padding: 7px 14px; font-size: 14px; }
}

/* Foto naast lopende tekst: bovenkant gelijk met de eerste tekstregel in
 * plaats van met de halve regelafstand erboven (melding Marcel 2026-11-01,
 * Marais-portret op /viola-da-gamba/). 17 px tekst, regelhoogte 1,7: de eerste
 * regel (de bovenkant van de hoofdletters) begint zo'n 7 px onder de bovenkant van de kolom (nagemeten op een testkopie). */
.bb-bio > .et_pb_column > .et_pb_image:first-child { margin-top: 7px !important; }
@media (max-width: 980px) { .bb-bio > .et_pb_column > .et_pb_image:first-child { margin-top: 0 !important; } }

/* Compact blok tekst + portret (gamba-inleiding, melding Marcel 2026-11-01:
 * het staande schilderij was veel hoger dan de drie alinea's ernaast). Portret
 * smaller en begrensd in hoogte, tekst verticaal gecentreerd ernaast. */
.bb-bio.bb-bio--compact { align-items: center !important; }
.bb-bio.bb-bio--compact > .et_pb_column:first-child { flex: 2 1 0 !important; }
.bb-bio.bb-bio--compact > .et_pb_column:last-child { flex: 1 1 0 !important; position: static; }
.bb-bio.bb-bio--compact > .et_pb_column > .et_pb_image:first-child { margin-top: 0 !important; }
.bb-bio--compact .bb-foto--portret img { width: auto !important; max-width: 100%; max-height: 320px; margin: 0 auto; display: block; }
@media (max-width: 980px) {
	.bb-bio.bb-bio--compact > .et_pb_column:first-child, .bb-bio.bb-bio--compact > .et_pb_column:last-child { flex: none !important; width: 100% !important; }
	.bb-bio--compact .bb-foto--portret img { max-height: 360px; }
}

/* ---------- Choosing a bow (2026-11-01) ---------- */
/* Drie kernpunten onder de paginatitel. */
ul.bb-kernpunten { list-style: none; padding: 0 !important; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
ul.bb-kernpunten li { padding: 14px 20px; background: var(--bb-papier); border-radius: 12px; box-shadow: 0 14px 30px -24px rgba(31, 27, 23, .45); font-size: 14px; line-height: 1.45; color: var(--bb-grijs); }
ul.bb-kernpunten strong { display: block; font-family: var(--bb-kop); font-size: 20px; font-weight: 600; color: var(--bb-inkt); }
.bb-lead { font-size: 19px !important; line-height: 1.65 !important; color: var(--bb-inkt) !important; max-width: 62ch; }
ol.bb-stappen--vier { grid-template-columns: repeat(4, 1fr); }
/* Moderne instrumenten: de slof-foto als zachte kaart, niet over de volle breedte. */
.bb-foto--kaart img { border-radius: 14px; box-shadow: 0 22px 48px -30px rgba(31, 27, 23, .45); }
.bb-modern .bb-foto--kaart img { max-height: none !important; width: 100% !important; }
/* Alleen op desktop: in de kolomrichting (mobiel) klapt flex: 1 1 0 de kolommen
 * in tot 1 px (live op Choosing a bow, 2026-11-01). */
@media (min-width: 981px) { .bb-bio.bb-modern > .et_pb_column:first-child, .bb-bio.bb-modern > .et_pb_column:last-child { flex: 1 1 0 !important; } }
/* Vergelijking en citaat. */
.bb-sectie .bb-rij.bb-smal-breed { max-width: 920px; }
.bb-vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 30px; }
.bb-vergelijk__kaart { padding: 24px 26px 18px; background: var(--bb-ivoor); border-radius: 14px; box-shadow: 0 22px 48px -30px rgba(31, 27, 23, .45); }
.bb-vergelijk__kaart h3 { margin: 0 0 10px !important; font-size: 24px !important; }
.bb-vergelijk__kaart ul { list-style: none; padding: 0 !important; margin: 0; }
.bb-vergelijk__kaart li { position: relative; padding: 6px 0 6px 22px; font-size: 16px; }
.bb-vergelijk__kaart li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 1.5px; background: var(--bb-hout); }
blockquote.bb-citaat { margin: 0 !important; padding: 6px 0 6px 28px !important; border-left: 2px solid var(--bb-hout) !important; }
blockquote.bb-citaat p { font-family: var(--bb-kop) !important; font-style: italic; font-size: 26px !important; line-height: 1.4 !important; color: var(--bb-inkt) !important; }
/* Achtergrondtekst met afbeeldingen en bijschriften ernaast. */
#main-content .bb-achtergrond-sectie { padding-top: 0; }
.bb-achtergrond { display: flex; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.bb-achtergrond > .et_pb_column { margin: 0 !important; }
.bb-achtergrond > .et_pb_column:first-child { flex: 2 1 0; width: auto !important; }
.bb-achtergrond > .et_pb_column:last-child { flex: 1 1 0; width: auto !important; position: sticky; top: 24px; }
.bb-achtergrond .bb-foto--zacht img { width: 100%; border-radius: 10px; }
.bb-achtergrond .et_pb_image + .bb-bijschrift__module { margin-top: 8px !important; margin-bottom: 26px !important; }
.bb-bijschrift { font-size: 13px !important; line-height: 1.5 !important; color: var(--bb-grijs) !important; }
@media (max-width: 980px) {
	ol.bb-stappen--vier { grid-template-columns: 1fr 1fr; }
	.bb-achtergrond { flex-direction: column; align-items: stretch; }
	.bb-achtergrond > .et_pb_column:first-child, .bb-achtergrond > .et_pb_column:last-child { flex: none !important; width: 100% !important; position: static; }
}
@media (max-width: 600px) {
	ol.bb-stappen--vier, .bb-vergelijk { grid-template-columns: 1fr; }
	blockquote.bb-citaat p { font-size: 22px !important; }
	ul.bb-kernpunten li { flex: 1 1 100%; }
}

/* ---------- My approach (2026-11-01) ---------- */
/* Vier onderdelen onder de titel, als sprongkaarten. */
ul.bb-onderdelen { list-style: none; padding: 0 !important; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 860px; }
ul.bb-onderdelen li { padding: 0; margin: 0; }
ul.bb-onderdelen a { display: block; padding: 14px 18px 16px; background: var(--bb-papier); border-radius: 12px; box-shadow: 0 14px 30px -24px rgba(31, 27, 23, .45); font-family: var(--bb-kop); font-size: 21px; font-weight: 600; color: var(--bb-inkt) !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
ul.bb-onderdelen a:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(31, 27, 23, .5); }
ul.bb-onderdelen span { display: block; font-family: var(--bb-lijf); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--bb-hout); }
.bb-anker { scroll-margin-top: 90px; }
.bb-lopend.bb-breed { max-width: none; }
/* Bronnen als drie kaarten. */
ul.bb-bronnen { list-style: none; padding: 0 !important; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
ul.bb-bronnen li { padding: 26px 26px 24px; background: var(--bb-ivoor); border-radius: 14px; box-shadow: 0 22px 48px -30px rgba(31, 27, 23, .45); font-size: 16px; line-height: 1.6; }
ul.bb-bronnen strong { display: block; margin-bottom: 8px; font-family: var(--bb-kop); font-size: 23px; font-weight: 600; color: var(--bb-inkt); line-height: 1.2; }
/* Citaten. */
blockquote.bb-citaat--klein { margin-top: 22px !important; }
blockquote.bb-citaat--klein p { font-size: 22px !important; }
.bb-citaatblok { margin: 8px 0 36px !important; }
blockquote.bb-citaat--groot { margin: 0 !important; padding: 34px 40px !important; background: var(--bb-ivoor); border-radius: 14px; border-left: 0 !important; box-shadow: 0 22px 48px -30px rgba(31, 27, 23, .45); }
blockquote.bb-citaat--groot p { font-family: var(--bb-kop) !important; font-style: italic; font-size: 24px !important; line-height: 1.45 !important; color: var(--bb-inkt) !important; }
blockquote.bb-citaat--groot footer { margin-top: 14px; font-size: 14px; color: var(--bb-grijs); }
/* Houtsoorten als labels. */
ul.bb-houtsoorten { list-style: none; padding: 0 !important; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.bb-houtsoorten li { padding: 5px 14px; border-radius: 999px; background: var(--bb-papier); font-size: 14px; font-weight: 500; color: var(--bb-hout); }
.bb-achtergrond--klein { align-items: center; }
.bb-achtergrond--klein > .et_pb_column:last-child { position: static; }
.bb-achtergrond .bb-foto--kaart img { width: 100%; }
@media (max-width: 980px) {
	ul.bb-onderdelen { grid-template-columns: 1fr 1fr; }
	ul.bb-bronnen { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	blockquote.bb-citaat--groot { padding: 24px 22px !important; }
	blockquote.bb-citaat--groot p { font-size: 20px !important; }
	ul.bb-onderdelen a { font-size: 18px; padding: 12px 14px; }
}

/* Twee afbeeldingen naast elkaar naast korte tekst (My approach, Historical
 * aspects; melding Marcel "groot leeg vlak": onder elkaar was de kolom ruim
 * twee keer zo hoog als de tekst). Afbeelding en bijschrift per kolom. */
.bb-achtergrond.bb-duofig { align-items: center; }
.bb-achtergrond.bb-duofig > .et_pb_column:first-child { flex: 3 1 0 !important; }
.bb-achtergrond.bb-duofig > .et_pb_column:last-child { flex: 2 1 0 !important; display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px 16px; align-items: start; }
.bb-duofig .et_pb_image { margin: 0 !important; }
.bb-duofig .et_pb_image, .bb-duofig .et_pb_image .et_pb_image_wrap { width: 100% !important; max-width: none !important; display: block; }
.bb-duofig .et_pb_image img { width: 100% !important; max-width: none !important; height: 260px; object-fit: cover; object-position: center top; }
.bb-duofig .bb-bijschrift__module { margin: 0 !important; }
@media (max-width: 980px) {
	.bb-achtergrond.bb-duofig > .et_pb_column:first-child, .bb-achtergrond.bb-duofig > .et_pb_column:last-child { flex: none !important; width: 100% !important; }
	.bb-duofig .et_pb_image img { height: 220px; }
}

/* ---------- knoppen met de strijkstok uit het logo (2026-11-01) ----------
 * Marcel: "buttons zo dat de strijkstok van het logo erin verwerkt is" en
 * daarna "de strijkstok eronder en niet ervoor". Zoals in het logo onder
 * "bows": onder de knoptekst een dunne stok met links de opkrullende kop. Eén
 * pseudo-element in de tekstkleur, met twee maskerlagen: de kop (vaste maat,
 * links) en de stok (een lijn over de rest van de breedte). De WA-knop houdt
 * zijn chat-icoon en krijgt geen stok. */
a.bb-knop, .bb-menu .et-menu > li.bb-menu-knop > a, .bb-formulier .itmb-cf button[type="submit"] { position: relative; }
/* Lager gemaakt (Marcel: "knop te hoog, zeker in het menu"): stok dichter
 * onder de tekst en fijner; knop 46 px (was 54), menuknop 39 px (was 52; Divi rekte hem op tot de menuhoogte). */
a.bb-knop, .bb-formulier .itmb-cf button[type="submit"] { min-height: 46px !important; padding: 8px 24px 13px !important; line-height: 1.35 !important; }
/* Divi rekt de link op tot de hoogte van het menu (li is flex, stretch). */
.bb-menu .et-menu > li.bb-menu-knop { align-items: center !important; }
.bb-menu .et-menu > li.bb-menu-knop > a { display: inline-block !important; align-self: center !important; height: auto !important; line-height: 1.2 !important; padding: 7px 18px 14px !important; }
a.bb-knop::after, .bb-menu .et-menu > li.bb-menu-knop > a::after, .bb-formulier .itmb-cf button[type="submit"]::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 24px;
	bottom: 6px;
	height: 9px;
	background-color: currentColor;
	opacity: .9;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M16.0 11.58 L10.40 11.40 C8.30 11.34 7.40 9.84 6.92 7.20 C6.44 4.56 5.36 2.52 2.24 1.08 C1.82 0.90 1.52 1.20 1.76 1.62 C3.38 4.80 4.04 8.64 3.80 12.66 L8.00 12.66 C8.60 12.24 9.44 12.12 10.64 12.12 L16.0 12.18 Z'/%3E%3C/svg%3E") left bottom / 11px 9px no-repeat, linear-gradient(#000, #000) left 9px bottom 0.5px / calc(100% - 9px) 1.2px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M16.0 11.58 L10.40 11.40 C8.30 11.34 7.40 9.84 6.92 7.20 C6.44 4.56 5.36 2.52 2.24 1.08 C1.82 0.90 1.52 1.20 1.76 1.62 C3.38 4.80 4.04 8.64 3.80 12.66 L8.00 12.66 C8.60 12.24 9.44 12.12 10.64 12.12 L16.0 12.18 Z'/%3E%3C/svg%3E") left bottom / 11px 9px no-repeat, linear-gradient(#000, #000) left 9px bottom 0.5px / calc(100% - 9px) 1.2px no-repeat;
	transition: right .25s ease;
}
/* Divi zet ::after in het menu op top: 50% (pijltje submenu): terug op auto. */
.bb-menu .et-menu > li.bb-menu-knop > a::after { top: auto !important; transform: none !important; left: 12px; right: 18px; bottom: 6px; height: 8px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M16.0 11.58 L10.40 11.40 C8.30 11.34 7.40 9.84 6.92 7.20 C6.44 4.56 5.36 2.52 2.24 1.08 C1.82 0.90 1.52 1.20 1.76 1.62 C3.38 4.80 4.04 8.64 3.80 12.66 L8.00 12.66 C8.60 12.24 9.44 12.12 10.64 12.12 L16.0 12.18 Z'/%3E%3C/svg%3E") left bottom / 10px 8px no-repeat, linear-gradient(#000, #000) left 8px bottom 0.5px / calc(100% - 8px) 1.1px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M16.0 11.58 L10.40 11.40 C8.30 11.34 7.40 9.84 6.92 7.20 C6.44 4.56 5.36 2.52 2.24 1.08 C1.82 0.90 1.52 1.20 1.76 1.62 C3.38 4.80 4.04 8.64 3.80 12.66 L8.00 12.66 C8.60 12.24 9.44 12.12 10.64 12.12 L16.0 12.18 Z'/%3E%3C/svg%3E") left bottom / 10px 8px no-repeat, linear-gradient(#000, #000) left 8px bottom 0.5px / calc(100% - 8px) 1.1px no-repeat; }
a.bb-knop:hover::after, .bb-formulier .itmb-cf button[type="submit"]:hover::after { right: 17px; }
.bb-menu .et-menu > li.bb-menu-knop > a:hover::after { right: 12px; }
a.bb-knop:has(.bb-knop__icoon) { padding: 10px 24px !important; }
a.bb-knop:has(.bb-knop__icoon)::after { display: none; }

/* ---------- Clients en Journal (2026-11-01) ---------- */
ul.bb-tegellijst { list-style: none; padding: 0 !important; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
ul.bb-tegellijst li { display: flex; align-items: center; min-height: 76px; padding: 14px 20px; background: var(--bb-papier); border-radius: 12px; box-shadow: 0 14px 30px -24px rgba(31, 27, 23, .45); font-family: var(--bb-kop); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--bb-inkt); }
ul.bb-namen { list-style: none; padding: 0 !important; margin: 26px 0 0; columns: 4 200px; column-gap: 32px; }
ul.bb-namen li { break-inside: avoid; padding: 4px 0; font-size: 16px; color: var(--bb-tekst); }
ul.bb-linkkaarten { list-style: none; padding: 0 !important; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
ul.bb-linkkaarten--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* drie kaarten sinds de opname weg is (2026-11-01) */
ul.bb-linkkaarten li { padding: 0; margin: 0; }
ul.bb-linkkaarten a { display: flex; flex-direction: column; height: 100%; padding: 22px 24px 20px; background: var(--bb-ivoor); border-radius: 14px; box-shadow: 0 18px 40px -30px rgba(31, 27, 23, .45); text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.bb-sectie--ivoor ul.bb-linkkaarten a { background: var(--bb-papier); }
ul.bb-linkkaarten a:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -26px rgba(31, 27, 23, .5); }
.bb-linkkaart__soort { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-hout); margin-bottom: 8px; }
.bb-linkkaart__titel { font-family: var(--bb-kop); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--bb-inkt); }
.bb-linkkaart__rol { margin-top: 4px; font-size: 15px; color: var(--bb-grijs); }
.bb-linkkaart__domein { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--bb-hout); }
.bb-linkkaart__domein::after { content: " ↗"; }
@media (max-width: 760px) {
	ul.bb-linkkaarten--drie { grid-template-columns: 1fr; }
	ul.bb-namen { columns: 2 140px; }
}

/* Kaart zonder werkende link (bron verdwenen, controle 2026-11-01): zelfde vorm,
 * geen hover, geen websiteregel. */
ul.bb-linkkaarten .bb-linkkaart--zonder { display: flex; flex-direction: column; height: 100%; padding: 22px 24px 20px; background: var(--bb-ivoor); border-radius: 14px; box-shadow: 0 18px 40px -30px rgba(31, 27, 23, .45); }
.bb-sectie--ivoor ul.bb-linkkaarten .bb-linkkaart--zonder { background: var(--bb-papier); }