/* ====================================================================
 * DATEI:         public/assets/css/modules/4-main_05_kundenbewertungen.css
 * PROJEKT:       Dali Personal GmbH - Relaunch 2025
 * MODUL:         4-main_05_kundenbewertungen.php
 * FUNKTION:      Definiert die exklusiven Stile für das 'Kundenbewertungen' Modul.
 * Alle Regeln sind an die Hauptklasse `.modul-kundenbewertungen`
 * gekoppelt, um globale Stil-Konflikte zu verhindern.
 * VERSION:       2.9 (Mobile Layout Final - Flexbox Fix)
 * ==================================================================== */

.modul-kundenbewertungen {
padding-top: 0;    /* 1.25rem */
padding-bottom: 0;
}

.modul-kundenbewertungen .text-center {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* =================================================================
   FINALE, KORRIGIERTE STERN-REGELN
   ================================================================= */
.modul-kundenbewertungen .testimonial-sterne-wrapper {
    margin-top: calc(-1 * var(--spacing-xs));
}

.modul-kundenbewertungen .testimonial-sterne {
    display: inline-block;
    color: var(--primary-orange);
    font-size: var(--font-size-lg);
    cursor: default;
}

.modul-kundenbewertungen .testimonial-sterne i::before {
    content: '\f005';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    transition: var(--transition-fast);
}

.modul-kundenbewertungen .testimonial-sterne:hover i::before {
    font-weight: 900;
}

.modul-kundenbewertungen .testimonial-sterne i:hover ~ i::before {
    font-weight: 400;
}


/* =================================================================
   Ergänzungen für Slide-Animation
   ================================================================= */
.modul-kundenbewertungen[data-animation-type="slide"],
.modul-kundenbewertungen[data-animation-type="filmstrip"] {
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
}

.modul-kundenbewertungen[data-animation-type="slide"] .testimonials-grid,
.modul-kundenbewertungen[data-animation-type="filmstrip"] .testimonials-grid {
    will-change: transform;
}


/* Grid-Layout */
.modul-kundenbewertungen .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl, 2rem);
    text-align: center;
    margin-top: var(--spacing-lg, 1.5rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
    min-height: 480px;
    transition: opacity var(--transition-normal, 0.3s) ease,
                transform var(--transition-normal, 0.3s) ease;
}

/* Karten-Styling */
.modul-kundenbewertungen .testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(420px, 45vh, 480px);
    background: var(--white);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--spacing-lg) var(--spacing-md);
    box-shadow: 2px -2px 12px rgba(0, 0, 0, 0.07), 
                0 5px 15px rgba(0, 0, 0, 0.15);
}

.modul-kundenbewertungen .testimonial-card:hover {
    box-shadow: 2px -2px 12px rgba(0, 0, 0, 0.06), 
                0 12px 24px rgba(0, 0, 0, 0.18);
}

.modul-kundenbewertungen .testimonial-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-md);
    border: 3px solid var(--white);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

/* Sprechblasen-Styling */
.modul-kundenbewertungen .testimonial-card blockquote {
    position: relative;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-style: italic;
    color: var(--text-secondary);
    background-color: #e5eff7;
    border-radius: 30px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

/* FIX: Dreieck mit leichtem Überlapp gegen Spalten */
.modul-kundenbewertungen .testimonial-card blockquote::before {
    content: '';
    position: absolute;
    top: -9.5px;  /* FIX: Leichter Überlapp statt -10px */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e5eff7;
}

.modul-kundenbewertungen .testimonial-card blockquote p {
    margin: 0;
}

/* Name und Beruf */
.modul-kundenbewertungen .testimonial-card figcaption {
    font-weight: var(--font-weight-bold);
    margin-top: auto;
    padding-bottom: var(--spacing-sm);
    text-align: center;
}

.modul-kundenbewertungen .testimonial-card cite {
    display: block;
    font-style: normal;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.modul-kundenbewertungen .testimonial-card figcaption span {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================================================================
   SLIDER NAVIGATION
   ================================================================= */
.modul-kundenbewertungen .testimonials-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1.5rem);
    margin-top: 0;
    margin-bottom: var(--spacing-lg, 2rem);
    min-height: 48px;
    height: 48px; /* FIX: Feste Höhe gegen Springen */
}

.modul-kundenbewertungen .testimonials-slider-nav-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1.5rem);
    margin-top: 0;
    margin-bottom: var(--spacing-lg, 2rem);
    min-height: 48px;
    height: 48px; /* FIX: Feste Höhe */
}

