@charset "utf-8";
/* **********************************************
 * use classes for IE separation:
 * .ie6, .ie7, .ie8, .ie9, -- (for IE10 and all non-IE browsers! )
 */

html, body { margin:0; padding:0; height:100%; }
body { font:110%/1.5 'Open Sans Condensed',Segoe UI,Helvetica, Verdana, Geneva, sans-serif; font-weight:300; 
	background:#FFF; color:#000; overflow: -moz-scrollbars-vertical; overflow-y: scroll; } 
	/* Schriftenarten müssen in HTML eingebunden sein! */
	/* Achtung bei Anpassung der Schriftartengröße, Größen müssen auch für kleinere Viewports angepasst werden, siehe unten!!!!! */
body.ie6, body.ie7, body.ie8 { overflow:visible; white-space:nowrap; }
.ie6 *, .ie7 *, .ie8 * { white-space:normal; }

#seite { min-height:100%; _height:100%; margin:0; }


/* general resets */
* { margin:0; padding:0; }
a { color:#36C; }
a:visited { color:#999; }
a:hover { color:#06C; text-decoration:underline; }
hr { clear:both; height:.1px; border:none; visibility:hidden; }
*.no_hover:hover { text-decoration:none; }

.pad-lft { padding-left:10px; }
.pad-rgh { padding-right:10px; }
.seite_padding { padding:10px; }
.seite_padding.slim { padding-top:5px !important; padding-bottom:5px !important; }
.center { margin:0 auto; width:92%; min-width:260px; max-width:1200px; }

/* Schriftgrößenanpassungen für kleinere Viewports */
@media screen and (max-width:500px) { body { font-size:96%; } }
@media screen and (min-width:501px) { body { font-size:99%; } }
@media screen and (min-width:640px) { body { font-size:102%; } }
@media screen and (min-width:860px) { body { font-size:106%; }
	.center { width:80%; } 
	.seite_padding { padding:15px 15px; } 
	.pad-lft { padding-left:15px !important; } 
	.pad-rgh { padding-right:15px; } }
@media screen and (min-width:1090px) { body { font-size:110%; }
	.center { width:70%; } 
	.seite_padding { padding:15px 25px; } 
	.pad-lft { padding-left:25px !important; } 
	.pad-rgh { padding-right:25px; }  } 
@media screen and (min-width:1390px) { 
	.center { width:65%; } 
	.seite_padding { padding:20px 35px; } 
	.pad-lft { padding-left:35px !important; } 
	.pad-rgh { padding-right:35px; }  }

.ntp { padding-top:0 !important; } /* no top padding */
.margin_top { margin-top:1em; padding-top:1em;  }
.margin_bottom { margin-bottom:1em; }

/* - - - - - - - - - - - - - - - - - - -  */

/* *** preload image / off screen *** */
#preload_image { position:absolute; display:block; left:-5000px; top:-5000px; width:100px; height:100px; overflow:hidden; }
.osa { position:absolute !important; display:block !important; left:-9000px !important; max-width:500px !important; } /* off screen area */
.clear_space_bottom { padding-bottom:90px; clear:both; }

/* -- vario floats */
.floating { float:none; }
.floating.right { float:none; }
.floating.spacer { margin-top:.75em; }
@media screen and (min-width:860px) { 
.floating { float:left; width:48%; width:-webkit-calc(50%-20px); width:-moz-calc(50%-20px); width:-o-calc(50%-20px); width:calc(50%-20px); }
.floating.right { float:right; }
.floating.spacer { margin-top:0; } }

/* **************************
 * Layout elements		    *
 ****************************
 */
#header { position:fixed; left:0; top:0; width:100%; height:75px; background:#800; background-image:url(../img/textures/pattern-3ueg.png); border-bottom:1px solid #820; /* box-shadow:0px 0px 6px #333; */ z-index:99; cursor:default !important; }

.ie6 #header { position:static; }
/* *** NAVIGATIONSLEISTEN *** */
ul#sidebar { display:block; margin:0; padding:0 5px 0 5px; width:100%; min-width:200px; }
#sidebar li { list-style:none; float:left;  }
#sidebar a { text-decoration:none; display:block; padding:.5em 0 .5em .5em; font-size:125%; color:#000; }
#sidebar a span { display:inline; border-bottom:4px solid #CCC; }
#sidebar li:first-child { padding-top:0; }
#sidebar a.active span { border-bottom:4px solid #900; padding-bottom:0; }
#sidebar a:hover span { border-bottom:4px solid #F00; padding-bottom:0; }
#sidebar a.active:hover span { cursor:default; border-color:#900; }
#sidebar li.loc_switch { float:right; padding-right:10px; position:relative; }
#sidebar li.loc_switch i { position:absolute; font-style:normal; font-size:92%; background:#FFF; 
	right:0; margin-top:5%; border:1px solid #ccc; width:220px; display:none; text-align:left; padding:5px; }
#sidebar li.loc_switch:hover i { display:block; }
/* Schnellzugriffsleisten, im header Bereich */
ul#com_nav { position:absolute; right:12%; top:0; margin-top:-12px; display:table; height:1px; 
	background:url(../img/textures/pattern-3ueg.png); border:1px solid #801; box-shadow:inset 0 0 8px #000;
	cursor:pointer; -moz-transition:all ease-in-out .5; -webkit-transition:all ease-in-out .5s; -o-transition:all ease-in-out .5; transition:all ease-in-out .5s; }
.ie6 ul#com_nav, .ie7 ul#com_nav { display:inline; zoom:1; margin-top:-5px; }
#com_nav li { list-style:none; display:table-cell; padding-top:4px; vertical-align:middle; }
.ie6 #com_nav li, .ie7 #com_nav li { display:inline; zoom:1; }
#com_nav a, #com_nav p { display:block; padding:1px 10px; color:#FFF; }
#com_nav li:first-child p { display:table; white-space:nowrap; height:1px; max-height:40px; }
#com_nav a { padding:4px 10px 5px 10px; margin-left:1px; text-decoration:none; }
#com_nav p:hover, #com_nav a:hover  { text-decoration:underline; }
#com_nav:hover { margin-top:-5px; -moz-transition:all ease-in-out .5; -webkit-transition:all ease-in-out .5s; -o-transition:all ease-in-out .5; transition:all ease-in-out .5s; }
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#top_space { display:block; height:70px; width:100%; }
.ie6 #top_space { display:none; height:1px; visibility:none; }

#picture_canvas { width:100%; height:250px; background:#09C; position:relative; z-index:0; /* border-bottom:5px solid #FFF; box-shadow:0 0 10px #666; */ }
#picture_canvas.slim { height:160px; }
#picture_canvas.wide { height:300px; }
#picture_canvas div { position:absolute;  }
#picture_canvas div.fscr { left:0; top:0; bottom:0; width:100%; height:100%; overflow:hidden;
	background-position:center center; background-size:cover; }
	
.desc_box { display:table; text-align:right; bottom:0; right:0; width:auto; max-width:300px; height:auto; 
	margin-bottom:20px; margin-right:12%; background:#FFF; background:rgba(255,255,255,.75); z-index:5; padding:.1em 1em; border-radius:4px; }

#picture_canvas div.fscr.layer_A { z-index:1; display:none; }
#picture_canvas div.fscr.layer_B { z-index:2; display:none; }

#picture_canvas div.fscr.layer0 { z-index:4; display:block; background:url(../img/copyr.jpg); opacity:0; }
#picture_canvas div.fscr.active { display:block; }
.ie6 #picture_canvas div.fscr, .ie7 #picture_canvas div.fscr, .ie8 #picture_canvas div.fscr { background-repeat:no-repeat; }
.ie6 div.fscr.layer0, .ie7 div.fscr.layer0, .ie8 div.fscr.layer0 { display:none !important; visibility:hidden !important; }
#picture_canvas div.fscr.map_v { display:block; top:-5%; height:105%; }
@media screen and (min-height:590px) { #picture_canvas { height:295px; } 
	#picture_canvas.slim { height:200px; } 
	#picture_canvas.wide { height:350px; } }
@media screen and (min-height:750px) { #picture_canvas { height:375px; } 
	#picture_canvas.slim { height:280px; } 
	#picture_canvas.wide { height:425px; } }
@media screen and (min-height:1000px) { #picture_canvas { height:500px; } 
	#picture_canvas.slim { height:330px; } 
	#picture_canvas.wide { height:550px; } }
@media screen and (min-height:1200px) { #picture_canvas { height:640px; } 
	#picture_canvas.slim { height:440px; } 
	#picture_canvas.wide { height:700px; } }
@media screen and (min-height:1500px) { #picture_canvas { height:850px; } 
	#picture_canvas.slim { height:650px; } 
	#picture_canvas.wide { height:950px; } }

/* ---- Content und Sidebar Anpassungen für kleinere Viewports --- */
#content { background:#FFF; position:relative; z-index:5; /*box-shadow:0px 0px 6px #333; */ }
#text_area { margin-top:0; padding-top:0; overflow:auto; }
.ie7 #text_area { overflow:inherit; zoom:1; position:relative; }
div.floating ul { margin-left:1.2em; }


/* ___ Media-queries für die Ausrichtung von Sidebar und Text-box abh. von Bildschirmbreite ___ */
@media screen and (min-width:1090px) { 
	.clear_float_menu { display:none; }
	#text_area { margin-left:20%; padding-left:15px; } 
	
	ul#sidebar { float:left; margin:0 2% 0 -10%; padding:0; width:10%; padding-right:35px; border-right:1px solid #DDD;  } 
	#sidebar li { float:none; display:block; text-align:right; width:100%; }
	#sidebar li:first-child a { padding-top:0 !important; }
	#sidebar a span { border:none; padding-bottom:4px; }
	#sidebar li.loc_switch { margin-top:2em; background:#E9E9EB; padding:5px 15px 5px 5px; margin-right:-15px; border-radius:4px;  }
	#sidebar li.loc_switch span { font-weight:700; }
	#sidebar li.loc_switch i { position:static; display:block; background:none; right:auto; margin-top:0; border:none; width:auto; text-align:right; padding:inherit; }
}
@media screen and (min-width:1390px) {
	#text_area { margin-left:15%; } 
	ul#sidebar { margin:0 2% 0 -10%; width:19.5%; } 
}



/* kleine Vorschaubilder */
a.img { float:right; display:block; margin:0 0 35px 35px; text-decoration:none !important; }
a.img.left { float:left; margin:0 35px 35px 0; }
a.img div { width:180px; height:120px; background:#39F; background-position:center center; background-size:cover;
	background-image:linear-gradient(to bottom, #09C, #FC6); border:5px solid #FFF; box-shadow:0 0 5px #666; }
a.img.large div { width:240px; height:160px;  }	
a p { padding-bottom:5px; color:#000; font-size:94%; }

/* Galeriesystem, Ausrichtung der letzten Reihe erfolgt über Javascript! */
div.gallery { margin-top:1.5em; text-align:justify; }
div.gallery a { display:inline-block; width:200px; height:125px; margin-bottom:20px; padding:10px; background:#fff; 
	box-shadow:0 0 6px #999; -moz-box-shadow:0 0 6px #999; -webkit-box-shadow:0 0 6px #999; transition:all .4s ease-in; -moz-transition:all .4s ease-in; -webkit-transition:all .4s ease-in-out; 
	-o-transition:all .4s ease-in; text-decoration:none !important; }
@media screen and (min-width:900px) { div.gallery a { width:230px; height:150px; } }
@media screen and (min-width:1700px) { div.gallery a { width:280px; height:190px; } }

div.gallery.small a { width:160px; height:120px; padding:8px; }
div.gallery a div { background-position:center center; background-size:cover; width:100%; height:100%; 
	opacity:.8; -moz-opacity:.8; -webkit-opacity:.8; transition:opacity .4s ease-in; -moz-transition:opacity .4s ease-in; -webkit-transition:opacity .4s ease-in; -o-transition:opacity .4s ease-in; }
div.gallery.reduce a div { background-size:cover; -moz-background-size:cover; -webkit-background-size:cover; }
div.gallery a:hover { background:#ccc; box-shadow:0 0 8px #666; -moz-box-shadow:0 0 8px #666; -webkit-box-shadow:0 0 8px #666; }
div.gallery a:active { background:#f00; }
div.gallery a:hover div { opacity:1; -moz-opacity:1; -webkit-opacity:1; }
div.gallery span { display:inline-block; padding-left:100%; }
div.gallery div.filler { display:inline-block; margin:0; height:.1px; text-align:left; padding:0; background:none; border:0; text-decoration:none; }

/* Ortsauswahl auf Startseite *
 ******************************
*/
div.loc_switch { display:table; width:100%; height:auto; table-layout:fixed; margin:0; padding:0; }
.ie7 div.loc_switch { display:inline; zoom:1; }
div.loc_switch > div { display:table-row; width:100%; }
div.loc_switch a { display:table-cell; width:50%; border-radius:5px; padding:10px; text-decoration:none !important; }
.ie7 div.loc_switch a { display:inline; zoom:1; width:45%; vertical-align:top; }
div.loc_switch h4 { font-size:240%; margin:0; padding:0; color:#000;
	font-family:'Fredericka the Great', Georgia, "Times New Roman", Times, serif; }
div.loc_switch p { font-size:117%; line-height:1.5em; margin:0; padding:0; color:#000; }
div.loc_switch p span { color:#F00;}
div.loc_switch a:hover { background:#E9E9E9; }
div.loc_switch h6 { margin:5px auto; padding:10px; font-size:102%; font-weight:700; width:160px; background:#999; color:#FFF; border-radius:20px; }
div.loc_switch a:hover h6 { background:#F00; }
@media screen and (max-width:500px) { 
	div.loc_switch { display:block; width:100%; margin:0; padding:0; } 
	div.loc_switch > div { display:block; width:100%; }
	div.loc_switch a { display:block; width:80%; margin:0 auto; } 
}


/* Allgemeine Seitenfußleiste *
 -------------------------------
 */
#footer { width:100%; height:70px; margin-top:-70px; color:#FFF;
	background:#666; background-image:url(../img/pattern/pattern-8oc4.png); position:relative; z-index:20; border-top:0px solid #999; /* box-shadow:0 0 8px #333; */  }
.ie6 #footer, .ie7 #footer, .ie8 #footer { zoom:1; margin-top:0px; }
#footer ul { display:table; width:100%; height:70px; }
.ie6 #footer ul, .ie7 #footer ul { display:inline; zoom:1; }
#footer ul li { list-style:none; display:table-cell; height:100%; vertical-align:middle; text-align:center; }
.ie6 #footer ul li, .ie7 #footer ul li { display:block; float:left; padding-top:1.2em; padding-right:1.5em; }
.ie6 #footer ul li:first-child, .ie7 #footer ul li:first-child { float:right; padding-left:1em; padding-right:0; }
#footer ul li:first-child { text-align:left; }
#footer ul li:last-child { text-align:right; }
#footer * a:link, #footer   * a:visited { color:#FFF; text-decoration:none; padding:0; }
#footer * a:hover { text-decoration:underline; color:#fff; padding:0; border:none; }
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */



/* general typography settings */

h1 { font-size:260%; font-family:'Fredericka the Great', Georgia, "Times New Roman", Times, serif; padding-top:4px;  }
h2 { font-size:160%; font-weight:300; }
h3 { font-size:200%; margin-bottom:.5em; font-family:'Fredericka the Great', Georgia, "Times New Roman", Times, serif; }
h3.subpg_header { padding-bottom:.2em; color:#900; }
h4 { margin:0 0 .5em -1px; font-size:170%; font-weight:300; }
h5 { font-size:125%; }

a.hl h1 { text-decoration:none; color:#FFF; -moz-transition:all ease-in .7s; -webkit-transition:all ease-in .7s; -o-transition:all ease-in .7s; transition:all ease-in .7s; }
a.hl:hover h1 { color:#F63; -moz-transition:all ease-in .7s; -webkit-transition:all ease-in .7s; -o-transition:all ease-in .7s; transition:all ease-in .7s; }

/*** Anpassung des headers für niedrige Viewports ...
 *
 */
@media screen and (max-width:800px), screen and (max-height:600px) { 
	#header { position:static; height:45px; z-index:99; } 
	#top_space { height:1px; display:none; } 
	#header h1 { font-size:200%; padding-top:2px; }
	ul#com_nav { z-index:1; width:100%; top:45px; left:0; right:0; border:0px; margin-top:0; border-bottom:1px solid #820 !important; box-shadow:0 0 2px #000; padding:0 !important;  }
	#com_nav li { padding-top:0; }
	ul#com_nav li:first-child { padding-left:1.2em; } 
	ul#com_nav:hover { margin-top:0; }
}
		

.title { float:left; margin-right:10%; color:#FFF; }
h2.subm { float:left; color:#EFEFEF; padding-top:.6em; }
h2.subm span { text-decoration:underline; }
/* 2. Überschrift im Titel ausblenden für schmalere Viewports */
@media screen and (max-width:780px) { 
	.desc_box { display:none; }
	.title { position:relative; } 
	h2.subm { position:absolute; margin-left:.2em; top:1.5em; z-index:100; font-size:240%; text-shadow:2px 2px 5px #000; } 
}

text_area p { margin-bottom:.5em; }
p u { text-decoration:underline; }
p + ul { list-style:square; }
p.tabs span { padding:0 1.5em; }
p a:link, p a:visited { padding:1px; color:#06C; text-decoration:none; }
p a:hover { color:#333; padding:0; border:1px dotted #FF0000; }
.section { clear:both; margin-bottom:2em; border-bottom:3px solid #E9E9E9; }
.pricetag { font-size:130%; color:#F00; }
.pricetag.old { text-decoration:line-through; font-size:105%; }
strong { font-weight:700; }

.u { text-decoration:underline; margin-bottom:.3em; }

.medium { font-size:110%; }
.large { font-size:120%; line-height:1.5em;  }
.small { font:99%/1.4; }


.cl-left { clear:left; height:.1px; font-size:0; line-height:0; }
.cl-right { clear:right; height:.1px; font-size:0; line-height:0; }
.cl-both { clear:both; height:.1px; font-size:0; line-height:0; }