/*
 * Strukturelles Basis-CSS der Kunde-Widgets (§2 Stufe 1).
 * NUR Layout, das nicht sinnvoll ueber Elementor-Controls kommt.
 * Farben/Typo/Abstaende kommen aus den Controls (selectors) bzw. __globals__.
 */

/* --- kunde-stat --- */
.kunde-stat {
	display: flex;
	flex-direction: column;
	/* align-items + gap kommen aus den Controls (align / block_gap) */
}

.kunde-stat__value {
	display: flex;
	align-items: baseline;
	/* gap kommt aus dem Control (star_gap) */
}

.kunde-stat__star {
	line-height: 1;
}

.kunde-stat__label {
	display: block;
}

/* --- kunde-aspect-image ---
 * Falle 3: img absolut -> Ratio kommt allein vom Wrapper (aspect-ratio Control).
 * Falle 2: img wird ueber eigene Klasse gestylt, nicht ueber Wrapper.
 */
.kunde-aspect {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 3 / 4; /* Default; Control ueberschreibt */
}

.kunde-aspect__img {
	position: absolute;
	inset: 0;
	/* !important: `.elementor img { height:auto }` (0,1,1) schlaegt sonst unsere Klasse (0,1,0)
	   -> Bild fuellt die Ratio-Box nicht. Gleiche Override-Klasse wie der max-width-Cap (Falle 1). */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* --- kunde-gallery ---
 * Span-Mosaik: --cols Spalten (responsive via Control), Kachel span --span /
 * --span-t / --span-m. img absolute inset (Falle 3). Collapse via .is-collapsed + JS.
 */
.kunde-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 12), 1fr);
	gap: var(--gap, 10px);
}
.kunde-gallery__item {
	grid-column: span var(--span, 1);
	position: relative;
	overflow: hidden;
	margin: 0;
}
.kunde-gallery__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
@media (max-width: 1024px) {
	.kunde-gallery__item { grid-column: span var(--span-t, var(--span, 1)); }
}
@media (max-width: 767px) {
	.kunde-gallery__item { grid-column: span var(--span-m, 1); }
}
/* Collapse (optional) */
.kunde-gallery__viewport { position: relative; }
.kunde-gallery.is-collapsed .kunde-gallery__viewport {
	max-height: var(--collapse-h, 660px);
	overflow: hidden;
}
.kunde-gallery__fade { display: none; }
.kunde-gallery.is-collapsed .kunde-gallery__fade {
	display: block;
	position: absolute;
	inset: auto 0 0 0;
	height: 160px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--fade-color, #fff));
}
.kunde-gallery__toggle {
	display: none;
	width: fit-content;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem auto 0;
	padding: .875rem 1.75rem;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter .2s ease;
}
.kunde-gallery.is-collapsed .kunde-gallery__toggle,
.kunde-gallery.is-expanded .kunde-gallery__toggle { display: flex; }
.kunde-gallery__toggle:hover { filter: brightness(.92); }
.kunde-gallery__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- kunde-marquee ---
 * Track = 1 Bild-Set; das JS klont es einmal -> -50%-Keyframe ist nahtlos.
 * Items: margin-right (Control) statt flex-gap -> exakter -50%-Loop.
 * Dauer kommt als --km-duration vom JS (px/s -> s). A11y: reduced-motion
 * schaltet die Animation ab (CSS-Guard + JS-Guard doppelt).
 */
.kunde-marquee {
	overflow: hidden;
	width: 100%;
}

.kunde-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
}

/* Animation laeuft erst, wenn das JS die Dauer gesetzt + is-running vergeben hat. */
.kunde-marquee.is-running .kunde-marquee__track {
	animation: kunde-marquee-scroll var(--km-duration, 30s) linear infinite;
}

.kunde-marquee.is-running.is-reverse .kunde-marquee__track {
	animation-direction: reverse;
}

/* Pause bei Hover (nur wenn data-pause-hover -> Klasse ist am Wrapper via CSS-Attr). */
.kunde-marquee[data-pause-hover]:hover .kunde-marquee__track {
	animation-play-state: paused;
}

.kunde-marquee.is-dragging .kunde-marquee__track {
	animation-play-state: paused;
}

.kunde-marquee__item {
	display: block;
	height: 48px;      /* Control ueberschreibt */
	width: auto;
	flex: 0 0 auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

@keyframes kunde-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* A11y: keine Bewegung -> statische, horizontal scrollbare Reihe. */
.kunde-marquee.is-reduced {
	overflow-x: auto;
}
.kunde-marquee.is-reduced .kunde-marquee__track {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.kunde-marquee .kunde-marquee__track {
		animation: none !important;
	}
}