@import url('https://fonts.googleapis.com/css?family=Handlee|PT+Sans');


/* START general ########################### 
**/	

/* dies nur für @work, um bildschirmbreite anzuzeigen */
#topline { background: grey; color: white; margin-top: 70px;width:20%;text-align:center;}

html {
		overflow-y: scroll;  
} /* sorgt dafür,dass die site-seiten nicht springen beim wechsel - wenn scrollbalken kommt; ebenso wie beim auftoggeln der leistungen */

body {
	font-family: 'PT Sans', sans-serif;
	font-size: 1em;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	 -webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	max-width: 950px;
	}

div.wrap {
	max-width: 950px;
	margin-top:3.5em;
	
}

div.content {
	width:100%;
	border-top-left-radius:0.4em;
	border-top-right-radius:0.4em;
	box-shadow: 0 5px 5px rgba(0,0,0,0.3);
	}

div.inner_content {
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding: 0 1.7em 1.5em 1.7em;
}

figure  { 
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	position:relative;
	}
	
figure img { width:100%; }

#toggleNavMain, figure#heading_zwei, figure#birgit_zwei, figure#birgit_drei, figure#birgit_vier {display:none;}

div.clear { clear:both; }

h1, h2, h3 {
font-family: 'Handlee', cursive;

}

h1 { font-size:2.1em; }

h2 { font-size:1.6em; }

h3 { font-weight:400; }

p { 
	font-weight:400; 
	text-align:justify; 
	line-height:1.4em;
	}

ul  li{
	display: inline;
	list-style: none;
}

.left { 
	width:65%;
	margin-right:3%;
	float:left;
	}
	
.right { 
	width:32%;
	float:right;
	}
	
.smaller { font-size: 0.85em; }	

.bigger { font-size:1.5em; }

.handlee { font-family: 'Handlee', cursive; }

.emp { font-weight:bold; }


/* # # # # start FARBEN # # # # */

.lachs { color:#fbd2ac; }
.lachs_bg { background:#fbd2ac; }

.gruen { color:#92ad2c; }

.zartgruen { color:#c8d78d; }
.zartgruen_bg { background:#c8d78d; }

.zartzartgruen_bg { background:#d9e3af; }
.zartzartgruen2_bg { background:#e8f0c9; }

.zartlila_bg { background:#f3e5f5; }
.zartzartlila_bg { background:#f6eef7; }

.lila2 { color:#b197d9; }

.orange { color:#fd9956; }

.mildbraun { color:#987f72; }

.braun { color:#715f57; }

/* # # # # end FARBEN # # # # */

footer { 
	text-align:right; 
	margin-top:0.5em;
	margin-bottom:3em;
	}
	
footer a , p a {
	color:#fd9956;
}

footer a:hover , p a:hover {
	color:#fb6908;
}

table {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:100%;
	hyphens:auto;
	border-collapse:collapse;
	}

table td {
	padding: 0.3em 0.3em 0.3em 0.65em;
	}
	
table h3 {
	margin: 0.2em 0 0 0;
}

.test { margin-bottom:0.5em;}

/* END general ########################### 
**/	

/* # # # start bild und h1 am kopf der site # # # */
figure#heading {}

div#text-on-image {
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	}
/* # # # ende bild und h1 am kopf der site # # # */

/* # # # start balken am kopf der site # # # */

div#site-head {
	height: 2.5em;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding-top: 0.5em;
	left: 0;
	position: fixed;
	z-index: 100;
	right: 0;
	top: 0;
	font-size: 1.1em;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	margin: 0 auto;
	text-align: center;
}

div#site-head2 { display:none; }
  

/* # # # ende balken am kopf der site # # # */

/* # # # # # # # # # START navi # # # # # # # # # */

	
nav { 
	background:#fbd2ac;
	padding: 0.1em 1.2em 0 1.2em;
	border-top-left-radius:0.4em;
	border-top-right-radius:0.4em;
	}

ul#navMain {
	list-style: none;
	padding: 0;
	line-height:1.75em;
	}

#navMain li {
	text-align:center;
	width:20%;
	float:left;
	}

#navMain li a {
	font-size:1em;
	padding: 3% 0 3% 0;
	text-align: center;
	display: block;
	text-decoration: none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:rgba(255,255,255,0.3);
	-webkit-transition: background 400ms linear;
		-moz-transition: background 400ms linear;
		-o-transition: background 400ms linear;
		transition: background 400ms linear;
	color:#987f72;
	border-top-left-radius:0.4em;
	border-top-right-radius:0.4em;
	margin-left:2px;
}

#navMain li#last a {}

#navMain li a:hover {
	background:rgba(255,255,255,0.7);
}

#navMain li a#current {
	cursor: default;
	background:white;
}

/* # # # # # # # # # END navi # # # # # # # # # */

#home {
	display:none;
	cursor:pointer;
	width:120px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:5px 0;
	color:white;
	background:rgba(250,14,75,0.6);
	background:rgba(155,205,2,0.7);
	border-left:1px solid white;
	border-top:1px solid white;
	border-bottom:1px solid white;
	font-size:1.3em;
	font-weight:600;
	text-align:center;
	position:fixed;
	}
	
#home:hover {
	background:rgba(250,14,75,1);
}

/* # # # # # # # # # START Leistungen toggle # # # # # # # # # */

div#dl-wrap {
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin: 0 auto;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	}

dt {
	height: 35px;
	padding:0.2em 0.3em 0.5em 0.7em;
	margin-bottom:1px;
	-webkit-transition: background 400ms linear;
	-moz-transition: background 400ms linear;
	-o-transition: background 400ms linear;
	transition: background 400ms linear;
	box-shadow: -1px -2px 2px rgba(0, 0, 0, 0.08) inset;
	cursor:pointer;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	clear: both;
	position:relative;
}

dt:hover {
	background: #d9e3af;
	box-shadow: -1px -2px 2px rgba(0, 0, 0, 0.2) inset;
	-webkit-box-shadow: -1px -2px 2px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow: -1px -2px 2px rgba(0, 0, 0, 0.2) inset;
}


dt h3 {
	font-family: 'PT Sans', sans-serif;
	color: rgba(105,89,79,1);
	line-height: 0.3em;
	font-size: 1.1em;
	float: left;
	}

dt h3:hover {  }
	
dd {
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display:none;
	margin:0 0 0.2em 0;
	float:left;
	text-align:justify;
	line-height:1.35em;
	padding:0.5em 0.7em 1em 0.7em;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}	

#button {
	float:right;
	display:block;
	height:26px;
	width:30px;
	text-indent:-9999px;
	margin-top:5px;
}

.closed { background:url(images/up-down-button2.png) left no-repeat; }

.open { background:url(images/up-down-button2.png) right no-repeat; }

div#neu { 
	position:absolute;
	left:-35px;
	top:13px;
	background:#b197d9;
	padding:0 0.2em 0 0.2em;
	color:white;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	}

/* # # # # # # # # # END Leistungen toggle # # # # # # # # # */

/* # # # # # # # # # START body id impressum # # # # # # # # # */

body#impressum { background:#e8f0c9; }

body#impressum div.content { 
	background:white; 
	padding-top:0.7em;
	}

