@charset "utf-8";
@import url("../webfonts/EraserRegular/stylesheet.css");

html{
	height:101%;
	}

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

#bis--------------------------480px-mobil------------------------------------------------------{}
/* Layout für Mobilgeräte bis 480px */

body{
	font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*background-color: #FFF;*/
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	}

#wrapper{
	width: 100%;
	background-color: #FFF;	/*margin:0 auto;*/
	}
	
#wrapper img{
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	}
	
#header{
	padding-top: 1.5em;
	padding-right: 0em;
	padding-bottom: 1.5em;
	padding-left: 0.5em;
	width: 100%;
	height: auto;
	background-color: #fff;
	/*background-image: url(../bilder/verschiedenes/papiermaserung.png);*/
	}
	
#header img{
	background: #fff;
	width: 95%;
	height: auto;
	}

#navigation ul,#footer ul ,#inhalt ul,#sidebar ul{
	list-style-type:none;
	}	

#navigation ul li a,#footer ul li a{
	/*background-color: #F2F2E9;*/
	display: block;
	padding: 1em 0.625em;
	border-top: 0.188em #FFF solid;
	border-bottom: 0.125em #734854 solid;
	text-decoration: none;
	color: #734854;
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	}
	
#navigation ul li a.aktiv,#footer ul li a.aktiv{
	color: #FF8000;
	padding: 1em 0.625em;
	background-color: #fff;
	}
		
#inhalt{
	padding: 0.5em 0.625em 1.5em;
	}
	
#sidebar {
	padding: 0em 0.625em 1.5em;
	}
	
#inhalt h1{
	color: #FF8000;
	text-align: left;
	font: 1.4em/1.125em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding-bottom: 0.5em;
	padding-top: 0.3em;
	}
	
#inhalt h2{
	font: normal 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #FF8000;
	}	

#inhalt h4, #sidebar h4{
	font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #a69580;
	}
	
#inhalt h5{
	color: #bbbbbb;
	font: 1.1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}
	
#inhalt h6,#sidebar h6{
	color: #bbbbbb;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.9em;
	font-weight: lighter;
	}
	
#inhalt p,#sidebar p{
	margin: 0em 0em 1.2em;
	line-height: 1.5em;
	}	
			
#inhalt a,#sidebar a{
	color: #666666;
	font-size: 0.9em;
	text-decoration: none;
	}	
		
#inhalt a.aktiv, #sidebar a.aktiv{
	color: #734854;
	text-decoration: none;
	}
	
a:active, a:focus{
	outline:0 none;
	}

/* Formatierung aller externen Links mit dynamisch geladenem Higrubild - Alle Links die mit  href="http://" beginnen */
/*#inhalt a[href^="http://"],#sidebar a[href^="http://"]{
	background: url(../bilder/icons/external.png) no-repeat right bottom;
	padding-right: 2em;
	}*/

/* Rücksprungformatierung - nur für die mobile Ansicht */
#inhalt p.ruecksprung a,
#sidebar p.ruecksprung a{
	display: block;
	color: #000;
	text-decoration: none;
	padding: 0.8em 0;
	text-align: center;
	background: #EEE;
	}

#inhalt p.ruecksprung a:hover, #sidebar p.ruecksprung a:hover{
	display: block;
	color: #FF8000;
	text-decoration: none;
	padding: 0.8em 0;
	text-align: center;
	background: #EEE;
	}
	
#inhalt img{
	width: 100%;
	height: auto;
	}

address{
	font-style: normal;
	padding-bottom: 0.7em;
	}
	
#sidebar h2{
	color: #FF8000;
	text-align: left;
	font: 1.4em/1.125em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding-bottom: 0.5em;
	padding-top: 0.3em;
	}
	
#sidebar h3{
	color: #FF8000;
	font: 1.3em EraserRegular, sans-serif;
	}
	
#sidebar address,#inhalt adress{
	font-style: normal;
	color: #000;
	padding: 0.625em;
	border-top: 0.125em dotted #999999;
	border-bottom: 0.125em dotted #999999;
	margin-bottom: 1em;
	}
	
