#preloader.jobmarkt-preloader {
	--jm-blue: #1682e6;
	--jm-brand-blue: #0f80e3;
	--jm-logo-blue: #1a80e0;
	--jm-ice-blue: #8ec6ff;
	--jm-ink: #10233f;
	--jm-black: #1e1f21;
	background:
		radial-gradient(circle at 50% 38%, rgba(26, 128, 224, .28), transparent 30%),
		linear-gradient(160deg, var(--jm-black), var(--jm-ink) 52%, var(--jm-brand-blue));
	overflow: hidden;
	text-align: center;
}

#preloader.jobmarkt-preloader:before {
	animation: jm-loader-stars 8s linear infinite;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .2) 1px, transparent 1px);
	background-size: 34px 34px;
	content: "";
	inset: 0;
	opacity: .42;
	position: absolute;
}

#preloader.jobmarkt-preloader:after {
	background:
		radial-gradient(circle at 42% 32%, rgba(26, 128, 224, .3), transparent 24%),
		radial-gradient(circle at 72% 68%, rgba(255, 255, 255, .12), transparent 26%),
		radial-gradient(circle at 22% 74%, rgba(15, 128, 227, .22), transparent 28%);
	content: "";
	inset: 0;
	opacity: .85;
	position: absolute;
}

#preloader.jobmarkt-preloader .inner {
	display: grid;
	height: 100%;
	min-height: 100%;
	place-items: center;
	position: relative;
	width: 100%;
	z-index: 1;
}

#preloader.jobmarkt-preloader .inner:before {
	content: none;
}

#preloader.jobmarkt-preloader .loading-container {
	animation: jm-loader-enter .55s cubic-bezier(.2, .8, .2, 1) both;
	display: grid;
	justify-items: center;
	opacity: 1;
	position: relative;
	vertical-align: initial;
	width: min(430px, 82vw);
}

#preloader.jobmarkt-preloader .jm-loader-panel {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(142, 198, 255, .34);
	border-radius: 8px;
	box-shadow: 0 24px 56px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .05);
	height: 132px;
	margin-bottom: 24px;
	overflow: hidden;
	position: relative;
	width: min(350px, 78vw);
}

#preloader.jobmarkt-preloader .jm-loader-panel:before {
	animation: jm-loader-shine 2.2s ease-in-out infinite;
	background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, .28) 45%, transparent 58% 100%);
	content: "";
	inset: 0;
	position: absolute;
}

#preloader.jobmarkt-preloader .jm-loader-panel strong {
	color: #fff;
	font-size: clamp(.82rem, 3.2vw, 1.05rem);
	font-weight: 900;
	left: 28px;
	letter-spacing: .08em;
	line-height: 1.2;
	position: absolute;
	text-align: left;
	top: 22px;
	white-space: nowrap;
}

#preloader.jobmarkt-preloader .jm-loader-bars {
	align-items: end;
	bottom: 26px;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(6, 1fr);
	height: 58px;
	left: 28px;
	position: absolute;
	right: 28px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span {
	animation: jm-loader-bars 1.4s ease-in-out infinite;
	background: linear-gradient(180deg, #fff, var(--jm-ice-blue) 46%, var(--jm-logo-blue));
	border-radius: 999px 999px 4px 4px;
	box-shadow: 0 0 18px rgba(26, 128, 224, .44);
	display: block;
	transform-origin: bottom;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(1) {
	animation-delay: -.1s;
	height: 32px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(2) {
	animation-delay: -.3s;
	height: 46px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(3) {
	animation-delay: -.5s;
	height: 24px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(4) {
	animation-delay: -.7s;
	height: 58px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(5) {
	animation-delay: -.9s;
	height: 38px;
}

#preloader.jobmarkt-preloader .jm-loader-bars span:nth-child(6) {
	animation-delay: -1.1s;
	height: 50px;
}

#preloader.jobmarkt-preloader .loading-container img.jm-loader-logo {
	filter: brightness(0) invert(1) drop-shadow(0 14px 32px rgba(0, 0, 0, .28));
	height: auto;
	width: min(292px, 72vw);
}

#preloader.jobmarkt-preloader .jm-loader-bar {
	background: rgba(255, 255, 255, .2);
	border-radius: 999px;
	height: 5px;
	margin-top: 28px;
	overflow: hidden;
	position: relative;
	width: min(250px, 58vw);
}

#preloader.jobmarkt-preloader .jm-loader-bar span {
	animation: jm-loader-progress 1.2s ease-in-out infinite;
	background: linear-gradient(90deg, #fff, var(--jm-ice-blue), var(--jm-logo-blue));
	border-radius: inherit;
	box-shadow: 0 0 18px rgba(26, 128, 224, .34);
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 46%;
}

@keyframes jm-loader-enter {
	from {
		opacity: 0;
		transform: translateY(16px) scale(.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes jm-loader-stars {
	to {
		background-position: 68px 68px;
	}
}

@keyframes jm-loader-shine {
	0% {
		transform: translateX(-110%);
	}

	100% {
		transform: translateX(110%);
	}
}

@keyframes jm-loader-bars {
	0%,
	100% {
		transform: scaleY(.72);
	}

	50% {
		transform: scaleY(1);
	}
}

@keyframes jm-loader-progress {
	0% {
		transform: translateX(-105%);
	}

	100% {
		transform: translateX(225%);
	}
}

@media (max-width: 480px) {
	#preloader.jobmarkt-preloader .jm-loader-panel {
		height: 120px;
		width: 300px;
	}

	#preloader.jobmarkt-preloader .jm-loader-panel strong {
		left: 22px;
	}

	#preloader.jobmarkt-preloader .jm-loader-bars {
		left: 22px;
		right: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#preloader.jobmarkt-preloader:after,
	#preloader.jobmarkt-preloader:before,
	#preloader.jobmarkt-preloader .loading-container,
	#preloader.jobmarkt-preloader .jm-loader-panel:before,
	#preloader.jobmarkt-preloader .jm-loader-bars span,
	#preloader.jobmarkt-preloader .jm-loader-bar span {
		animation: none;
	}
}
