/* ============================================================
   EHNES LOGO SLIDE — reines CSS Logo-Karussell, kein JavaScript.
   Werte werden per Elementor über Inline-CSS-Variablen gesteuert.
   ============================================================ */

.ehnes-logo-slide {
	--lc-height: 72px;   /* einheitliche Logo-Höhe          */
	--lc-cell: 200px;    /* Breite je Logo-Zelle            */
	--lc-gap: 56px;      /* Abstand zwischen den Logos      */
	--lc-duration: 32s;  /* Umlaufzeit — größer = langsamer */
	position: relative;
	overflow: hidden;
	padding: 32px 0;
	/* weiche Kanten links/rechts */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ehnes-logo-slide .els-track {
	display: flex;
	align-items: center;
	gap: var(--lc-gap);
	width: max-content;
	animation: els-scroll var(--lc-duration) linear infinite;
}

/* Loop: der Track enthält das Logo-Set 2×; verschoben wird um
   exakt 50 % — dadurch entsteht ein nahtloser Endlos-Lauf. */
@keyframes els-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - var(--lc-gap) / 2)); }
}

/* Anhalten, wenn die Maus darüber ist */
.ehnes-logo-slide.els-pause-hover:hover .els-track {
	animation-play-state: paused;
}

.ehnes-logo-slide .els-item {
	flex: 0 0 var(--lc-cell);
	height: var(--lc-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ehnes-logo-slide .els-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Harmonisierung: alle Logos entsättigt und leicht zurückgenommen,
   Farbe erscheint beim Überfahren. Nur aktiv, wenn Modifier gesetzt. */
.ehnes-logo-slide.els-grayscale .els-item img {
	filter: grayscale(1);
	opacity: .65;
	transition: filter .25s ease, opacity .25s ease;
}
.ehnes-logo-slide.els-grayscale .els-item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Optionale Überschrift */
.ehnes-logo-slide-header {
	text-align: center;
	margin: 0 0 8px;
}
.ehnes-logo-slide-header .els-title {
	font-size: 24px;
	font-weight: 400;
	color: #464B50;
	margin: 0 0 6px;
}
.ehnes-logo-slide-header .els-subtitle {
	font-size: 14px;
	font-weight: 300;
	color: #707070;
	margin: 0;
}

/* Barrierefreiheit: reduzierte Bewegung → statische, scrollbare Leiste */
@media (prefers-reduced-motion: reduce) {
	.ehnes-logo-slide { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.ehnes-logo-slide .els-track { animation: none; }
}

@media (max-width: 640px) {
	.ehnes-logo-slide { --lc-height: 52px; --lc-cell: 140px; --lc-gap: 36px; }
}