*, *:after, *:before {
    box-sizing: inherit;
    }


* {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;  
}
@font-face {
  font-family: 'arial-rounded-mt-bold';
src: url('../fonts/arial-rounded-mt-bold.woff') format('woff');
font-weight: normal;
    font-style: normal;
}


h1 {
  font-family: 'arial-rounded-mt-bold',Arial, Helvetica, Sans-Serif;
  color:#0000cc;
    text-align: center;
  font-weight:bold;
   font-style: normal;
  font-size: 48px;
}

h3 {
    text-align: center;
  color:#0000cc;
  
  background: #3366ff;
}

html {
    background: #3366ff; /* Alte Browser */
  
    box-sizing: border-box;
}
div#logo1 {
   position: absolute;
   left: 0;
   top: 0;
   float: left;
   width: 175px;
   height: 75px;
   background: url(../images/logo_oys.png) 0 0 no-repeat;
   margin-left: 30px;
   margin-top: 25px;
  z-index: 5;
}
div#logo2 {
position: absolute;
right: 0;
top: 0;
float: right;
width: 180px;
height: 90px;
background: url(../images/fahne_sh.gif) 0 0 no-repeat;
margin-left: 0px;
margin-top: 0px;
  z-index: 5;
}


body {
    font-family:  "Arial Rounded Bold", Arial, Helvetica, sans-serif;
    font-size: 14px;
  background: #3366ff;
}


a {
    color: #fff;
    text-decoration: underline;
}
.top0 {
    grid-area: top0;
}
.top1 {
    grid-area: top1;
    max-width: 10em;
}
.top2 {
    grid-area: top2;
 width: 900px;
  z-index: 1;
}
.top3 {
    grid-area: top3;
  float: right;
    max-width: 10em;
}
.banner1 {
    grid-area: banner1;
}
.banner2 {
    grid-area: banner2;
}
.banner3 {
    grid-area: banner3;
}
.oben1 {
    grid-area: oben1;
    max-width: 20em;
}
.oben2 {
    grid-area: oben2;
}
.oben3 {
    grid-area: oben3;
    max-width: 20em;
}
.info {
    grid-area: info;
}
.links {
    grid-area: links;
    max-width: 20em;
}

.inhalt {
    grid-area: inhalt;
}

.rechts {
    grid-area: rechts;
    max-width: 20em;
}

.unten1 {
    grid-area: unten1;
    max-width: 20em;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.unten2 {
    grid-area: unten2;
  text-align: center;
 }
.unten3 {
    grid-area: unten3;
    max-width: 20em;
}
.unten_m {
    grid-area: unten_m;
}
.banner_4 {
    grid-area: banner_4;
      max-width: 30em;

}
.banner_5 {
    grid-area: banner_5;
        max-width: 30em;

  }
.banner_6 {
    grid-area: banner_6;
        max-width: 30em;
}
.footer    {
    grid-area: footer; 
  float:none;
  }
.fuss {
    grid-area: fuss;
}

.featureCarousel {
background-color: #3366ff;
}



.wrapper {
    display: grid;
    grid-gap: 0;
    grid-template-areas: "top0 top0 top0" 
          "top1 top2 top3" 
          "banner1 banner1 banner1"
          "banner2 banner2 banner2"
         "banner3 banner3 banner3"
          "oben1 oben2 oben3"
          "info info info"
          "links inhalt rechts"
          "unten1 unten2 unten3"
          "unten_m unten_m unten_m"
          "fuss fuss fuss";
    width:100%;
  margin: 0pt auto;

}

.box {
    color: #fff;
    border-radius: 1px;
    border: 0px solid rgba(255,255,255,0.2);
    padding: 2px;
    font-size: 14px;
}

img {
    max-width: 100%;
}


@media (min-width: 50em) {
    .wrapper {
        grid-template-columns: auto 75% auto;
        grid-template-areas: "top0 top0 top0"
          "top1 top2 top3" 
          "banner1 banner1 banner1"
          "banner2 banner2 banner2"
          "banner3 banner3 banner3"
          "oben1 oben2 oben3"
          "info info info"
          "links inhalt rechts"
          "unten1 unten2 unten3"
          "unten_m unten_m unten_m"
          "fuss fuss fuss";
    }
}
body.mceContentBody {
background-color: #3366ff !important; /*hier die gewünschte Hintergrundfarbe angeben*/
background-image: none;
}
li {
  display: inline;
  padding: 15px;
  curser: pointer;
}