/* ==========================================================================
   Apparaatkaarten en vragenpaneel op de apparaatpagina's (inc/apparaat-kaarten-vragen.php,
   inhoud-sync 51, 24 sep 2026). Gewone Bold Builder-inhoud; dit blad doet alleen de vorm.
   Geladen op elke pagina waarvan de inhoud "bnb-pcard-v2" of "bnb-vragen-v2" bevat.
   ========================================================================== */

/* --- Pil (zelfde vorm als in de stroken) ------------------------------------------------ */
.bnb-pil {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .5em 1.1em .5em .9em;
	border-radius: var(--hard-rounded, 50px);
	background: var(--alternate-color);
	color: var(--light-color);
	font-family: var(--supertitle-font);
	font-weight: 500;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bnb-pil::before {
	content: "\e908";
	font-family: IBM;
	font-size: 12px;
	letter-spacing: 0;
}

/* --- Andere apparaten: de kaarten ------------------------------------------------------- */
.bnb-related-v2 .bt_bb_row > .bt_bb_row_holder {
	align-items: stretch;
}
/* De kolom zelf blijft doorzichtig (zijn box loopt door de kolomtussenruimte); de kaart is de
   inhoud van de kolom: wit, 20px, met de hover-lift. */
.bnb-related-v2 .bt_bb_column.bnb-pcard-v2 {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	background: none !important;
}
.bnb-related-v2 .bt_bb_row + .bt_bb_row {
	margin-top: 2.5em;
}
.bnb-related-v2 .bt_bb_column.bnb-pcard-v2 > .bt_bb_column_content {
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	background: var(--light-color);
	border-radius: var(--card-hard-rounded-shape, 20px);
	overflow: hidden;
	transition: transform 450ms ease, box-shadow 450ms ease;
}
.bnb-related-v2 .bt_bb_column.bnb-pcard-v2 > .bt_bb_column_content > .bt_bb_column_content_inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.bnb-related-v2 .bt_bb_column.bnb-pcard-v2:hover > .bt_bb_column_content {
	transform: translateY(-6px);
	box-shadow: 0 30px 40px -25px rgba(59, 59, 59, .35);
}
@media (max-width: 991px) {
	.bnb-related-v2 .bt_bb_column.bnb-pcard-v2 + .bt_bb_column.bnb-pcard-v2 {
		margin-top: 1.5em;
	}
}

/* Het podium: tan getinte grond, de foto multiply zodat het wit van de productfoto wegvalt,
   een zachte schaduw-ellips onder het apparaat */
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto {
	position: relative;
	isolation: isolate; /* de multiply van de foto mengt met deze grond en de ellips */
	margin: 0;
	padding: 2.25em 2.25em 1.75em;
	background: linear-gradient(180deg, rgba(205, 173, 123, .10) 0%, rgba(205, 173, 123, .26) 100%);
	border-radius: 0;
	overflow: hidden;
}
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.6em;
	width: 62%;
	height: 1.6em;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(59, 59, 59, .22) 0%, rgba(59, 59, 59, 0) 68%);
	pointer-events: none;
}
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto > a,
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto > span {
	display: block;
	position: relative; /* geen z-index: dat zou een eigen stacking context maken en de multiply isoleren */
	border-radius: 0 !important;
	overflow: visible !important;
	background: none !important;
}
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto img {
	display: block;
	width: 74%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
	mix-blend-mode: multiply;
	border-radius: 0;
	transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
	transform-origin: 50% 100%;
}
.bnb-related-v2 .bt_bb_column.bnb-pcard-v2:hover .bt_bb_image.bnb-pcard-v2__foto img {
	transform: scale(1.05);
}
/* de hover-overlay van het thema-element uit */
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto > a::after,
.bnb-pcard-v2 .bt_bb_image.bnb-pcard-v2__foto > a::before {
	display: none !important;
}

/* Tekst en voet */
.bnb-pcard-v2 .bt_bb_row_inner {
	width: 100%;
}
.bnb-pcard-v2 .bt_bb_column_inner.bnb-pcard-v2__body > .bt_bb_column_inner_content {
	padding: 1.6em 1.75em 0;
}
.bnb-pcard-v2 .bt_bb_headline {
	margin: 0;
}
.bnb-pcard-v2 .bt_bb_headline .bt_bb_headline_content a {
	color: var(--dark-color);
	text-decoration: none;
}
.bnb-pcard-v2 .bnb-pcard-v2__tekst p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--dark-gray-color);
}
.bnb-pcard-v2 .bt_bb_row_inner:last-child {
	margin-top: auto;
}
.bnb-pcard-v2 .bt_bb_column_inner.bnb-pcard-v2__voet > .bt_bb_column_inner_content {
	padding: 1.5em 1.75em 1.6em;
}
.bnb-pcard-v2 .bt_bb_column_inner.bnb-pcard-v2__voet--knop > .bt_bb_column_inner_content {
	padding-left: 0;
}
.bnb-pcard-v2 .bnb-pcard-v2__voet p {
	margin: 0;
}
.bnb-pcard-v2 .bnb-pcard-v2__voet .bt_bb_button {
	margin: 0;
}
.bnb-pcard-v2 .bt_bb_button.bt_bb_style_clean a:hover,
.bnb-pcard-v2 .bt_bb_button.bt_bb_style_clean a:hover .bt_bb_icon_holder {
	color: var(--accent-color);
}
@media (max-width: 575px) {
	.bnb-pcard-v2 .bt_bb_column_inner.bnb-pcard-v2__voet--knop > .bt_bb_column_inner_content {
		padding: 0 1.75em 1.6em;
		text-align: left;
	}
	.bnb-pcard-v2 .bt_bb_column_inner.bnb-pcard-v2__voet:first-child > .bt_bb_column_inner_content {
		padding-bottom: .75em;
	}
}

