/* Simple Marquee */

.smq {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.smq__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.smq__group {
	display: flex;
	flex-shrink: 0;
}

.smq__item {
	display: block;
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: var(--smq-gap, 3rem);
}

/* Ohne JavaScript oder bei reduzierter Bewegung: normaler, umbrechender Text */
.smq:not(.is-ready) .smq__track {
	width: auto;
}

.smq:not(.is-ready) .smq__item {
	white-space: normal;
	padding-right: 0;
}

/* Animation */
.smq.is-ready .smq__track {
	animation: smq-scroll var(--smq-duration, 30s) linear infinite;
}

.smq.is-ready[data-direction="right"] .smq__track {
	animation-direction: reverse;
}

.smq[data-pause="1"]:hover .smq__track,
.smq[data-pause="1"]:focus-within .smq__track {
	animation-play-state: paused;
}

@keyframes smq-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.smq.is-ready .smq__track {
		animation: none;
	}
}