/* CSS Document Parallax 17 05 2026 */

.parallax {
    position: relative;
	overflow: hidden;
	isolation: isolate;
	background: none !important;
	min-height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.parallax::before {
	content: "";
	position: absolute;
	inset: -80px 0;
	z-index: 0;
	background-image: var(--parallax-image);
	background-size: var(--parallax-size, cover);
	background-position: var(--parallax-position, center);
	background-repeat: no-repeat;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	will-change: transform;
	pointer-events: none;
}

.parallax > * {
	position: relative;
	z-index: 1;
}

.parallaxbox {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 600px;
}

.parallax2 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	height: 100%;
	background: none !important;
	display: flex;
	justify-content: center;
	align-items: center;
	--parallax2-image: url("/files/images/parallax/parallax-02.jpg");
	--parallax2-size: cover;
	--parallax2-position: right center;
}

.parallax2::before {
	content: "";
	position: absolute;
	inset: -100px 0;
	z-index: 0;
	background-image: var(--parallax2-image);
	background-repeat: no-repeat;
	background-position: var(--parallax2-position, center);
	background-size: var(--parallax2-size, cover);
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	will-change: transform;
	pointer-events: none;
}

.parallax2 > * {
	position: relative;
	z-index: 1;
}


.parallaxrandom { --parallax-image: url("/files/images/parallax/random/parallax_random_01_desktop.jpg"); }

/* Desktop Bilder */

.par-schluesselband {
	--parallax-image: url("/files/images/parallax/parallax-01.jpg");
}

.par-totebag {
	--parallax-image: url("/files/images/parallax/parallax-03.jpg");
}

.par-geschenke {
	--parallax-image: url("/files/images/parallax/parallax-04.jpg");
}

/* Desktop */

@media only screen and (min-width: 1440px) {

	.parallax {
		min-height: 600px;
	}

	.parallax::before {
		--parallax-size: 100% auto;
		--parallax-position: center;
		inset: -80px 0;
	}

	.parallaxbox {
		height: 600px;
	}

	.parallax2::before {
		inset: -100px 0;
	}

}

/* Tablet */

@media only screen and (max-width: 1439px) {

	.parallax {
		min-height: 520px;
	}

	.parallax::before {
		--parallax-size: cover;
		inset: -15%;
	}

	.parallaxbox {
		height: 520px;
	}

	.parallax2::before {
		inset: -15%;
	}

}

/* Mobile */

@media only screen and (max-width: 795px) {

	.parallax {
		min-height: 450px;
	}

	.par-schluesselband {
		--parallax-image: url("/files/images/parallax/parallax-mobile-01.jpg");
	}

	.par-totebag {
		--parallax-image: url("/files/images/parallax/parallax-mobile-03.jpg");
	}

	.par-geschenke {
		--parallax-image: url("/files/images/parallax/parallax-mobile-04.jpg");
	}

	.parallax::before {
		--parallax-size: 120% auto;
		inset: -20%;
	}

	.parallaxbox {
		width: 100%;
		height: 400px;
	}

	.parallax2 {
		--parallax2-image: url("/files/images/parallax/parallax-mobile-02.jpg");
		--parallax2-size: cover;
		--parallax2-position: center;
	}

	.parallax2::before {
		inset: -20%;
	}
	
	.parallaxrandom { --parallax-image: url("/files/images/parallax/random/parallax_random_01_mobile.jpg"); }

}