/*=========================================================================================================*/
/* CSS Document Grid-Layout */
/*=========================================================================================================*/

.grid-container {
    width: 97%;
    max-width: 1020px; /*Begrenzung für große Bildschirme, damit Layout noch gut aussieht*/
    margin: 0 auto;
}
/*  Reihe in der Spalten angelegt werden sollen*/
.row {
    clear: both;
    padding: 0;
    margin: 0;
}
/*=========================================================================================================*/
/*  Grundsätzliches Spalten SETUP  */
.col {
    display: block;
    float: left; /*jede Spalte wird nach links gefloatet*/
    margin: 1% 0 0 0; /*jede Spalte erhält oben einen Abstand*/
    padding-left: 1%;
}

/*Abstand für die erste Spalte wird links auf 0 gesetzt*/
.col:first-child {margin-left: 0;}

/*============================================================================================================*/

/*  Bei weniger als 480 Pixel Viewportbreite alle Spalten 100% Breite und damit untereinander */
@media only screen and (max-width: 481px) {
    .small-1 {
        width: 100%;
        margin-left: 0;
    }
}

/* Zwischen 481 und 768 Pixel Viewportbreite 6 Spalten Layout */
@media only screen and (min-width: 481px)and (max-width: 769px) {
    .medium-1 {width: 16.66%;}
    .medium-2 {width: 33.33%;}
    .medium-3 {width: 50%;}
    .medium-4 {width: 66.66%;}
    .medium-5 {width: 83.33%;}
    .medium-6 {width: 100%;}

    .medium-offset-1 {margin-left: 16.66%;}
    .medium-offset-2 {margin-left: 33.33%;}
    .medium-offset-3 {margin-left: 50%;}
    .medium-offset-4 {margin-left: 66.66%;}
    .medium-offset-5 {margin-left: 83.33%;}
}

/* ab 768 Pixel Viewportbreite 12 Spalten Layout */
@media only screen and (min-width: 769px) {
    .large-1 {width: 8.33%;}
    .large-2 {width: 16.66%;}
    .large-3 {width: 25%;}
    .large-4 {width: 33.33%;}
    .large-5 {width: 41.66%;}
    .large-6 {width: 50%;}
    .large-7 {width: 58.33%;}
    .large-8 {width: 66.66%;}
    .large-9 {width: 75%;}
    .large-10 {width: 83.33%;}
    .large-11 {width: 91.66%;}
    .large-12 {width: 100%;}

    .large-offset-1 {margin-left: 8.33%;}
    .large-offset-2 {margin-left: 16.66%;}
    .large-offset-3 {margin-left: 25%;}
    .large-offset-4 {margin-left: 33.33%;}
    .large-offset-5 {margin-left: 41.66%;}
    .large-offset-6 {margin-left: 50%;}
    .large-offset-7 {margin-left: 58.33%;}
    .large-offset-8 {margin-left: 668.663%;}
    .large-offset-9 {margin-left: 75%;}
    .large-offset-10 {margin-left: 83.33%;}
    .large-offset-11 {margin-left: 91.66%;}
}