/* Solutions carousel — reference: row 236px, gap 10, active flex 2.6 (520ms), animals: active 190px right with 100deg mask,
   collapsed 146px centered with vertical+horizontal mask. Mirrored animals: scaleX(-1), mask −100deg. */
.bd-solutions { padding: 0 0 8px; }
.bd-solutions__row { display: flex; align-items: stretch; gap: 10px; height: 236px; }
.bd-solutions__panels { display: flex; gap: 10px; flex: 1; list-style: none; margin: 0; padding: 0; min-width: 0; }
.bd-sol { flex: 1 1 0; min-width: 0; position: relative; border-radius: var(--bd-r-card); transition: flex-grow 520ms var(--bd-ease), transform 520ms var(--bd-ease); }
.bd-sol.is-active { flex-grow: 2.6; transform: translateY(-6px); }
.bd-sol__link { position: absolute; inset: 0; overflow: hidden; border-radius: var(--bd-r-card); border: 1px solid rgba(247,248,249,.14); background: linear-gradient(120deg, rgba(163,0,190,.26), rgba(250,154,66,.10)); color: var(--bd-haze); transition: border-color 520ms, background 520ms, box-shadow 520ms; }
.bd-sol.is-active .bd-sol__link { border-color: rgba(247,248,249,.38); background: linear-gradient(120deg, rgba(163,0,190,.42), rgba(250,154,66,.18)); box-shadow: 0 26px 46px -22px rgba(0,0,0,.6); }
.bd-sol__link:hover, .bd-sol__link:focus-visible { color: var(--bd-haze); }
.bd-sol__img { position: absolute; top: -2px; left: 50%; width: 146px; height: auto; max-width: none; transform: translateX(-50%); opacity: .9; pointer-events: none; transition: opacity 380ms ease-out;
	-webkit-mask-image: linear-gradient(180deg, #000 48%, transparent 84%), linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 48%, transparent 84%), linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect; }
.bd-sol.is-mirror .bd-sol__img { transform: translateX(-50%) scaleX(-1); }
.bd-sol.is-active .bd-sol__img { top: -8px; left: auto; right: -10px; width: 190px; opacity: 1; transform: none;
	-webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 30%); mask-image: linear-gradient(100deg, transparent 2%, #000 30%); }
.bd-sol.is-active.is-mirror .bd-sol__img { transform: scaleX(-1); -webkit-mask-image: linear-gradient(-100deg, transparent 2%, #000 30%); mask-image: linear-gradient(-100deg, transparent 2%, #000 30%); }
.bd-sol__content { position: absolute; inset: 0; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; }
.bd-sol.is-active .bd-sol__content { opacity: 1; }
.bd-sol__kicker { font: 600 11.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .07em; text-transform: uppercase; color: var(--bd-sun); }
.bd-sol__title { font: 700 21px/1.24 var(--wp--preset--font-family--montserrat); margin-top: 9px; max-width: 248px; }
.bd-sol__body { font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-body); margin-top: 7px; max-width: 248px; }
.bd-sol__more { font: 700 13.5px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); margin-top: 12px; }
.bd-sol__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; font: 700 13px/1.2 var(--wp--preset--font-family--montserrat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, rgba(5,1,52,0), rgba(5,1,52,.82) 62%); transition: opacity 220ms ease-out; }
.bd-sol.is-active .bd-sol__label { opacity: 0; }
.bd-solutions__all { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--bd-r-pill); background: rgba(250,154,66,.16); border: 1.5px solid rgba(250,154,66,.6); color: var(--bd-haze); font: 700 13.5px/1.2 var(--wp--preset--font-family--montserrat); white-space: nowrap; transition: background 180ms ease-out; }
.bd-solutions__all:hover { background: rgba(250,154,66,.3); color: var(--bd-haze); }

/* Tablet (768–1279) and mobile (responsive spec §4.8): no hover, no grow, no autoplay — a swipeable row of cards (78 % wide,
   236px high, scroll-snap), each in the expanded state; the plugin's primary solution first; the animal 140px on the
   right with the active panel's mask (mirrored animals flipped, mask turned); "All seven solutions ↗" pill below. */
@media (max-width: 1279px) {
	.bd-solutions__row { flex-direction: column; height: auto; gap: 18px; }
	.bd-solutions__panels { margin-inline: calc(-1 * var(--bd-gutter)); padding: 8px var(--bd-gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bd-gutter); scrollbar-width: none; }
	.bd-solutions__panels::-webkit-scrollbar { display: none; }
	.bd-sol, .bd-sol.is-active { flex: 0 0 78%; height: 236px; transform: none; scroll-snap-align: start; }
	.bd-sol.is-primary { order: -1; }
	.bd-sol .bd-sol__content { opacity: 1; padding: 22px; }
	.bd-sol .bd-sol__label { opacity: 0; }
	.bd-sol .bd-sol__link { border-color: rgba(247,248,249,.24); background: linear-gradient(120deg, rgba(163,0,190,.42), rgba(250,154,66,.18)); }
	.bd-sol .bd-sol__img, .bd-sol.is-active .bd-sol__img, .bd-sol.is-mirror .bd-sol__img { top: -8px; left: auto; right: -10px; width: 140px; opacity: 1; transform: none;
		-webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%);
		-webkit-mask-composite: source-in; mask-composite: intersect; }
	.bd-sol.is-mirror .bd-sol__img, .bd-sol.is-active.is-mirror .bd-sol__img { transform: scaleX(-1);
		-webkit-mask-image: linear-gradient(-100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(-100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); }
	.bd-sol__title, .bd-sol__body { max-width: 64%; }
	.bd-solutions__all { align-self: flex-start; min-height: 44px; box-sizing: border-box; }
}

/* Grid layout — product pages ("Products - alle einzeln"): always 4 columns (4:3 tiles, radius 24, #0d0a3f), animal
   100% wide with its focus; head 28px; text box top 26 / bottom 18, aligned to the bottom; "More"/"Less" opens the text
   (0 → 150px, 420ms) and "Open the solution ↗"; one tile open at a time (the primary solution at rest). */
.bd-solutions.is-grid { padding-block: 0 calc(8px * var(--bd-s)); }
.bd-solgrid__head { align-items: baseline; margin-bottom: 20px; }
.bd-solgrid__heading { margin: 0; font: 700 28px/1.2 var(--wp--preset--font-family--montserrat); letter-spacing: -.015em; color: var(--bd-haze); }
.bd-solgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bd-solgrid__card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--bd-r-card); overflow: hidden; background: #0d0a3f; box-shadow: 0 22px 44px -26px rgba(0,0,0,.7); }
.bd-solgrid__toggle { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; border-radius: inherit; }
.bd-solgrid__img { --flip: scaleX(1); position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 10%; transform: var(--flip) scale(1); filter: brightness(.8) saturate(.9); transition: transform 620ms var(--bd-ease), filter 320ms ease-out; }
.bd-solgrid__card.is-mirror .bd-solgrid__img { --flip: scaleX(-1); }
.bd-solgrid__card.is-open .bd-solgrid__img { transform: var(--flip) scale(1.06); filter: brightness(.4) saturate(.8); }
.bd-solgrid__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,1,52,0) 34%, rgba(5,1,52,.66) 62%, rgba(5,1,52,.96) 100%); }
.bd-solgrid__card.is-open .bd-solgrid__scrim { background: linear-gradient(180deg, rgba(5,1,52,.35) 0%, rgba(5,1,52,.82) 38%, rgba(5,1,52,.96) 100%); }
.bd-solgrid__ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(247,248,249,.10); transition: box-shadow 240ms ease-out; }
.bd-solgrid__card.is-open .bd-solgrid__ring { box-shadow: inset 0 0 0 1px rgba(247,248,249,.22); }
.bd-solgrid__text { position: absolute; left: 22px; right: 22px; top: 26px; bottom: 18px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.bd-solgrid__kicker { margin: 0; font: 600 11.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .07em; text-transform: uppercase; color: var(--bd-sun); }
.bd-solgrid__title { margin: 6px 0 0; font: 700 17px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-solgrid__more { display: flex; flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 420ms var(--bd-ease), opacity 300ms ease-out; }
.bd-solgrid__card.is-open .bd-solgrid__more { max-height: 150px; opacity: 1; }
.bd-solgrid__body { margin: 0; padding-top: 8px; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.88); }
.bd-solgrid__actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.bd-solgrid__link { pointer-events: auto; display: flex; align-items: center; min-height: 32px; font: 700 13.5px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-solgrid__link[hidden] { display: none; }
.bd-solgrid__link:hover { color: var(--bd-haze); }
.bd-solgrid__btn { pointer-events: auto; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1.2 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.82); text-decoration: underline; text-decoration-color: rgba(247,248,249,.4); text-underline-offset: 4px; }
.bd-solgrid__btn:hover { color: var(--bd-haze); }
.bd-solgrid__btn:focus-visible, .bd-solgrid__link:focus-visible { outline: 2px solid var(--bd-sun); outline-offset: 3px; border-radius: 2px; }
.bd-solgrid__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; min-height: 44px; font: 700 13.5px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); text-decoration: underline; text-underline-offset: 4px; }
.bd-solgrid__all:hover { color: var(--bd-haze); }
/* Tablet (768–1279) and mobile (responsive spec §4.8): no hover and no "More" — a swipeable row of open cards (78 % wide, 236px
   high, scroll-snap), the plugin's primary solution first (.is-primary); kicker, title, text and "Open the solution ↗"
   on the left, the animal 140px wide on the right, faded to the left and to the bottom as in the carousel's open panel
   (mirrored animals flipped with the mask turned); "All seven solutions ↗" as a pill under the row. */
