/* Bewertungen Block Styles */
.kss-bewertungen {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--kss-page-layout-gap, 1rem) * 0.5);
    position: relative;
    box-sizing: border-box;
}

.kss-bewertungen * {
    box-sizing: border-box;
}

/* Slider-Modus: Flex statt Grid */
.kss-bewertungen--slider {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 0 80px 0;
    justify-content: center;
    overflow: hidden;
}

/* Slick Slider Styles */
.kss-bewertungen--slider.slick-initialized {
    display: block;
}

.kss-bewertungen--slider .slick-slide {
    box-sizing: border-box;
}

.kss-bewertungen--slider .slick-list {
    margin: 0 -8px;
    overflow: hidden;
}

/* Slick Dots Styling */
.kss-bewertungen--slider .slick-dots {
    bottom: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.kss-bewertungen--slider .slick-dots li {
    margin: 0 4px;
}

.kss-bewertungen--slider .slick-dots li button:before {
    color: #007cba;
    font-size: var(--kss-page-layout-gap, 2rem);
    opacity: 0.5;
}

.kss-bewertungen--slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #007cba;
}

/* Dots Size Variations */
.kss-bewertungen--slider.dots-size-small .slick-dots li button:before {
    font-size: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
}

.kss-bewertungen--slider.dots-size-large .slick-dots li button:before {
    font-size: calc(var(--kss-page-layout-gap, 2rem) * 1.5);
}

