/* NH Design Ticker — Frontend Base Styles
   Dynamische Werte (Farbe, Größe, Abstände) kommen via Inline-Style aus dem Customizer. */

.nhdesign-ticker {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	}

	.nhdesign-ticker .nhdesign-ticker__track {
		display: flex;
		width: max-content;
		flex-wrap: nowrap;
		animation: nhdesign-ticker-scroll 30s linear infinite;
		will-change: transform;
	}

	.nhdesign-ticker .nhdesign-ticker__item {
		flex-shrink: 0;
		display: inline-block;
		margin-right: 3em;
	}

	.nhdesign-ticker .nhdesign-ticker__item::after {
		content: '·';
		margin-left: 3em;
		opacity: 0.4;
	}


@media (prefers-reduced-motion: reduce) {
	.nhdesign-ticker .nhdesign-ticker__track {
		animation: none;
		white-space: normal;
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
	}
}

@keyframes nhdesign-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(var(--ticker-offset, -50%)); }
}