/* Frank G�bel -- (c) katzengrafik.de */

/* braun: #652F2A // beige: #F1DC78 // rot: #B81623 // grau: #F0EEE4 // hellgrau: #FBFAF7 */

html, body {background:#000;padding:0;margin:0;height:100%;}
html {background:url(images/html-bg.png) right top repeat-y #F0EEE4;}
body {font:14px/135% 'Tahoma',Arial,sans;background:transparent;}




h1  {color:#B81623; font-size:1.2em; font-weight:bold; padding-top:0; margin-top:0;}
h2  {color:#B81623;font-size:1.1em; font-weight:bold;}
h3  {color:#B81623;font-size:1em; font-weight:bold;margin:0 0 0 0;}
h4  {color:#000;font-size:0.95em; font-weight:bold;margin:0 0 0 0;}
p + h3  {margin:1em 0 0 0;}
p {color:#000; margin:0 0 1em 0;}
a {text-decoration:none;color:#652F2A; font-weight:bold; font-size:0.95em;}
a:hover {text-decoration:underline;}
.m {margin-bottom:1em;}

ul {margin:0 0 1em 12px; padding:0; list-style:url(images/list.png);}


.liner, .home {
    background: none repeat scroll 0 0 rgba(241, 220, 120, 0.15);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    color: rgb(101, 47, 42);
	border: solid 1px rgb(241, 220, 120);
    margin: 2em -1em;
    padding: 1em;
}
.liner:first-child {
	margin-top:0;
}
.topLiner {color:#F1DC78; font-weight:bold;font-size:1.1em;}

/* .home {border:none;background:#F0EEE4;padding:0.75em; font-size:0.95em;margin:0.3em 0 1.3em 0;} */
.home h2 {color:#000; font-size:1.00em; margin:0 0 0.25em 0; padding:0;}
.home p {margin:0;}
.home.warn {background: rgba(184, 22, 35,0.15); border-color: rgb(184, 22, 35);}
.home.warn h2 {color:#B81623;}

div.impressum {font-size:0.8em;line-height:110%;}

/* Layout */
#border {width:100px; height:100%; position:absolute; top:0; left:0; background: url(images/border-bg.png) top left repeat-y #F0EEE4; border:solid #F1DC78; border-width:0 20px 0 0;overflow:none;display:inline;}

#logo {width:175px; height:175px; position:relative; top:0px; left:-85px;/* background: url(images/logo-web.png) top left no-repeat transparent; */z-index:50;}
#logo a img {border:none;}

#wrap {width:800px; position:relative; top:0; left:0;background:url(images/wrap-bg.png) right top repeat-y #F0EEE4;overflow:show; margin:0 auto;padding-left:120px; padding-bottom: 3em;z-index:0;min-height:100%; }

#head {position:relative; height:185px; 
width:100%;
width: calc(100% - 120px);
top:0px; left:0;background: transparent; z-index:25;}

#page {position:relative; height:auto; width:100%;
width: calc(100% - 120px);top:0px; left:0px;}

#cont {width:320px; position:relative; top:0; left:185px;z-index:50; min-height: 290px;}

#art {width:280px; position:relative;top:185px; left:640px;}

#subLogo {width:140px; height:30px;position:fixed; bottom:1em; left:calc(50% + 300px); background: url(images/subLogo-small.png) top left no-repeat transparent;}

#gradient {background:url(images/wrap-bg.png) 0 0 repeat-y #F0EEE4;
width:800px; height: 100%; position: relative; top: 0; left:120px; z-index: 0;
display:none;
}

.fl {float:left;}
.fr {float:right;}




/* Navigation */
ul#menuCont {height:50px; position:absolute; top:78px; left:185px;margin:0;padding:0;z-index:50;}

#menuCont li {height:50px; width:100px; float:left; display:inline; margin:0 16px 0 0; list-style:none;}
#menuCont li a {height:50px;background-position:0px 0px;width:100px;display:block;background-repeat:no-repeat;}
#menuCont li a:hover, #menuCont li.act a {background-position:0px -50px;}
#menuCont li a span {display:none;}

#menuCont li a.phil {background-image:url(images/menuCont-phil.png);}
#menuCont li a.umsetz {background-image:url(images/menuCont-umsetz.png);}
#menuCont li a.indik {background-image:url(images/menuCont-indik.png);}
#menuCont li a.vita {background-image:url(images/menuCont-vita.png);}


ul#menuInfo {width:100px; position:absolute; top:0px; left:20px; margin:0; padding:0;list-style:none;  }

#menuInfo li {margin:0 0 0em 0;padding:0; width:100px;height:30px;float:left; display:block;}
#menuInfo li a {color:#B81623; width:100px;background-position:0px 0px;height:30px;display:block;background-repeat:no-repeat;}
#menuInfo li a:hover, #menuInfo li.act a {background-position:-100px 0px;}
#menuInfo li a span {display:none;}

#menuInfo li a.termin {background-image:url(images/menuInfo-termin.png);}
#menuInfo li a.imp {background-image:url(images/menuInfo-imp.png);}
#menuInfo li a.kont {background-image:url(images/menuInfo-kont.png);}
#menuInfo li a.links {background-image:url(images/menuInfo-links.png);}
#menuInfo li a.kosten {background-image:url(images/menuInfo-kosten.png);}

#menuInfo li a.privacy {
	margin-top: 2rem;
	font-weight: normal
	}
#menuInfo li a.privacy span {
	display: block;
}

/* div, ul, li {border: 1px solid #000;}  */


/* Tabelle Termine */
table {font-size:0.85em;}
td {padding:3px 0;}

td.ort {padding-left:13px; font-weight:bold;background: url(images/tdOrt.png) center left no-repeat transparent;line-height:1.4em;}
td.date {text-align:right; font-weight:bold; font-size:0.8em; line-height:1.4em;}
td.titel {border:solid #F1DC78; border-width:0 0 1px 0; color:#652F2A; font-weight:bold; background:#fff;}
td.text {padding:0px 0 6px 13px;}
td.warn {border-left:solid 13px #FBFAF7; padding:1px 6px; color:#B81623; font-weight:bold;font-size:0.95em; background:#FAD1D5;margin-left:13px;}
td.link + td.warn {padding-top:60px;}
td.end {height:1px; border-top:solid #652F2A 1px;}

/* Linklist */
.link-list {
	border-bottom:solid 1px rgb(101, 47, 42);
	margin-bottom:1em;
}
.link-list a {
    background: url("images/tdOrt.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    font-weight: bold;
    line-height: 1.4em;
    padding-left: 13px;
}
.link-list p {
	font-size: 0.85em;
	margin:0;
	padding:0.5em 0 1em 0;
}

/* Positionen und Specials */
.homePic {position:relative; left:-50px;margin:0;padding:0;}


img.topArt {position:absolute;top:0px; left:535px; z-index:30;}
.map {position:absolute; top:0;left:60%;}
.map.vita {left:100%;}
.map.ph {left:120%;}


.bottomArtWrap {
    position:fixed;
	right:-50px;
	right:calc(50% - 500px);
	bottom:0;
	z-index:1;
	/* background:#ccc; */
	width:300px;
	height:100%;
}

div.bottomArt{
/* position:fixed;right:-50px;bottom:-35px;z-index:20;
right:calc(50% - 600px);
background:#ccc;
width:300px;
height:300px; */
}
img.bottomArt {
	/* position:fixed;right:-50px;bottom:-35px;z-index:20;
	left:calc(50% + 200px); */
	position:absolute;
	bottom:0;
	left:0;
}

.hidden, .screenreader, .show-mobile {
	display:none;
}
.hide-mobile {
		display:inherit;
	}


/* MEDIA QUERIES */
@media only screen and (max-width:817px) {

	/* apply a natural box layout model to all elements */
	*, *:before, *:after {
	  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}

	html {background:url(images/wrap-bg.png) right top repeat-y #F0EEE4;}
	#border{display:none;}

	#logo { width:80px; height:80px; left:0; }
	#logo img { width:100%; height:auto; }
	#head {height:80px;border-bottom:solid 1px rgba(0,0,0,0.15);width:100%;box-shadow: 0 1px 16px rgba(0, 0, 0, 0.28);}

	ul#menuCont {
		left: 20%;
		top: 15px;
	}

	.homePic {
		left: 0;
		}

	#page {
		padding-top:2em;
		padding-right:2em;
		width:100%;
	}
	ul#menuInfo {position:static; padding-left:6px;width:25%;float:left;}
	#cont { position:static; width:75%;float:right;}
	#cont:after { clear:both; display:block;}
	.map {margin-top:2em;}
	.map.vita, .map.ph {position:static;}
	img.topArt {
		clear: both;
		/* margin: 3em 0 3em 25% !important; */
		margin:0 !important;
		position: static;
		
	}
	img.topArt:after {
		clear: both;
		display:block;
		
	}

	#wrap {padding:0;width:100%;}

	.bottomArtWrap {
		position:relative;
		height:auto;
		width:75%;
		left:25%;
		right:auto;
		bottom:auto;
		float:left;
	}
	
	img.bottomArt {
    /* bottom: 16px;
    position: relative;
	left:auto;
    z-index: 20; */
	}
	
	img.bottomArt {
    /* bottom: -300px;
    left: auto;
    position: static;
	float:right;
    right: 0;
    z-index: 20; */
	left: auto;
    position: static;
    right: 0;
	height:auto;
	width:auto;
	max-width:100%;
	
	}
	
	#subLogo {    
		bottom: 85px; 
		position: relative;
		float:left;
		left: calc(25% + 200px);
		/* left: 25%; */
		right:auto;
		clear:both;    
	}

	/* end query */
}

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

	ul#menuCont { left: 25%; top: 38px; }
	#menuInfo li { height: 40px;}
	#menuCont li { width:auto; height:auto;}
	#menuCont li *, #menuInfo li * { background-image:none !important; }
	#menuCont li a, #menuInfo li a { width:auto; }
	#menuCont li a, #menuInfo li a { font-size:14px; height:auto;}
	#menuCont li a span, #menuInfo li a span { display: inline; }
	#menuCont li a:hover, #menuCont li.act a {color:rgb(240, 238, 228);background-color:rgb(101, 47, 42);text-decoration:none;}
	#menuInfo li a:hover, #menuInfo li.act a {color:rgb(240, 238, 228);background-color: rgb(184, 22, 35);text-decoration:none;}

}

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

	.show-mobile {
		display:block;
	}
	.hide-mobile {
		display:none;
	}

	#menuCont li { width:auto; height:35px;}
	
	#menuCont li a { font-size:14px; height:20px;}
	
	ul#menuCont { left: 30%; top: 13px; }
	ul#menuInfo {width:30%;}
	#cont { width:70%;}
	
	.map {position:static;}
	img.topArt, .map { margin: 0 !important; max-width:100%; }
	
		#subLogo {    
		bottom: 85px; 
		
		left:25%;
		
		
	}
	

}