/* ============================================================
   abgelichtet – Foto-Marquee (Basis-Styles)
   Dynamische Werte kommen als CSS-Variablen aus den
   Elementor-Widget-Einstellungen ({{WRAPPER}}-Selektoren).
   ============================================================ */

.abg-marquee {
	--abg-h: 380px;
	--abg-gap: 26px;
	--abg-tilt: 2.2deg;
	--abg-radius: 20px;
	--abg-pady: 48px;

	width: 100%;
	overflow: hidden;
	padding: var(--abg-pady) 0 calc(var(--abg-pady) + 8px);
}

/* Weiche Kanten (Schalter im Widget) */
[class*="abg-fade-yes"] .abg-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.abg-track {
	display: flex;
	align-items: center;
	gap: var(--abg-gap);
	width: max-content;
	animation: abg-scroll 42s linear infinite;
	will-change: transform;
}

/* Track = 2 identische Sets -> -50% ist ein nahtloser Loop */
@keyframes abg-scroll {
	to { transform: translateX(calc(-50% - (var(--abg-gap) / 2))); }
}

/* Pause bei Hover (Schalter im Widget) */
[class*="abg-hoverpause-yes"] .abg-marquee:hover .abg-track {
	animation-play-state: paused;
}

/* ---------- Karten ---------- */
.abg-card {
	height: var(--abg-h);
	flex-shrink: 0;
	border-radius: var(--abg-radius);
	overflow: hidden;
	display: block;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.abg-card.abg-portrait  { aspect-ratio: 3 / 4; }
.abg-card.abg-landscape { aspect-ratio: 4 / 3; }
.abg-card.abg-square    { aspect-ratio: 1 / 1; }

[class*="abg-shadow-yes"] .abg-card {
	box-shadow: 0 24px 50px -22px rgba(16, 16, 20, .35);
}

.abg-card:nth-child(odd)  { transform: rotate(calc(-1 * var(--abg-tilt))) translateY(10px); }
.abg-card:nth-child(even) { transform: rotate(var(--abg-tilt)); }

/* Karten-Hover (Schalter im Widget) */
[class*="abg-cardhover-yes"] .abg-card:hover {
	transform: rotate(0deg) scale(1.05);
	z-index: 2;
}

.abg-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce) {
	.abg-track { animation: none; transform: none; }
	.abg-card  { transform: none !important; }
}