/* ============================================================
 * Hero Slider Column
 * ============================================================ */

.hero-slider-column {
	display: flex;

	align-self: flex-start;

	align-items: flex-start;
	justify-content: flex-end;

	position: relative;

	overflow: visible;

	z-index: 2;
}


/* ============================================================
 * Hero Slider Position
 * ============================================================ */

.hero-slider-column .hero-10-img {
	display: flex;

	align-items: flex-start;
	justify-content: flex-end;

	width: 112%;

	max-width: none;

	margin: 0;

	transform:
		translate3d(
			17%,
			-26px,
			0
		);

	overflow: visible;
}


/* ============================================================
 * Glass Slider
 * ============================================================ */

.pmGlassSlider {
	/*
	 * Maximale bzw. gewünschte Höhe des sichtbaren Bildbereichs.
	 *
	 * clamp:
	 *
	 * Minimum: 360px
	 * Responsive: 30vw
	 * Maximum: 500px
	 */
	--pm-slider-image-height:
		clamp(
			360px,
			30vw,
			500px
		);


	/*
	 * Perspektive wird vollständig durch CSS erzeugt.
	 */
	--pm-slider-rotate-y: -5deg;

	--pm-slider-rotate-x: 0.5deg;


	/*
	 * Positive Z-Rotation:
	 *
	 * linke obere Ecke höher,
	 * rechte obere Ecke tiefer.
	 */
	--pm-slider-rotate-z: 0.9deg;


	/*
	 * Hover:
	 * Tile richtet sich fast vollständig auf.
	 */
	--pm-slider-hover-rotate-y: -0.8deg;

	--pm-slider-hover-rotate-x: 0deg;

	--pm-slider-hover-rotate-z: 0.1deg;


	/*
	 * Langsame Auf-/Ab-Bewegung.
	 */
	--pm-slider-float-distance: 8px;


	position: relative;

	width: 100%;
	height: auto;

	margin: 0;

	box-sizing: border-box;


	perspective: 1350px;

	perspective-origin:
		50%
		50%;

	overflow: visible;
}


/* ============================================================
 * Floating Animation
 * ============================================================ */

.pmGlassSliderFloat {
	display: block;

	width: 100%;
	height: auto;

	transform:
		translate3d(
			0,
			0,
			0
		);

	animation:
		pmGlassSliderFloatAnimation
		7s
		ease-in-out
		infinite;

	will-change:
		transform;
}


/* ============================================================
 * Floating Animation Keyframes
 * ============================================================ */

@keyframes pmGlassSliderFloatAnimation {

	0% {

		transform:
			translate3d(
				0,
				0,
				0
			);

	}


	50% {

		transform:
			translate3d(
				0,
				calc(
					var(--pm-slider-float-distance) * -1
				),
				0
			);

	}


	100% {

		transform:
			translate3d(
				0,
				0,
				0
			);

	}

}


/* ============================================================
 * Perspective / Tilt
 * ============================================================ */

.pmGlassSliderTilt {
	width: 100%;
	height: auto;

	transform:
		rotateX(
			var(--pm-slider-rotate-x)
		)
		rotateY(
			var(--pm-slider-rotate-y)
		)
		rotateZ(
			var(--pm-slider-rotate-z)
		)
		scale(1.01);

	transform-origin:
		52%
		50%;

	transform-style:
		preserve-3d;

	backface-visibility:
		hidden;

	-webkit-backface-visibility:
		hidden;

	transition:
		transform
		1000ms
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);

	will-change:
		transform;
}


/* ============================================================
 * Perspective Hover
 * ============================================================ */

.pmGlassSlider:hover .pmGlassSliderTilt {
	transform:
		rotateX(
			var(--pm-slider-hover-rotate-x)
		)
		rotateY(
			var(--pm-slider-hover-rotate-y)
		)
		rotateZ(
			var(--pm-slider-hover-rotate-z)
		)
		scale(1.018);
}


/* ============================================================
 * Glass Tile
 * ============================================================ */

.pmGlassSliderGlass {
	position: relative;

	width: 100%;
	height: auto;

	padding: 7px;

	box-sizing: border-box;

	overflow: hidden;


	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.34
		);

	border-radius: 22px;


	background:
		linear-gradient(
			135deg,

			rgba(
				255,
				255,
				255,
				0.14
			)
			0%,

			rgba(
				255,
				255,
				255,
				0.06
			)
			48%,

			rgba(
				255,
				255,
				255,
				0.025
			)
			100%
		);


	box-shadow:
		0
		34px
		68px
		rgba(
			0,
			0,
			0,
			0.19
		),

		0
		12px
		30px
		rgba(
			0,
			0,
			0,
			0.11
		),

		inset
		0
		1px
		0
		rgba(
			255,
			255,
			255,
			0.40
		);


	backdrop-filter:
		blur(12px)
		saturate(1.10);

	-webkit-backdrop-filter:
		blur(12px)
		saturate(1.10);


	transition:
		border-color
		900ms
		ease,

		background
		900ms
		ease,

		box-shadow
		900ms
		ease;
}


