html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: top; box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; WIDTH: 100%; height: auto;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

html, body, #main, main {height: 100%; width: 100%; font-size: 16px;}
section {width: 100%; min-height: 100%; padding-bottom: 3.5rem;}
html, body, input, textarea {font-family: "Yantramanav", Helvetica, Calibri, Arial, sans-serif; line-height: 1.75rem; font-size: 1rem;}
label {cursor: pointer}
input, textarea {border-radius: 4px;}
.b {font-weight: 700}

.gwrap {font-size: 0%; line-height: 0%; padding: 0 30px; text-align: center;}

/************************* TYPE ESSENTIALS - HANDLE WITH CARE *************************/
a {transition: all .2s ease;}
h1, h2, h3, h4, span.headl {font-weight: 300; line-height: 3.5rem;}
h1, h2 {font-size: 3em;}
h3, span.headl {font-size: 1.25em; line-height: 1.75rem; display: block;}
h4 {font-size: 1.25em; line-height: 1.75rem; margin-bottom: 1.75rem}
li, p {line-height: 1.75rem;}
table { border-collapse: collapse; border-spacing: 15px; }
h1 + p, h2 + p, h1 + h2, h2 + h3, h1 + h3, .twocols, p + h3, .twocols + p, .twocols + h3 {padding-top: 1.5rem;}
p + p, img + p, .twocols h3 + p, .headlines div, ul + p  {padding-top: 0.5rem}
.padme {padding-top: 3.5rem !important}

/*** ALLE RASTERZELLEN WERDEN ZUNÄCHST AUF 100% GESETZT ***/
.g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12,
.g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110,
.g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909,
.g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808, .fullwidth
{text-align: left; display: inline-block; font-size: 1rem; line-height: 1.75rem; padding: 0 10px; width: 100%}

.nopad {padding: 0}
.baseline {vertical-align: baseline}

@media screen and (min-width: 400px) {
h3, span.headl {font-size: 1.5em; line-height: 2.625rem}

.g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12, .g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110, .g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909, .g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808 {padding: 0 20px}
}

@media screen and (min-width: 600px) {
.g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12, .g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110, .g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909, .g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808, span.headl {padding: 0 50px}
    /* RASTER 12 */ .g01, .g02, .g04 {width: 33.33%}  .g05, .g06, .g07, .g08, span.headl {width: 66.66%}.g03, .g09, .g10, .g11, .g12 {width: 100%}
    /* RASTER 10 */ .g101, .g102, .g103, .g104 {width: 40%} .g105, .g106 {width: 60%}
    /* RASTER 09 */ .g901 {width: 33.33%} .g902, .g903, .g904 {width: 66.66%} .g905, .g906, .g907, .g908, .g909 {width: 100%}
                            .g801, .g802, .g803, .g804 {width: 50%} .g805, .g806, .g807, .g808 {width: 100%}
h3, span.headl {font-size: 2rem; line-height: 3.5rem}
    }

@media screen and (min-width: 900px) {
h1 + h2, h2 + h3, span.headl {padding-top: 3.5rem;}
/* RASTER 12 */    .g01, .g02 {width: 16.66%} .g04, .g03, .g05, .g06 {width: 50%} .g07, .g08, span.headl {width: 66.66%} .g09, .g10 {width: 83.33%}
/* RASTER 10 */    .g101, .g102 {width: 20%} .g103, .g104 {width: 40%} .g105, .g106 {width: 60%} .g107, .g108 {width: 80%}
/* RASTER 09 */    .g901, .g902, .g903 {width: 33.33%} .g904, .g905, .g906 {width: 66.66%}
                              .g801, .g802 {width: 25%} .g803, .g804 {width: 50%} .g805, .g806 {width: 75%}
.twocols {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2; column-gap: 30px;  -moz-column-gap: 30px; -webkit-column-gap: 30px;}
    }


@media screen and (min-width: 1200px) {
/* RASTER 12 */     .g01 {width: 8.33%} .g02 {width: 16.66%} .g03 {width: 25%} .g04 {width: 33.33%} .g05 {width: 41.66%} .g06 {width: 50%} .g07, span.headl {width: 58.33%} .g08 {width: 66.66%} .g09 {width: 75%} .g10 {width: 83.33%} .g11 {width: 91.66%} }
/* RASTER 10 */    .g101 {width: 10%} .g102 {width: 20%} .g103 {width: 30%} .g104 {width: 40%} .g105 {width: 50%} .g106 {width: 60%} .g107 {width: 70%} .g108 {width: 80%} .g109 {width: 90%}
/* RASTER 09 */   .g901 {width: 11.11%} .g902 {width: 2.22%} .g903 {width: 33.33%} .g904 {width: 44.44%} .g905 {width: 55.55%} .g906 {width: 66.66%} .g907 {width: 77.77%} .g908 {width: 88.88%}
/* RASTER 08 */    .g801 {width: 12.5%} .g802 {width: 25%} .g803 {width: 37.5%} .g804 {width: 50%} .g805 {width: 62.5%} .g806 {width: 75%} .g807 {width: 87.5%}

}