/* =========================================================================
   HOME TESTIMONIALS
   Extrahiert aus partials/starter-v2/styles.blade.php fuer den Einsatz
   im neuen Referenzen-Block der Startseite (app/include/homeSections/intro
   bzw. via @include('app.partials.starter-v2.testimonials')).
   Selektoren str-testi*/str-cine*/str-link sind eigenstaendig benannt und
   kollidieren mit keinen anderen Styles. Wird zusammen mit home-modern.css
   geladen.
   ========================================================================= */

/* Notwendige CSS-Variablen direkt am Section-Wrapper definiert.
   Vererben automatisch an alle Children, ohne explizite *-Regel
   (die Browser-spezifische Inheritance-Probleme erzeugen kann). */
.home-modern .str-testimonials {
    --s-primary: #191d93;
    --s-primary-dark: #111270;
    --s-dark: #0c0a2e;
    --s-g700: #334155;
    --s-g600: #475569;
    --s-g500: #64748b;
    --s-g400: #94a3b8;
    --s-g300: #cbd5e1;
    --s-g200: #e2e8f0;
    --s-g100: #f1f5f9;
    --s-g50: #f8fafc;
    --s-white: #ffffff;
    --s-ease: all .35s cubic-bezier(.16,1,.3,1);
    --t-h2: 1.65rem;
    --t-h2-weight: 700;
    --t-h2-lh: 1.28;
    --t-h2-mb: 1rem;
    --t-subtitle: .9rem;
    --t-subtitle-weight: 400;
    --t-subtitle-lh: 1.6;
    --t-subtitle-mb: 1.8rem;
}

/* str-link im Referenzen-Footer-Link */
.home-modern .str-testimonials .str-link {
    color: #191d93 !important;
    text-decoration: none;
    font-weight: 600;
    transition: all .35s cubic-bezier(.16,1,.3,1);
}
.home-modern .str-testimonials .str-link:hover { color: #111270 !important; }

/* ======================================================
   TESTIMONIALS SECTION
   ====================================================== */
.home-modern .str-testimonials {
    padding: 5.5rem 0 5rem;
    background: linear-gradient(180deg, #eeeef8 0%, #f4f3fb 40%, #f9f8ff 100%);
    position: relative;
    border-top: 1px solid rgba(58,49,200,.06);
    border-bottom: 1px solid rgba(58,49,200,.06);
    text-align: left;
}

/* Container width angleichen wie auf starter-v2 */
.home-modern .str-testimonials > .container {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* Header (mit Hex-Fallback, falls CSS-Variable nicht aufgeloest wird) */
.home-modern .str-testimonials .str-testi-headline {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #0c0a2e !important;
    margin-bottom: 1rem;
    line-height: 1.28;
    letter-spacing: -.025em;
    text-transform: none;
}
.home-modern .str-testimonials .str-testi-sub {
    font-size: var(--t-subtitle) !important;
    font-weight: var(--t-subtitle-weight);
    color: var(--s-g700) !important;
    max-width: 75ch;
    margin: 0 auto .6rem;
    line-height: var(--t-subtitle-lh) !important;
}
.home-modern .str-testimonials .str-testi-sub--followup {
    font-size: .9rem !important;
    font-weight: 400;
    color: var(--s-g600) !important;
    margin: 0 auto var(--t-subtitle-mb);
    font-style: italic;
}

/* Trust Metrics Bar (mit Hex-Fallback) */
.home-modern .str-testi-metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 auto 1.5rem;
    width: fit-content;
    padding: .65rem 1.5rem;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    white-space: nowrap;
}
.home-modern .str-testi-metric {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: #475569 !important;
}
.home-modern .str-testi-metric__icon { font-size: .85rem; }
.home-modern .str-testi-metric__val { font-weight: 700; color: #0c0a2e !important; }
.home-modern .str-testi-metric__lbl { color: #94a3b8 !important; font-size: .75rem; }
.home-modern .str-testi-metric--logo {
    padding-left: .75rem;
    border-left: 1px solid #e2e8f0;
}
.home-modern .str-testi-metric--logo img { display: block; }

/* Toggle Buttons (mit Hex-Fallback fuer maximale Robustheit) */
.home-modern .str-testi-toggle {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-bottom: 1.75rem;
}
.home-modern .str-testi-toggle__btn {
    padding: .5rem 1.35rem !important;
    border-radius: 2rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all .2s ease;
    text-transform: none;
    letter-spacing: 0;
}
.home-modern .str-testi-toggle__btn:hover {
    border-color: #191d93 !important;
    color: #191d93 !important;
}
.home-modern .str-testi-toggle__btn--active,
.home-modern .str-testi-toggle__btn.str-testi-toggle__btn--active {
    background: #191d93 !important;
    color: #ffffff !important;
    border-color: #191d93 !important;
}
.home-modern .str-testi-toggle__btn--active:hover {
    background: #191d93 !important;
    color: #ffffff !important;
}

/* Panel visibility */
.home-modern .str-testi-panel { display: none; }
.home-modern .str-testi-panel--active { display: block; }

/* Horizontal Scroll Container */
.home-modern .str-testi-scroll { position: relative; }
.home-modern .str-testi-track {
    display: flex;
    gap: 1.15rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: .5rem .25rem 1rem;
}
.home-modern .str-testi-track::-webkit-scrollbar { display: none; }

/* Scroll Arrows */
.home-modern .str-testi-scroll__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--s-white);
    border: 1px solid var(--s-g200);
    color: var(--s-g600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: all .2s ease;
    font-size: .75rem;
}
.home-modern .str-testi-scroll__arrow:hover {
    background: var(--s-primary);
    color: #fff;
    border-color: var(--s-primary);
}
.home-modern .str-testi-scroll__arrow--left { left: -18px; }
.home-modern .str-testi-scroll__arrow--right { right: -18px; }

/* Scroll Dots */
.home-modern .str-testi-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}
.home-modern .str-testi-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s-g300);
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
}
.home-modern .str-testi-dots__dot--active {
    background: var(--s-primary);
    width: 20px;
    border-radius: 4px;
}

