/* ============================================================
   KDSI Testimonials – Design + Filter + Responsive + A11y
   ============================================================ */

/* ---------- Wrapper ---------- */
.kdsi-testimonials-wrap {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- Filter-Navigation ---------- */
.kdsi-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    margin: 0 auto 2.5rem;
}

.kdsi-filter-btn {
    display: inline-block;
    padding: .4rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #707078;
    font-size: .75rem;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
    line-height: 1.4;
    /* Barrierefreiheit: Fokus */
    outline: none;
}

.kdsi-filter-btn:focus-visible {
    outline: 2px solid #8d847c;
    outline-offset: 3px;
}

.kdsi-filter-btn:hover {
    border-color: rgba(255, 255, 255, .4);
    color: #DCDCE0;
}

.kdsi-filter-btn.active,
.kdsi-filter-btn[aria-pressed="true"] {
    border-color: #8d847c;
    color: #DCDCE0;
    background: rgba(141, 132, 124, .12);
}

/* ---------- Testimonials-Liste ---------- */
.kdsi-testimonials {
    color: #DCDCE0;
}

.kdsi-testimonial {
    padding: 2.5rem 1rem;
}

/* Trennlinie zwischen Einträgen */
html body .kdsi-testimonial + .kdsi-testimonial::before {
    content: '';
    display: block;
    width: 3.75rem;
    height: 1px;
    background: #8d847c !important;
    margin: 0 auto 2.5rem;
}

/* Kein Trennstrich beim jeweils ersten sichtbaren Eintrag */
.kdsi-testimonial.kdsi-first-visible::before {
    display: none !important;
}

/* ---------- Blockquote ---------- */
.kdsi-testimonials blockquote,
.kdsi-testimonials .kdsi-testimonial blockquote,
.wp-block-group .kdsi-testimonials blockquote {
    font-size: 1.1rem !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    margin: 0 0 .75rem !important;
    color: #DCDCE0 !important;
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: none !important;
    quotes: none !important;
}

/* ---------- Cite ---------- */
.kdsi-testimonials cite {
    display: block;
    font-style: normal !important;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #707078;
    line-height: 1.6;
    margin-top: .75rem;
}

/* WP-Trenner ausblenden */
.kdsi-testimonials hr,
.kdsi-testimonials .wp-block-separator,
.kdsi-testimonials [class*="separator"] {
    display: none !important;
}

/* ---------- Toggle-Button ---------- */
.kdsi-more-wrap {
    margin-top: .5rem;
}

.kdsi-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .7rem 2rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #707078;
    font-size: .9rem;
    font-family: inherit;
    letter-spacing: .05em;
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease;
    outline: none;
}

.kdsi-toggle-btn:focus-visible {
    outline: 2px solid #8d847c;
    outline-offset: 3px;
}

.kdsi-toggle-btn:hover {
    border-color: #A8A8B0;
    color: #EAEAEC;
}

.kdsi-toggle-btn svg {
    transition: transform 300ms ease;
    flex-shrink: 0;
}

.kdsi-toggle-btn.kdsi-open svg {
    transform: rotate(180deg);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablets */
@media (max-width: 768px) {
    .kdsi-filter {
        gap: .3rem;
        margin-bottom: 2rem;
    }

    .kdsi-filter-btn {
        font-size: .7rem;
        padding: .35rem .8rem;
        letter-spacing: .07em;
    }

    .kdsi-testimonials blockquote,
    .kdsi-testimonials .kdsi-testimonial blockquote,
    .wp-block-group .kdsi-testimonials blockquote {
        font-size: 1rem !important;
    }

    .kdsi-testimonial {
        padding: 2rem .5rem;
    }
}

/* Smartphones */
@media (max-width: 480px) {
    .kdsi-filter {
        gap: .25rem;
        margin-bottom: 1.5rem;
    }

    .kdsi-filter-btn {
        font-size: .65rem;
        padding: .3rem .65rem;
        letter-spacing: .05em;
    }

    .kdsi-testimonials blockquote,
    .kdsi-testimonials .kdsi-testimonial blockquote,
    .wp-block-group .kdsi-testimonials blockquote {
        font-size: .95rem !important;
        line-height: 1.65 !important;
    }

    .kdsi-testimonial {
        padding: 1.75rem .25rem;
    }

    .kdsi-toggle-btn {
        padding: .65rem 1.5rem;
        font-size: .85rem;
    }

    /* Trennlinie etwas schmaler */
    html body .kdsi-testimonial + .kdsi-testimonial::before {
        width: 2.5rem;
        margin-bottom: 1.75rem;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .kdsi-filter-btn,
    .kdsi-toggle-btn,
    .kdsi-toggle-btn svg {
        transition: none !important;
    }
}