/* ==========================================================================
   Ars Legis – Inhalts-Spalten (ersetzt gridelements / bootstrap_grids)
   Aufeinanderfolgende Inhaltselemente mit Rahmen "Spalte xx %" stehen
   nebeneinander, alle anderen Elemente nehmen die volle Breite ein.
   ========================================================================== */

#content_start,
#content1 {
    --ce-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--ce-gap);
}

/* Standard: volle Breite */
#content_start > *,
#content1 > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}

/* Spalten ab Tablet-Breite */
@media screen and (min-width: 768px) {
    #content_start > .ce-col,
    #content1 > .ce-col {
        flex: 0 0 calc(var(--ce-w) * 100% - var(--ce-gap) * (1 - var(--ce-w)));
        max-width: calc(var(--ce-w) * 100% - var(--ce-gap) * (1 - var(--ce-w)));
    }
}

.ce-col-1 { --ce-w: 0.083333; }
.ce-col-2 { --ce-w: 0.166667; }
.ce-col-3 { --ce-w: 0.250000; }
.ce-col-4 { --ce-w: 0.333333; }
.ce-col-5 { --ce-w: 0.416667; }
.ce-col-6 { --ce-w: 0.500000; }
.ce-col-7 { --ce-w: 0.583333; }
.ce-col-8 { --ce-w: 0.666667; }
.ce-col-9 { --ce-w: 0.750000; }
.ce-col-10 { --ce-w: 0.833333; }
.ce-col-11 { --ce-w: 0.916667; }
.ce-col-12 { --ce-w: 1.000000; }

/* Bilder in Spalten nie breiter als die Spalte */
.ce-col img {
    max-width: 100%;
    height: auto;
}