@charset "utf-8";
/* CSS Document */

/*********************************************************************************************************************************************************************************/
/*** INDEX   INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX***/	
/*********************************************************************************************************************************************************************************/																
/*	DEFINITIONS of the STANDARDS	*/
/*		RESET															*/
/*		TYPOGRAPHIE 														*/
/*		LINKS															*/
/*		LISTINGS, TEXT													*/
/*	
/*		STRUKTUR														*/
/*		SEKTIONEN																*/
/*			- INTRO														*/
/*			- MENUE LEFT												*/
/*			- SLIDER 													*/
/*			- TEASER													*/
/*			- FOOTER															*/
/**********************************************************************************************************************************************************************************/

/**********************************************************************************************************************************************************************************/	
/***** STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS | STANDARDS
/**********************************************************************************************************************************************************************************/

/***** RESET *****/

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
html, body {height: 100%; width: 100%}
html {font-size: 75%; /*min-width:1000px;*/}
ol, ul, li { list-style:none }
h1, h2, h3, h4, h5, h6 , p, li { font-size: 100%; }
h1, h2, h3, h4, h5, h6 {font-weight:bold }
p, li {font-weight: normal }
q:before, q:after { content:''}
div { border:0;}
.clearfix:after {
content: ".";    
display: block;    
height: 0;    
clear: both;    
visibility: hidden;
}

   .position::before {
        display: block;
        content: "";
        height:120px;
        margin-top: -120px;
        visibility: hidden;
    } 

h1, h2 {
	color:#FFFFF3;
}
h3 {
	color:#4b5455;
}
a,a:link,a:visited,a:focus, a:hover, a:active, ul.active {
	color: #1E222B;
}
ul.menutop li a, ul.menutop li a:visited, a:active; a:focus; { 				/* besuchte Seiten sollen keine Änderungen gegenüber anderen Menüpunkten erfahren */
	color: #3716B63;
	font-size: 4vh;
}
	

/************************************************************************************************************************************************/	
/* 		DEFINITION KLASSEN / Allgemein											*/
/************************************************************************************************************************************************/

.right { float:right;}
.left { float:left;}
.inline { display: inline;}


body{

	font-weight: normal;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
}
/** TYPOGRAPHIE - TEXT | TEXT | TEXT | TEXT | TEXT | TEXT | TEXT | TEXT | TEXT | TEXT | TE  **/
	h1 {
		font-size:2vh;
		margin-bottom:0px;
		padding:0px 0px 0px 0px;
	}

/*** TYPOGRAPHIE - LINKS | LINKS |  LINKS |  LINKS |  LINKS |  LINKS |  LINKS |  LINKS |  LINKS |**/
a, a:link, a:visited, a:focus {
	text-decoration: none;
	text-shadow: none;
	outline:0;
	cursor: pointer;
}
a:hover, a:active, ul.active{
	cursor: pointer;
}
a.inactive{
	cursor: auto;
}
}	

/** TYPOGRAPHIE -  LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTIN**/


li, p {
	color:#125b70;
	font-family: Arial, Verdana, sans-serif;
	font-weight:normal;
	font-size: 1em;
	text-shadow:0.4px 0.4px 0.4px #111;
	margin: 0px 0px 0px 40px;
}
	li {
		padding-left: 24px;
		line-height: 1.8em;
		font-weight:normal;
		background: url("../images/bullet_arrow.png") no-repeat scroll 0px 15px transparent;
		/*letter-spacing: 0.03em;*/
		/*text-shadow: #47494a 1px 1px 4px;*/
	}
	p {
		line-height: 4vh;
		/*letter-spacing: 0.03em;*/
		/*text-shadow: 1px 1px 3.3px #000;*/
	}





/** LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | LISTINGS | L**/
ul, ol{
	margin: 5px 0 15px 15px;
	overflow: hidden;
}





/** STRUKTUR SRUKTUR STRUKTUR STRUKTUR STRUKTUR STRUKTUR **/



.container {
	clear: both; /*klären*/
	margin: 0px auto;
	position: relative;
	padding: 0px 0;
	width: 100%;
	min-width: 200px;
	max-width: 1280px;
}

.box {
	overflow: hidden;
	float: left;
}

