/* AB Preloader 1.0.0 – allBLANCO
 * Alle Bewegungen laufen über transform und opacity (GPU), damit es auch auf Smartphones flüssig bleibt.
 */

html.abpl-lock,
html.abpl-lock body { overflow: hidden !important; }
html.abpl-skip .abpl { display: none !important; }

.abpl {
	--abpl-ease: cubic-bezier(.76, 0, .24, 1);
	--abpl-out: cubic-bezier(.22, .61, .36, 1);
	--abpl-lip: 22vh;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: auto;
	color: var(--abpl-text, #fff);
	font-family: var(--abpl-font, inherit);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	contain: layout style;
	overflow: hidden;
}
.abpl.is-done { visibility: hidden; opacity: 0; pointer-events: none; }
.abpl.is-leaving { pointer-events: none; }

.abpl__slide {
	position: absolute;
	inset: 0 0 auto 0;
	height: 100%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.abpl__sheet { position: absolute; inset: 0; background: var(--abpl-bg, #161616); }
.abpl__lip {
	position: absolute;
	left: 0;
	top: calc(100% - 1px);
	width: 100%;
	height: var(--abpl-lip);
	display: block;
	fill: var(--abpl-bg, #161616);
}
.abpl__half {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	height: 50.2%;
	background: var(--abpl-bg, #161616);
	will-change: transform;
}
.abpl__half--a { top: 0; }
.abpl__half--b { bottom: 0; }

.abpl__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 0 6vw;
}
.abpl__word {
	display: flex;
	align-items: baseline;
	font-size: min(var(--abpl-size, 48px), 10vw);
	line-height: 1.1;
	font-weight: 300;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.abpl__ch { display: inline-block; color: var(--abpl-muted, rgba(255, 255, 255, .2)); will-change: transform, opacity; }
.abpl__b { font-weight: 700; }
.abpl__sp { width: .28em; }

.abpl__count { display: none; }
.abpl__bar {
	display: none;
	position: relative;
	width: min(320px, 60vw);
	height: 1px;
	background: var(--abpl-muted, rgba(255, 255, 255, .2));
	overflow: hidden;
}
.abpl__bar i {
	position: absolute;
	inset: 0;
	background: var(--abpl-text, #fff);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ================================================================== */
/* 1 · Schriftzug-Schimmer                                             */
/* ================================================================== */
.abpl--shimmer .abpl__ch {
	animation: abpl-shine 1.7s cubic-bezier(.4, 0, .2, 1) infinite both;
	animation-delay: calc(var(--i) * .085s);
}
@keyframes abpl-shine {
	0%, 100% { color: var(--abpl-muted); }
	30%, 58% { color: var(--abpl-text); }
}
.abpl--shimmer.is-leaving .abpl__ch {
	animation: none;
	color: var(--abpl-text);
	opacity: 0;
	transform: translate3d(0, -.18em, 0);
	transition: opacity .38s var(--abpl-out), transform .5s var(--abpl-out);
	transition-delay: calc(var(--i) * .035s);
}
.abpl--shimmer.is-leaving .abpl__slide,
.abpl--counter.is-leaving .abpl__slide {
	transform: translate3d(0, calc(-100% - var(--abpl-lip)), 0);
	transition: transform 1.05s var(--abpl-ease) .38s;
}

/* ================================================================== */
/* 2 · Vorhang                                                          */
/* ================================================================== */
.abpl--curtain .abpl__slide { display: none; }
.abpl--curtain .abpl__half { display: block; }
.abpl--curtain .abpl__bar { display: block; }
.abpl--curtain .abpl__ch {
	color: var(--abpl-text);
	opacity: 0;
	transform: translate3d(0, .35em, 0);
	animation: abpl-in .8s var(--abpl-out) forwards;
	animation-delay: calc(.1s + var(--i) * .045s);
}
.abpl--curtain .abpl__bar i { animation: abpl-grow var(--abpl-min, 1600ms) cubic-bezier(.4, 0, .2, 1) .2s forwards; }
.abpl--curtain.is-leaving .abpl__content { opacity: 0; transition: opacity .3s ease; }
.abpl--curtain.is-leaving .abpl__half--a { transform: translate3d(0, -101%, 0); transition: transform 1s var(--abpl-ease) .2s; }
.abpl--curtain.is-leaving .abpl__half--b { transform: translate3d(0, 101%, 0); transition: transform 1s var(--abpl-ease) .2s; }

/* ================================================================== */
/* 3 · Zähler                                                           */
/* ================================================================== */
.abpl--counter .abpl__content {
	align-items: stretch;
	justify-content: space-between;
	padding: clamp(24px, 6vh, 64px) clamp(20px, 5vw, 72px) clamp(28px, 7vh, 72px);
}
.abpl--counter .abpl__word { font-size: min(calc(var(--abpl-size, 48px) * .5), 6.5vw); }
.abpl--counter .abpl__ch { color: var(--abpl-text); opacity: 0; animation: abpl-fade .7s ease forwards; animation-delay: calc(var(--i) * .03s); }
.abpl--counter .abpl__count {
	display: flex;
	align-items: flex-start;
	margin-top: auto;
	font-size: clamp(72px, 18vw, 240px);
	line-height: .82;
	font-weight: 700;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.abpl--counter .abpl__pct { font-size: .32em; font-weight: 400; margin: .12em 0 0 .08em; color: var(--abpl-muted); }
.abpl--counter .abpl__bar { display: block; width: 100%; margin-top: clamp(16px, 3vh, 28px); }
.abpl--counter.is-leaving .abpl__content { opacity: 0; transform: translate3d(0, -4vh, 0); transition: opacity .35s ease, transform .5s var(--abpl-out); }

/* ================================================================== */
/* 4 · Buchstaben-Aufstieg                                              */
/* ================================================================== */
.abpl--rise .abpl__word { overflow: hidden; padding: .12em .04em .16em; }
.abpl--rise .abpl__ch {
	color: var(--abpl-text);
	transform: translate3d(0, 115%, 0);
	animation: abpl-rise .9s var(--abpl-out) forwards;
	animation-delay: calc(.1s + var(--i) * .05s);
}
.abpl--rise.is-leaving .abpl__ch {
	animation: none;
	transform: translate3d(0, -115%, 0);
	transition: transform .6s var(--abpl-ease);
	transition-delay: calc(var(--i) * .03s);
}
.abpl--rise.is-leaving .abpl__slide { opacity: 0; transition: opacity .7s ease .45s; }

/* ================================================================== */
/* 5 · Linie & Blende                                                   */
/* ================================================================== */
.abpl--line .abpl__bar { display: block; }
.abpl--line .abpl__ch { color: var(--abpl-text); opacity: 0; animation: abpl-fade .9s ease forwards; animation-delay: calc(var(--i) * .03s); }
.abpl--line .abpl__bar i { animation: abpl-grow var(--abpl-min, 1600ms) cubic-bezier(.4, 0, .2, 1) .1s forwards; }
.abpl--line.is-leaving .abpl__content { opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .5s var(--abpl-out); }
.abpl--line.is-leaving .abpl__slide { opacity: 0; transform: scale(1.06); transition: opacity .75s ease .2s, transform .9s var(--abpl-out) .2s; }

/* ================================================================== */
/* Gemeinsame Keyframes                                                 */
/* ================================================================== */
@keyframes abpl-in { to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes abpl-rise { to { transform: translate3d(0, 0, 0); } }
@keyframes abpl-fade { to { opacity: 1; } }
@keyframes abpl-grow { to { transform: scaleX(1); } }

/* ================================================================== */
/* Smartphone                                                           */
/* ================================================================== */
@media (max-width: 767px) {
	.abpl { --abpl-lip: 12vh; }
	.abpl__content { gap: 20px; }
	.abpl--curtain .abpl__bar i,
	.abpl--line .abpl__bar i { animation-duration: var(--abpl-min-m, 1200ms); }
	.abpl--shimmer .abpl__ch { animation-duration: 1.5s; animation-delay: calc(var(--i) * .07s); }
	.abpl--shimmer.is-leaving .abpl__slide,
	.abpl--counter.is-leaving .abpl__slide { transition-duration: .9s; }
}

/* ================================================================== */
/* Bewegung reduzieren                                                  */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.abpl *, .abpl *::before, .abpl *::after { animation: none !important; transition: none !important; }
	.abpl .abpl__ch { color: var(--abpl-text) !important; opacity: 1 !important; transform: none !important; }
	.abpl .abpl__bar i { transform: scaleX(1) !important; }
	.abpl.is-leaving { opacity: 0; transition: opacity .3s ease !important; }
	.abpl.is-leaving .abpl__slide,
	.abpl.is-leaving .abpl__half { transform: none !important; }
}