/* ============================================================
 * Glass Tile Hover
 * ============================================================ */

.pmGlassSlider:hover .pmGlassSliderGlass {
	border-color:
		rgba(
			255,
			255,
			255,
			0.52
		);


	background:
		linear-gradient(
			135deg,

			rgba(
				255,
				255,
				255,
				0.17
			)
			0%,

			rgba(
				255,
				255,
				255,
				0.08
			)
			48%,

			rgba(
				255,
				255,
				255,
				0.03
			)
			100%
		);


	box-shadow:
		0
		42px
		82px
		rgba(
			0,
			0,
			0,
			0.22
		),

		0
		14px
		34px
		rgba(
			0,
			0,
			0,
			0.13
		),

		inset
		0
		1px
		0
		rgba(
			255,
			255,
			255,
			0.50
		);
}


/* ============================================================
 * Image Area
 * ============================================================ */

.pmGlassSliderImageArea {
	position: relative;

	display: block;

	width: 100%;


	/*
	 * ALLE Slides besitzen damit dieselbe sichtbare Höhe.
	 */
	height:
		var(--pm-slider-image-height);

	max-height:
		var(--pm-slider-image-height);


	box-sizing: border-box;


	/*
	 * Alles, was über die maximale Höhe hinausgeht,
	 * wird abgeschnitten.
	 */
	overflow: hidden;


	border-radius: 16px;


	background:
		rgba(
			255,
			255,
			255,
			0.015
		);
}


/* ============================================================
 * Image
 * ============================================================ */

.pmGlassSliderImage {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;


	display: block;


	width: 100%;
	height: 100%;


	margin: 0;


	/*
	 * Bild füllt immer vollständig die definierte Fläche.
	 *
	 * Überstehende Bereiche werden abgeschnitten.
	 */
	object-fit: cover;


	/*
	 * Für Screenshots von Anwendungen sinnvoll:
	 *
	 * Der obere Teil des Screenshots bleibt sichtbar.
	 * Bei Bedarf wird primär unten abgeschnitten.
	 */
	object-position:
		center
		top;


	opacity: 1;


	transform:
		scale(1);


	transition:
		opacity
		380ms
		ease,

		transform
		700ms
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);


	will-change:
		opacity,
		transform;
}


/* ============================================================
 * Image Change
 * ============================================================ */

.pmGlassSliderImageChanging {
	opacity: 0;

	transform:
		scale(0.995);
}


/* ============================================================
 * Caption
 * ============================================================ */

.pmGlassSliderCaption {
	position: relative;

	left: auto;
	right: auto;
	top: auto;
	bottom: auto;

	z-index: 3;


	display: block;


	width: 100%;
	max-width: none;


	margin:
		7px
		0
		0
		0;


	padding:
		10px
		16px;


	box-sizing: border-box;


	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.12
		);


	border-radius: 14px;


	background:
		linear-gradient(
			135deg,

			rgba(
				255,
				255,
				255,
				0.10
			)
			0%,

			rgba(
				255,
				255,
				255,
				0.045
			)
			100%
		);


	box-shadow:
		inset
		0
		1px
		0
		rgba(
			255,
			255,
			255,
			0.14
		);


	backdrop-filter:
		blur(10px)
		saturate(1.08);

	-webkit-backdrop-filter:
		blur(10px)
		saturate(1.08);


	font-size: 13px;

	font-weight: 400;

	line-height: 1.35;

	text-align: center;

	white-space: normal;


	color:
		rgba(
			255,
			255,
			255,
			0.78
		);


	opacity: 1;


	transform:
		translate3d(
			0,
			0,
			0
		);


	transition:
		opacity
		300ms
		ease,

		transform
		300ms
		ease,

		border-color
		500ms
		ease,

		background
		500ms
		ease;


	pointer-events: none;
}


/* ============================================================
 * Caption Hover
 * ============================================================ */

.pmGlassSlider:hover .pmGlassSliderCaption {
	border-color:
		rgba(
			255,
			255,
			255,
			0.18
		);


	background:
		linear-gradient(
			135deg,

			rgba(
				255,
				255,
				255,
				0.13
			)
			0%,

			rgba(
				255,
				255,
				255,
				0.055
			)
			100%
		);


	color:
		rgba(
			255,
			255,
			255,
			0.88
		);
}


/* ============================================================
 * Caption Change
 * ============================================================ */

.pmGlassSliderCaptionChanging {
	opacity: 0;

	transform:
		translate3d(
			0,
			3px,
			0
		);
}


/* ============================================================
 * Empty Caption
 * ============================================================ */

.pmGlassSliderCaptionEmpty {
	display: none;
}


