/* 101926 // node/101926.css // ncf_tcc_Cache_node/101926.css */

/***********************
FLEXBOX-MODELL v19-12-18
***********************/

/*Allgemeine Einstellungen für die Boxen*/

    #page .referenz {
        border-bottom: 1px darkgrey dotted;
    }

    #page .flex-wrapper {
        margin: 30px 0px;
    }

    #page .flex-wrapper .flex-item {
        background-color: rgba(220,220,220,.66);
        xborder: 1px darkgrey solid;
        xpadding: 2%;
        margin: 0 1% 2% 0%;
        width: 100%;
    }
    
    #page .flex-wrapper .flex-item > div {
        padding: 25px 20px 30px 30px;
    }
    
    #page .flex-wrapper .randlos > div {
        padding: 0;
    }
    
    #page .flex-wrapper IMG {
        width: 100%; height: auto;
    }
    
    #page .flex-wrapper STRONG {
        color: rgba(225,65,26,1);
    }

@media only screen and (min-width: 768px) {

    #page .flex-wrapper > div {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }

    /*Verschiedene Breiten festlegen
    (Wenn keine Werte, dann automatische gleiche Verteilung)*/
    
        #page .xxxflex-wrapper .box1,
        #page .xxxflex-wrapper .box3,
        #page .xxxflex-wrapper .box4 {
            width: 20%;
        }
    
        #page .xxxflex-wrapper .box2 {
            width: 40%;
        }

    /*Inhalte vertikal zentrieren bei voller Höhe
    Klasse .flex-zentriert in die Wrapper-Struktur schreiben*/
    
        #page .flex-zentriert > div > div {
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            align-items: center; /*zentriert den Inhalt vertikal*/
        }
        
        #page .flex-zentriert > div > div > div {
            width: 100%;
        }
}

@media only screen and (max-width: 768px) {

    #page .flex-wrapper .flex-item {
        width: 98% !important; /*100 minus margin*/
    }
}