/*
 * Bikepark 1024 Laufleiste – Version 0.1.4
 * Hintergrund und Containerhöhe werden bewusst in Elementor gesteuert.
 * Das Plugin kümmert sich nur um Typografie und Bewegung.
 */

.bikepark-laufleiste {
	--bikepark-marquee-color: #ffffff;
	--bikepark-marquee-gap: 64px;
	--bikepark-marquee-duration: 30s;
	--bikepark-marquee-font-size: 21px;
	--bikepark-marquee-font-weight: 600;

	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
	color: var(--bikepark-marquee-color);
	line-height: 1.3;
	font-family: "ff-meta-web-pro", sans-serif;
	font-weight: var(--bikepark-marquee-font-weight);
}

.bikepark-laufleiste__viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bikepark-laufleiste__track {
	display: flex;
	align-items: center;
	width: max-content;
	min-width: 100%;
	height: 100%;
	will-change: transform;
	animation: bikepark-laufleiste-scroll var(--bikepark-marquee-duration) linear infinite;
}

.bikepark-laufleiste__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--bikepark-marquee-gap);
	min-width: max-content;
	padding-right: var(--bikepark-marquee-gap);
}

.bikepark-laufleiste__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: var(--bikepark-marquee-font-size);
	font-family: "ff-meta-web-pro", sans-serif;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

/* Laptop */
@media (max-width: 1366px) {
	.bikepark-laufleiste {
		--bikepark-marquee-font-size: 21px;
	}
}

/* Tablet quer */
@media (max-width: 1200px) {
	.bikepark-laufleiste {
		--bikepark-marquee-font-size: 21px;
	}
}

/* Tablet hoch */
@media (max-width: 1024px) {
	.bikepark-laufleiste {
		--bikepark-marquee-font-size: 21px;
	}
}

/* Smartphone hoch */
@media (max-width: 767px) {
	.bikepark-laufleiste {
		--bikepark-marquee-font-size: 21px;
	}
}

@keyframes bikepark-laufleiste-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bikepark-laufleiste__track {
		animation: none;
	}
}