body#impressum a.javascriptback { 
	font-size:1.2em; 
	}

body#impressum h3 { font-family: 'PT Sans', sans-serif; }

/* # # # # # # # # # END body id impressum # # # # # # # # # */

/* # # # #
/* # # # # # # # # # # # # # # # # # # END STYLE AN SICH  # # # # # # # # # # # # # # # # # # */
/* # # # ## # # # # # */


/* media queries */

@media screen and (max-width: 992px) {
	
body { padding:15px;  }

}

@media screen and (max-width: 920px) {

figure#birgit_eins { display:none; }

figure#birgit_zwei { display:block; }

}

@media screen and (max-width: 910px) {

h1 { font-size:1.95em; }

}

@media screen and (max-width: 880px) {

figure#heading_eins {
	margin-bottom:0.7em;
}


}

@media screen and (max-width: 850px) {

figure#heading_eins { display:none; }

figure#heading_zwei { display:block; }

h2 { font-size:1.45em; }

body#impressum h2 { font-size:1.6em; }

}

@media screen and (max-width: 820px) {

figure#birgit_zwei { display:none; }

figure#birgit_drei { display:block; }

}

@media screen and (max-width: 790px) {

figure#heading_zwei {
	margin-bottom:1em;
}

.bigger { font-size:1.3em; }

}

@media screen and (max-width: 759px) {

div#site-head  { font-size: 1em; }

figure#birgit_drei { display:none; }

figure#birgit_vier { display:block; }

.left { 
	width:100%;
	margin-right:0;
	float:none;
	}
	
.right { 
	width:100%;
	float:none;
	}

}

@media screen and (max-width: 700px) {

div.content {
	box-shadow: 0 4px 9px rgba(0,0,0,0.3);
	}

.js #navMain {display:none;}

nav { 
	background:white;
	}

#navMain li { width: 100%; }

#navMain li a { 
	font-size:1.1em;
	padding: 1% 0 1% 0;
	margin: 1px 0;
	background:#fce0c5;
	border-top-left-radius:0.4em;
	border-top-right-radius:0.4em;
	border-bottom-left-radius:0.4em;
	border-bottom-right-radius:0.4em;
	}

#navMain li a:hover { 
	background:#fbd2ac;
}

#navMain li a#current {
	background:#c8d78d;
}

#toggleNavMain {
	display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position: absolute;
	right:0;
	top:0;
	padding: 0.7em 1em;
	background:#fd9956;
	color:white;
	text-align:center;
	letter-spacing:0.02em;
	font-size: 1.4em;
	cursor:pointer;
	border-bottom-left-radius:0.3em;
	box-shadow: 0 3px 4px rgba(0,0,0,0.25);
	}
	
div#site-head { display:none; }

div#site-head2 {
	display:block;
	height: 2.5em;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding-top: 0.5em;
	padding-left:18px;
	left: 0;
	position: fixed;
	z-index: 100;
	right: 0;
	top: 0;
	font-size: 1em;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	margin: 0 auto;
	text-align: left;
}

p, dd { font-size:0.95em; }

#heading_zwei { padding-bottom:0.7em; }
	
}

@media screen and (max-width: 589px) {


h1 { font-size:1.85em; }

h2 { font-size:1.3em; }

/* die h3 bei leistungen toggle */
dt h3 {
	font-size: 0.97em;
	}

table { font-size:0.9em;}



}

@media screen and (max-width: 530px) {

div#site-head { 
	height:3.7em; 
	padding-left:1em;
	padding-right:1em;}
	
h2, .bigger { font-size:1.25em; }

p { text-align:left; }

#heading_zwei { padding-bottom:1em; }

dd { text-align:left;}

}

@media screen and (max-width: 480px) {

h1 { font-size:1.65em; }

}

@media screen and (max-width: 440px) {

h1 { font-size:1.45em; }

h2, .bigger { font-size:1.2em; }

div#site-head2 {
	font-size: 0.9em;
}

}