/* Grid System - Mobile First */
.grid0,
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
    width: 100%;
}

/* Desktop Grid System */
@media screen and (min-width: 768px) {
    /* Layout Containers */
    header[role="banner"],
    nav[role="navigation"],
    div.headerwrap.mainheader_center,
    div[class="wrap"],
    footer[role="contentinfo"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* Grid Items */
    .grid0,
    .grid1,
    .grid2,
    .grid3,
    .grid4,
    .grid5,
    .grid6,
    .grid7,
    .grid8,
    .grid9,
    .grid10,
    .grid11,
    .grid12,
    header.mainheader_center {
        display: inline-block;
        margin-right: 1.041666666667%;
        margin-left: 1.041666666667%;
    }

    /* Full Width Elements */
    div.headerwrap.mainheader_full,
    div.headerwrap.mainheader_full header.mainheader,
    div.headerwrap.mainheader_center header.mainheader {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    div.headerwrap.mainheader_full div {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    div.headerwrap.mainheader_center header.mainheader div.headertext h2 {
        margin-left: 0;
    }

    /* Content with Margins */
    div.headerwrap.mainheader_full div.headertext p,
    footer[role="contentinfo"] .footercontent {
        margin-right: 1.041666666667%;
        margin-left: 1.041666666667%;
    }

    /* Container Max Widths */
    header > .inside,
    div.headerwrap.mainheader_center,
    div.wrap,
    div.headerwrap.mainheader_full div.headertext,
    footer > .inside,
    nav[role="navigation"] div.navwrap {
        max-width: 1400px;
        width: 90%;
        margin: 0 auto;
    }

    /* Grid Widths */
    .grid0  { width: 97.91666666666667%; }
    .grid1  { width: 6.25%; }
    .grid2  { width: 14.58333333333333%; }
    .grid3  { width: 22.91666666666667%; }
    .grid4  { width: 31.25%; }
    .grid5  { width: 39.58333333333333%; }
    .grid6  { width: 47.91666666666667%; }
    .grid7  { width: 56.25%; }
    .grid8  { width: 64.583333333333%; }
    .grid9  { width: 72.91666666666667%; }
    .grid10 { width: 81.25%; }
    .grid11 { width: 89.58333333333333%; }
    .grid12 { width: 97.91666666666667%; }

    /* Grid System ohne Margin (für Sidebar etc.) */
    div.grid0.nomargin,
    div.grid1.nomargin,
    div.grid2.nomargin,
    div.grid3.nomargin,
    div.grid4.nomargin,
    div.grid5.nomargin,
    div.grid6.nomargin,
    div.grid7.nomargin,
    div.grid8.nomargin,
    div.grid9.nomargin,
    div.grid10.nomargin,
    div.grid11.nomargin,
    div.grid12.nomargin {
        margin: 0;
    }

    /* No Margin Grid Widths */
    div.grid0.nomargin  { width: 100%; }
    div.grid1.nomargin  { width: 8.333333333333333%; }
    div.grid2.nomargin  { width: 16.66666666666667%; }
    div.grid3.nomargin  { width: 25%; }
    div.grid4.nomargin  { width: 33.33333333333333%; }
    div.grid5.nomargin  { width: 41.66666666666667%; }
    div.grid6.nomargin  { width: 50%; }
    div.grid7.nomargin  { width: 58.33333333333333%; }
    div.grid8.nomargin  { width: 66.66666666666666%; }
    div.grid9.nomargin  { width: 75%; }
    div.grid10.nomargin { width: 83.33333333333333%; }
    div.grid11.nomargin { width: 91.66666666666666%; }
    div.grid12.nomargin { width: 100%; }
}