/* Dots Color Variations */
.kss-bewertungen--slider.dots-color-primary .slick-dots li button:before {
    color: var(--kss-primary-color, #007cba);
}

.kss-bewertungen--slider.dots-color-secondary .slick-dots li button:before {
    color: var(--kss-secondary-color, #e74c3c);
}

.kss-bewertungen--slider.dots-color-custom .slick-dots li button:before {
    color: var(--kss-custom-dots-color, #007cba);
}

/* Slick Arrow Styling */
.kss-bewertungen--slider .slick-arrow {
    z-index: 10;
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: 0;
    top: auto;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: none;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    /* KEINE Standard-Farbe mehr hier - wird durch dots-color-* Klassen gesetzt */
    border-radius: 50%;
    transition: all 0.3s ease;
}

.kss-bewertungen--slider .slick-arrow:hover,
.kss-bewertungen--slider .slick-arrow:focus {
    color: transparent;
    outline: none;
    /* KEINE Standard-Farbe mehr hier */
}

/* Arrow Positioning - Left (Default) */
.kss-bewertungen--slider .slick-prev {
    left: 0;
    right: auto;
}

.kss-bewertungen--slider .slick-next {
    left: 50px;
    right: auto;
}

/* Arrow Positioning - Right */
.kss-bewertungen--slider.arrow-align-right .slick-prev {
    left: auto;
    right: 60px;
}

.kss-bewertungen--slider.arrow-align-right .slick-next {
    left: auto;
    right: 0;
}

/* Arrow Style - Chevron (Default) */
.kss-bewertungen--slider .slick-prev:before {
    content: "\f053" !important; /* Font Awesome chevron-left */
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: white;
    opacity: 1;
}

.kss-bewertungen--slider .slick-next:before {
    content: "\f054" !important; /* Font Awesome chevron-right */
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: white;
    opacity: 1;
}

/* Arrow Style - Arrow */
.kss-bewertungen--slider.arrow-style-arrow .slick-prev:before {
    content: "\f060" !important; /* Font Awesome arrow-left */
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
}

.kss-bewertungen--slider.arrow-style-arrow .slick-next:before {
    content: "\f061" !important; /* Font Awesome arrow-right */
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900;
}

/* Arrow Background None - Kein Kreis, nur Icon */
.kss-bewertungen--slider.arrow-bg-none .slick-arrow {
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 0; /* Kein runder Kreis */
}

.kss-bewertungen--slider.arrow-bg-none .slick-arrow:hover {
    background: transparent; /* Auch bei Hover kein Hintergrund */
}

.kss-bewertungen--slider.arrow-bg-none .slick-arrow:before {
    color: #666; /* Dunkelgrau für Icon */
    font-size: 24px;
}

.kss-bewertungen--slider.arrow-bg-none .slick-arrow:hover:before {
    color: #000;
}

/* Arrow Contrast Low */
.kss-bewertungen--slider.arrow-contrast-low .slick-arrow {
    background: rgba(0, 0, 0, 0.15);
    width: 50px;
    height: 50px;
}

.kss-bewertungen--slider.arrow-contrast-low .slick-arrow:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Pfeilfarbe = Punktfarbe (nur bei Background aktiv) */
.kss-bewertungen--slider.arrow-has-bg.dots-color-primary .slick-arrow {
    background: var(--kss-primary-color); /* Primary */
}

.kss-bewertungen--slider.arrow-has-bg.dots-color-primary .slick-arrow:hover {
    background: var(--kss-primary-hover-color);
}

.kss-bewertungen--slider.arrow-has-bg.dots-color-secondary .slick-arrow {
    background: var(--kss-secondary-color); /* Secondary */
}

.kss-bewertungen--slider.arrow-has-bg.dots-color-secondary .slick-arrow:hover {
    background: var(--kss-secondary-hover-color);
}

.kss-bewertungen--slider.arrow-has-bg.dots-color-custom .slick-arrow {
    background: var(--kss-custom-dots-color, rgba(0, 124, 186, 0.8));
    opacity: 0.8;
}

.kss-bewertungen--slider.arrow-has-bg.dots-color-custom .slick-arrow:hover {
    opacity: 1;
}

/* Pfeilfarbe OHNE Background (nur Icon) = Punktfarbe */
.kss-bewertungen--slider.arrow-bg-none.dots-color-primary .slick-arrow:before {
    color: rgba(0, 124, 186, 1);
}

.kss-bewertungen--slider.arrow-bg-none.dots-color-secondary .slick-arrow:before {
    color: rgba(231, 76, 60, 1);
}

.kss-bewertungen--slider.arrow-bg-none.dots-color-custom .slick-arrow:before {
    color: var(--kss-custom-dots-color, #007cba);
}

/* Responsive Grid */
@media (max-width: 900px) {
    .kss-bewertungen:not(.kss-bewertungen--slider) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kss-bewertungen:not(.kss-bewertungen--slider) {
        grid-template-columns: 1fr;
    }
}

/* Farbvarianten für Akzentfarben - Platzhalter für zukünftige Erweiterungen */

/* Karten-Hintergrund Varianten - werden an Child-Items vererbt */
.kss-bewertungen.has-card-bg-white .kss-bewertungen-item {
    background-color: var(--kss-color-white, #ffffff);
    color: var(--kss-color-black, #000000);
}

.kss-bewertungen.has-card-bg-dark .kss-bewertungen-item {
    background-color: var(--kss-color-black, #1a1a1a);
    color: var(--kss-color-white, #ffffff);
}

.kss-bewertungen.has-card-bg-dark .kss-bewertungen-item__title {
    color: rgba(255, 255, 255, 0.7);
}

.kss-bewertungen.has-card-bg-primary .kss-bewertungen-item {
    background-color: var(--kss-primary-color, #007cba);
    color: var(--kss-color-white, #ffffff);
}

.kss-bewertungen.has-card-bg-primary .kss-bewertungen-item__title {
    color: rgba(255, 255, 255, 0.8);
}

.kss-bewertungen.has-card-bg-secondary .kss-bewertungen-item {
    background-color: var(--kss-secondary-color, #e74c3c);
    color: var(--kss-color-white, #ffffff);
}

.kss-bewertungen.has-card-bg-secondary .kss-bewertungen-item__title {
    color: rgba(255, 255, 255, 0.8);
}

.kss-bewertungen.has-card-bg-custom .kss-bewertungen-item {
    background-color: var(--kss-custom-card-background-color, #f5f5f5);
}

/* Border-Varianten (nur ohne Hintergrundfarbe) */
.kss-bewertungen.has-card-border .kss-bewertungen-item {
    border: var(--kss-card-border-width, 1px) solid var(--kss-card-border-color, #e0e0e0);
}

/* Shadow-Varianten */
.kss-bewertungen.has-card-shadow.shadow-light .kss-bewertungen-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kss-bewertungen.has-card-shadow.shadow-medium .kss-bewertungen-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.kss-bewertungen.has-card-shadow.shadow-strong .kss-bewertungen-item {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Text-Spacing-Varianten */
.kss-bewertungen.text-spacing-small .kss-bewertungen-item {
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.25);
}

.kss-bewertungen.text-spacing-small .kss-bewertungen-item__header {
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.35);
}

.kss-bewertungen.text-spacing-large .kss-bewertungen-item {
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.75);
}

.kss-bewertungen.text-spacing-large .kss-bewertungen-item__header {
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.65);
}

