/* Mobile First: Grundstruktur */
.rs-logoslider-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 20px 0;
	box-sizing: border-box;
}

.rs-logoslider-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: rs-marquee var(--rs-ls-speed) linear infinite;
}

/* Pausiert die Animation bei Mouseover */
.rs-logoslider-wrapper:hover .rs-logoslider-track {
	animation-play-state: paused;
}

/* Einzelner Block (wird 4x generiert) */
.rs-logoslider-group {
	display: flex;
	align-items: center;
	gap: var(--rs-ls-gap-mobile);
	padding-right: var(--rs-ls-gap-mobile); /* Abstand zum nächsten Block */
	flex-shrink: 0;
}

.rs-logoslider-logo {
	max-width: var(--rs-ls-max-width-mobile);
	height: auto;
	max-height: 80px;
	object-fit: contain;
	flex-shrink: 0;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Farb-Modi via CSS-Filter */
.rs-logoslider-wrapper.rs-mode-grayscale .rs-logoslider-logo {
	filter: grayscale(100%);
	opacity: 0.7;
}
.rs-logoslider-wrapper.rs-mode-grayscale .rs-logoslider-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}

.rs-logoslider-wrapper.rs-mode-white .rs-logoslider-logo {
	filter: brightness(0) invert(1);
}

.rs-logoslider-wrapper.rs-mode-black .rs-logoslider-logo {
	filter: brightness(0);
}

/* * Der Trick: Wir verschieben die Spur um exakt 25% (1 von 4 Blöcken). 
 * Da alle 4 Blöcke identisch sind, springt es unsichtbar um. 
 */
@keyframes rs-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-25%); }
}

/* Desktop Optimierung ab 768px */
@media (min-width: 768px) {
	.rs-logoslider-group {
		gap: var(--rs-ls-gap);
		padding-right: var(--rs-ls-gap);
	}
	
	.rs-logoslider-logo {
		max-width: var(--rs-ls-max-width);
		max-height: 120px;
	}
}