/* ===== OO Col =====
   12-Spalten-Flex-Grid, zusammen mit .oo-row verwendet.
   Horizontale Abstaende werden ueber column-gap auf der Row gesteuert.
   ===================== */

.oo-col {
    box-sizing: border-box;
    min-width: 0;
    flex: 1 1 0;
}

/* Gap zwischen Spalten wird direkt per inline-style auf .oo-row gesetzt (Row.Gap).
   --oo-row-gap wird von Column.Offset fuer die margin-Berechnung benoetigt. */

/* ── Feste Spans (alle Viewports) ─────────────────────────────────────────── */

.oo-col--1 {
    flex: 0 0 calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--2 {
    flex: 0 0 calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--3 {
    flex: 0 0 calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--4 {
    flex: 0 0 calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--5 {
    flex: 0 0 calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--6 {
    flex: 0 0 calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--7 {
    flex: 0 0 calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--8 {
    flex: 0 0 calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--9 {
    flex: 0 0 calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--10 {
    flex: 0 0 calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--11 {
    flex: 0 0 calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
    max-width: calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
}

.oo-col--12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ── Breakpoint sm (>= 576px) ────────────────────────────────────────────── */

@media (min-width: 576px) {
    .oo-col--sm-1 {
        flex: 0 0 calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-2 {
        flex: 0 0 calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-3 {
        flex: 0 0 calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-4 {
        flex: 0 0 calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-5 {
        flex: 0 0 calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-6 {
        flex: 0 0 calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-7 {
        flex: 0 0 calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-8 {
        flex: 0 0 calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-9 {
        flex: 0 0 calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-10 {
        flex: 0 0 calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-11 {
        flex: 0 0 calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Breakpoint md (>= 768px) ────────────────────────────────────────────── */

@media (min-width: 768px) {
    .oo-col--md-1 {
        flex: 0 0 calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-2 {
        flex: 0 0 calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-3 {
        flex: 0 0 calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-4 {
        flex: 0 0 calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-5 {
        flex: 0 0 calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-6 {
        flex: 0 0 calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-7 {
        flex: 0 0 calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-8 {
        flex: 0 0 calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-9 {
        flex: 0 0 calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-10 {
        flex: 0 0 calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-11 {
        flex: 0 0 calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Breakpoint lg (>= 992px) ────────────────────────────────────────────── */

@media (min-width: 992px) {
    .oo-col--lg-1 {
        flex: 0 0 calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-2 {
        flex: 0 0 calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-3 {
        flex: 0 0 calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-4 {
        flex: 0 0 calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-5 {
        flex: 0 0 calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-6 {
        flex: 0 0 calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-7 {
        flex: 0 0 calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-8 {
        flex: 0 0 calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-9 {
        flex: 0 0 calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-10 {
        flex: 0 0 calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-11 {
        flex: 0 0 calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Breakpoint xl (>= 1200px) ───────────────────────────────────────────── */

@media (min-width: 1200px) {
    .oo-col--xl-1 {
        flex: 0 0 calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(1 / 12 * 100% - 11 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-2 {
        flex: 0 0 calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(2 / 12 * 100% - 10 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-3 {
        flex: 0 0 calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(3 / 12 * 100% - 9 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-4 {
        flex: 0 0 calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(4 / 12 * 100% - 8 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-5 {
        flex: 0 0 calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(5 / 12 * 100% - 7 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-6 {
        flex: 0 0 calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(6 / 12 * 100% - 6 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-7 {
        flex: 0 0 calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(7 / 12 * 100% - 5 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-8 {
        flex: 0 0 calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(8 / 12 * 100% - 4 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-9 {
        flex: 0 0 calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(9 / 12 * 100% - 3 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-10 {
        flex: 0 0 calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(10 / 12 * 100% - 2 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-11 {
        flex: 0 0 calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
        max-width: calc(11 / 12 * 100% - 1 / 12 * var(--oo-row-gap, 0px));
    }

    .oo-col--xl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}