* { padding: 0; margin: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  background-image:url(Hintergrund.jpg);
}

#wrapper {
  max-width: 960px;
  margin: 12px auto;
  border: 1px solid #ccc;
  background: #fff url(Hintergrund.png); background-repeat:no-repeat;
}

header {
padding:0px 0px 0px 210px;
color: #570080;

}



nav {
padding:20px 0px 0px 190px;
color: #570080;
}

#content {
  padding: 30px 40px 10px 210px;
  color: #570080;

}

#contentA {
  padding: 30px 40px 10px 210px;
  color: #570080;

}

img {
  max-width: 100%;
  heigth: auto;
}


nav ul {
    line-height: 2;
  list-style-type: none;
  }

nav li  {
display: inline;

}

nav a {
  color: gray;
  text-decoration: none;
  margin:0px 49px 0px 0px;
}
nav a:hover {
  color: #570080;
  text-decoration: none;
}

 h1 {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 1.5em;
                color: #570080;
                font-weight: bold;
                        }
h2 {
    font-size: 1.125em;
    }


p {
        color: #570080;

        }

ul  {
    padding-left: 1.6em;
     }


.liste {
list-style-position:outside;
list-style-type:disc;
font-family: Arial, sans-serif;
line-height:1.5;
color: #570080;
}

.breite {
 width: 60%;
 }


.ausrichtung {
text-align: right;
}

#tabelle {
  display: table;
  border-collapse: separate;

}
.zelle {
  border-right: 0px solid grey;
  display: table-cell;
  vertical-align:top;
  width: 300px;
}


.clear {
clear: all;
}

.link:link {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: none; }
.link:visited {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: none; }
.link:hover {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: none;}
.link:active {  color:#570080;  font: 14px arial, helvetica, sans-serif; text-decoration: none;}
.link:focus {  color:#570080;  font: 14px arial, helvetica, sans-serif; text-decoration: none;}

.link2:link {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: underline; }
.link2:visited {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: underline; }
.link2:hover {  color:#570080; font: 14px arial, helvetica, sans-serif; text-decoration: underline;}
.link2:active {  color:#570080;  font: 14px arial, helvetica, sans-serif; text-decoration: underline;}
.link2:focus {  color:#570080;  font: 14px arial, helvetica, sans-serif; text-decoration: underline;}

.link3:link {  color:#570080; font: 10px arial, helvetica, sans-serif; text-decoration: none; }
.link3:visited {  color:#570080; font: 10px arial, helvetica, sans-serif; text-decoration: none; }
.link3:hover {  color:#570080; font: 10px arial, helvetica, sans-serif; text-decoration: none;}
.link3:active {  color:#570080;  font: 10px arial, helvetica, sans-serif; text-decoration: none;}
.link3:focus {  color:#570080;  font: 10px arial, helvetica, sans-serif; text-decoration: none;}


    .google-maps {
        position: relative;
        padding-bottom: 65%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 85% !important;
        height: 85% !important;
    }



/* bis 600 Pixel Bildschirmbreite */
@media (max-width: 600px) {

body {
  font-size: 1.125em;
}

#wrapper {
  margin: 0px;
  border: 0px solid #fff;
  background: #fff;
}

header {
padding:0px 0px 0px 5px;

}

nav {
padding:0px 0px 0px 0px;
color: white;
}

.liste {
padding:0px 0px 0px 45px;
list-style-type:disc;
}

#content {
  padding: 30px 10px 10px 5px;
  color: #570080;

}

  nav ul, li {
    border-style: solid 2px;
    padding-left: 0;
    }

    nav ul li {
    background: #570080;
    margin: 5px;
    display:block;
float: none;
  }

  nav a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 3px;
  }

  nav ul li b  {
    display: block;
    background: #570080;
    padding: 3px;
  }

  nav a:hover {
    background: #570080;
    text-decoration: none;
    color: white;
}


.link2:link {  color:#570080; font: 1.063em arial, helvetica, sans-serif; text-decoration: underline; }
.link2:visited {  color:#570080; font: 1.063em arial, helvetica, sans-serif; text-decoration: underline; }
.link2:hover {  color:#570080; font: 1.063em arial, helvetica, sans-serif; text-decoration: underline;}
.link2:active {  color:#570080;  font: 1.063em arial, helvetica, sans-serif; text-decoration: underline;}
.link2:focus {  color:#570080;  font: 1.063em arial, helvetica, sans-serif; text-decoration: underline;}

.breite {
 width: 90%;
 }

#tabelle {
     display: block;
    }
    .zelle {
      display: block;
      width: 100%;
    }

}