/**********************************************/
/***********   SPLIDE — THEME SKIN   **********/
/**********************************************/
/* splide-core.min.css provides only structural rules (track/list/slide/
   fade cross-fade/pagination layout). All visual styling — dots, arrows —
   lives here, matching the design tokens in style.css (--black, --gray,
   --white, --blue, --radius). No Splide "default theme" CSS is loaded. */

/* Pagination (dots) — replaces ul.slick-dots for migrated sliders.
   Kept in normal flow (not absolutely positioned) so the dots always
   reserve their own space below the slide instead of floating over it. */
.splide__pagination {
	position: static;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.splide__pagination li {
	list-style: none;
}

/* Kill the theme's generic ".section li:before" red-bullet rule
   (style.css) on Splide's auto-generated <li> pagination items —
   same specificity, so it must be neutralized explicitly here. */
.splide__pagination li:before {
	content: none;
	display: none;
}

.splide__pagination__page {
	width: .625rem;
	height: .625rem;
	margin: 0 .5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--black);
	opacity: .25;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.splide__pagination__page:hover {
	opacity: .6;
}

.splide__pagination__page:focus-visible {
	opacity: .6;
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.splide__pagination__page.is-active {
	opacity: .75;
	transform: scale(1.2);
}

/* Arrows — unified circular style (replaces both Slick's default chevrons
   and the ad hoc <button class="slick-prev/next"> markup used per-template).
   Same footprint as the hand-rolled .parksysteme-nav button. */
.splide__arrows {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 1;
}

.splide__arrow {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--gray);
	background: var(--white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.splide__arrow--prev {
	margin-left: .5rem;
}

.splide__arrow--next {
	margin-right: .5rem;
}

.splide__arrow:disabled {
	opacity: .3;
	cursor: default;
}

/* slider-modules — dim non-active cards (prepared for a future migration of
   this slider; not yet in production use). Analog of
   .slider-modules .slick-slide:not(.slick-active) .card */
.splide-modules .splide__slide:not(.is-active) .card {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}