/* ===========================================================================
   Hero slider chrome (Splide) - #homeSliderHolder and #pageSliderHolder

   Dots and arrows only; the slides themselves keep their rules in style.css
   (.homeSlides, .pageSlides, .sliderContentHolder, .slide_number,
   .videoStarter).

   Every number here was measured off the slick build this replaced, 23.09.2026,
   on /de/ and /de/erlebnis/ at 1440, 1250, 768 and 390: dot boxes 20x20 set
   20px apart, an 18px white ring each, a 22x2 white bar joining one to the next
   and none after the last, the current dot a filled white circle at 1.6x, the
   row 38px above the bottom of the home hero and 30px above the bottom of the
   page hero. Arrows 30x51, 15px in from the side and 15px above the hero
   bottom, the FontAwesome chevrons f104/f105 at 53px in #bbbcbe turning #fff
   on hover. Canonical breakpoint 768: dots above it, arrows below it - never
   both, which is why neither is a plain `display: block`.

   Splide's own stylesheet is loaded first and styles these elements as grey
   pills; everything below overrides it at equal specificity plus the ID, so
   no !important is needed.
   =========================================================================== */

/* --- Dots ---------------------------------------------------------------- */

#homeSliderHolder .splide__pagination,
#pageSliderHolder .splide__pagination {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    /* 90 is what this dot row has always had, although the theme's own rule
       for it said 9999: the slider library that used to run these heroes
       shipped `.slick-dots { z-index: 90 !important }`, and !important beat the
       ID. Measured 23.09.2026 on that build by walking the CSSOM for every
       z-index rule the element matched. Raising it now would put a slider dot
       above everything else on the page for no reason. */
    z-index: 90;
}
#homeSliderHolder .splide__pagination { bottom: 38px; }
#pageSliderHolder .splide__pagination { bottom: 30px; }

#homeSliderHolder .splide__pagination li,
#pageSliderHolder .splide__pagination li {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 10px;
}

/* The bar to the next dot. It sits on the li, not on the button, so the
   current-dot scaling below cannot drag it along. */
#homeSliderHolder .splide__pagination li::after,
#pageSliderHolder .splide__pagination li::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 20px;
    width: 20px;
    height: 2px;
    background: #fff;
}
#homeSliderHolder .splide__pagination li:last-child::after,
#pageSliderHolder .splide__pagination li:last-child::after { display: none; }

#homeSliderHolder .splide__pagination__page,
#pageSliderHolder .splide__pagination__page {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 1;
    transition: background-color 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* The ring fills and grows. The build this replaces drew the filled circle as
   a pseudo-element under the ring, because that library generated its own dot
   buttons; Splide's button is ours to style, so one element does both and
   there is nothing to keep in step. */
#homeSliderHolder .splide__pagination__page.is-active,
#homeSliderHolder .splide__pagination__page:hover,
#pageSliderHolder .splide__pagination__page.is-active,
#pageSliderHolder .splide__pagination__page:hover {
    background: #fff;
    transform: scale(1.6);
}

/* --- Arrows -------------------------------------------------------------- */

#homeSliderHolder .splide__arrow,
#pageSliderHolder .splide__arrow {
    display: none;
    position: absolute;
    top: auto;
    bottom: 15px;
    width: 30px;
    height: 51px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    z-index: 99;
}
/* Splide ships an inline SVG chevron in the button; this theme draws its own
   from the icon font, so the SVG is hidden rather than left to stack behind. */
#homeSliderHolder .splide__arrow svg,
#pageSliderHolder .splide__arrow svg { display: none; }

#homeSliderHolder .splide__arrow::after,
#pageSliderHolder .splide__arrow::after {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 53px;
    color: #bbbcbe;
    transition: color 0.25s ease-in-out;
}
#homeSliderHolder .splide__arrow--prev,
#pageSliderHolder .splide__arrow--prev { left: 15px; }
#homeSliderHolder .splide__arrow--prev::after,
#pageSliderHolder .splide__arrow--prev::after { content: "\f104"; }
#homeSliderHolder .splide__arrow--next,
#pageSliderHolder .splide__arrow--next { right: 15px; }
#homeSliderHolder .splide__arrow--next::after,
#pageSliderHolder .splide__arrow--next::after { content: "\f105"; }

#homeSliderHolder .splide__arrow:hover::after,
#homeSliderHolder .splide__arrow:focus::after,
#pageSliderHolder .splide__arrow:hover::after,
#pageSliderHolder .splide__arrow:focus::after { color: #fff; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
    #homeSliderHolder .splide__pagination,
    #pageSliderHolder .splide__pagination { display: none; }
    #homeSliderHolder .splide__arrow,
    #pageSliderHolder .splide__arrow { display: flex; }
}

/* --- Reduced motion ------------------------------------------------------
   Last block on purpose: a media query adds no specificity, so only source
   order lets it win over the transitions above. The cross-fade itself is
   switched off in js/hero-slider.js, which also stops the autoplay. */

@media (prefers-reduced-motion: reduce) {
    #homeSliderHolder .splide__pagination__page,
    #homeSliderHolder .splide__arrow::after,
    #pageSliderHolder .splide__pagination__page,
    #pageSliderHolder .splide__arrow::after { transition: none; }
}