.modul-kundenbewertungen .testimonials-nav-btn {
    position: relative; /* FIX: Damit ::before sich korrekt positioniert */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--white, #fff);
    border: 2px solid var(--primary-orange, #ff6b35);
    border-radius: 50%;
    color: var(--primary-orange, #ff6b35);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s) ease;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.modul-kundenbewertungen .testimonials-nav-btn:hover:not(:disabled) {
    background: var(--primary-orange, #ff6b35);
    color: var(--white, #fff);
    transform: scale(1.05);
}

.modul-kundenbewertungen .testimonials-nav-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.modul-kundenbewertungen .testimonials-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.modul-kundenbewertungen .testimonials-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--neutral-grey, #ddd);
    color: var(--text-secondary, #999);
}

.modul-kundenbewertungen .testimonials-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.modul-kundenbewertungen .testimonials-page-indicator {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #666);
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    user-select: none;
}

/* =================================================================
   Loading State
   ================================================================= */
.modul-kundenbewertungen[data-loading="true"] .testimonials-grid {
    opacity: 0.5;
    pointer-events: none;
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 992px) {
    .modul-kundenbewertungen .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg, 1.5rem);
        min-height: 500px;  /* Stabile Höhe für Tablet */
    }
    
    .modul-kundenbewertungen .testimonial-card {
        min-height: clamp(380px, 40vh, 450px);
    }
}

/* =================================================================
   MOBILE - FINALE FLEXBOX LÖSUNG
   ================================================================= */
@media (max-width: 576px) {
    /* Abstand über Karten reduzieren */
    .modul-kundenbewertungen .text-center {
        margin-bottom: var(--spacing-md); 
    }
    
    /* Grid mit fester Höhe für stabilen Slider */
    .modul-kundenbewertungen .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 1.5rem);
        margin-top: var(--spacing-sm, 0.5rem);
        margin-bottom: var(--spacing-md, 1rem);
        min-height: 500px;  
        height: 500px;      
        padding: 10px 8px 0 8px;  /* TOP-PADDING für Shadow & Dreieck! */
        overflow: hidden;   
        position: relative;
    }
    
    /* Card mit Flexbox und fester Höhe */
    .modul-kundenbewertungen .testimonial-card {
        min-height: 480px;  /* Großzügige feste Höhe */
        height: 480px;      /* FEST für kein Springen */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;  /* Start oben */
        align-items: center;
        overflow: hidden;   /* Nichts ragt raus */
        padding: var(--spacing-lg) var(--spacing-md);
        margin: 0;
        position: relative;
    }
    
    /* Portrait */
    .modul-kundenbewertungen .testimonial-image {
        margin-bottom: var(--spacing-sm);  /* Weniger Abstand */
        position: relative;
        z-index: 1;
        flex-shrink: 0;  /* Behält Größe */
    }
    
    /* Blockquote flexibel ohne max-height */
    .modul-kundenbewertungen .testimonial-card blockquote {
        /* KEINE max-height mehr! */
        flex-shrink: 0;     /* Nimmt nur benötigten Platz */
        flex-grow: 0;       /* Wächst nicht */
        overflow: visible;  /* Dreieck sichtbar */
        position: relative;
        margin-top: 5px;    /* Nah am Portrait */
        margin-bottom: auto; /* Drückt Beruf nach unten */
        z-index: 2;
    }
    
    /* DREIECK */
    .modul-kundenbewertungen .testimonial-card blockquote::before {
        content: '';
        position: absolute;
        top: -10px;  /* AUSSERHALB der Blase */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #e5eff7;
        z-index: 10;
    }
    
    /* Beruf IMMER unten fixiert */
    .modul-kundenbewertungen .testimonial-card figcaption {
        margin-top: auto;   /* IMMER ganz unten */
        flex-shrink: 0;     /* Behält seine Größe */
        padding-bottom: var(--spacing-sm);
        text-align: center;
    }
    
    /* Navigation Buttons */
    .modul-kundenbewertungen .testimonials-nav-btn {
        position: relative;
        width: 40px;
        height: 40px;
    }
    
    .modul-kundenbewertungen .testimonials-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .modul-kundenbewertungen .testimonials-slider-nav,
    .modul-kundenbewertungen .testimonials-slider-nav-placeholder {
        gap: var(--spacing-sm, 1rem);
        margin-bottom: var(--spacing-md, 1.5rem);
        height: 44px;
    }
    
    .modul-kundenbewertungen .testimonials-nav-btn::before {
        content: '';
        position: absolute;
        inset: -8px;
    }
}