#sidebar address p,#inhalt address p{
	margin:0 !important;
	}
	
#sidebar address p span,#inhalt address p span{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: bold;
	padding-right: 0.3em;
	color: #ff8000;
	}
	
#sidebar address a img ,#inhalt address a img ,#footer ul li a img{
	margin-right: 0.5em;
	}
	
#sidebar address a{
	color:#666666 !important;
	}
	
#sidebar address a:hover{
	color: #FF8000 !important;
	text-decoration: underline;
	}

/* Formatierung aller PDF-Links mit dynamisch geladenem Higrubild - Alle Links die mit  href=".pdf" enden */
a[href$=".pdf"]{
	background: url(../bilder/icons/pdf.png) no-repeat right bottom;
	padding-right:1.5em;
	}
	
/*Flexible Galerie*/
#galerie1,#galerie2,#galerie3,#galerie4,#galerie5,#galerie6{
	list-style-type:none;
	overflow:hidden;
	}
	
#galerie1 li,#galerie2 li,#galerie3 li,#galerie4 li,#galerie5 li,#galerie6 li{
	width:49%;
	float:left;
	line-height:0.8em;
	margin-bottom:2%;
	}
	
#galerie1 li a img,#galerie2 li a img,#galerie3 li a img,#galerie4 li a img,#galerie5 li a img,#galerie6 li a img{
	width:100%;
	max-width:200px;
	}
	
/*Jeder ungerade Listeneintrag odd=ungerade 1,3,5,7,... bekommt eine Außenabstand*/
#galerie1 li:nth-child(odd),#galerie2 li:nth-child(odd),#galerie3 li:nth-child(odd),#galerie4 li:nth-child(odd),#galerie5 li:nth-child(odd),#galerie6 li:nth-child(odd){
	margin-right:2%;
	}

#sidebar form label{
	display: block;
	}

#sidebar form input[type="text"],#sidebar form textarea{
	width: 98%;
	padding: 1%;
	border: 1px solid #000;
	font: 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

#sidebar form input[type="text"]:focus,#sidebar form textarea:focus{
	border: 1px solid #000;
	background-color: #F2F2E9;
	}

form input[type="submit"],form input[type="reset"]{
	width: 30%;
	color: #000;
	background: #FF8000;
	padding-top: 2%;
	padding-bottom: 2%;
	}
	
#footer p{
	padding: 1em 0.625em;
	border-top: 0.125em solid #FFF;
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	}

#footer p a img{
	padding-right: 2em;
	list-style-type: none;
	}
	
#footer ul li h5{
	color: #999999;
	padding-left: 0.625em;
	font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding-top: 2em;
	list-style-type: none;
	}
	
.footer_zahl{
	color: #999999;
	padding-left: 0.625em;
	font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding-top: 2em;
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	list-style-type: none;
	}
	
.bild{
	width: 50%;
	height: auto;
	margin-bottom: 1em;
	margin-top: 0em;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}

.clearfloat{
	clear:both;
	}
	
.homebild{
	width: 100%;
	height: auto;
	margin-top: 2.5%;
	margin-right: 0;
	margin-bottom: 3%;
	margin-left: 0;
	}
	
.homebild_logo{
	width: 75%;
	height: auto;
	margin-top: 2.5%;
	margin-right: 0;
	margin-bottom: 3%;
	margin-left: 10%;
	}

div.iframebox{
	position: relative;
	padding-top: 56.25%;
	margin-top: 1.5em;
	margin-right: 0;
	margin-bottom: 2em;
	margin-left: 0;
	}

div.iframebox iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	top: -20px;
	left: 0;
	}
			
img.bildfloat{
	width:50%;
	max-width:174px;
	float:left;
	margin:0.5em 0.6em 0 0;
	}
		
img.vollbild{
	width: 100%;
	max-width: 580px;
	display: block;
	}
	
.pflichteingaben{
	font-size: 0.7em;
	}

