/*************************************************************************************************/
/* CSS-Anweisungen zur Realisierung eines mehrspaltigen Seitenlayout mit Float-Boxen.            */
/* Dies ist eine Alternative zu der Realisierung des dreispaltigen Layouts mit FLex-Boxen.       */
/* Die Summe der Spalten innerhalb eines ui-g Elements muss stets 12 ergeben.                    */
/*                                                                                               */
/* Die Spaltenbreiten können in drei Stufen für verschiedene Bildschirmbreiten angegeben werden. */
/*************************************************************************************************/

.ui-g {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.ui-g-nopad {padding: 0;}
.ui-g-pad {padding: 0.5em;}

.ui-g-1, .ui-g-2, .ui-g-3, .ui-g-4, .ui-g-5, .ui-g-6, .ui-g-7, .ui-g-8, .ui-g-9, .ui-g-10, .ui-g-11, .ui-g-12 {
    float: left;
    box-sizing: border-box;
}
.ui-g-0 {width: 0;}
.ui-g-1 {width: 8.3333%;}
.ui-g-2 {width: 16.66666667%;}
.ui-g-3 {width: 25%;}
.ui-g-4 {width: 33.33333333%;}
.ui-g-5 {width: 41.66666667%;}
.ui-g-6 {width: 50%;}
.ui-g-7 {width: 58.33333333%}
.ui-g-8 {width: 66.66666667%;}
.ui-g-9 {width: 75%;}
.ui-g-10 {width: 83.3333%;}
.ui-g-11 {width: 91.66666667%}
.ui-g-12 {width: 100%;}

/* Responsive Grid (mittlere Screensize), ca. 640px */
@media screen and (min-width:40.063em) {
    .ui-md-nopad {padding: 0;}
    .ui-md-pad {padding: 0.5em;}
    .ui-md-0 {width: 0;}
    .ui-md-1 {width: 8.33333333%}
    .ui-md-2 {width: 16.66666667%}
    .ui-md-3 {width: 25%}
    .ui-md-4 {width: 33.33333333%}
    .ui-md-5 {width: 41.66666667%}
    .ui-md-6 {width: 50%}
    .ui-md-7 {width: 58.33333333%}
    .ui-md-8 {width: 66.66666667%}
    .ui-md-9 {width: 75%}
    .ui-md-10 {width: 83.33333333%}
    .ui-md-11 {width: 91.66666667%}
    .ui-md-12 {width: 100%}
}

/* Responsive Grid (hohe Screensize), ca. 1024px */
@media screen and (min-width:64.063em) {
    .ui-lg-nopad {padding: 0;}
    .ui-lg-pad {padding: 0.5em;}
    .ui-lg-0{width: 0}
    .ui-lg-1{width: 8.33333333%}
    .ui-lg-2{width: 16.66666667%}
    .ui-lg-3{width: 25%}
    .ui-lg-4{width: 33.33333333%}
    .ui-lg-5{width: 41.66666667%}
    .ui-lg-6{width: 50%}
    .ui-lg-7{width: 58.33333333%}
    .ui-lg-8{width: 66.66666667%}
    .ui-lg-9{width: 75%}
    .ui-lg-10{width: 83.33333333%}
    .ui-lg-11{width: 91.66666667%}
    .ui-lg-12{width: 100%}
}