/*
 * QUARREE B2B Frontend - Slider- und PDF-Sektion-Styles.
 * (c) HTMLHELD - https://htmlheld.de
 *
 * The !important flags are required: the slider boxes and gallery hosts
 * are Elementor v4 div blocks, so Elementor's base styles
 * (.elementor .e-div-block-base { padding: 10px; ... }) and the .e-con
 * CSS-var pipeline (frontend.min.css, loaded after this sheet) win the
 * cascade otherwise.
 */

/* ---------------------------------------------------------------- */
/* Slider box chrome                                                 */
/* ---------------------------------------------------------------- */

.b2b-big-slider,
.b2b-pdf-slider,
.b2b-carousel-slider {
	max-width: 1130px !important;
	position: relative !important;
	border-radius: 30px !important;
	overflow: hidden !important;
	margin: 16px auto !important;
	padding: 16px !important;
}

/* The carousel box keeps the white card background; big slider and
   PDF box stay transparent. */
.b2b-carousel-slider {
	background-color: #fff;
}

@media (min-width: 1024px) {
	.b2b-big-slider,
	.b2b-pdf-slider,
	.b2b-carousel-slider {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

@media (min-width: 1130px) {
	.b2b-big-slider,
	.b2b-pdf-slider,
	.b2b-carousel-slider {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 1129px) {
	.b2b-big-slider {
		margin-bottom: 40px !important;
	}
}

/* ---------------------------------------------------------------- */
/* Big slider                                                        */
/* ---------------------------------------------------------------- */

.b2b-big-slider .swiper {
	padding: 0 10% !important;
	overflow: visible !important;
}

/* Images must not start a native browser drag, or mouse swiping
   fights the ghost image.
   NOTE: wrapper/slide TIMING is deliberate; the 300ms wrapper vs
   0.4s slide-scale mismatch creates the "slides over, then pops in"
   effect. No custom easing overrides. */
.b2b-big-slider .swiper-slide img,
.b2b-carousel-slider .swiper-slide img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.b2b-big-slider .swiper-wrapper {
	display: flex;
	align-items: center;
}

.b2b-big-slider .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: scale(0.85);
	opacity: 0.5;
	z-index: 1;
}

.b2b-big-slider .swiper-slide-active {
	transform: scale(1);
	opacity: 1;
}

/* The image fills the slide box (cover). The Elementor v4 image widget
   renders a bare <img> without gallery CSS, so the fill rules live
   here. !important beats .e-image-base (height: auto) and the
   late-loading base sheet. */
.b2b-big-slider .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.swiper-button-next,
.swiper-button-prev {
	color: #ffffff !important;
}

.b2b-big-slider .swiper-slide.swiper-slide-next {
	transform: scale(0.85) translateX(-100px);
	z-index: -1;
}

.b2b-big-slider .swiper-slide.swiper-slide-prev {
	transform: scale(0.85) translateX(100px);
	z-index: -1;
}

@media screen and (max-width: 1023px) {
	.b2b-big-slider .swiper-slide {
		height: 300px;
	}
}

/* ---------------------------------------------------------------- */
/* PDF / flipbook section                                            */
/* ---------------------------------------------------------------- */

.b2b-pdf-slider {
	text-align: center;
}

/* Cover images act as lightbox openers (real3d-flipbook lightboxCssClass). */
.b2b-flip-de,
.b2b-flip-en {
	cursor: pointer;
}

.b2b-pdf-slider .flipbook-menuBottom,
.b2b-pdf-slider .flipbook-nav,
.b2b-pdf-slider .flipbook-menuTop {
	display: none !important;
}

/* ---------------------------------------------------------------- */
/* Carousel strip                                                    */
/* ---------------------------------------------------------------- */

/* The gallery host is an Elementor div block: zero its base padding
   so the swiper math works on the full box width. */
.b2b-carousel-slider .swiper {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

.b2b-carousel-slider .swiper-slide {
	width: auto;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.b2b-carousel-slider .swiper-slide img {
	height: 240px;
	width: 100% !important;
	object-fit: cover;
	display: block;
}

.b2b-carousel-slider .swiper-notification {
	display: none !important;
}

/* Full-bleed breakout >= 1130px. The box is a flex item inside an
   Elementor flexbox section, where the classic left/negative-margin
   trick double-shifts and align-self centering start-aligns
   overflowing items (browser safe-alignment fallback). The CSS only
   sets the width; the exact edge-to-edge position is measured and set
   as relative `left` in frontend.js. */
@media screen and (min-width: 1130px) {
	.b2b-carousel-slider {
		width: 100vw;
		width: calc(100vw - 30px);
		max-width: unset !important;
		border-radius: 0 !important;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1129px) {
	.b2b-carousel-slider .swiper-slide img {
		max-width: unset !important;
	}
}

/* ---------------------------------------------------------------- */
/* Reviews slider                                                    */
/* ---------------------------------------------------------------- */

/* The swiper/swiper-wrapper/swiper-pagination hosts are Elementor
   div blocks, so the late-loading .e-div-block-base rules (padding
   10px, display via --display var) win the cascade against the
   Swiper bundle CSS without !important. */
.b2b-reviews-slider .swiper {
	padding: 0 !important;
	width: 100%;
}

.b2b-reviews-slider .swiper-wrapper {
	display: flex !important;
	padding: 0 !important;
	min-width: 0;
}

.b2b-reviews-slider .swiper-slide {
	flex-shrink: 0 !important;
}

.b2b-reviews-slider .swiper-slide img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* The dots sit in flow below the slides, not absolutely positioned. */
.b2b-reviews-slider .swiper-pagination {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	margin-top: 30px;
	padding: 0 !important;
}

.b2b-reviews-slider .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	opacity: 1;
	margin: 0 6px;
	background-color: #000000;
}

.b2b-reviews-slider .swiper-pagination-bullet-active {
	background-color: #ffe07e;
}

/* ---------------------------------------------------------------- */
/* Homepage PDF-magazine band spacing                                */
/* ---------------------------------------------------------------- */

/* The generic .b2b-pdf-slider box chrome above (margin 16/24 +
   padding 16/48) belongs to the /pdfview showcase wrappers. The
   homepage band section spaces itself on the page-wide 24px card
   rhythm; only the margin survives, the padding goes. Scoped to the
   homepage section class so /pdfview stays as is. */
.e-d184s01-a18c0de .b2b-pdf-slider {
	margin: 24px auto !important;
	padding: 0 !important;
}

@media (max-width: 1023px) {
	.e-d184s01-a18c0de .b2b-pdf-slider {
		margin: 16px auto !important;
	}
}

/* ---------------------------------------------------------------- */
/* Flipbook lightbox hosts                                           */
/* ---------------------------------------------------------------- */

/* The real3d-flipbook shortcode embeds are pure lightbox openers
   (the visible click targets are the cover images), but their host
   divs render as inline blocks in the footer flow. The wrapper takes
   them out of flow without display:none so the engine still
   initializes. */
.hhqb-flipbook-hosts {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Video players use the native HTML5 chrome. Browser default for
   <video poster=""> is object-fit:contain, producing letterboxes when
   the poster aspect ratio does not match the video frame; force cover
   so the poster fills the frame. Scoped via [poster] so videos
   without a poster keep default behavior. */
.e-self-hosted-video-base[poster] {
	object-fit: cover;
}