/* ============================================================
 * Glass Reflection
 * ============================================================ */

.pmGlassSliderReflection {
	position: absolute;

	top: -60%;
	left: -35%;

	z-index: 7;

	width: 48%;
	height: 220%;

	pointer-events: none;


	opacity: 0.20;


	background:
		linear-gradient(
			110deg,

			transparent
			25%,

			rgba(
				255,
				255,
				255,
				0.02
			)
			42%,

			rgba(
				255,
				255,
				255,
				0.085
			)
			50%,

			rgba(
				255,
				255,
				255,
				0.018
			)
			57%,

			transparent
			75%
		);


	transform:
		rotate(10deg);


	transition:
		transform
		1300ms
		ease,

		opacity
		900ms
		ease;
}


/* ============================================================
 * Reflection Hover
 * ============================================================ */

.pmGlassSlider:hover .pmGlassSliderReflection {
	opacity: 0.38;

	transform:
		translateX(18%)
		rotate(10deg);
}


/* ============================================================
 * Responsive <= 1599px
 * ============================================================ */

@media (max-width: 1599px) {

	.hero-slider-column .hero-10-img {
		width: 110%;

		transform:
			translate3d(
				14%,
				-22px,
				0
			);
	}

}


/* ============================================================
 * Responsive <= 1399px
 * ============================================================ */

@media (max-width: 1399px) {

	.hero-slider-column .hero-10-img {
		width: 108%;

		transform:
			translate3d(
				11%,
				-18px,
				0
			);
	}


	.pmGlassSlider {
		/*
		 * Auf etwas kleineren Displays wird
		 * auch die Bildhöhe etwas reduziert.
		 */
		--pm-slider-image-height:
			clamp(
				330px,
				29vw,
				450px
			);


		--pm-slider-rotate-y: -4deg;

		--pm-slider-rotate-z: 0.75deg;
	}

}


/* ============================================================
 * Responsive <= 1199px
 * ============================================================ */

@media (max-width: 1199px) {

	.hero-slider-column .hero-10-img {
		width: 105%;

		transform:
			translate3d(
				7%,
				-10px,
				0
			);
	}


	.pmGlassSlider {
		--pm-slider-image-height:
			clamp(
				300px,
				28vw,
				400px
			);


		--pm-slider-rotate-y: -3deg;

		--pm-slider-hover-rotate-y: -0.5deg;

		--pm-slider-rotate-z: 0.5deg;
	}

}


/* ============================================================
 * Responsive <= 991px
 * ============================================================ */

@media (max-width: 991px) {

	.hero-slider-column {
		align-self: auto;

		margin-top: 45px;

		align-items: center;

		justify-content: center;
	}


	.hero-slider-column .hero-10-img {
		align-items: center;

		justify-content: center;

		width: 100%;

		margin: 0;

		transform: none;
	}


	.pmGlassSlider {
		/*
		 * Für Tabletbreite abhängig von der
		 * verfügbaren Breite.
		 */
		--pm-slider-image-height:
			clamp(
				300px,
				55vw,
				460px
			);


		--pm-slider-rotate-y: -2deg;

		--pm-slider-hover-rotate-y: 0deg;

		--pm-slider-rotate-z: 0.35deg;


		width: 92%;


		margin:
			0
			auto;


		perspective:
			1500px;
	}


	.pmGlassSliderCaption {
		margin-top: 6px;

		padding:
			9px
			14px;

		font-size: 12px;
	}

}


/* ============================================================
 * Responsive <= 767px
 * ============================================================ */

@media (max-width: 767px) {

	.pmGlassSlider {
		/*
		 * Auf Mobilgeräten darf die Bildhöhe wieder
		 * vom Viewport abhängen.
		 */
		--pm-slider-image-height:
			clamp(
				240px,
				58vw,
				360px
			);


		--pm-slider-rotate-y: 0deg;

		--pm-slider-hover-rotate-y: 0deg;


		--pm-slider-rotate-x: 0deg;

		--pm-slider-hover-rotate-x: 0deg;


		--pm-slider-rotate-z: 0deg;

		--pm-slider-hover-rotate-z: 0deg;


		--pm-slider-float-distance: 5px;


		width: 100%;


		perspective: none;
	}


	.pmGlassSliderGlass {
		padding: 5px;

		border-radius: 16px;
	}


	.pmGlassSliderImageArea {
		border-radius: 12px;
	}


	.pmGlassSliderCaption {
		margin-top: 5px;

		padding:
			8px
			12px;

		border-radius: 11px;

		font-size: 11px;
	}

}


/* ============================================================
 * Reduced Motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.pmGlassSliderFloat {
		animation: none;
	}


	.pmGlassSliderTilt,
	.pmGlassSliderImage,
	.pmGlassSliderCaption,
	.pmGlassSliderReflection {
		transition: none;
	}

}