/* Pflegecampus overrides for the npm slick-theme.css (loaded directly after it).
   Extracted 2026-09-04 from the previously hand-patched theme so the base file can
   stay byte-identical to npm (slick-carousel 1.8.0). Green 40px SVG-chevron arrows. */
/* Arrow styling goes through variables so a slider variant overrides one line per state and
   never fights the cascade. Necessary because the npm base re-imposes a `background:
   transparent` SHORTHAND on :hover/:focus, which wipes both the colour and the arrow image: a
   variant that declares only its resting look would otherwise show the global arrow colour on
   hover (the course-preview arrows turned green) or lose its arrow entirely (the homepage
   testimonial arrows vanished).

     --rd-slick-arrow-bg          resting fill      (default: brand green)
     --rd-slick-arrow-bg-hover    hover / keyboard-focus fill (default: the resting fill)
     --rd-slick-arrow-image       arrow drawn on the button itself, if any
     --rd-slick-dot-color         the dots' grey, reused as the hover fill by the flat variants

   Variants set these, never background-color or background-image on the buttons. */
.slick-slider { --rd-slick-arrow-bg: #7AB51D; --rd-slick-dot-color: #CCCCCC; }
.slick-prev,.slick-next { transform: none; height: 40px; width: 40px; border-radius: 3px; background-color: var(--rd-slick-arrow-bg, #7AB51D); box-shadow: 0 11px 12px -11px rgba(33,43,54,0.15); border: 0; position: absolute; top: 40%; z-index: 1000; font-size: 0; cursor: pointer; }
/* A mouse click leaves the button focused, so whatever is declared for :focus stays on screen
   after the click — that is why the grey plate used to stick. The fill and the lift therefore
   belong to :hover and to :focus-visible (keyboard). A plain :focus still needs a declaration,
   though: without one it falls through to the npm base's `background: transparent` and a filled
   arrow would turn transparent after being clicked. So :focus restores the RESTING look, and the
   rule below it wins whenever the pointer is actually on the button. */
.slick-prev:focus,.slick-next:focus { transform: none; background-color: var(--rd-slick-arrow-bg, #7AB51D); background-image: var(--rd-slick-arrow-image, none); }
.slick-prev:hover,.slick-next:hover,.slick-prev:focus-visible,.slick-next:focus-visible { transform: translateY(-3px); background-color: var(--rd-slick-arrow-bg-hover, var(--rd-slick-arrow-bg, #7AB51D)); background-image: var(--rd-slick-arrow-image, none); }
.slick-prev:hover { box-shadow: 0.12rem 0.12rem 0.32rem rgba(0,0,0,0.7); }
.slick-next:hover { box-shadow: -0.12rem 0.12rem 0.32rem rgba(0,0,0,0.7); }
.slick-prev:before,.slick-next:before { content: ''; opacity: 1; display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: 50%; background-size: 100%; background-image: url(/src/img/svg/af/chevron-right-white.svg); }
.slick-prev:before { transform: rotate(180deg); content: ''; }
[dir='rtl'] .slick-prev:before { content: ''; }
.slick-next:before { content: ''; }
[dir='rtl'] .slick-next:before { content: ''; }
.slick-dots li button:before { font-family: 'slick'; font-size: 12px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '\2022'; text-align: center; color: var(--rd-slick-dot-color, #CCCCCC); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { opacity: .75; color: #7ab51d; }
.kb_button .slick-dots { display: none !important; }
.kb_button .slick-prev { --rd-slick-arrow-bg: #FFF; }
.kb_button .slick-next { --rd-slick-arrow-bg: #FFF; }
.kb_button .slick-prev:before,.kb_button .slick-next:before { background-image: url(/src/img/svg/af/chevron-right-gray.svg); }