/*utaschuett
türkis  #4f8589 nur Headlines
türkis ALLES + zitat #4f8589
türkis dkl hover #166c65
orange #d67b18 
orange hover #a45d0f
infofläche #ebf5f0
footer blau #003e69
grau  Text #666
*/
body {background:#eaf2f5;font-family:'Source Sans Pro',sans-serif;font-size:94%;font-weight:400;margin:0;padding:0}
*html body {font-size: 94%}
a, area { outline: none;text-decoration:none }
h1,h2, h3, h4 {;margin-top:0;color:#4f8589;font-weight:300;font-weight:normal;font-style:italic }
p {color:#666;font-weight:400;font-weight:normal;font-style:italic }
ul {color:#666;font-weight:400;font-weight:normal;font-style:italic }

p a {text-decoration:none}
p .zitat {color:#4f8589;font-weight:400;font-weight:normal;font-style:italic }
		
/* Seite Wrapper */
#seite {background:#fff;margin-top:0;margin-left:auto;margin-right:auto;width:1130px;}
.clear {clear:both}  /***der Trick wegen automatischer Hoehe**/

.mainfoto {width:100%;height:514px;}

/* Navigation */
#navi{float:left;padding-top:0;padding-left:60px;width:300px;}
#navi ul {
   padding-left:10px;
   list-style-type:none;
   border-left:2px solid #aaa;
   }
#navi ul li  {color:#4f8589;}
#navi ul li a {color:#4f8589;text-decoration:none;font-weight:600;cursor:pointer} /*fareb türkis*/
#navi ul li a:hover {color:#d67b18} /*orange bei jedem hover generell*/
#navi ul li ul {  /*2.Ebene unsichtbar*/
display:none;
border:0px
}

/*weitere difizile Menu sachen sind in den Seiten*/

/* Content  Textbereich */
#content{float:left;width:700px;padding-top:5px} /**height nicht nötig wegen class clear  unten - info in DOKU****/
#content h1 {font-size:1.6em}
#content  p {font-size:1.1em}
#content  p.zitat {color:#4f8589}
#content  p.kleiner {font-size:1em;}/*kleinere kursive Typo im Content*/
#content  p.impressum {font-size:0.8em;line-height:1.1em}/*nur Impressum*/
#content  ul {font-size:1.1em;color:#666;font-weight:400;font-weight:normal;font-style:italic;margin-left:-25px} /*Liste zB auf Aymbolik,ohne einrueckung*/

/*anfahrtsseite*/
#content  p.anfahrt {font-size:0.9em;font-style:normal}/*anfahrtsseite text*/
#content .wrapper {clear:left;width:100%;padding-top:0px} /*die spalten sind in einem wrapper*/
#content .wrapper .spalte{float:left;width:45%;margin-right:10px} /*die spalten oben und unten*/
#content .plan {padding-left:0;width:100%}/*map*/
#content .adress {color:#4f8589;font-weight:bold}/*adressen*/
#content  .spalte .links {font-size:0.9em;color:#4f8589;font-weight:bold} /*die verlinkungen unten zu Kieser etc*/
#content  .spalte .links a{color:#4f8589;text-decoration:none} /*die verlinkungen unten zu Kieser etc*/

/*Button  class statt id wegen Jquery*/
.button,.button-up {cursor:pointer;float:left;margin-top:0;padding-top:20px;border:0px solid black;width:400px;height:50px;text-align:left;}
.button {background:url("img-standard/button.jpg")top right;background-repeat:no-repeat;background-size:60px}
.button:hover {background:url("img-standard/buttondkl.jpg")top right;background-repeat:no-repeat;background-size:60px}
.button-up {background:url("img-standard/button-up.jpg")top right;background-repeat:no-repeat;background-size:60px}

.button i,.button-up i {font-style:italic;font-weight:normal;color:#d67b18;font-size:1.1em;} /*text im Buttoncontainer*/

/* Infobereich */
#info {padding-top:40px;padding-bottom:20px;background-image:url(img-standard/bg-info.jpg);background-repeat:repeat-x;width:100%;}	/*keine heigth wegen clear*/
#info .spli,#info .spmi,#info .spre  {float:left;width:30%;margin-left:5px;} /*3 spalten*/
#info .zspli,#info .zspre  {float:left;width:40%;margin-left:70px;} /*2 spalten*/
#info .espl {width:60%;padding-left:360px;} /*1spaltig*/

#info h2 {font-size:1.1em;color:#4f8589;text-align:left;font-style:italic;font-weight:normal;line-height:50%}
#info p {font-size:1em;text-align:left;font-weight:400}
#info p .tuerkis {color:#4f8589	} /*türkis Infotext*/
#info .liste {list-style-image:url(img-standard/pfeil-liste.gif);margin-left:-20px;color:#4f8589;font-style:italic;}  /*liste anwendungsgebiet*/

/* Tabelle thetarreeading */
#tabelle {border:0px solid blue;font-size:0.9em;font-weight:400;font-style:italic;color:#666;}
.zeile {margin-left:350px;clear:both;display:block;border:0px solid black;width:780px;height:60px;}
.spalteA {float:left;width:100px;background:#fff}
.spalteB {float:left;width:270px;background:#fff}
.spalteC {float:left;width:400px;background:#fff}
.clearfix:after {
  content: "dsdssds";  /*ein virtueller eingefügte Zeile*/
  display:block;	/*block, table alles möglich*/
  clear:both;		/*MUSS SEIN*/
height:30px;	/*Leerraum unter längstem Txt zum Rand*/
}
#tabelle img {width:250px}
	
/* Footer */
#footer {clear:both;width:100%;background:#003e69;height:30px;color:#fff}
#footer img {width:45px;float:left;margin-right:30px}
#footer p{float:left;margin-top:5px;color:#fff;width:70%}
#footer a {color:#fff;float:left;text-decoration:none;width:80px;font-style:italic;margin-top:5px}



/* ********MQ************ */
@media screen and (max-width : 470px) {
body{background:#fff;}/*hier der verlauf oben*/
#seite {margin:0;padding:0;width:100%;}


p {font-size:0.8em;width:100%;}
.mainfoto {width:100%;height:200px;}
.mainfoto img {width:100%}
	
	/* MQ  Navigation */
	#navi{padding-top:4px;padding-left:5%;background:#fff;width:90%}
	#navi ul {margin:0;padding:0;}
	#navi ul li {			/*items styles*/
	list-style:none;	
	width:100%; 			/*wwichtig*/
	margin-left:0;   		/*margin Items*/
	border-bottom:1px solid #666;  /*border*/
	}
	#navi ul li a {text-decoration:none;display: block;color: #4f8589;font-weight:600;padding: 0 0 5px 5px;}  /*Abstnd orange Linie*/
	#navi ul li ul {position:relative;}	/**WICHTIG**/
	#navi ul li ul {display:none;}/**verstecken**/
/*MQcontent*/
	#content{border:1px solid #fff;padding-top:20px;padding-left:5%;width:100%}
	#content img {padding:0;margin:0 auto 0 auto;width:70%;}
	#content h1 {color:#4f8589;font-size:1.3em;}
	#content p {font-size:1em;width:94%;}
	#content ul {font-size:1em;width:94%;margin-left:-25px}

	#content  p.zitat {color:#4f8589}
	#content  p.kleiner {font-size:0.9em;}/*kleinere Typo im Content*/
	#content  p.impressum {font-size:0.8em;}/*nur Impressum*/
	
/*MQ  anfahrtsseite smartphone*/
#content .wrapper {clear:left;width:95%;padding-top:0px} /*class wrapper - bereiche fur oberen und unteren spaltenbreich*/
#content .wrapper .spalte{display:block;width:100%;margin:5px} /*spalten jetzt als block*/
#content .wrapper .spalte .links{font-size:0.8em} /*Link Kiweser etc*/

/*MQ  button*/	
.button{float:left;margin-top:0;width:90%;height:90px;text-align:center;background:url("img-standard/button.jpg") center bottom;background-repeat:no-repeat;background-size:60px}
.button:hover {background:url("img-standard/buttondkl.jpg")center bottom;background-repeat:no-repeat;background-size:60px}
.button-up{float:left;margin-top:0;width:90%;height:90px;text-align:center;background:url("img-standard/button-up.jpg") center bottom;background-repeat:no-repeat;background-size:60px}


.button i,.button-up i {font-style:italic;color:#f0845b;font-size:1.2em;font-weight:600;text-align:center;} /*text neben button*/
	
		
#info {padding-left:5%;width:100%;height:300px;background-image:url(img-standard/bg-info.jpg);background-repeat:repeat-x;}
#info h2 {font-size:1em;color:#4f8589;text-align:left;font-style:italic;font-weight:normal;line-height:100%}
#info p {font-size:1em;text-align:left;font-weight:400}
#info p .tuerkis {color:#4f8589	} /*türkis Infotext*/
	#info .spli {float:left;margin: 0;padding:5px;width:90%}	
	#info .spmi {float:left;margin: 0;padding:5px;width:90%}	
	#info .spre {float:left;margin: 0;padding:5px;width:90%}	
	#info .zspli {float:left;margin: 0;padding:5px;width:90%}	
	#info .zspre {float:left;margin: 0;padding:5px;width:90%}
	#info .espl {float:left;margin: 0;padding:5px;width:90%}

/*MQ Tabelle thetarreeading */
#tabelle {width:90%;font-size:0.9em;font-weight:400;font-style:italic;color:#666;}
.zeile {clear:both;margin:0 0 70px 0;display:block;width:450px;height:70px;}
.spalteA, .spalteB,.spalteC {display:block;width:90%;background:#fff;text-align:center}
#tabelle img {width:250px}
	
.clear {clear:both} /***der Trick wegen automatischer Hoehe**/

/*MQ footer*/
#footer {clear:both;width:100%;height:100px;background:#003e69;font-size:1em}
#footer img {height:50px;width:80px;float:left;margin-right:10px}
#footer p{font-size:1.0em;padding-left:5%;float:left;margin-top:5px;color:#fff;;width:200px}
#footer a {clear:left;float:right;border-top:1px solid #fff;color:#fff;text-decoration:none;font-style:italic;font-size:0.9em}
}