/**
 * C4mulo5 Feature-Split (c4mulo5-feature-split)
 *
 * Zwei versetzte Spalten (Text+Bild) im dunklen Design. Versatz durch
 * unterschiedliche Reihenfolge je Spalte + vertikalen Offset der rechten
 * Spalte. Farben über CSS-Variablen im Customizer überschreibbar.
 */

.c4mulo5-feature-split {
    --fsplit-bg:        #111111;
    --fsplit-text:      #e9e9e9;
    --fsplit-muted:     #b4b4b4;
    --fsplit-title:     #ffffff;
    --fsplit-icon:      #ffffff;
    --fsplit-gap-x:     48px;   /* Abstand zwischen den Spalten */
    --fsplit-gap-y:     32px;   /* Abstand Text ↔ Bild innerhalb einer Spalte */
    --fsplit-offset:    90px;   /* vertikaler Versatz der rechten Spalte */

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

/* ── Zwei-Spalten-Reihe ─────────────────────────────────────── */
.c4m5-fsplit-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--fsplit-gap-x);
    align-items: flex-start;
}
.c4m5-fsplit-col {
    flex:      1 1 0;
    min-width: 0;
    max-width: none;
    padding:   0;
    display:   flex;
    flex-direction: column;
    gap:       var(--fsplit-gap-y);
}

/* Versatz: die „Bild-oben"-Spalte startet höher/tiefer für den Treppen-Look */
.c4m5-fsplit-image-first {
    margin-top: var(--fsplit-offset);
}

/* Reihenfolge je Spalte */
.c4m5-fsplit-text-first  .c4m5-fsplit-text  { order: 1; }
.c4m5-fsplit-text-first  .c4m5-fsplit-image { order: 2; }
.c4m5-fsplit-image-first .c4m5-fsplit-image { order: 1; }
.c4m5-fsplit-image-first .c4m5-fsplit-text  { order: 2; }

/* ── Text-Block ─────────────────────────────────────────────── */
.c4m5-fsplit-head {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 14px;
}
.c4m5-fsplit-icon {
    color:     var(--fsplit-icon);
    font-size: 1.4rem;
    line-height: 1;
    flex:      0 0 auto;
}
.c4m5-fsplit-title {
    color:          var(--fsplit-title);
    font-size:      1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin:         0;
}
.c4m5-fsplit-desc {
    color:      var(--fsplit-muted);
    font-size:  0.92rem;
    line-height: 1.6;
    margin:     0;
}

/* ── Bild ───────────────────────────────────────────────────── */
.c4m5-fsplit-img {
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: cover;
    border-radius: 2px;
}

/* ── Responsive: untereinander, ohne Versatz ───────────────── */
@media (max-width: 767px) {
    .c4m5-fsplit-row {
        gap: 40px;
    }
    .c4mulo5-feature-split .c4m5-fsplit-col {
        flex:       1 1 100%;
        margin-top: 0;          /* Versatz auf Mobile aufheben */
    }
    /* Auf Mobile in jeder Spalte einheitlich: Text zuerst, dann Bild */
    .c4mulo5-feature-split .c4m5-fsplit-text  { order: 1 !important; }
    .c4mulo5-feature-split .c4m5-fsplit-image { order: 2 !important; }
}