/*** GENERAL STRUCTURE - COLUMNS ***/
.column {
	overflow-y: visible;
	float: left;
}
	.one_third, .two_third, .one_quarter, .three_quarter, .one_half, .one {
	margin-left: 1vw;
	margin-right: 1vw;
	padding: 1vh 0vw;
	}
	.one_third {
		width: 30%;
	}
	.two_third{
		width: 66.6%;
	}
	.one_quarter {
		width: 22%;
	}
	.three_quarter {
		width: 72%;
	}
	.one_half {
		width:47%;
	}
	.one {
		width:97vw;
	}
	

.text_content p, .text_content li, .text_content a, .text_content a:hover, .text_content a:visited {
color: #FFF;
/*margin: 10px 0 10px 15px;*/
font-size:1em;
text-shadow:1px 1px 4px #111;
}

/** BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOXEN | BOX  **/

.box {
	float: left;
	overflow:hidden
}



/***** INFOBOX INDEX ***************************************************************************************/
.infobox_index{
	display:block;
	margin: 0vh 2vw;
	background-color:#e3f0f4;
	opacity: 0.95;
	position: relative;
	padding: 2vh 2vw;
	height: auto;
	overflow: hidden;
	z-index:0;
	width:auto;
	border: 1px solid rgba(40,40,40,0.23);
	max-width: 1600px;	

	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-o-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	
	-webkit-box-shadow: 0px 0px 4px #222;
	-moz-box-shadow: 0px 0px 4px #222;
	box-shadow: 0px 0px 4px #222;

	}
	.infobox_index h3, a, a:link, a:visited, a:focus, a:hover, a:active, ul.active {
			border: none;
			margin: 0px 0px 0px 20px;
			font-size: 3.4vw;
			text-align: left;
			color:#055f78;
			line-height:100%;
			padding: 20px 0px;
		}
	
.infobox_index p, li {
	font-size:3vh;
	line-height:4vh;
	}
.infobox_index li {
		padding-left: 24px;
		line-height: 1.8em;
		font-weight:normal;
		background: url("../images/bullet_arrow.png") no-repeat scroll 0px 15px transparent;
		/*letter-spacing: 0.03em;*/
		/*text-shadow: #47494a 1px 1px 4px;*/
	}
}
.infobox2 h3, a, a:link, a:visited, a:focus, a:hover, a:active,	ul.active {
	border: none;
	margin: 0px 0px 0px 0px;
	font-size: 7vw;
	text-align: center;
	color:#055f78;
	line-height:100%;
	padding: 20px 0px;
	position:relative;
}
.infobox_last { /** Hält die letzte Infobox auf Abstand vom unteren Bildschirmrand*/
	margin-bottom:130px;
}

body {
	background: none;
}
	#wrap_all {
		background: none;
		height:100%; /* Mindesthoehe für den IE */ 
		margin-bottom: 0px;		
		width:100%;
		min-height: 100%; /* Mindesthoehe für moderne Browser */
		height:auto!important; /* Hoehe für moderne Browser */ 
	}


/** LOGO **/
#logo_section {
    position: fixed;
    background: rgb(155, 192, 209) no-repeat scroll 0px 0px;
    background: rgba(155, 192, 209, 0.4)) no-repeat scroll 0px 0px;
    margin-top: 0vh;
    height: 7vh;
    padding: 0 0;
    z-index: 10000;
    text-align: center;
    visibility: visible;
    box-shadow: 1vh 0vw #666;
}
	position:fixed;/* WICHTIG - er schwebt über dem Rest*/
	background: rgb(189, 197, 206) no-repeat scroll 0px 0px;
	background: linear-gradient(to bottom, #ffffff 0%, #e8eff1 100%);
	padding: 0px 0px 0px 0px;
	height: 9vh;
	text-align:center;
	z-index:10000;
	/**background: #c5d2d8;
		background: -moz-linear-gradient(top, #c5d2d8 0%, #E8EFF1 2%, #c5d2d8 100%); /* FF3.6-15 
		background: -webkit-linear-gradient(top, #c5d2d8 0%, #E8EFF1 2%, #c5d2d8 100%); /* Chrome10-25,Safari5.1-6 
		background: linear-gradient(to bottom, #c5d2d8 0%, #E8EFF1 2%, #c5d2d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E8EFF1', endColorstr='#c5d2d8',GradientType=0 ); /* IE6-9 *
		background-attachment:scroll;
		background-repeat:no-repeat;
		background-position: center center;
		background-size: cover;
		box-shadow: 0 0px 10px #666;
		-moz-box-shadow: 0 0px 10px #666;
		-webkit-box-shadow: 0 0px 10px #666;**/
}
	#logo_frame {
		background:none;
		height: 8vh;
		width: 100vw;
		border: none;
		margin: 0vh 0vw;
	}
		#logo {
							font-size:5vh;
				text-align:center;
			position:relative;
			height:9vw;
			width:100vw;
			margin: 0px auto 0px auto;
		}
			#logo h1 a, a:link, a:visited, a:focus, a:hover, a:active {
				font-size: 5vh;
			}

