
/* --- Basis Slider Styles --- */
.jk-slider { 
    margin: 20px 0; 
}

.jk-slide { 
    padding: 0x; 
}

.jk-slide img { 
    width: 100%; 
    height: auto; 
    display: block; 
    margin-bottom:10px;
}

.jk-slide h2 { 
    font-size: 18px; 
    padding: 0 10px!important;
}

.jk-slide .jk-excerpt { 
    font-size: 14px; 
    color: #555; 
    padding: 0 10px!important;
}

.jk-slide .jk-excerpt { 
    margin-bottom:10px;
}


/* --- Slick Navigation Buttons für JK Slider --- */

/* Grundstil der Buttons */
.jk-slider .slick-prev,
.jk-slider .slick-next {
    width: 40px;
    height: 40px;
    background: #333 !important; /* dunkler Hintergrund */
    border-radius: 50%;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0; /* Text "Next" ausblenden */
    border: none !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    position: absolute !important;
    top: 45%;
}

/* Positionierung */
.jk-slider .slick-prev {
    left: -10px !important;
}

.jk-slider .slick-next {
    right: -10px !important;
}

/* SVG-Pfeile aus dem Original-Plugin */
.jk-slider .slick-prev:before,
.jk-slider .slick-next:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff !important; /* Pfeilfarbe */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Linker Pfeil */
.jk-slider .slick-prev:before {
    mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M39.3756,48.0022l30.47-25.39a6.0035,6.0035,0,0,0-7.6878-9.223L26.1563,43.3906a6.0092,6.0092,0,0,0,0,9.2231L62.1578,82.615a6.0035,6.0035,0,0,0,7.6878-9.2231Z"/></svg>');
}

/* Rechter Pfeil */
.jk-slider .slick-next:before {
    mask-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M69.8437,43.3876,33.8422,13.3863a6.0035,6.0035,0,0,0-7.6878,9.223l30.47,25.39-30.47,25.39a6.0035,6.0035,0,0,0,7.6878,9.2231L69.8437,52.6106a6.0091,6.0091,0,0,0,0-9.223Z"/></svg>');
}





/* Hover-Farbe */
.jk-slider .slick-prev:hover,
.jk-slider .slick-next:hover {
    background: #C5305B !important; /* pink */
}

.jk-slider .slick-prev:hover:before,
.jk-slider .slick-next:hover:before {
    color: #fff !important; /* weißer Pfeil auf pink */
}


.jk-slide {
    background: #F1E8EB;
    padding:0px;
    margin:2px;
}

.jk-slider .slick-list {
    margin: 0 -5px;
}

/* Slick-Wrapper neutralisieren */
.jk-slider .slick-slide > div {
    height: 100% !important;
    display: block !important;
}

/* jk-slide immer block, nie inline-block */
.jk-slide {
    display: block !important;
}

/* Höhe durchreichen */
.jk-slider .slick-track {
    display: flex !important;
}

.jk-slider .slick-slide {
    height: auto !important;
}

.jk-slider .slick-slide > div > .jk-slide {
    height: 100% !important;
}





/* Abstand zwischen den Slides */
.jk-slider .slick-slide {
    padding: 0 5px; /* 5px links + rechts */
    box-sizing: border-box;
}


/* --- Original Plugin Dots wiederherstellen --- */

.jk-slider .slick-dots {
    bottom: -50px; /* optional: Position anpassen */
}

.jk-slider .slick-dots li {
    margin: 0 4px !important; /* Abstand zwischen den Punkten */
}



.jk-slider .slick-dots li button {
    font-size: 15px;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: solid 1px #6D3E5C;
    outline: none;
    background: transparent;
}


/* Aktiver Punkt */
/* Standard-Dot */
.jk-slider .slick-dots li button {
    background: #fff !important;
    border: 2px solid #444 !important;
    border-radius: 50% !important;
    width: 13px !important;
    height: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

/* Aktiver Dot */
.jk-slider .slick-dots li.slick-active button {
    background: #6D3E5C !important;
}

/* Hover für alle Dots */
.jk-slider .slick-dots li button:hover {
    background: #6D3E5C !important;
}

