/* =============================================================================
   Kundenlogos Ticker – Frontend-Styles
   ============================================================================= */

/* Äußerer Rahmen: beschneidet den scrollenden Inhalt */
.klt-wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 30px 0;
	/* Hintergrund transparent → Seitenhintergrund scheint durch */
	background: transparent;
}

/* Sanfte Ausblendung links und rechts (professioneller Look) */
.klt-wrapper::before,
.klt-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.klt-wrapper::before {
	left: 0;
	background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.klt-wrapper::after {
	right: 0;
	background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* Track: alle Logo-Sets nebeneinander als breite Flex-Reihe */
.klt-track {
	display: flex;
	width: max-content;
	/* Animation startet erst nach JS-Init (.klt-ready) */
}

/* Animation aktiv sobald JS den Track vorbereitet hat */
.klt-wrapper.klt-ready .klt-track {
	animation: klt-scroll var(--klt-duration, 28s) linear infinite;
	will-change: transform;
}

/* Pause beim Hover über den Ticker */
.klt-wrapper.klt-ready:hover .klt-track {
	animation-play-state: paused;
}

/* Ein Logo-Set (original + klone) */
.klt-logos {
	display: flex;
	align-items: center;
	/* Abstand zwischen Logos: 40px (flex gap) */
	gap: 40px;
	/* 40px nach dem letzten Logo → nahtloser Übergang zum nächsten Set */
	padding-right: 40px;
}

/* Einzelnes Logo */
.klt-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.klt-logo img {
	display: block;
	width: 300px;
	height: 150px;
	object-fit: contain;
	/* Skalierungsanker: oben-links für gleichmäßige Responsive-Skalierung */
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* =============================================================================
   Keyframe-Animation
   --klt-translate wird per JS auf den exakten Pixelwert gesetzt.
   Fallback -50% funktioniert bei exakt 2 gleich breiten Sets (PHP-Ausgabe).
   ============================================================================= */
@keyframes klt-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(var(--klt-translate, -50%)); }
}

/* =============================================================================
   Responsive – Tablet (768px – 1023px)
   ============================================================================= */
@media (max-width: 1023px) {
	.klt-logo img {
		width: 210px;
		height: 105px;
	}

	.klt-logos {
		gap: 30px;
		padding-right: 30px;
	}

	.klt-wrapper::before,
	.klt-wrapper::after {
		width: 80px;
	}
}

/* =============================================================================
   Responsive – Smartphone (< 768px)
   ============================================================================= */
@media (max-width: 767px) {
	.klt-logo img {
		width: 140px;
		height: 70px;
	}

	.klt-logos {
		gap: 20px;
		padding-right: 20px;
	}

	.klt-wrapper {
		padding: 20px 0;
	}

	.klt-wrapper::before,
	.klt-wrapper::after {
		width: 40px;
	}
}