@charset "UTF-8";

* {
  -webkit-box-sizing: boder-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {font-size: 100%}
p {font-size: 0.912rem}

body { 
	margin:0 auto;
	padding: 0;
	font-family: 'lucida sans unicode', 'Alegreya', Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.4em;
	border:0;
	padding:0;
 }

header {
   color: black;
   padding-bottom: 3%;
   padding-top: 2%;
   text-align:center;
}
#mainnav {
   padding-bottom: 1%;
   padding-top: 1%;
   text-align: center;
}
a:link {text-decoration:none; color: #cc0033;}
a:visited {color: #cc6666;}
a:hover {color: #cc0000;}
a:focus {color: black;}
a:active, a#current {color: grey;}

footer {
   color: #424242;
   padding-bottom: 1%;
   padding-top: 1%;
   text-align:center;
}

.clear { clear: both; }
.row { clear: both; }

h1 { margin-top: 18px;
	font-family: 'unifrakturcooklight';
	font-weight: lighter;
	font-size: 480%;
}
.frak {
	font-family: 'unifrakturcooklight';
	font-size: 160%;
	font-weight: lighter;
	margin-bottom: 1px;
}
h3 {
	margin-bottom: 1px;
}
img {
    max-width: 100%;
    height: auto;
    margin-top: 1%;
    /* box-shadow:  2px 2px 1px #888888;*/
    border-radius:5px; 
}
#logo {
	width: 30%;
	float: right;
	box-shadow: 0 0 0 0;
	display: left; margin: 0 auto;
}

aside img {
	max-width: 100%;
	float: left;
	margin: 2% 2% -1% 0%;
}
article img { /* Bild im Artikel formatieren */
	 max-width: 50%;
    float: left;
    margin: 0% 2% 1% 0%;/*--top right bottom left--*/ 
 }
 article h3 {
 	margin-bottom: -1%;
 }
 article audio {
 	margin-bottom: -2%;
 }
 
.grid1, .grid2, .grid3, .grid4,
.grid5, .grid6, .grid7, .grid8,
.grid9, .grid10, .grid11, .grid12 {
   margin-left: 10px;
   margin-right: 10px;
   float: left;
}

article, aside  {
  text-align: left;
  font-size: 0.8125rem;
  padding: 5px;
  margin: 0px;
}

article, aside p {
  border-top: 0px;
  margin-top: 0px;
  padding: 5px;
}


@media screen and (max-width: 767px) {
#wrapper {
  width: auto;
  max-width: none;
  margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4,
.grid5, .grid6, .grid7, .grid8,
.grid9, .grid10, .grid11, .grid12 {
   width: 95%;
}
article { clear: both;}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
#wrapper {
  width: 744px;
  max-width: none;
  margin: 0 auto;
}
.grid1 { width: 42px; }
.grid2 { width: 104px; }
.grid3 { width: 166px; }
.grid4 { width: 228px; }
.grid5 { width: 290px; }
.grid6 { width: 352px; }
.grid7 { width: 414px; }
.grid8 { width: 476px; }
.grid9 { width: 538px; }
.grid10 { width: 600px; }
.grid11 { width: 662px; }
.grid12 { width: 724px; }
}

@media screen and  (min-width: 960px) {
#wrapper {
  width: 960px;
  max-width: none;
  margin: 0 auto;
}
.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; }
}