/* Erfolgsgeschichten-Section: einheitliches Erscheinungsbild auf allen Unterseiten */
/* Scoping über [data-erfolgsgeschichten] verhindert Überschreibungen durch Seiten-Styles */

/* --- Karte: weiß, Schatten (nur Desktop), wie Referenzfoto --- */
[data-erfolgsgeschichten] #testimonials .erfolgsgeschichten-card,
[data-erfolgsgeschichten] #testimonials .testimonial-card-container .card {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 767px) {
    [data-erfolgsgeschichten] #testimonials .erfolgsgeschichten-card,
    [data-erfolgsgeschichten] #testimonials .testimonial-card-container .card {
        box-shadow: none !important;
    }

    /* h2 auf Mobile verkleinern und Platz schaffen – verhindert Abschneiden rechts */
    [data-erfolgsgeschichten] #testimonials h2 {
        font-size: 1.75rem !important;
        line-height: 1.35 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    [data-erfolgsgeschichten] #testimonials {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Pfeile vertikal zentrieren – auf Mobile nach oben verschieben (waren zu weit unten) */
    [data-erfolgsgeschichten] #testimonials .testimonial-prev,
    [data-erfolgsgeschichten] #testimonials .testimonial-next {
        top: calc(50% - 1.5rem) !important;
        transform: translateY(-50%) translateX(-1rem) !important;
    }
    [data-erfolgsgeschichten] #testimonials .testimonial-next {
        transform: translateY(-50%) translateX(1rem) !important;
    }
    [data-erfolgsgeschichten] #testimonials .testimonial-prev:hover {
        transform: translateY(-50%) translateX(-1rem) !important;
    }
    [data-erfolgsgeschichten] #testimonials .testimonial-next:hover {
        transform: translateY(-50%) translateX(1rem) !important;
    }
}

/* Hover-Vergrößerung auf den Testimonial-Karten deaktivieren */
[data-erfolgsgeschichten] #testimonials .erfolgsgeschichten-card:hover,
[data-erfolgsgeschichten] #testimonials .testimonial-slide .card:hover {
    transform: none !important;
    scale: none !important;
}

/* --- Zitat: mittleres Grau, kursiv --- */
[data-erfolgsgeschichten] #testimonials .testimonial-content p {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
    font-style: italic !important;
}

/* --- Name: dunkel/schwarz, fett --- */
[data-erfolgsgeschichten] #testimonials .testimonial-author .font-semibold {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 600 !important;
}

/* --- 5 dunkelgraue Sterne unter dem Namen --- */
[data-erfolgsgeschichten] #testimonials .erfolgsgeschichten-stars {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    font-size: 1rem !important;
    letter-spacing: 0.05em !important;
}

/* --- Rolle/Untertitel: mittleres Grau --- */
[data-erfolgsgeschichten] #testimonials .testimonial-author .text-sm {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
}

/* --- Slider-Viewport: nur horizontal abschneiden, Schatten und Pfeile nicht abschneiden --- */
[data-erfolgsgeschichten] #testimonials .erfolgsgeschichten-slider-viewport {
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 1.5rem; /* Platz für Kartenschatten */
}

/* --- Slider: ein sichtbarer Slide, Track verschiebt sich --- */
[data-erfolgsgeschichten] #testimonials .testimonial-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

[data-erfolgsgeschichten] #testimonials .testimonial-slide {
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- Navigation: hellgraue Kreise, schwarze Pfeile --- */
[data-erfolgsgeschichten] #testimonials .testimonial-prev,
[data-erfolgsgeschichten] #testimonials .testimonial-next {
    background: #e5e7eb !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
    transition: background-color 0.2s ease !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-prev:hover,
[data-erfolgsgeschichten] #testimonials .testimonial-next:hover {
    background: #d1d5db !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-prev svg,
[data-erfolgsgeschichten] #testimonials .testimonial-next svg {
    color: #111827 !important;
    stroke: #111827 !important;
}

/* --- Dots: ausgeblendet (Pfeile genügen zur Navigation) --- */
[data-erfolgsgeschichten] #testimonials .testimonial-dots {
    display: none !important;
}

/* --- Dots-Stile (falls woanders verwendet): nur der aktive Punkt dunkel --- */
[data-erfolgsgeschichten] #testimonials .testimonial-dot {
    background-color: #d1d5db !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-dot.active {
    background-color: #6b7280 !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-dot:hover {
    background-color: #9ca3af !important;
}

/* Testimonial Slider Pfeile - Position (keine Transform-Animation bei Hover) */
[data-erfolgsgeschichten] #testimonials .testimonial-prev,
[data-erfolgsgeschichten] #testimonials .testimonial-next {
    transform: translateY(-50%) translateX(-1rem) !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-next {
    transform: translateY(-50%) translateX(1rem) !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-prev:hover {
    transform: translateY(-50%) translateX(-1rem) !important;
}

[data-erfolgsgeschichten] #testimonials .testimonial-next:hover {
    transform: translateY(-50%) translateX(1rem) !important;
}

/* Fallback ohne Scoping für Seiten, die die Section ohne data-Attribut einbinden */
.testimonial-dot.active {
    background-color: #6b7280;
}