/*
 * Logo-Band der Mitgliedsunternehmen.
 * Maße und Breakpoints entsprechen dem bisherigen Slide-Anything-Slider:
 * 4 Logos ab 980px, 3 ab 480px, 1 darunter; Kachelhöhe = 40% der Kachelbreite;
 * Logo sitzt zentriert in den mittleren 75% der Kachel.
 */

.fvw-logos {
	position: relative;
}

.fvw-logos__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Scrollbar ausblenden, gescrollt wird per Autoplay, Wischen oder Trackpad. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fvw-logos__track::-webkit-scrollbar {
	display: none;
}

.fvw-logos__item {
	flex: 0 0 100%;
	aspect-ratio: 5 / 2;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 480px) {
	.fvw-logos__item {
		flex-basis: 33.3333%;
	}
}

@media (min-width: 980px) {
	.fvw-logos__item {
		flex-basis: 25%;
	}
}

.fvw-logos__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75%;
	height: 100%;
	box-shadow: none;
	border: 0;
}

.fvw-logos__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Solange die Quelle nur in data-src steht, ist das Bild leer und wuerde ohne
   JavaScript neben dem noscript-Bild Platz beanspruchen. */
.fvw-logos__img[data-src] {
	display: none;
}

/* Sichtbarer Fokus für Tastaturbedienung, das alte Karussell hatte keinen. */
.fvw-logos__track:focus-visible,
.fvw-logos__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fvw-logos__track {
		scroll-behavior: auto;
	}
}