/* --- Wat je klanten gaan vragen: het paneel --------------------------------------------- */
.bnb-vragen-v2 .bt_bb_row > .bt_bb_row_holder {
	align-items: stretch;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto,
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto > .bt_bb_column_content,
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst > .bt_bb_column_content {
	flex: 1 1 auto;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 34em;
	border-radius: var(--card-hard-rounded-shape, 20px) 0 0 var(--card-hard-rounded-shape, 20px);
	overflow: hidden;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto > .bt_bb_column_content {
	width: 100%;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(to top, rgba(20, 18, 16, .82) 0%, rgba(20, 18, 16, .42) 42%, rgba(20, 18, 16, 0) 72%);
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto > .bt_bb_column_content > .bt_bb_column_content_inner {
	padding: 3em 2.75em 2.75em;
}
.bnb-vragen-v2 .bnb-vragen-v2__foto .bt_bb_headline {
	margin: 0;
}
.bnb-vragen-v2 .bnb-vragen-v2__foto .bt_bb_headline_content,
.bnb-vragen-v2 .bnb-vragen-v2__zin p {
	color: var(--light-color);
}
.bnb-vragen-v2 .bnb-vragen-v2__zin p {
	margin: 0;
	max-width: 36ch;
	line-height: 1.7;
	opacity: .9;
}
.bnb-vragen-v2 .bnb-vragen-v2__foto .bt_bb_button {
	margin: 0;
}
.bnb-vragen-v2 .bnb-vragen-v2__foto .bt_bb_button.bt_bb_style_outline:hover a {
	background-color: var(--light-color);
	color: var(--dark-color);
}
.bnb-vragen-v2 .bnb-vragen-v2__foto .bt_bb_button.bt_bb_style_outline:hover a .bt_bb_icon_holder {
	color: var(--dark-color);
}

.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst {
	border-radius: 0 var(--card-hard-rounded-shape, 20px) var(--card-hard-rounded-shape, 20px) 0;
	overflow: hidden;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst > .bt_bb_column_content {
	width: 100%;
	display: flex;
	align-items: center;
}
.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst > .bt_bb_column_content > .bt_bb_column_content_inner {
	width: 100%;
	padding: 2.25em 3em;
}

/* Het accordeon: genummerd, haarlijnen, tan pijl in een cirkel */
.bnb-vragen-v2__accordion {
	counter-reset: vraag;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item {
	margin: 0;
	border-bottom: 1px solid rgba(59, 59, 59, .12);
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item:last-child {
	border-bottom: 0;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title {
	counter-increment: vraag;
	padding: 1.35em 3em 1.35em 2.6em !important;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight, 400);
	font-size: var(--small-title-size);
	letter-spacing: var(--heading-letter-spacing, -1px);
	color: var(--dark-color);
	transition: color 300ms ease;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title::before {
	content: counter(vraag, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.35em;
	font-family: var(--em-heading-font);
	font-style: var(--em-heading-font-style, italic);
	font-weight: var(--em-heading-font-weight, 400);
	font-size: .85em;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--accent-color);
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title:hover {
	color: var(--accent-color);
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title::after {
	/* het glyph van het thema is al een cirkel met pijl; alleen kleur en plaats */
	top: 1em !important; /* op de hoogte van de vraagregel (titel 24px, padding 1.35em) */
	right: 0;
	float: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--accent-color);
	opacity: .85;
	transition: 350ms ease all;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title:hover::after,
.bnb-vragen-v2__accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_title::after {
	opacity: 1;
}
@media (max-width: 991px) {
	.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title { font-size: var(--extrasmall-title-size, 20px); }
	.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_title::after { top: .85em !important; }
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item .bt_bb_accordion_item_content {
	width: auto;
	margin-left: 2.6em;
	margin-right: 3em;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_content {
	padding: 0 0 1.5em;
}
.bnb-vragen-v2__accordion .bt_bb_accordion_item_content p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.75;
	max-width: 58ch;
	color: var(--dark-gray-color);
}

@media (max-width: 991px) {
	.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto {
		min-height: 24em;
		border-radius: var(--card-hard-rounded-shape, 20px) var(--card-hard-rounded-shape, 20px) 0 0;
	}
	.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst {
		border-radius: 0 0 var(--card-hard-rounded-shape, 20px) var(--card-hard-rounded-shape, 20px);
	}
	.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__foto > .bt_bb_column_content > .bt_bb_column_content_inner {
		padding: 2.5em 1.75em 2em;
	}
	.bnb-vragen-v2 .bt_bb_column.bnb-vragen-v2__lijst > .bt_bb_column_content > .bt_bb_column_content_inner {
		padding: 1.5em 1.5em;
	}
}