﻿

#blockEditor > .beContainer > .beItemContainer,
#blockEditor > .HintergrundBlauTriangelUntenRechtsWrapper > .beContainer > .beItemContainer {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 40px 30px 40px;
}

#blockEditor .beContainer .backgroundFullWidth {
    max-width: 1920px;
    padding: 0;
    --column-gap: 0%;
}

[data-columncount="2"] > .beContainerColumn.SpalteHintergrundHellblau {
    width: Calc(50%);
    overflow: hidden;
}

.SpalteHintergrundHellblau > .beContainer {
    max-width: 580px;
    float: right;
    clear: both;
    overflow: hidden;
    padding: 25px 50px 25px 25px;
}

[data-columncount="2"] > .beContainerColumn.SpalteHintergrundOrange {
    width: Calc(50%);
    overflow: hidden;
}

.SpalteHintergrundOrange > .beContainer {
    max-width: 580px;
    float: left;
    clear: both;
    overflow: hidden;
    padding: 25px 25px 25px 50px;
}

.beItem[data-itemname="Card"] h2 {
    font-size: 24px;
}

.beItem[data-itemname="Card"] h3 {
    font-size: 23px;
}

@media screen and (max-width: 767.9px) {

    .SpalteHintergrundHellblau > .beContainer {
        max-width: 100%;
        float: none;
    }

    .SpalteHintergrundOrange > .beContainer {
        max-width: 100%;
        float: none;
    }

    [data-columncount="2"] > .beContainerColumn.SpalteHintergrundHellblau {
        width: 100%;
    }

    [data-columncount="2"] > .beContainerColumn.SpalteHintergrundOrange {
        width: 100%;
    }

    .SpalteHintergrundOrange > .beContainer {
        padding: 25px 25px 25px 35px;
    }
}

@media screen and (max-width: 650px) {

    .beItem[data-itemname="Card"] {
        width: 100%;
    }
}


@media screen and (max-width: 500px) {

    #blockEditor > .beContainer > .beItemContainer,
    #blockEditor > .HintergrundBlauTriangelUntenRechtsWrapper > .beContainer > .beItemContainer {
        padding: 0 25px 30px 25px;
    }

    #blockEditor .beContainer .backgroundFullWidth {
        padding: 0;
    }

    .beItem[data-itemname="Card"] h2 {
        font-size: 21px;
    }
    
    .beItem[data-itemname="Card"] h3 {
        font-size: 20px;
    }
}

@media screen and (max-width: 300px) {

    #blockEditor > .beContainer > .beItemContainer,
    #blockEditor > .HintergrundBlauTriangelUntenRechtsWrapper > .beContainer > .beItemContainer {
        padding: 0 15px 30px 15px;
    }
}