@media (max-width: 1279px) {
	.bd-solgrid { display: flex; gap: 12px; margin-inline: calc(-1 * var(--bd-gutter)); padding: 4px var(--bd-gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bd-gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
	.bd-solgrid::-webkit-scrollbar { display: none; }
	.bd-solgrid__card { flex: 0 0 78%; height: 236px; aspect-ratio: auto; scroll-snap-align: start; background: linear-gradient(120deg, rgba(163,0,190,.42), rgba(250,154,66,.18)); box-shadow: none; }
	.bd-solgrid__card.is-primary { order: -1; }
	.bd-solgrid__toggle { pointer-events: none; }
	.bd-solgrid__img, .bd-solgrid__card.is-open .bd-solgrid__img { inset: -8px -10px auto auto; width: 140px; height: 186px; background-size: cover; transform: var(--flip); filter: none;
		-webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%);
		-webkit-mask-composite: source-in; mask-composite: intersect; }
	.bd-solgrid__card.is-mirror .bd-solgrid__img {
		-webkit-mask-image: linear-gradient(-100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(-100deg, transparent 2%, #000 30%), linear-gradient(180deg, #000 62%, transparent 96%); }
	.bd-solgrid__scrim, .bd-solgrid__card.is-open .bd-solgrid__scrim { background: linear-gradient(90deg, rgba(13,10,63,.6) 0%, rgba(13,10,63,.5) 56%, rgba(13,10,63,0) 86%); }
	.bd-solgrid__text { text-shadow: 0 1px 10px rgba(5,1,52,.55); }
	.bd-solgrid__ring, .bd-solgrid__card.is-open .bd-solgrid__ring { box-shadow: inset 0 0 0 1px rgba(247,248,249,.24); }
	.bd-solgrid__text { inset: 0 auto 0 0; width: 66%; box-sizing: border-box; padding: 18px 0 14px 22px; justify-content: center; }
	.bd-solgrid__more, .bd-solgrid__card.is-open .bd-solgrid__more { max-height: none; opacity: 1; }
	.bd-solgrid__body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
	.bd-solgrid__btn { display: none; }
	.bd-solgrid__link { min-height: 44px; }
	.bd-solgrid__all { margin-top: 14px; padding: 0 22px; border-radius: var(--bd-r-pill); background: rgba(250,154,66,.16); border: 1.5px solid rgba(250,154,66,.6); color: var(--bd-haze); text-decoration: none; transition: background-color 180ms ease-out; }
	.bd-solgrid__all:hover { background: rgba(250,154,66,.3); color: var(--bd-haze); }
}
@media (max-width: 767px) {
	.bd-solgrid__heading { font-size: 22px; }
	.bd-solgrid__text { width: 68%; padding-left: 20px; }
	.bd-solgrid__title { font-size: 16.5px; }
	.bd-solgrid__body { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.bd-solgrid__img, .bd-solgrid__more, .bd-sol, .bd-sol__link, .bd-sol__img, .bd-sol__content { transition: none; }
	.bd-solgrid { scroll-behavior: auto; }
}