.textkleiner{
	font-size: 0.875em;
	text-align: justify;
	}
	
.box2{
	width: 100%;
	text-align: left;
	margin-top: 0.5em;
	margin-bottom: 0.750em;
	}


#bis--------------------------768px-tablet------------------------------------------------------{}	
/* Erster Breakpoint */

/* Layout für Tablet-PC's: 481px bis 768px. Erbt die Stile von Mobiler-Ansicht*/
@media only screen and (min-width:481px){
	
#wrapper{
	width:96%;
	margin:auto;
	}

#header{
	padding-top: 2em;
	padding-right: 0;
	padding-bottom: 2em;
	padding-left: 1.5em;
	width: 96%;
	}
	
#header img{
	background: #fff;
	width: 50%;
	height: auto;
	}

#navigation{
	padding:0.9em 0em;
	text-align:center;
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	}	
	
#navigation ul li{
	display: inline;
	margin: 0 0.625em;
	padding: 0.9em 0em;
	}	

#navigation ul li a{
	display: inline;
	border: 0;
	color: #734854;
	/*padding: 0.9em 0em;*/
	background: transparent;
	}	

#navigation ul li a:hover{
	color: #FF8000;	
	/*padding: 0.9em 0em;*/
	}	
	
#navigation ul li a.aktiv{
	color: #FF8000;
	padding: 0.9em 0.5em;
	}	

#inhalt{
	padding: 2%;
	width: 61%;
	float: left;
	}
	
#inhalt a:hover,#sidebar a:hover{
	color: #FF8000;
	text-decoration: underline;
	}

#sidebar{
	padding: 2%;
	width: 30%;
	float: left;
	}
	
#sidebar h3{
	padding-top: 0.8em;
	}

/*footer formatierung*/
#footer ul li,#footer p{
	width: 50%;
	float: left;
	margin-top: 0;
	margin-right: 0%;
	margin-bottom: 0.0625em;
	margin-left: 0%;
	list-style-type: none;
	}	

#footer p{
	padding: 1em 0;
	height: 1.2em;
	border: 0;
	text-align: center;
	list-style-type: none;
	}
	
#footer ul li a{
	padding:1em 0;
	border:0;
	height:1.2em;
	text-align:center;
	}	

#footer ul li a:hover{
	color:#FF8000;
	}
	
#footer ul li a.aktiv{
	color:#FF8000;
	}
	
#galerie1 li a img,#galerie2 li a img,#galerie3 li a img,#galerie4 li a img,#galerie5 li a img,#galerie6 li a img{
	width:100%;
	max-width:200px;
	}
	
/*neue Außenabstände für die 3spaltige Galerie zuweisen*/
#galerie1 li,#galerie2 li,#galerie3 li,#galerie4 li,#galerie5 li,#galerie6 li{
	width: 32%;
	margin-right: 2%;
	margin-bottom: 2%;
	}
	
/*Jedes dritte Galeriebild bekommt den Außenabstand auf null gesetzt (float)*/
#galerie1 li:nth-child(3n),#galerie2 li:nth-child(3n),#galerie3 li:nth-child(3n),#galerie4 li:nth-child(3n),#galerie5 li:nth-child(3n),#galerie6 li:nth-child(3n){
	margin-right:0%;
	}

p.ruecksprung{
	position:absolute;
	left:-9999px;
	}
	
.inhaltslinie{
	padding: 2%;
	width: 61%;
	float: left;
	border-right: 0.125em dotted #666666;
	}
	
.sidebarlinie{
	padding: 2%;
	width: 61%;
	float: left;
	border-left: 0.125em dotted #666666;

	}
}


#bis--------------------------1232px-desktop------------------------------------------------------{}
/* Zweiter Breakpoint */
/* Desktop-Layout: 769px bis 1232px. Erbt die Stile von Mobiler- und Tablet-Ansicht */
@media only screen and (min-width:769px){

#wrapper{
	width:90%;
	max-width:1232px;
	}

#header img{
	background: #fff;
	width: 30%;
	height: auto;
	}
	
