:root {
    --padding-inline: 1rem;
    --content-max-width: 1400px;
    --breakout-max-width: 1400px;
    --gap: clamp(0.5rem, 2.2222vw, 1rem);
    /* 2rem bei 1440px (angenommen 1rem = 16px) */
    --col-width: calc((var(--content-max-width) - 11 * var(--gap)) / 12);
}

body {
    margin: 0;
}

/* Äußeres Grid mit benannten Linien und 12 Spalten Content */
.inside>*:not(script),
.full-width,
.mobile_menu .inner {
    display: grid;
    grid-template-columns:
        [full-width-start] var(--padding-inline) [content-start] minmax(300px, 1fr) [content-end] var(--padding-inline) [full-width-end];

    width: 100%;
}

@media (min-width: 480px) {

    .inside>*:not(script),
    .full-width {
        grid-template-columns:
            [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, calc((var(--breakout-max-width) - var(--content-max-width) - 2 * var(--gap)) / 2)) [content-start col-1] minmax(0, var(--col-width)) [col-2] minmax(0, var(--col-width)) [col-3] minmax(0, var(--col-width)) [col-4] minmax(0, var(--col-width)) [col-5] minmax(0, var(--col-width)) [col-6] minmax(0, var(--col-width)) [col-7] minmax(0, var(--col-width)) [col-8] minmax(0, var(--col-width)) [col-9] minmax(0, var(--col-width)) [col-10] minmax(0, var(--col-width)) [col-11] minmax(0, var(--col-width)) [col-12] minmax(0, var(--col-width)) [col-13 content-end] minmax(0, calc((var(--breakout-max-width) - var(--content-max-width) - 2 * var(--gap)) / 2)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
        gap: var(--gap);
    }

    /* Alle direkten Kinder des Grids landen standardmäßig im Contentbereich */

}

.inside>*>*,
.full-width>* {
    grid-column: content-start / content-end;
}

.breakout {
    grid-column: content;
}

@media (min-width: 480px) {
    .col-text {
        grid-column: col-2 / col-12;
    }

    .bild-links {
        grid-column: full-width-start / col-6;
    }

    .bild-rechts {
        grid-column: col-8 / full-width-end;
    }

    .text-rechts {
        grid-column: col-6 / col-12
    }

    .text-links {
        grid-column: col-2 / col-8;
    }

    .from-content-start-to-8 {
        grid-column: content-start / col-8;
    }


    .span-2 {
        grid-row: span 2;
    }

    .span-3 {
        grid-row: span 3;
    }

    .span-4 {
        grid-row: span 4;
    }

    .breakout {
        grid-column: breakout-start / breakout-end;
    }

}


.full-width {
    grid-column: full-width-start / full-width-end;
}


.header>* {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    >* {
        grid-column: 2 / 12;
    }

    gap: var(--gap);
}

.ce_metamodel_content.block {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
}