body {
  margin: 0 auto;
  padding: 0;
  //font-family: georgia, "trebuchet ms", serif;
  font-family: "Patrick Hand", cursive;
  font-size: 100%;
  max-width: 1600px; /*1024px */
 /* background-color: #FFFFFF;  */
  background-color: #c3c7c3;
  color: #7F7F7F;
}

p {
	
  font-family: "Patrick Hand", cursive;
  color: #373837;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  padding: 10px 4px 4px 4px ;
  margin: 0;
}

header {
  margin: 0 auto;
}

.headertext {
  float: left;
  color: #005A87;
  font-size: 2em;
  padding: 0px 0px 0px 10px;
  letter-spacing: 5px;
  margin: 0;
  font-variant: small-caps;
 /* text-shadow: 1px 1px 3px #5F5F5F;  */
 font-family: "Patrick Hand", cursive;
// font-family: "Indie Flower", georgia, "trebuchet ms", serif;
  
}

#topnavi {
  float: right;
  text-align: right;
  margin-top: 20px;
  padding-top: 15px;
}

#bild {
	
  border: 5px solid #FFFFFF;
  box-shadow: 0px 2px 8px 1px #7F7F7F;
  -webkit-box-shadow: 0px 2px 8px 1px #7F7F7F; /* WebKit */
  -moz-box-shadow: 0px 2px 8px 1px #7F7F7F; /* Firefox */
  margin-bottom: 10px;
}


#bildklein {
	width : 300px;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 2px 8px 1px #7F7F7F;
  -webkit-box-shadow: 0px 2px 8px 1px #7F7F7F; /* WebKit */
  -moz-box-shadow: 0px 2px 8px 1px #7F7F7F; /* Firefox */
  margin-bottom: 10px;
}

.table-wrapper {
      //height: 360px; /* Legt eine feste Höhe fest */
      overflow-y: auto; /* Erstellt eine vertikale Scrollleiste, wenn nötig */
    }




.navi {
 // font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-family: "Patrick Hand", cursive;
  //color: #77ff00;
  color: #1A5096;
  font-size: 1.5em;
 /* text-shadow: 1px 1px 0px #FFFFFF, 1px 1px 2px #2F2F2F;  */
}

.navi a:link, .navi a:active, .navi a:visited {
  // color: #FF7F00; //orange
  color: #1A5096;
  text-decoration: none;
  padding: 3px 10px;
  margin: 0;
}

.navi a:hover, a:focus {
  //color: #1A5096;
  color: #FF7F00; //orange
  background-color: transparent;
  text-decoration: none;
}

aside {
  float: left;
  width: 25%;
  padding: 0;
  border-radius: 0.5rem;
}

nav {
  margin:0;
  padding: 5px;
  text-align: center;
  //font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-family: "Patrick Hand", cursive;
  font-size: 1.5em;
/*  text-shadow: 1px 1px 0px #FFFFFF, 1px 1px 2px #2F2F2F;  */
}

nav ul {
  list-style-type:none;
  padding: 0;
  margin: 0;
  text-align: center;
}

nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul a:link,
nav ul a:visited,
nav ul a:active {
 //  color: #FF7F00;
     color: #77ff00
  padding: 5px;
  margin: 8px;
  text-decoration: none;
  box-shadow: 0px 2px 5px 1px #7F7F7F;
  -webkit-box-shadow: 0px 2px 5px 1px #7F7F7F; /* WebKit */
  -moz-box-shadow: 0px 2px 5px 1px #7F7F7F; /* Firefox */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#7F7F7F', Direction=120, Strength=3);
  font-size: 1,5em;
  display: block;
  font-weight: bold;
  background-color: #DEE0D5;
}

nav ul a:hover,
nav ul a:focus {
  color: #276FBB;
  text-decoration: none;
}

.haupt {
 width: 75%;
 float: left;
}

main {
  padding: 0;
  margin: 0 auto;
  display: block;  /*wegen Fehldarstellung IE*/
}

article {
  padding: 8px;
  margin: 0 auto;
  font-size: 1.25em;
  line-height: 1.400em;
  text-align: justify;
}


.teaser{
  text-align: center;
  margin: 0px auto;
}

.teasercell3 {
  background-color: #FFFFFF;
  color: #6F6F6F;
  width: 30%;
  display: inline-block;
  box-shadow: 0px 2px 8px 1px #7F7F7F;
  -webkit-box-shadow: 0px 2px 8px 1px #7F7F7F; /* WebKit */
  -moz-box-shadow: 0px 2px 8px 1px #7F7F7F; /* Firefox */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#7F7F7F', Direction=120, Strength=3);
  min-height: 170px;
  position: relative;
  margin: 1.2%;
  vertical-align: top;
  text-align: justify;
}

.teasercell3 p {
 padding: 3px 8px;
 font-size: 0.813em;
 line-height: 1.125em;
}

.teasercell3 h2 {
  font-size: 1em;
  text-align: center;
  color: #FF7F00;
  padding: 5px 0;
}

.weiter {
 text-align: right;
 margin: 0;
 padding: 0 8px;
 font-size: 0.750em;
}