/*Formatierung Beginn für 3 Boxen*/
#inhalt #inhaltbox{
	width: 100%;
	overflow: hidden;
	}		
/*Formatierung Ende für 3 Boxen*/	

#sidebar address{
	font-style: normal;
	color: #000;
	padding: 0.625em;
	}
	
/*----------------------------------------------------------*/
/*Jedes dritte Galeriebild bekommt den Außenabstand auf 2% gesetzt*/
#galerie1 li:nth-child(3n),#galerie2 li:nth-child(3n),#galerie3 li:nth-child(3n),#galerie4 li:nth-child(3n),#galerie5 li:nth-child(3n),#galerie6 li:nth-child(3n){
	margin-right:2%;
	}
	
/*Neue Außenabstände für die 4spaltige Galerie zuweisen*/
#galerie1 li,#galerie2 li,#galerie3 li,#galerie4 li,#galerie5 li,#galerie6 li{
	width:23.5%;
	margin-right:2%;
	margin-bottom:2%;
	}
	
/*Jedes dritte Galeriebild bekommt den Außenabstand auf null gesetzt (float)*/
#galerie1 li:nth-child(4n),#galerie2 li:nth-child(4n),#galerie3 li:nth-child(4n),#galerie4 li:nth-child(4n),#galerie5 li:nth-child(4n),#galerie6 li:nth-child(4n){
	margin-right:0%;
	}	
	
#sidebar form label{
	display: inline-block;
	width:30%;
	}

#sidebar form input[type="text"],#sidebar form textarea{
	width: 88%;
	}

#sidebar form input[type="text"]:focus,#sidebar form textarea:focus{
	border: 1px solid #000;
	background-color: #F2F2E9;
	}
	
address span{
	display:inline-block;
	width:4em;
	}
	
.drittel{
	float: left;
	width: 32%;
	height: auto;
	}

.abstand{
	margin-right: 2%;
	}
	
.haelfte{
	float: left;
	width: 49%;
	height: auto;
	}

.rechts{
	margin-right: 2%;
	}
	
}

#bis--------------------------min-width481px-max-width620px-extra-breakpoint------------------------------------------------{}
/* Dritter Breakpoint */
/*neuer Breakpoint für einen Zwischenschritt in der Navigation*/	
@media only screen and (min-width:481px) and (max-width:620px){

#header{
	padding-top: 2em;
	padding-right: 0;
	padding-bottom: 2em;
	padding-left: 0.7em;
	}

#navigation{
	padding: 0.5em 0em;
	text-align: center;
	background-image: url(../bilder/verschiedenes/papiermaserung.png);
	}
	
#navigation ul li{
	margin: 0em 0.5em;
	display: inline;
	}
	
#navigation ul li a{
	padding: 0.5em 0em;
	border: 0;
	font-size: 0.750em;
	text-decoration: none;
	color: #734854;
	}

#navigation ul li a:hover{
	color: #FF8000;
	}

#navigation ul li a.aktiv{
	margin: 0 0.5em;
	color: #FF8000;
	padding: 1em 0.3em 0.85em;
	}
}

#---------------------druckoptimiert----------------------------------------------------------------------{}
/*Optimiert für Druck-Printmedien*/
@media print{

body{
	background-color:#FFF;	
	font-size:16pt;
	color:#000;
	font-family:"Times New Roman", Times, serif;
	}

#footer,#navigation,p.ruecksprung,img,.iframebox{
	display:none!important;	
	}
	
.seitenumbruch_vor{
	page-break-before:always;	
	}

.seitenumbruch_nach{
	page-break-after:always;		
	}

/* Formatierung aller externen Links mit dynamisch geladenem Higrubild - Alle Links die mit  href="http://" beginnen */
/*#inhalt a[href^="http://"],#sidebar a[href^="http://"]{
	background:none;
	padding-right:0;
	}*/
	
/* Zwischenformatierung*/
#inhalt a[href^="http://"]:after,#sidebar a[href^="http://"]:after{
	content:" ["attr(href)"] ";
	}
}