/* Styling fuer den Testimonial Ticker - 2.2.0 */
.dipi-testimonial-ticker-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 10px 0;
    background-color: #eaf5ff;
    border: 0px solid #a2b7cb;
    touch-action: pan-y pinch-zoom; /* Verbesserte Touch-Reaktion */
    -webkit-overflow-scrolling: touch; /* Fuer reibungsloses Scrollen auf iOS */
    will-change: transform; /* Hinweis fuer Browser-Optimierung */
}

/* Ticker Controls - jetzt zentriert */
.dipi-ticker-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Langsamer / Schneller: etwas kleiner als der Pause-Button */
.dipi-ticker-speed {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.dipi-ticker-speed .dashicons {
    color: #000000;
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.dipi-ticker-speed:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 1);
}

.dipi-ticker-speed:disabled {
    opacity: 0.35;
    cursor: default;
}

.dipi-ticker-speed:focus-visible {
    outline: 2px solid #1f5f99;
    outline-offset: 2px;
}

.dipi-ticker-toggle {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    outline: none;
    padding: 0;
    transition: background-color 0.2s ease; /* Smooth transition */
}

/* Verbesserte Sichtbarkeit fuer das Icon auf allen Geraeten */
.dipi-ticker-toggle .dashicons {
    color: #000000; /* Explizite schwarze Farbe fuer das Icon */
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dipi-ticker-toggle:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Sichtbarer Tastaturfokus (outline: none oben entfernt ihn sonst) */
.dipi-ticker-toggle:focus-visible {
    outline: 2px solid #1f5f99;
    outline-offset: 2px;
}

/* Hauptticker-Element */
.dipi-testimonial-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Fuer Hardware-Beschleunigung */
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

.dipi-testimonial-ticker-content {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    user-select: none; /* Verhindert Textauswahl beim Swipen */
    -webkit-user-select: none;
    transform: translate3d(0, 0, 0); /* Hardware-Beschleunigung forcieren */
}

/* Einzelne Testimonial-Elemente - KOMPAKTERES DESIGN */
.dipi-testimonial-item {
    display: inline-flex;
    margin-right: 0;
    white-space: normal;
    /* Trennlinie entfernt - wird jetzt links vom Bild platziert */
    padding: 10px 15px; /* Reduziertes Padding fuer kompakteres Design */
    min-width: 540px; 
    max-width: 700px;
    contain: content; /* Fuer bessere Performance */
}

.dipi-testimonial-item:last-child {
    /* Keine spezielle Behandlung mehr noetig */
}

/* Bild Styling - mit Trennlinien links und rechts */
.dipi-testimonial-image {
    flex: 0 0 60px; /* Kleineres Bild */
    margin-right: 12px;
    padding-left: 12px; /* Padding fuer Abstand zur linken Trennlinie */
    padding-right: 12px; /* Padding fuer Abstand zur rechten Trennlinie */
    border-left: 1px solid #a2b7cb; /* Vertikale Trennlinie links vom Bild */
    border-right: 1px solid #a2b7cb; /* Vertikale Trennlinie rechts vom Bild */
    display: flex; /* Flexbox fuer vertikale Zentrierung */
    align-items: center; /* Vertikal zentrieren */
    align-self: stretch; /* Container auf volle Hoehe ausdehnen */
}

.dipi-testimonial-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* Explizit kreisfoermig */
    border: 1px solid #a2b7cb; /* Leichter Rahmen zur Hervorhebung des Bildes */
    flex-shrink: 0; /* Verhindert Verzerrung */
}

/* Textinhalte - kompakteres Design */
.dipi-testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikal zentrieren */
}

.dipi-testimonial-text {
    font-style: italic;
    margin-bottom: 3px; /* Weniger Abstand */
    line-height: 1.3; /* Kompaktere Zeilenhoehe */
    font-size: 0.9em;
    color: #1f1f1f;
    margin-bottom: 0px !important;
}

.dipi-testimonial-info {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 2px;
}

/* Name und Company im gleichen Stil */
.dipi-testimonial-name {
    font-weight: normal;
    color: #363636;
    font-size: 0.8em;
    margin-bottom: 0px !important;
}

.dipi-testimonial-position {
    font-size: 0.8em;
    line-height: 1.2em;
    color: #363636;
}

