/* Marquee / Laufband Builder – Frontend
   Farben/Größen kommen als CSS-Variablen pro Instanz (inline gesetzt). */

.mb-marquee {
	position: relative;
	max-width: 100%;
	overflow: hidden;            /* wichtig: kein horizontales Scrollen der Seite */
}

.mb-marquee__viewport {
	overflow: hidden;            /* clippt das Laufband sauber ab */
	background: var(--mb-bg, #F2D600);
	padding: var(--mb-pad-y, 14px) 0;
	border-radius: var(--mb-radius, 0);
	width: 100%;
}

.mb-marquee--fade .mb-marquee__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mb-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: mb-scroll var(--mb-duration, 30s) linear infinite;
	will-change: transform;
}

/* Laufrichtung nach rechts */
.mb-marquee[data-direction="right"] .mb-marquee__track {
	animation-direction: reverse;
}

/* Pause bei Hover (nur wenn aktiviert) */
.mb-marquee--pause:hover .mb-marquee__track {
	animation-play-state: paused;
}

.mb-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	align-items: center;
	flex: 0 0 auto;
}

/* Abstand NACH jedem Element -> nahtloser Übergang */
.mb-marquee__item,
.mb-marquee__sep {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin-right: var(--mb-gap, 26px);
}

.mb-marquee__text {
	color: var(--mb-text, #0A0A0A);
	font-size: var(--mb-text-size, 22px);
	font-weight: var(--mb-weight, 800);
	letter-spacing: var(--mb-ls, 0.06em);
	line-height: 1.1;
}

.mb-marquee--upper .mb-marquee__text {
	text-transform: uppercase;
}

.mb-marquee__image .mb-img {
	height: var(--mb-img-h, 40px);
	width: auto;
	display: block;
}

.mb-marquee__sep--symbol {
	color: var(--mb-sep-color, #0A0A0A);
	font-size: var(--mb-sep-size, 18px);
	line-height: 1;
}

.mb-marquee__sep--image .mb-img {
	height: var(--mb-sep-size, 18px);
	width: auto;
	display: block;
}

@keyframes mb-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--mb-distance, 50%))); }
}

/* Barrierefreiheit: keine Bewegung, wenn der Nutzer das so eingestellt hat */
@media (prefers-reduced-motion: reduce) {
	.mb-marquee__track { animation: none; }
}

/* Mobile Größen */
@media (max-width: 782px) {
	.mb-marquee__text   { font-size: var(--mb-text-size-m, var(--mb-text-size, 22px)); }
	.mb-marquee__image .mb-img { height: var(--mb-img-h-m, var(--mb-img-h, 40px)); }
}