#upper_head {/** SEKTION ** /
	position:fixed;
	/**background:#d6dde1;**/
	opacity: 0.8;
	/**background: rgb(155, 192, 209) no-repeat scroll 0px 0px;**/
	/**background: rgba(215, 230, 237, 0.95) no-repeat scroll 0px 0px;**/
	height: 5vh;
	margin-top: 4vh;
	z-index: 20;
	/* SCHATTEN */
		box-shadow: 0 0px 0px #666;
		-moz-box-shadow: 0 0px 0px #666;
		-webkit-box-shadow: 0 0px 0px #666;
		-o-box-shadow: 0 0px 0px #666;
}
#nav li.menu_item a, a:link, a:visited, a:focus, a:hover, a:active {
	font-size: 4vh;
	padding: 1vh;
}
#header {/** =CONTAINER**/
	height: auto;
	padding: 0;
	z-index:0;
}
#lower_head{ /** SEKTION **/
 		position:fixed;
		background: rgb(155, 192, 209) no-repeat scroll 0px 0px;
		background: rgba(155, 192, 209, 0.4)) no-repeat scroll 0px 0px;
		margin-top: 8vh; /** entspricht der Höhe des LOGO-Frames **/
		height: 7vh;
		padding: 0 0; 
		z-index: 5000;
		text-align:center;
		visibility:visible;
		/*Schatten*/
			box-shadow: 1vh 0vw #666;
 }
 

	
/***** SPRUNGANKER ***** SPRUNGANKER ***** SPRUNGANKER *****/
			
 .position::before { 
        display: block;
        content: "";
        height:165px;
        margin-top: -165px; /** Korrektur der vertikalen Position von Sprungankern ***/
    } 		
			

#nav {
	display: block;
	position: relative;
	width: auto;
	margin-right: 80vw;
}
	#nav ul li {
	float: left;
	line-height: 4vh;
	background: none;
}
	ul.menutop {
		background: none;
		display: inline-table;
		list-style:none;
		float: left;
		position: absolute;
		height:3vh;
		margin: 1vh 0 1vh 0;
		padding: 0 1vh 0 1vh;
		overflow: inherit;
		width: auto;
	}
	ul.menutop.right {
		float:right;
		right:0px;
	}
			ul li.sub:hover {
				background: rgb(163,157,150); 
				background: rgba(163,157,150,0.9); 
				border-top: 1px solid rgb(149,143,133);
				border-left: 1px solid rgb(149,143,133);
				border-right: 1px solid rgb(149,143,133);
				border-bottom: none;
				height: 40px;
				width: 135px;
			}
			li.topic1:hover {
				width: 84px;
			}
			li.topic1engl:hover {
				width: 94px;
			}
			li.topic2:hover {
				width: 270px;
			}

ul.menutop:after {
		content: ""; clear: both; display: block;
	}
	
	ul.menutop li:hover > ul {
	visibility: visible;
	opacity: 1;
	}
	ul.menutop li:hover ul.sub {													
		display: block;
		padding-left: 15px;
		position: relative;
		top: 50px;
		left: 13px;
		width: auto;
		background-position: top left;
		z-index:10000;
	}

	ul.menutop li:hover ul.sub li a {}
		 background: transparent;
		 display:block;
		  color:#ffffff;
		  text-align: left;
		 border-bottom: 1px solid #f2f2f2;
		 border: none;
	}
	ul.menutop li:hover ul.sub li a:hover {
		 background:transparent;
		 color:#FFF;
	}	
	
	
	
/** SPRACHAUSWAHL  SPRACHAUSWAHL SPRACHAUSWAHL SPRACHAUSWAHL SPRACHAUSWAHL SPRACHAUSWAHL SPRACHAUSWAHL SPRACHAUSWAHL**/

