/* kit-kundenstimmen — Frontend, scoped */
.kit-kundenstimmen { font: inherit; color: inherit; box-sizing: border-box; }
.kit-kundenstimmen *, .kit-kundenstimmen *::before, .kit-kundenstimmen *::after { box-sizing: inherit; }

.kit-ks-avatar { display: inline-block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: #eee; }
.kit-ks-avatar-init { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: #284d90; }

.kit-ks-sterne { display: inline-flex; gap: 1px; line-height: 1; }
.kit-ks-stern { display: inline-block; }
.kit-ks-stern.voll polygon { fill: #f5b301; }
.kit-ks-stern.leer polygon { fill: #d8d8d8; }

.kit-ks-name  { display: block; font-weight: 600; }
.kit-ks-ort   { color: #666; font-size: .9em; }
.kit-ks-datum { color: #888; font-size: .85em; margin-left: auto; }
.kit-ks-text  { margin-top: .5em; }

/* Liste */
.kit-ks-liste .kit-ks-item { padding: 1em 0; border-bottom: 1px solid #eee; }
.kit-ks-liste .kit-ks-item:last-child { border-bottom: 0; }
.kit-ks-liste .kit-ks-kopf  { display: flex; align-items: center; gap: .8em; }
.kit-ks-liste .kit-ks-meta  { flex: 1; }

/* Karten */
.kit-ks-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2em; }
.kit-ks-karte  { padding: 1.2em; border: 1px solid #eee; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: .6em; }
.kit-ks-karte-kopf { display: flex; align-items: center; gap: .8em; }

/* Slider */
.kit-ks-slider { padding-bottom: 2.5em; }
.kit-ks-slider .swiper-slide { height: auto; display: flex; }
.kit-ks-slider .kit-ks-karte { width: 100%; }
.kit-ks-slider .swiper-button-prev, .kit-ks-slider .swiper-button-next { color: #284d90; }
.kit-ks-slider .swiper-pagination-bullet-active { background: #284d90; }

/* Einzel */
.kit-ks-einzel { padding: 1.5em; border-left: 4px solid #284d90; background: #f8f8fa; margin: 1em 0; }
.kit-ks-einzel .kit-ks-fuss { display: flex; align-items: center; gap: .8em; margin-top: 1em; }

.kit-ks-leer { color: #888; font-style: italic; }

/* Weiterlesen-Toggle */
.kit-ks-text--kuerzbar .kit-ks-text-kurz,
.kit-ks-text--kuerzbar .kit-ks-text-voll { display: block; }
.kit-ks-mehr {
    margin-top: .4em;
    background: none;
    border: 0;
    padding: 0;
    color: #284d90;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.kit-ks-mehr:hover { text-decoration: none; }

/* Slider: alle Karten gleich hoch, Kurztext auf max. 4 Zeilen */
.kit-ks-slider .swiper-slide { height: auto; }
.kit-ks-slider .kit-ks-karte { height: 100%; }
.kit-ks-slider .kit-ks-text-kurz {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Volltext bei offen: max-Höhe + scrollbar, damit Karte nicht explodiert */
.kit-ks-slider .kit-ks-text-voll {
    max-height: 14em;
    overflow: auto;
}

/* Slider: Slides + Karten zwingend gleich hoch */
.kit-ks-slider .swiper-wrapper { align-items: stretch; }
.kit-ks-slider .swiper-slide { height: auto !important; display: flex; }
.kit-ks-slider .kit-ks-karte { width: 100%; height: auto; display: flex; flex-direction: column; }
.kit-ks-slider .kit-ks-text--kuerzbar { flex: 1 1 auto; display: flex; flex-direction: column; }
.kit-ks-slider .kit-ks-text-kurz { flex: 1 1 auto; }

/* Slider deutlich kompakter */
.kit-ks-slider .kit-ks-karte { padding: .8em; gap: .35em; font-size: .92em; }
.kit-ks-slider .kit-ks-text-kurz { -webkit-line-clamp: 2; max-height: 3em; }
.kit-ks-slider .kit-ks-text-voll { max-height: 8em; }
.kit-ks-slider .kit-ks-karte-kopf { gap: .5em; }
.kit-ks-slider .kit-ks-mehr { align-self: flex-start; font-size: .85em; }

/* Slider: kompakte Karten fester Höhe + Modal */
.kit-ks-slider .kit-ks-karte { padding: 1em; gap: .5em; height: 100%; }
.kit-ks-slider .kit-ks-karte-kopf { gap: .6em; }
.kit-ks-slider .kit-ks-text-kurz {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}
.kit-ks-slider .kit-ks-mehr { align-self: flex-start; font-size: .9em; }

/* Modal */
.kit-ks-modal { position: fixed; inset: 0; z-index: 99999; }
.kit-ks-modal[hidden] { display: none; }
.kit-ks-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.kit-ks-modal-box {
    position: relative;
    max-width: 560px;
    width: calc(100% - 2em);
    max-height: 80vh;
    margin: 10vh auto;
    background: #fff;
    border-radius: 10px;
    padding: 1.5em;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: auto;
}
.kit-ks-modal-close {
    position: absolute; top: .3em; right: .5em;
    background: none; border: 0; font-size: 2em; line-height: 1;
    color: #555; cursor: pointer; padding: 0 .3em;
}
.kit-ks-modal-close:hover { color: #000; }
.kit-ks-modal-kopf { display: flex; align-items: center; gap: .8em; margin-bottom: .6em; }
.kit-ks-modal-kopf .kit-ks-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.kit-ks-modal-sterne { margin-bottom: .8em; }
.kit-ks-modal-text { line-height: 1.6; }

/* Akzentfarbe (CSS-Variable, von PHP gesetzt) */
.kit-kundenstimmen { --kit-ks-akzent: #284d90; }

.kit-ks-slider .swiper-button-prev,
.kit-ks-slider .swiper-button-next { display: none; } /* Standard-Pfeile aus */
.kit-ks-slider .swiper-pagination-bullet-active { background: var(--kit-ks-akzent); }
.kit-ks-mehr,
.kit-ks-einzel { color: var(--kit-ks-akzent); border-color: var(--kit-ks-akzent); }

/* Slider-Wrapper mit Außen-Pfeilen */
.kit-ks-slider-wrap {
    position: relative;
    padding: 0 3em;
}
.kit-ks-slider-wrap .kit-ks-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: var(--kit-ks-akzent);
    color: #fff;
    border: 0;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: opacity .2s, transform .2s;
    z-index: 2;
}
.kit-ks-slider-wrap .kit-ks-nav:hover { transform: translateY(-50%) scale(1.08); }
.kit-ks-slider-wrap .kit-ks-nav-prev { left: 0; }
.kit-ks-slider-wrap .kit-ks-nav-next { right: 0; }
.kit-ks-slider-wrap .kit-ks-nav.swiper-button-disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) {
    .kit-ks-slider-wrap { padding: 0 2.4em; }
    .kit-ks-slider-wrap .kit-ks-nav { width: 2em; height: 2em; font-size: .95em; }
}

/* Native <dialog> für Volltext */
.kit-ks-dialog {
    max-width: 560px;
    width: calc(100% - 2em);
    border: 0;
    border-radius: 10px;
    padding: 1.5em;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.kit-ks-dialog::backdrop { background: rgba(0,0,0,.55); }
.kit-ks-dialog-close-form { margin: 0; padding: 0; }
.kit-ks-dialog-close {
    position: absolute; top: .3em; right: .5em;
    background: none; border: 0; font-size: 2em; line-height: 1;
    color: #555; cursor: pointer; padding: 0 .3em;
}
.kit-ks-dialog-close:hover { color: #000; }
.kit-ks-dialog-kopf { display: flex; align-items: center; gap: .8em; margin-bottom: .6em; }
.kit-ks-dialog-kopf .kit-ks-avatar-initiale,
.kit-ks-dialog-kopf img { width: 48px; height: 48px; }
.kit-ks-dialog-text { line-height: 1.6; margin-top: .6em; }

/* Weiterlesen als echter Button (überschreibt den Link-Look von oben) */
.kit-ks-mehr {
    display: inline-block;
    padding: 0em .4em;
    background: var(--kit-ks-akzent);
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: .9em;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.kit-ks-mehr:hover { filter: brightness(1.1); transform: translateY(-1px); }
.kit-ks-mehr:active { transform: translateY(0); }

/* Theme-Overrides hart neutralisieren */
.kit-kundenstimmen .kit-ks-mehr,
.kit-kundenstimmen .kit-ks-mehr:hover,
.kit-kundenstimmen .kit-ks-mehr:focus,
.kit-kundenstimmen .kit-ks-mehr:visited {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    background: var(--kit-ks-btn, var(--kit-ks-akzent)) !important;
}
.kit-kundenstimmen .kit-ks-mehr:hover,
.kit-kundenstimmen .kit-ks-mehr:focus {
    background: var(--kit-ks-btn-hover, var(--kit-ks-akzent)) !important;
    filter: none;
}

/* Slider-Layout: Avatar oben links, direkt darunter Text */
.kit-ks-slider .kit-ks-karte { gap: .25em; }
.kit-ks-slider .kit-ks-karte-kopf { margin-bottom: 0; }
.kit-ks-slider .kit-ks-sterne { margin: 0; }
.kit-ks-slider .kit-ks-text-kurz { margin-top: .3em; }

/* Mobile: keine Pfeile, volle Breite */
@media (max-width: 600px) {
    .kit-ks-slider-wrap { padding: 0; }
    .kit-ks-slider-wrap .kit-ks-nav { display: none; }
}

/* Pagination fix unter die Karten, 20px Abstand */
.kit-ks-slider { padding-bottom: 2.5em; position: relative; }
.kit-ks-slider .swiper-pagination {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    margin-top: 20px;
    text-align: center;
    line-height: 1;
}

/* Pagination: aus dem Slider raus, 20px darunter */
.kit-ks-slider { padding-bottom: 0 !important; }
.kit-ks-slider .swiper-pagination {
    position: static !important;
    margin-top: 20px !important;
    bottom: auto !important;
}

/* Pagination jetzt außerhalb des Swipers — normaler Block, 20px unter den Karten */
.kit-ks-slider-wrap .kit-ks-pagination {
    position: static !important;
    margin-top: 20px !important;
    text-align: center;
    line-height: 1;
}

/* Aktiver Pagination-Bullet in Akzentfarbe */
.kit-kundenstimmen .swiper-pagination-bullet-active {
    background: var(--kit-ks-akzent) !important;
    opacity: 1 !important;
}

/* Avatar immer oben links (Karte + Dialog) */
.kit-ks-karte-kopf,
.kit-ks-dialog-kopf { align-items: flex-start !important; }
.kit-ks-karte-kopf .kit-ks-avatar,
.kit-ks-karte-kopf .kit-ks-avatar-init,
.kit-ks-dialog-kopf .kit-ks-avatar,
.kit-ks-dialog-kopf .kit-ks-avatar-init { flex: 0 0 auto; }

/* Avatar fix max 48px, rechts 20px Abstand, dann Text */
.kit-ks-karte-kopf .kit-ks-avatar,
.kit-ks-karte-kopf .kit-ks-avatar-init,
.kit-ks-dialog-kopf .kit-ks-avatar,
.kit-ks-dialog-kopf .kit-ks-avatar-init {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin-right: 20px !important;
}
.kit-ks-karte-kopf,
.kit-ks-dialog-kopf { gap: 0 !important; }
.kit-ks-slider .kit-ks-text-kurz { margin-bottom: 10px; }

/* Kopf-Meta links ausrichten */
.kit-ks-kopf-meta,
.kit-ks-karte-kopf .kit-ks-kopf-meta,
.kit-ks-dialog-kopf > div {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto;
}

/* Dialog: Text nicht unter den X-Button laufen lassen */
.kit-ks-dialog { padding-right: 2.8em; }
.kit-ks-dialog-kopf { padding-right: 0; }

/* Kopf ohne Flex: Avatar floatet links, Meta daneben, alles linksbündig */
.kit-ks-karte-kopf,
.kit-ks-dialog-kopf {
    display: block !important;
    text-align: left !important;
    overflow: hidden;
    margin-bottom: .4em;
}
.kit-ks-karte-kopf .kit-ks-avatar,
.kit-ks-karte-kopf .kit-ks-avatar-init,
.kit-ks-dialog-kopf .kit-ks-avatar,
.kit-ks-dialog-kopf .kit-ks-avatar-init {
    float: left;
    margin: 0 20px 0 0 !important;
}
.kit-ks-kopf-meta,
.kit-ks-dialog-kopf > div {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    float: none;
}

/* Mobile: Dialog schmaler + zentriert */
@media (max-width: 600px) {
    .kit-ks-dialog {
        width: calc(100% - 2em) !important;
        max-width: calc(100vw - 2em) !important;
        margin: 1em auto !important;
        padding: 1em !important;
        padding-right: 2.2em !important;
        box-sizing: border-box;
    }
}

/* Mobile Dialog: exakt 1em links + 1em rechts */
@media (max-width: 600px) {
    .kit-ks-dialog {
        width: auto !important;
        max-width: none !important;
        left: 1em !important;
        right: 1em !important;
        margin: 1em !important;
    }
}