/* Praxis Slider – CSS-Scroll-Snap, progressive enhancement (funktioniert auch ohne JS per Swipe/Scroll). */
.praxis-slider { --gap: clamp(1rem, 2vw, 1.5rem); --pv: var(--per-view, 3); position: relative; }
@media (max-width: 1100px) { .praxis-slider { --pv: var(--per-view-md, 2); } }
@media (max-width: 680px) { .praxis-slider { --pv: var(--per-view-sm, 1.15); } }

.praxis-slider__track {
	display: flex; gap: var(--gap);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	padding-block: .5rem 1rem; margin-block: -.5rem -1rem;
	list-style: none; padding-inline: 0; margin-inline: 0;
}
.praxis-slider__track::-webkit-scrollbar { display: none; }
.praxis-slider__track:focus-visible { outline: 2px solid var(--praxis-focus); outline-offset: 4px; border-radius: 12px; }
.praxis-slider__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.praxis-slider__track.is-dragging a { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .praxis-slider__track { scroll-behavior: auto; } }

.praxis-slider__slide {
	flex: 0 0 calc((100% - (var(--gap) * (var(--pv) - 1))) / var(--pv));
	scroll-snap-align: start; min-width: 0;
}

/* Bleed: Track läuft bis an den rechten Viewport-Rand (Awwwards-Look) */
.praxis-slider--bleed .praxis-slider__track { margin-inline-end: calc(50% - 50vw); padding-inline-end: var(--praxis-gutter); scroll-padding-inline-end: var(--praxis-gutter); }

.praxis-slider__controls { display: flex; align-items: center; gap: 1rem; margin-top: var(--wp--preset--spacing--40); }
/* Zähler links, Pfeile rechts – ohne Fortschrittslinie dazwischen. */
.praxis-slider__buttons { margin-left: auto; }
.praxis-slider__controls[hidden] { display: none; }
.praxis-slider__progress { flex: 1; height: 2px; background: var(--praxis-line); border-radius: 2px; overflow: hidden; }
.praxis-slider__bar { display: block; height: 100%; width: 100%; background: var(--praxis-ink); transform-origin: 0 50%; transform: scaleX(var(--progress, .2)); transition: transform .3s var(--praxis-ease); }
.praxis-slider__count { font-size: var(--wp--preset--font-size--xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--praxis-ink-soft); min-width: 4.5ch; }
.praxis-slider__buttons { display: flex; gap: .5rem; }

/* ---------- Mit JS: Swiper (transformiert statt scrollt) ---------- */
.praxis-slider__viewport { position: relative; overflow: hidden; padding-block: .5rem 1rem; margin-block: -.5rem -1rem; touch-action: pan-y; }
.praxis-slider.is-swiper .praxis-slider__track {
	display: flex; gap: 0; overflow: visible; scroll-snap-type: none; scroll-behavior: auto;
	padding: 0; margin: 0; box-sizing: content-box; transition-property: transform; will-change: transform;
	transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}
.praxis-slider.is-swiper .praxis-slider__slide { flex: 0 0 auto; width: var(--slide-w, 80%); scroll-snap-align: none; }
.praxis-slider.is-swiper .swiper-grab, .praxis-slider.is-swiper.swiper-grab, .praxis-slider__viewport.swiper-grab { cursor: grab; }
.praxis-slider__viewport.swiper-grab:active { cursor: grabbing; }
.praxis-slider__viewport img { -webkit-user-drag: none; user-select: none; }
.praxis-slider--bleed .praxis-slider__viewport { margin-inline-end: calc(50% - 50vw); }
.praxis-slider--bleed.is-swiper .praxis-slider__track { margin-inline-end: 0; }