body {
	background-color: #770102;
    background-image: url("hintergrund_body.jpg");
	margin: 0;
	padding: 0;
	font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-size: 0.84em;
	line-height: 1.6em;
	color: #868889;
	text-align: center; /* wird gebraucht, um DIVs im Explorer zu zentrieren */


}
img {
	padding: 0px;
	margin: 0px;
}

@font-face {
   font-family: "Avant Garde";
   src: local("Avant Garde"),
   url(avgardm.ttf) format("truetype");
   }

/* ===========================================================*/
/* ======================= Ebenen ============================*/
/* ===========================================================*/
#hintergrund {
/*background-image:  url("hindergrund_papier.jpg");*/
	background-color: #FFFFFF;	
	text-align: center; /* hebt zentrierung des Textes aus BODY auf */
	width: 58em;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;	
	background-color: #FFFFFF;
}
#kopf {
	/* text-align: left; hebt zentrierung des Textes aus BODY auf */
	background-color: #FFFFFF;
	width: 100%;
	height: 152px;
	padding-bottom:0;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}

.abstand {
  margin-top:60px;

}	

#navi {
	width: 55%;/*width: 30em; wegen Crome in %*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0.938em;
	padding: 0;
	background-color: #FFFFFF;
	
}

#inhalt {
    text-align:left;
	width: 36em;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding-top: 0.5em;
	background-color: #FFFFFF;

}


/* ===========================================================*/
/* ======================= Texte ============================*/
/* ===========================================================*/
p {
	text-align:justify;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.438em;
	margin-left: 0;
	padding: 0 0 0 0;
}
#navi p {
    text-align:center;
	border:solid;
	border-color:#868889;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	
/* wenn die Absätze in der Navi anders gestaltet sein sollen */
}

#inhalt p {
/* für besondere Gestaltung von Einführungs- und anderen Texten, */
}
.bild1 {
  width: 50%;
  margin:0 0 0 0;
}
.bild2 {
  width: 50%;
  margin:0 0 0 0;
}
h1 {font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
	font-weight: 100;
	font-size: 2.9em;
	line-height: 1.7em;
	color: #868889;
	margin: 0.438em 0 0.438em 0;
	padding: 0 0 0 0;
}
h2 {
	font-size: 1.2em;
	line-height: 1.4em;
	font-weight: bold;
	margin-top: 0.8em;
	margin-right: 0;
	margin-bottom: 0.438em;
	padding: 0 0 0 0;
}


a {
	color: #bd0b1d;
	text-decoration: none;
}

a:visited {  
	color: #333333; 
	text-decoration: none
	}
	
a:hover {  
	color: #cccccc; 
	text-decoration: none
	}
/* ============================= MOBIL ======================================*/
@media screen and (max-width: 800px) {
#hintergrund {
width: 75%;
}
#kopf {
	width: 90%;
	height: 100px;
}
.abstand {
  width: 100%;
  height: auto;
  margin:40px 0 0 0;
}
/*.bild1 {
visibility:hidden;
margin:0 0 0 0;
}*/
/*Ein Bild verschwinden lassen*/

#inhalt {
float:none;
width: 90%;
margin-left: auto;
margin-right: auto;	
margin-bottom: 1em;
}
#navi {
float:none;
width: 90%;

}

h1 {
	font-size: 1.9em;
	line-height: 1.7em;
	color: #868889;
	margin: 0.438em 0 0.438em 0;
	padding: 0 0 0 0;
}


}
@media screen and (max-width: 480px) {
#hintergrund {
width: 98%;

}
#kopf {
	width: 90%;
	height: 65px;
}
.abstand {
  width: 100%;
  height:auto;
  margin:25px 0 0 0;
}
#inhalt {
float:none;
width: 90%;	
margin-bottom: 1em;
}

#navi {
float:none;
width: 90%;
}


.bild {
  height: 100%;
  width: 100%;
  margin:0 0 0 0;
}
h1 {
	font-size: 1.4em;
	line-height: 1.7em;
	color: #868889;
	margin: 0.438em 0 0.438em 0;
	padding: 0 0 0 0;
}


}