/** MENU - SELECTION fo LANGUAGE **/
#language ul li, #schriftgroesse ul li {
	float: left;
	margin: 1vh 1vw;
	background: none;
	border: none;
}
#language ul li, #schriftgroesse ul li{
	float: left;
	margin: 1vh 1vw;
	background: none;
	border: none;
}
#language ul li, ul li a.inactive, ul li a.active{
	font-size: 3vh;
}
#language li {
	line-height: 1em;
}
	#language li a {
		font-weight:normal;
		border:none;
		padding:0px;
		margin:0px;
	}
	#language li a.inactive{
		font-weight:normal;
		border: none;
		/**border-bottom: 1px solid rgb(164, 197, 213);**/
		color: #111;
		padding:0px;
		margin:0px;
	}
		#selector {
    position: inherit;
    right: 20px;
    top: 12px;
	min-width:200px;
	overflow:hidden;
}
		#selector ul {
		margin: 0px;
	}

#language p, #language a, #schriftgroesse p {
	font-size: 3vh;
	color:#688f9b;
}

#intro {
	height: auto;
	overflow: hidden;
	margin-top:20px;
	z-index: 200;
}

#main {
	background:none;
	/**background-image:url(../images/boats.jpg);*/
	background-repeat:no-repeat;
	background-position: center -160px;
	background-size: 100%;
	background-attachment:scroll;
	margin-top:2vh;
	height: 100vh;
	width: 100vw;
}

#index #intro{

	height: 100%;
	min-height: 950px;
	padding: 20px 0px 0px 0px;
}

#container_bg {
	height: 100%;
	overflow: hidden;
	padding: 0px;
	z-index:100;
	margin-top:20px;
}

#index #container_bg {
	/*background: rgb(203, 209, 220) scroll no-repeat 50% 0px;*/
	/*-pie-background: rgba(222, 232, 244, 0.5) scroll no-repeat 50% 0px;*/
	/*background: rgba(222, 232, 244, 0.1) scroll no-repeat 50% 0px;*/
	/*background: transparent url(../images/index_palette.png);*/
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center 0px;
		background-size: 65%;
	height: 100%;
	overflow: hidden;
	padding: 0px;
	z-index:100;
	margin-top:0px;
}
/** BOX - CONTACT **********************************************************************************************************************************************************************/
#CONTACT-ANKER {
	background: #02465d;
	margin-top:5vh;
}
#CONTACT-ANKER h3{
	color: #e3f0f4;
}
#CONTACT-ANKER p{
	color: #e1eaf3;
}


/***************************************************************************************************************************************************************************************/
/** SEKTIONEN |  SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | SEKTIONEN | *****/
/***************************************************************************************************************************************************************************************/

.section {
	clear: both;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width:100%;
	float:left;
}
/** LOGO **/


/************************************************************************/	
/* 		FOOTER						*/
/************************************************************************/ 
#footer{
	color: #024359;
	height: 35px;
	width: vw;
 }
@media(max-width: 768px){ /* For mobile phones: */
#footer {
	height:1vh;
	color: #111111;
  }
}
#footer_info{
background-image: url(../images/line.png);
background-repeat: no-repeat;
background-position: top center;
padding: 2px 20px 2px 20px;
}
#footer_info p, #footer_info a, #footer_info a:hover, #footer_info a:active, #footer_info a:visited{
	font-size: 0.8em;
	line-height:  1.6em;
	color:#62676E;
	text-shadow: none;
	font-style: none;
	text-decoration: none;
}

#footer_info p{
	padding: 0px 15px;
}


.tooltip {
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 10%;
    margin-left: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: #e9edf1 transparent transparent transparent;
	z-index:1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/** BACKGROUND SLIDER ************************************************************************************************************************************************************************/
.slider {
	/*overflow: hidden;*/
}
.slider .slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-position: center;
 animation: slider 18s infinite;
}
.slider .slide:nth-child(1) {
   background-image: url('../images/backgrounds/HouseManagement.jpg');
   animation-delay: 0s;
}
.slider .slide:nth-child(2) {
   background-image: url('../images/backgrounds/boats.jpg');
   animation-delay: -6s;
}
.slider .slide:nth-child(3) {
   background-image: url('../images/backgrounds/gardening.jpg');
   animation-delay: -12s;
}
@keyframes slider {
  0%, 27%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  33% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  94% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}