/* Testimonial Cards (mit Hex-Fallback gegen unzuverlaessige CSS-Var Vererbung) */
.home-modern .str-testi-card {
    flex: 0 0 290px;
    scroll-snap-align: start;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: .65rem !important;
    padding: 1rem !important;
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.home-modern .str-testi-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
    transform: translateY(-2px);
    border-color: #cbd5e1 !important;
}
.home-modern .str-testi-card__source {
    display: flex;
    align-items: center;
    margin-bottom: .85rem;
}
.home-modern .str-testi-card__stars {
    color: #e9b73b !important;
    font-size: .95rem;
    letter-spacing: 1px;
}
.home-modern .str-testi-card__quote {
    flex: 1;
    font-size: .78rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin: 0 0 .85rem;
    border: none;
    padding: 0;
    font-style: normal;
}
.home-modern .str-testi-card__author {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .85rem;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}
.home-modern .str-testi-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f1f5f9;
    flex-shrink: 0;
}
.home-modern .str-testi-card__author strong {
    display: block;
    font-size: .8rem;
    color: #0c0a2e !important;
}
.home-modern .str-testi-card__author span {
    font-size: .72rem;
    color: #94a3b8 !important;
}

/* Cinematic Strip (Kundenvideos) */
.home-modern .str-cine-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .625rem;
    max-width: 920px;
    margin: 0 auto;
}
.home-modern .str-cine-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-modern .str-cine {
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3/4;
    width: 100%;
    transition: box-shadow .4s ease;
}
.home-modern .str-cine:hover {
    box-shadow: 0 10px 36px rgba(12,10,46,.2);
}
.home-modern .str-cine__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.25,.46,.45,.94);
    mix-blend-mode: normal;
    filter: none;
}
.home-modern .str-cine:hover .str-cine__img { transform: scale(1.03); }
.home-modern .str-cine__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(12,10,46,0) 0%,
        rgba(12,10,46,.02) 30%,
        rgba(12,10,46,.28) 65%,
        rgba(12,10,46,.72) 100%
    );
    pointer-events: none;
}
.home-modern .str-cine__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .45;
    transition: opacity .35s ease, background .3s ease, transform .35s ease, box-shadow .35s ease;
    z-index: 2;
}
.home-modern .str-cine:hover .str-cine__play {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255,255,255,.1);
}
.home-modern .str-cine__play:hover {
    background: rgba(255,255,255,.2);
    transform: translate(-50%, -50%) scale(1.05);
}
.home-modern .str-cine__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.15rem 1rem;
    z-index: 1;
    text-align: left;
}
.home-modern .str-cine__name {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.005em;
    line-height: 1.3;
}
.home-modern .str-cine__role {
    display: block;
    font-size: .62rem;
    font-weight: 400;
    color: rgba(255,255,255,.45);
    margin-top: .08rem;
    margin-bottom: .4rem;
}
.home-modern .str-cine__quote {
    font-size: .8rem !important;
    font-weight: 500;
    color: rgba(255,255,255,.85) !important;
    line-height: 1.4 !important;
    margin: 0;
    letter-spacing: -.008em;
}
.home-modern .str-cine__subline {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    margin-top: .2rem;
}
.home-modern .str-cine-logo {
    margin-top: .875rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-modern .str-cine-logo img {
    height: 100%;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
    opacity: .4;
    filter: grayscale(100%);
    mix-blend-mode: multiply;
    transition: opacity .35s ease, filter .35s ease;
}
.home-modern .str-cine-col:hover .str-cine-logo img {
    opacity: .65;
    filter: grayscale(15%);
}
.home-modern .str-cine-closer {
    text-align: center;
    font-size: .95rem !important;
    color: var(--s-g600) !important;
    margin: 1.5rem 0 0;
    line-height: 1.5 !important;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 991px) {
    .home-modern .str-testimonials {
        --t-h2: 1.5rem;
        --t-subtitle: .88rem;
    }
    .home-modern .str-testi-card { flex: 0 0 270px; }
    .home-modern .str-cine-strip { gap: .5rem; }
    .home-modern .str-cine__content { padding: 1rem .875rem; }
    .home-modern .str-cine__name { font-size: .72rem; }
    .home-modern .str-cine__quote { font-size: .74rem !important; }
    .home-modern .str-cine__play { width: 40px; height: 40px; }
    .home-modern .str-cine-logo { height: 20px; }
    .home-modern .str-cine-logo img { max-width: 80px; }
    .home-modern .str-testi-metrics {
        gap: .65rem;
        padding: .5rem .75rem;
        border-radius: 1rem;
    }
    .home-modern .str-testi-metric--logo { padding-left: .45rem; }
    .home-modern .str-testi-scroll__arrow--left { left: -10px; }
    .home-modern .str-testi-scroll__arrow--right { right: -10px; }
}

@media (max-width: 767px) {
    .home-modern .str-testimonials {
        --t-h2: 1.35rem;
        --t-subtitle: .88rem;
        --t-subtitle-lh: 1.7;
    }
    .home-modern .str-testimonials p { font-size: .9rem !important; line-height: 1.7 !important; }
    .home-modern .str-cine-strip {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: .75rem;
        padding-bottom: .5rem;
        max-width: 100%;
        margin: 0;
    }
    .home-modern .str-cine-col { flex: 0 0 80%; scroll-snap-align: start; }
    .home-modern .str-cine { aspect-ratio: 4/5; }
    .home-modern .str-cine__play { opacity: .6; width: 44px; height: 44px; }
    .home-modern .str-cine__content { padding: 1.1rem 1rem; }
    .home-modern .str-cine__quote { font-size: .82rem !important; }
    .home-modern .str-cine-logo { margin-top: .5rem; }
    .home-modern .str-cine-closer { font-size: .82rem !important; line-height: 1.6 !important; }
    .home-modern .str-testi-headline { font-size: 1.25rem; }
    .home-modern .str-testi-sub { font-size: .84rem !important; line-height: 1.65 !important; }
    .home-modern .str-testi-sub--followup { font-size: .8rem !important; }
}

@media (max-width: 575px) {
    .home-modern .str-testimonials {
        --t-h2: 1.2rem;
        --t-subtitle: .84rem;
        --t-subtitle-lh: 1.75;
    }
    .home-modern .str-testimonials p { font-size: .86rem !important; line-height: 1.75 !important; }
    .home-modern .str-cine-col { flex: 0 0 85%; }
    .home-modern .str-cine-closer { font-size: .78rem !important; }
}