/* -----------------------------------------------
GENERAL
----------------------------------------------- */

.mehrspalter {
    position: relative;
    overflow-x: hidden;
    display: table;
    width: 100%;
}
.mehrspalter.contentwidth {
    max-width: 1100px;
    margin: 0 auto;
}
.mehrspalter.padding-both .mehrspalter-content {
    padding: 2rem;
}
.mehrspalter.padding-top .mehrspalter-content {
    padding: 2rem 2rem 0 2rem;
}
.mehrspalter.padding-bottom .mehrspalter-content {
    padding: 0 2rem 2rem 2rem;
}
.mehrspalter.padding-disabled .mehrspalter-content {
    padding: 0 2rem;
}
.mehrspalter-content {
    max-width: 1500px;
    margin: 0 auto;
}

/* -----------------------------------------------
COLUMN LAYOUT
----------------------------------------------- */

.mehrspalter-content > .neos-contentcollection {
    margin: 0 -1rem;
    display: table;
    min-width: calc(100% + 2rem);
}
.mehrspalter .spalte {
    padding: 0 1rem 1rem;
    float: left;
    display: table;
}
.mehrspalter.columns2 .spalte {
    width: 50%;
}
.mehrspalter.columns3 .spalte {
    width: 33.33%;
}
.mehrspalter.columns4 .spalte {
    width: 25%;
}
.mehrspalter.columns5 .spalte {
    width: 20%;
}

/* -----------------------------------------------
COLUMN VERTICAL
----------------------------------------------- */

.mehrspalter .spalte > .neos-contentcollection {
    display: table-cell;
}
.mehrspalter.vertical-top .spalte > .neos-contentcollection {
    vertical-align: top;
}
.mehrspalter.vertical-center .spalte > .neos-contentcollection {
    vertical-align: middle;
}
.mehrspalter.vertical-bottom .spalte > .neos-contentcollection {
    vertical-align: bottom;
}

/* -----------------------------------------------
BACKGROUND IMAGE
----------------------------------------------- */

.mehrspalter-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

/* -----------------------------------------------
BACKGROUND IMAGE OVERLAY
----------------------------------------------- */

.mehrspalter.black-overlay .mehrspalter-image::after,
.mehrspalter.white-overlay .mehrspalter-image::after,
.mehrspalter.default-overlay .mehrspalter-image::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .35;
}
.mehrspalter.black-overlay .mehrspalter-image::after {
    background: #000;
}
.mehrspalter.white-overlay .mehrspalter-image::after {
    background: #FFF;
}
.mehrspalter.default-overlay .mehrspalter-image::after {
    background: rgb(19,68,168);
    background: linear-gradient(90deg, rgba(19,68,168,1) 0%, rgba(213,19,29,1) 100%);
}

/* -----------------------------------------------
BACKGROUND COLOR
----------------------------------------------- */

.mehrspalter.disabled-background {
    background: transparent;
}
.mehrspalter.white-background { 
    background: #FFF;
}
.mehrspalter.grey-background {
    background: #f4f7fa;
}
.mehrspalter.default-background {
    background: #d6412b;
}

/* -----------------------------------------------
RESPONSIVE
----------------------------------------------- */

@media (max-width: 900px) {
    .mehrspalter.columns4 .spalte {
        width: 50%;
    }
}
@media (max-width: 679px) {
    .mehrspalter.columns2 .spalte {
        width: 100%;
    }
    .mehrspalter.columns3 .spalte {
        width: 100%;
    }
    .mehrspalter.columns4 .spalte {
        width: 100%;
    }
}