* {
        box-sizing: border-box;
    }
    
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

/* Zwei gleichgroße Flexboxen nebeneinander oder untereinander */
    .flex-item2a-left {
        padding: 10px;
        flex: 50%;
    }

    .flex-item2a-right {
        padding: 10px;
        flex: 50%;
    }

    @media (max-width: 800px) {
    .flex-item2a-left, .flex-item2a-right {
        flex: 100%;
    }
    }

/* Zwei ungleichgroße Flexboxen (30/70) nebeneinander oder untereinander */
    .flex-item2b-left {
        padding: 10px;
        flex: 30%;
        }
    
        .flex-item2b-right {
        padding: 10px;
        flex: 70%;
        }
    
        @media (max-width: 800px) {
            .flex-item2b-left, .flex-item2b-right {
                flex: 100%;
            }
        }

/* Zwei ungleichgroße Flexboxen (70/30) nebeneinander oder untereinander. */
.flex-item2c-left {
    padding: 10px;
    flex: 70%;
    }

    .flex-item2c-right {
    padding: 10px;
    flex: 30%;
    }

    @media (max-width: 800px) {
        .flex-item2c-left, .flex-item2b-right {
            flex: 100%;
        }
    }  

/* Drei gleichgroße Flexboxen (33/33/33) nebeneinander oder untereinander */
    .flex-item3-left {
        padding: 10px;
        flex: 33%;
    }

    .flex-item3-center {
        padding: 10px;
        flex: 33%;
    }

    .flex-item3-right {
        padding: 10px;
        flex: 33%;
    }

    @media (max-width: 800px) {
    .flex-item3-left, .flex-item3-center, .flex-item3-right {
        flex: 100%;
    }
    }

/* Vier gleichgroße Flexboxen (25/25/25/25) nebeneinander oder untereinander */
    .flex-item4-left {
        padding: 10px;
        flex: 25%;
    }

    .flex-item4-center1 {
        padding: 10px;
        flex: 25%;
    }

    .flex-item4-center2 {
        padding: 10px;
        flex: 25%;
    }

    .flex-item4-right {
        padding: 10px;
        flex: 25%;
    }

    @media (max-width: 800px) {
    .flex-item4-left, .flex-item4-center1, .flex-item4-center2, .flex-item4-right {
        flex: 100%;
    }
    }

/* Sechs gleichgroße Flexboxen (16.6/16.6/16.6/16.6/16.6/16.6) nebeneinander oder untereinander */
    .flex-item6-left {
        padding: 10px;
        flex: 16.6%;
    }

    .flex-item6-center1 {
        padding: 10px;
        flex: 16.6%;
    }

    .flex-item6-center2 {
        padding: 10px;
        flex: 16.6%;
    }

    .flex-item6-center3 {
        padding: 10px;
        flex: 16.6%;
    }

    .flex-item6-center4 {
        padding: 10px;
        flex: 16.6%;
    }

    .flex-item6-right {
        padding: 10px;
        flex: 16.6%;
    }

    @media (max-width: 800px) {
    .flex-item6-left, .flex-item6-center1, .flex-item6-center2, .flex-item6-center3, .flex-item6-center4, .flex-item4-right {
        flex: 100%;
    }
    }