/* Cursor Style fuer Desktop Swipe */
@media (min-width: 769px) {
    .dipi-testimonial-ticker {
        cursor: grab;
    }
    
    .dipi-testimonial-ticker:active {
        cursor: grabbing;
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .dipi-testimonial-item {
        padding: 8px 12px;
        min-width: 500px;
    }
    
    .dipi-testimonial-image {
        flex: 0 0 50px;
        margin-right: 10px;
        padding-left: 10px; /* Padding fuer linke Trennlinie */
        padding-right: 10px; /* Padding fuer rechte Trennlinie */
        border-left: 1px solid #a2b7cb; /* Linke Trennlinie */
        border-right: 1px solid #a2b7cb; /* Rechte Trennlinie */
        display: flex; /* Flexbox fuer Zentrierung */
        align-items: center; /* Vertikal zentrieren */
        align-self: stretch; /* Volle Hoehe */
    }
    
    .dipi-testimonial-image img {
        width: 50px;
        height: 50px;
        border-radius: 50%; /* Explizit kreisfoermig */
        flex-shrink: 0; /* Keine Verzerrung */
    }
    
    .dipi-testimonial-info {
        flex-direction: column; /* Untereinander bei kleineren Bildschirmen */
        align-items: flex-start;
        gap: 0;
    }
}

/* Spezielle Smartphone-Anpassungen mit dynamischen Breiten */
@media (max-width: 480px) {
    .dipi-testimonial-ticker .dipi-testimonial-item {
        display: block !important; /* Aendert zu Block statt Flex fuer Text-Umfliessung */
        padding: 12px !important; /* Einheitliches Padding */
        min-width: 300px !important; /* Basis-Mindestbreite */
        min-height: 80px !important; /* Einheitliche Mindesthoehe */
    }
    
    /* Dynamische Breitenunterschiede basierend auf Textlaenge */
    .dipi-testimonial-ticker .dipi-testimonial-item.short-testimonial {
        min-width: 300px !important; /* Schmaler fuer kurze Texte */
    }
    
    .dipi-testimonial-ticker .dipi-testimonial-item.medium-testimonial {
        min-width: 350px !important; /* Mittlere Breite */
    }
    
    .dipi-testimonial-ticker .dipi-testimonial-item.long-testimonial {
        min-width: 420px !important; /* Deutlich breiter fuer lange Texte */
    }
    
    /* Einheitliche Schriftgroesse fuer alle Testimonials */
    .dipi-testimonial-ticker .dipi-testimonial-item .dipi-testimonial-text {
        font-size: 0.9em !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }
    
    .dipi-testimonial-ticker .dipi-testimonial-image {
        float: left !important; /* Bild links fuer Text-Umfliessung */
        margin-right: 10px !important;
        margin-bottom: 5px !important;
        width: 70px !important; /* Breiter wegen Padding links und rechts */
        height: 100% !important; /* Volle Hoehe fuer durchgehende Trennlinien */
        padding-left: 10px !important; /* Padding fuer linke Trennlinie */
        padding-right: 10px !important; /* Padding fuer rechte Trennlinie */
        border-left: 1px solid #a2b7cb !important; /* Linke Trennlinie */
        border-right: 1px solid #a2b7cb !important; /* Rechte Trennlinie */
        display: flex !important; /* Flexbox auch auf Mobile */
        align-items: flex-start !important; /* Oben ausrichten auf Mobile */
        padding-top: 5px !important; /* Kleiner Abstand von oben */
        box-sizing: border-box !important; /* Border und Padding in Breite einrechnen */
    }
    
    .dipi-testimonial-ticker .dipi-testimonial-image img {
        width: 50px !important; /* Feste Bildgroesse */
        height: 50px !important; /* Feste Bildgroesse */
        border-radius: 50% !important; /* Explizit kreisfoermig auch auf Mobile */
        flex-shrink: 0 !important; /* Keine Verzerrung */
        object-fit: cover !important; /* Seitenverhaeltnis beibehalten */
        display: block !important; /* Block-Element fuer saubere Darstellung */
    }
    
    .dipi-testimonial-ticker .dipi-testimonial-content {
        /* Kein flex auf Mobilgeraeten, damit Text um das Bild fliessen kann */
        display: block !important;
        overflow: hidden !important; /* Erzwingt die Umfliessung */
    }
    
    /* Verstaerkte Sichtbarkeit des Play/Pause-Buttons */
    .dipi-ticker-toggle {
        background-color: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #aaa !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    .dipi-ticker-speed {
        width: 30px !important;
        height: 30px !important;
    }

    .dipi-ticker-toggle .dashicons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
}