.teasercell4 {
  background-color: #276FBB;
  color: #FFFFFF;
  width: 23%;
  display: inline-block;
  box-shadow: 0px 2px 8px 1px #7F7F7F;
  -webkit-box-shadow: 0px 2px 8px 1px #7F7F7F; /* WebKit */
  -moz-box-shadow: 0px 2px 8px 1px #7F7F7F; /* Firefox */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#7F7F7F', Direction=120, Strength=3);
  min-height: 230px;
  position: relative;
  margin: 0.5%;
  vertical-align: top;
  text-align: justify;
}

.teasercell4 p {
 padding: 3px 8px;
 font-size: 0.813em;
 line-height: 1.125em;
}

.teasercell4 h2 {
  font-size: 1em;
  text-align: center;
  color: #FDC300;
  padding: 5px 0;
  text-shadow: 1px 1px 3px #4F4F4F;
}

.teasercell4 a:link, .teasercell4 a:active, .teasercell4 a:visited {
  color: #FDC300;
}

footer {
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background-color: #DEE0D5;
}

.fussinhalt {
  font-family: georgia, "trebuchet ms",serif;
  color: #276FBB;
  float: left;
  font-size: 0.800em;
  width: 50%;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  padding: 10px 0 0 0;
  margin: 10px 0 0 0;
 /* text-shadow: 1px 1px 1px white; */
}

.fussinhalt h4 {
 background-color: #276FBB;
 color: #FDC300;
 box-shadow: 1px 1px 3px black;
 display: inline;
 padding: 5px 15px;
}

.fussinhalt p {
  padding: 2px;
}

h1 {
  background-color: inherit;
  color: #276FBB;
  font-family: "Patrick Hand", cursive;
 // font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1.338em;
  text-align: center;
  margin:20px 0;
 /* text-shadow: 1px 1px 1px #5F5F5F;  */
}

h2 {
  color: #827682; 
  font-family: "Patrick Hand", cursive;
  //font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1.338em;
  padding: 8px 0px 0px 16px;
  margin: 8px 0px 0px 0px;
 /* text-shadow: 1px 1px 3px #5F5F5F;  */
}

h3 {
  //color: #FF7F00;
  color: #827682; 
  background-color: inherit;
  font-family: "Patrick Hand", cursive;
  //font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1.254em;
  text-align: center;
  padding: 8px 0px 0px 5px;
  margin: 8px 0px 0px 0px;
 /* text-shadow: 1px 1px 3px #5F5F5F;  */
}

h4 {
  //color: #827682;
  color: #276FBB;
  // background-color: #DEE0D5;
  background-color: inherit;
  font-family: "Patrick Hand", cursive;
  // font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1em;
  font-weight: bold;
  padding: 8px;
  margin: 15px 0px 0px 0px;
/*  text-shadow: 1px 1px 3px #5F5F5F;  */
}

h5 {
  color: #6F6F6F;
  font-family: "Patrick Hand", cursive;
  //font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1em;
  font-weight: bold;
  padding-left: 5px;
  margin: 12px 0px 0px 0px;
 /* text-shadow: 1px 1px 3px #5F5F5F;  */
}

h6 {
  color: blue;
  font-family: "Patrick Hand", cursive;
  //font-family: "Indie Flower", georgia, "trebuchet ms",serif;
  font-size: 1.338em;
  text-align: left;
  margin:20px 0;
/*  text-shadow: 1px 1px 3px #5F5F5F;  */
 
  
}

a:link, a:visited, a:active {
  //color: #FF7F00;
  color: #1A5096;
  text-decoration: none;
  font-weight: bold;
}

a:hover, a:focus {
  color: #276FBB;
  text-decoration: none;
  font-weight: bold;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
  display: block;
}

.clear {
 clear: both;
 margin: 0;
 padding: 0;
 line-height: 1px;
}

/******************Besonderheiten für Bildschirmgroesse max. 940px**********************/
@media (max-width: 940px) {

.teasercell3 {
  min-height: 190px;
}

.teasercell4 {
  min-height: 280px;
}
}
/******************Besonderheiten für Bildschirmgroesse max. 768px**********************/

@media (max-width: 768px) {

header {
  font-size: 0.7em;
}

.headertext {
  padding: 2px;
  letter-spacing: 1px;
  margin: 3px;
  line-height: 1em;
  text-align: center;
  float: none;
}

#topnavi {
  float: none;
  text-align: center;
  margin-top: 2px;
  padding-top: 0;
}

aside {
  float: none;
  width: 100%;

}

.haupt {
 float: none;
 width: 100%;
}

.teasercell3 {
  min-height: 230px;
}

.teasercell4 {
  width: 95%;
  min-height: 100px;
}
}

/*****************Besonderheiten für Bildschirmgroesse max. 640px***********************/

@media (max-width: 640px) {

.teasercell3 {
  width: 95%;
  min-height: 100px;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 1em;
}

}

/*****************Besonderheiten für Bildschirmgroesse max. 480px***********************/

@media (max-width: 480px) {

.headertext {
  padding: 1px;
  letter-spacing: 1px;
  margin: 1px;
}

article {
  padding: 2px;
  margin: 0 auto;
  font-size: 1em;
  line-height: 1.338em;
}

.teasercell3 {
  width: 95%;
  min-height: 100px;
}

.fussinhalt {
  letter-spacing: 1px;
  padding: 2px 0 0 0;
}

.fussinhalt h4 {
 padding: 2px;
 font-size: 0.750em;
}






827682;