/*
 * en2x Mitglieder – logo slider styles.
 *
 * A calm logo bar with a fixed logo HEIGHT (variable width, contained). Per
 * view: 6 (desktop) / 4 (tablet) / 1 (mobile) – breakpoints MUST match
 * slider.js. Hover reveals the company name. Colours are subtle (usually on a
 * light section). Font is inherited (Rubik from Salient).
 */

.en2x-mitglieder {
	position: relative;
	font-family: inherit;
	/* Logos per view; the per-breakpoint values come inline from the settings.
	 * Keep the breakpoints in sync with slider.js. */
	--en2x-mitglieder-per: var(--en2x-mitglieder-desktop, 6);
	/* Logo size + spacing (overridden by the --abstand-* variants below). */
	--en2x-mitglieder-pad: 16px;
	--en2x-mitglieder-logo-h: 72px;
}

/* Spacing / size variants (setting "Abstand"). "gering" = bigger logos, tighter;
 * "gross" = smaller logos, more space. */
.en2x-mitglieder--abstand-gering {
	--en2x-mitglieder-pad: 8px;
	--en2x-mitglieder-logo-h: 92px;
}

.en2x-mitglieder--abstand-mittel {
	--en2x-mitglieder-pad: 16px;
	--en2x-mitglieder-logo-h: 72px;
}

.en2x-mitglieder--abstand-gross {
	--en2x-mitglieder-pad: 28px;
	--en2x-mitglieder-logo-h: 60px;
}

.en2x-mitglieder-empty {
	margin: 0;
	padding: 16px;
	color: #50575e;
	font-size: 14px;
	text-align: center;
}

.en2x-mitglieder__viewport {
	overflow: hidden;
}

.en2x-mitglieder__track {
	display: flex;
	transition: transform 0.5s ease;
}

/* One item = 1/6 of the viewport on desktop. */
.en2x-mitglieder__item {
	flex: 0 0 calc(100% / var(--en2x-mitglieder-per, 6));
	max-width: calc(100% / var(--en2x-mitglieder-per, 6));
	box-sizing: border-box;
	padding: var(--en2x-mitglieder-pad, 16px);
}

/* Link / wrapper. */
.en2x-mitglieder__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

/* Fixed-height logo box keeps the bar visually calm. */
.en2x-mitglieder__logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--en2x-mitglieder-logo-h, 72px);
}

.en2x-mitglieder__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.en2x-mitglieder__link:hover .en2x-mitglieder__logo,
.en2x-mitglieder__link:focus .en2x-mitglieder__logo {
	filter: grayscale(0);
	opacity: 1;
}

/* Colour mode (setting "In Farbe anzeigen"): logos always in full colour. */
.en2x-mitglieder--farbe .en2x-mitglieder__logo {
	filter: none;
	opacity: 1;
}

/* Text fallback when a member has no logo. */
.en2x-mitglieder__logo-fallback {
	font-size: 15px;
	font-weight: 600;
	color: #50575e;
	text-align: center;
}

/* Company name, revealed on hover. */
.en2x-mitglieder__name {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--en2x-color-headline, #250F51);
	opacity: 0;
	transition: opacity 0.2s ease;
	text-align: center;
}

.en2x-mitglieder__link:hover .en2x-mitglieder__name,
.en2x-mitglieder__link:focus .en2x-mitglieder__name {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Navigation.
 * ------------------------------------------------------------------------- */

.en2x-mitglieder__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.en2x-mitglieder__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #d2d2dc;
	border-radius: 50%;
	background: #fff;
	color: var(--en2x-color-primary, #221182);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.en2x-mitglieder__arrow:hover,
.en2x-mitglieder__arrow:focus {
	border-color: var(--en2x-color-primary, #221182);
}

/* Bullets sit between the two arrows. */
.en2x-mitglieder__bullets {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 4px;
}

.en2x-mitglieder__bullet {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--en2x-color-primary, #221182);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.en2x-mitglieder__bullet.is-active {
	background: var(--en2x-color-primary, #221182);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Responsive: tablet 4, mobile 1 per view (keep in sync with slider.js).
 * ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.en2x-mitglieder {
		--en2x-mitglieder-per: var(--en2x-mitglieder-tablet, 4);
	}
}

@media (max-width: 599px) {
	.en2x-mitglieder {
		--en2x-mitglieder-per: var(--en2x-mitglieder-mobil, 1);
	}
}