/**
 * C4mulo5 Bild-Slider mit Text (c4mulo5-image-slider-text)
 *
 * Zweispaltig (Slider + Text), dunkles Design, Slider/Text per Klasse
 * links/rechts tauschbar. Fade-Slider mit Punkten und Pfeilen (Navigation
 * wird vom Frontend-JS erzeugt). Farben über CSS-Variablen anpassbar.
 */

.c4mulo5-image-slider-text {
    --ist-bg:          #111111;
    --ist-text:        #e9e9e9;
    --ist-muted:       #b8b8b8;
    --ist-heading:     #ffffff;
    --ist-quote:       #e58729;   /* Orange für das Zitat */
    --ist-cite:        #9a9a9a;
    --ist-dot:         rgba(255,255,255,0.35);
    --ist-dot-active:  #ffffff;
    --ist-arrow:       #ffffff;
    --ist-arrow-bg:    rgba(0,0,0,0.35);
    --ist-ratio:       3 / 4;     /* Slider-Seitenverhältnis (Hochformat) */
    --ist-gap:         52px;

    background-color: var(--ist-bg);
    color:            var(--ist-text);
}

/* ── Zwei-Spalten-Reihe ─────────────────────────────────────── */
.c4m5-ist-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--ist-gap);
}
.c4m5-ist-row > .c4m5-ist-slider-col,
.c4m5-ist-row > .c4m5-ist-text-col {
    flex:      1 1 0;
    min-width: 0;
    max-width: none;
    padding:   0;
}

/* Slider rechts statt links */
.c4mulo5-image-slider-text.c4m5-ist-img-right .c4m5-ist-slider-col { order: 2; }
.c4mulo5-image-slider-text.c4m5-ist-img-right .c4m5-ist-text-col   { order: 1; }

/* ── Slider ─────────────────────────────────────────────────── */
.c4m5-ist-slider {
    position:      relative;
    width:         100%;
    aspect-ratio:  var(--ist-ratio);
    overflow:      hidden;
    border-radius: 2px;
    background:    #1a1a1a;
}
.c4m5-ist-track {
    position: absolute;
    inset:    0;
}
.c4m5-ist-slide {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.c4m5-ist-slide.is-active {
    opacity:        1;
    pointer-events: auto;
}
.c4m5-ist-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Navigation (vom JS injiziert) */
.c4m5-ist-arrow {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    width:       42px;
    height:      42px;
    border:      none;
    border-radius: 50%;
    background:  var(--ist-arrow-bg);
    color:       var(--ist-arrow);
    font-size:   22px;
    line-height: 1;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    z-index:     3;
    opacity:     0;
    transition:  opacity 0.2s ease, background 0.2s ease;
}
.c4m5-ist-slider:hover .c4m5-ist-arrow { opacity: 1; }
.c4m5-ist-arrow:hover  { background: rgba(0,0,0,0.6); }
.c4m5-ist-prev { left: 12px; }
.c4m5-ist-next { right: 12px; }

.c4m5-ist-dots {
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     14px;
    display:    flex;
    justify-content: center;
    gap:        8px;
    z-index:    3;
}
.c4m5-ist-dot {
    width:        9px;
    height:       9px;
    border-radius: 50%;
    border:       none;
    padding:      0;
    background:   var(--ist-dot);
    cursor:       pointer;
    transition:   background 0.2s ease, transform 0.2s ease;
}
.c4m5-ist-dot.is-active {
    background: var(--ist-dot-active);
    transform:  scale(1.2);
}

/* ── Text-Spalte ────────────────────────────────────────────── */
.c4m5-ist-text-col p {
    color:       var(--ist-text);
    font-size:   0.96rem;
    line-height: 1.6;
    margin:      0 0 18px;
}
.c4m5-ist-tldr {
    color:          var(--ist-heading);
    font-weight:    700;
    margin:         26px 0 12px;
}
.c4m5-ist-list {
    list-style: none;
    margin:     0 0 24px;
    padding:    0;
}
.c4m5-ist-list li {
    color:       var(--ist-text);
    font-size:   0.96rem;
    line-height: 1.5;
    padding:     7px 0;
}
.c4m5-ist-quote {
    margin:        24px 0 0;
    padding:       4px 0 4px 18px;
    border-left:   4px solid var(--ist-quote);
}
.c4m5-ist-quote p {
    color:       var(--ist-quote);
    font-size:   1.15rem;
    font-weight: 600;
    font-style:  normal;
    margin:      0 0 6px;
}
.c4m5-ist-quote cite {
    color:      var(--ist-cite);
    font-style: italic;
    font-size:  0.9rem;
}

/* ── Responsive: untereinander ─────────────────────────────── */
@media (max-width: 767px) {
    .c4m5-ist-row { gap: 32px; }
    .c4mulo5-image-slider-text .c4m5-ist-slider-col,
    .c4mulo5-image-slider-text .c4m5-ist-text-col {
        flex:  1 1 100%;
        order: 0 !important;   /* Slider immer oben */
    }
}