/* =========================================================
   Proffac Leistungsnavigation – Swiper-Korrektur
   Wird bewusst nach swiper-bundle.min.css geladen
   ========================================================= */

.prffc-service-switcher
.prffc-service-switcher__swiper {
	min-width: 0;
	width: 100%;
}



/*
 * Der Wrapper behält Swipers normale Struktur.
 */

.prffc-service-switcher
.prffc-service-switcher__list.swiper-wrapper {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch;

	width: 100% !important;
}



/*
 * Entscheidend:
 * Jede Slide ist nur so breit wie ihr Inhalt.
 */

.prffc-service-switcher
.swiper-wrapper
.prffc-service-switcher__item.swiper-slide {
	display: flex !important;

	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;

	width: auto !important;
	max-width: none !important;
	height: auto;
}



/*
 * Der Link bestimmt die tatsächliche Slide-Breite.
 */

.prffc-service-switcher
.prffc-service-switcher__item
.prffc-service-switcher__link {
	display: inline-flex;

	width: auto !important;
	max-width: none !important;

	white-space: nowrap;
}



/*
 * Swiper darf einzelne Links nicht künstlich strecken.
 */

.prffc-service-switcher
.swiper-slide
> * {
	flex:
		0
		0
		auto;
}



/* Mobile */

@media (max-width: 47.99rem) {
	.prffc-service-switcher
	.prffc-service-switcher__link {
		padding:
			0.65rem
			0.95rem;

		font-size: 0.78rem;
	}
}




/* =========================================================
   Swiper – Platz für Hover und Fokus
   ========================================================= */

.prffc-service-switcher {
	/*
	 * Der äußere Bereich darf Schatten anzeigen.
	 */
	overflow: visible;
}

.prffc-service-switcher__inner {
	overflow: visible;
}

.prffc-service-switcher
.prffc-service-switcher__swiper {
	/*
	 * Innerhalb des Swipers zusätzlichen Platz
	 * für Schatten, Hover und Fokusrahmen schaffen.
	 *
	 * Der negative Außenabstand verhindert,
	 * dass die Navigation dadurch höher wird.
	 */
	padding-block: 1rem;
	margin-block: -1rem;
}



/*
 * Der Wrapper selbst darf vertikal nichts abschneiden.
 */

.prffc-service-switcher
.prffc-service-switcher__list {
	align-items: center;

	overflow: visible;
}



/*
 * Hover etwas kontrollierter halten.
 */

.prffc-service-switcher__link:hover {
	transform: translateY(-0.1rem);

	box-shadow:
		0 0.55rem 1.25rem
		rgba(0, 43, 62, 0.12);
}



/*
 * Der Tastaturfokus bleibt ebenfalls vollständig sichtbar.
 */

.prffc-service-switcher__link:focus-visible {
	position: relative;
	z-index: 3;

	outline:
		0.2rem solid
		var(--prffc-color-navy);

	outline-offset: 0.2rem;
}



/* Aktives Element über benachbarten Slides darstellen */

.prffc-service-switcher__link.is-current,
.prffc-service-switcher__link[aria-current="page"] {
	position: relative;
	z-index: 2;
}


/* =========================================================
   Swiper – dezente Randverläufe
   ========================================================= */

.prffc-service-switcher__swiper {
	position: relative;
	isolation: isolate;
}



/*
 * Die Verläufe liegen fest an den beiden
 * sichtbaren Kanten des Swipers.
 */

.prffc-service-switcher__swiper::before,
.prffc-service-switcher__swiper::after {
	content: "";

	position: absolute;
	z-index: 10;

	top: 0;
	bottom: 0;

	width: clamp(1.75rem, 4vw, 3.5rem);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity 240ms ease;
}



/* Verlauf links */

.prffc-service-switcher__swiper::before {
	left: 0;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.98) 0%,
			rgba(255, 255, 255, 0.82) 28%,
			rgba(255, 255, 255, 0) 100%
		);
}



/* Verlauf rechts */

.prffc-service-switcher__swiper::after {
	right: 0;

	background:
		linear-gradient(
			to left,
			rgba(255, 255, 255, 0.98) 0%,
			rgba(255, 255, 255, 0.82) 28%,
			rgba(255, 255, 255, 0) 100%
		);
}



/*
 * Nur anzeigen, wenn in der jeweiligen
 * Richtung weitere Slides vorhanden sind.
 */

.has-overflow-left
.prffc-service-switcher__swiper::before {
	opacity: 1;
}

.has-overflow-right
.prffc-service-switcher__swiper::after {
	opacity: 1;
}



/*
 * Die Slides bleiben unterhalb des Verlaufs.
 */

.prffc-service-switcher__list {
	position: relative;
	z-index: 1;
}



/* Mobile etwas schmalerer Verlauf */

@media (max-width: 47.99rem) {
	.prffc-service-switcher__swiper::before,
	.prffc-service-switcher__swiper::after {
		width: 2rem;
	}
}



/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
	.prffc-service-switcher__swiper::before,
	.prffc-service-switcher__swiper::after {
		transition: none;
	}
}



/* =========================================================
   Swiper – weiche Randmaskierung
   ========================================================= */

.prffc-service-switcher__swiper {
	--prffc-swiper-fade-width: 2.75rem;

	position: relative;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;

	transition:
		-webkit-mask-image 240ms ease,
		mask-image 240ms ease;
}



/*
 * Vorhandene weiße Pseudo-Layer sicher entfernen.
 */

.prffc-service-switcher__swiper::before,
.prffc-service-switcher__swiper::after {
	content: none !important;
	display: none !important;
}



/*
 * Nur rechts befinden sich weitere Slides.
 */

.has-overflow-right:not(.has-overflow-left)
.prffc-service-switcher__swiper {
	-webkit-mask-image:
		linear-gradient(
			to right,
			#000 0,
			#000 calc(
				100% -
				var(--prffc-swiper-fade-width)
			),
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to right,
			#000 0,
			#000 calc(
				100% -
				var(--prffc-swiper-fade-width)
			),
			transparent 100%
		);
}



/*
 * Nur links befinden sich weitere Slides.
 */

.has-overflow-left:not(.has-overflow-right)
.prffc-service-switcher__swiper {
	-webkit-mask-image:
		linear-gradient(
			to right,
			transparent 0,
			#000 var(
				--prffc-swiper-fade-width
			),
			#000 100%
		);

	mask-image:
		linear-gradient(
			to right,
			transparent 0,
			#000 var(
				--prffc-swiper-fade-width
			),
			#000 100%
		);
}



/*
 * Links und rechts befinden sich weitere Slides.
 */

.has-overflow-left.has-overflow-right
.prffc-service-switcher__swiper {
	-webkit-mask-image:
		linear-gradient(
			to right,
			transparent 0,
			#000 var(
				--prffc-swiper-fade-width
			),
			#000 calc(
				100% -
				var(--prffc-swiper-fade-width)
			),
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to right,
			transparent 0,
			#000 var(
				--prffc-swiper-fade-width
			),
			#000 calc(
				100% -
				var(--prffc-swiper-fade-width)
			),
			transparent 100%
		);
}



/*
 * Kein Überlauf mehr vorhanden.
 */

.prffc-service-switcher__inner:not(
	.has-overflow-left
):not(
	.has-overflow-right
)
.prffc-service-switcher__swiper {
	-webkit-mask-image: none;
	mask-image: none;
}



/* Mobile etwas kürzer ausblenden */

@media (max-width: 47.99rem) {
	.prffc-service-switcher__swiper {
		--prffc-swiper-fade-width: 1.75rem;
	}
}