/* Version 1.0 Feb2015 */

* {
	margin:0; 
	padding:0;
}



body {
	font-family: Arial, sans-serif;
	color: #333333;
	font-size: 14px;
	line-height:1.6;
}



@media only print {
  .obereleiste, .obereleiste_innen , .obereleiste2, .obereleiste2_innen , .fixed_oben_links, .obereleiste_dahinter, .obereleiste_spalten2_l, .obereleiste_spalten2_r {
    display: none;
  }
}




/*Unter 820 Px Breite werden einige Inhalte ausgeblendet  */
@media (max-width: 820px) {
   .ausgeblendet_820 {
   display: none;
  }
}


/*Whatsapp Button */
  .ausgeblendet_whatsapp {
   display: none;
  }
@media (max-width: 500px) {
   .ausgeblendet_whatsapp {
   display: inline;
  }
}



/* Seitenstruktur */



.anker{
     top:0px;
     position:relative;
     float:left;
     width:100%;
}

.obereleiste {
	position:relative;
	width:100%;
	background-color: #0098d0; 
	box-shadow: 0 0 4px #b2b2b2; 
	z-index:1;
}
	
.navigation{
	background: #0098d0;
	width: 100%;
	padding-top:8px;
	padding-bottom:6px;
}


.navigation_unterhalb{
	background: white;
	width: 100%;
	padding-top:2px;
	padding-bottom:2px;
}


.obereleiste_innen {
	margin-left: auto; 
	margin-right: auto; 
	max-width: 825px;
	min-width:240px;
	padding-left:5px;
}



/*Obere Leiste - 2-Spalten-Layout mit schmaler linker und breiter rechter Spalte.*/
.obereleiste_spalten2_l{
	width: 100px; 
	float:left; 
	background-color: rgb(240, 240, 240);
}

.obereleiste_spalten2_r{
	margin-left: 110px;
	min-width: 210px; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}






.bildleiste{
	max-width: 820px; 
	min-width: 240px; 
	margin-left: auto; 
	margin-right: auto; 
}



@media (min-width: 820px) { /* führt dazu, dass der obere Header bei geringer Breite mitscrollt, sonst aber fixiert ist */
  .obereleiste {
    position: fixed;
  }
	.anker {
	top:-110px;
	}
   .content {
    padding-top: 70px;  /*Höhe von Logo und oberer Leiste addiert*/
  }
}



.mittlereleiste {
	padding-top: 60px; 
	max-width: 820px; 
	min-width: 240px; 
	margin-left: auto; 
	margin-right: auto; 
	padding-left:10px;
	padding-right:10px;
	clear:both;
	}






/*2-Spalten-Layout mit schmaler linker und breiter rechter Spalte. Die linke Spalte wird bei schmalem Browser ausgeblendet*/
.spalten2_l160{
	width: 160px;
	float:left; 
	margin-right: 30px;
	margin-bottom: 50px;
	margin-top:10px;
}
.spalten2_r560 {
	margin-left: 190px;
	min-width: 220px; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
	margin-bottom: 50px;
}
	
	

	
/*2-Spalten-Layout mit breiter linker und schmaler rechter Spalte. Die rechte Spalte wird bei schmalem Browser ausgeblendet*/	
/*Achtung: Im Quelltext muss die rechte Spalte vor der linken Spalte integriert sein, damit es funktioniert.*/
.spalten2_l560 {
	min-width: 220px; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
	margin-bottom: 50px;
	margin-right: 260px;
	}
.spalten2_r160{
	width: 160px; 
	float:right; 
	padding-left: 29px;
	padding-right: 29px;
	background-color: rgb(240, 240, 240);
	margin-left: 40px;
	margin-bottom: 50px;
	position:relative;
	top:-36px;
}
	


	
	
/*3-Spalten-Layout mit schmaler linker, 360-breiter mittlerer und schmaler rechter Spalte. Die rechte Spalte wird bei schmalem Browser erst unterhalb der linken Spalte angeordnet und anschließend zusammen mit der linken Spalte ausgeblendet*/	
/*Achtung: Im Quelltext muss die rechte Spalte vor der mittleren Spalte integriert sein, damit es funktioniert.*/
.spalten3_l160 {
	float:left; 
	width: 160px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #CCCCCC;
	background-color: rgb(240, 240, 240);
	margin-right: 29px;
	margin-bottom: 50px;
	margin-top:10px;
}

.spalten3_m360 {
	float:left; 
	max-width:360px;
	min-width:220px;
	margin-bottom: 50px;
	}
	
.spalten3_r160 {
	float:right; 
	width: 160px;
	padding-left: 19px;
	padding-right: 19px;
	border: 1px solid #CCCCCC;
	background-color: rgb(240, 240, 240);
	margin-left: 29px;
	margin-bottom: 50px;
	margin-top:10px;
	}
	


	



/* Für Formulare und Bilder-Abschnitte innerhalb der 560er Spalte */
.spalte560_l {
	width: 220px;  
	float:left; 
	margin-right: 20px;
	}

.spalte560_r {
	width:320px;
	float:left; 
	}


	
	
	

/* Für Formulare und Bilder-Abschnitte innerhalb der 760er Spalte */
.spalte820_l {
	width: 220px;  
	float:left; 
	margin-right: 20px;
	}

.spalte820_r {
	width:580px;
	float:left; 
	}
	
		
	

/*3-Spaltenlayout: Unter 840px wird die rechte 160er Spalte unterhalb der linken 160er Spalte angeordnet.  */
/*Im html-Code muss dafür diese Reihenfolge eingehalten werden: Linke Spalte -> Rechte Spalte -> Mittlere Spalte  */
@media (max-width: 860px) {
   .spalten3_m360 {
    float: none;
    margin-left: 260px;
	max-width:360px;
  }
   .spalten3_r160 {
    float:left; 
	margin-left: 0px;
	margin-right: 80px;
	clear:both;
  }
}




/*2-Spaltenlayouts: Unter 580px wird die 160er Spalte jeweils ausgeblendet.  */
/*3-Spaltenlayout: Unter 580px werden beide 160er Spalte ausgeblendet.  */
@media (max-width: 580px) {
  .spalten2_r560{
    margin-left: 0px;
  }
  .spalten2_l160 {
    display: none;
  }
  .spalten2_l560{
    margin-right: 0px;
  }
  .spalten2_r160 {
    display: none;
  }
   .spalten3_l160 {
    display: none;
  }
   .spalten3_r160{
    display: none;
  }
   .spalten3_m360 {
    margin-left:0px;
  }
   .spalte820_r {
	width:100%;
  }
   .spalte560_r {
	width:100%;
  }
}





.untereleiste {
	border-top:100px solid #FFFFFF; 
	position:relative;
	width:100%;
	background-color: #0098d0;
	z-index:1;
	overflow:hidden; /* verhindert margin-top Probleme */
	padding-bottom: 40px;
}



.untereleiste_innen {
	margin-left: auto; 
	margin-right: auto; 
	max-width: 820px;
	min-width:240px;
	padding-top: 30px;
	color: white;
	padding-left:10px;
	padding-right:10px;
}



.box_transparent {
	background-color: #f0f0f0;
	border: 1px solid #CCCCCC;
	padding: 5px;
	border-radius:8px;
	width:96%;
}

.box160 {
	margin-bottom: 1.3em;
	font-size: 11px;
}






/*Anonza*/

.anonza_box{
	margin-top: 20px;
	margin-bottom: 20px;
	width:100%;
}

.anonza_anzeige {
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px dotted grey;
	width:100%;
}

.anonza_vorschaubild {
	float:right;
	margin-left:10px;
}

.anonza_infos {
	font-size: 11px;
	color: grey;
}

.anonza_weiter {
	font-size: 11px;
	color: grey;
}


a.anonza_link:link, a.anonza_link:visited {
	text-decoration:none;
}

a.anonza_link:hover, a.anonza_link:active {
	text-decoration:underline;
}




/* Formatierungen */







p {
	margin-bottom: 1.8em;
}




.li_weit {
	margin-top: 0.3em;
	margin-bottom: 1.3em;
	margin-left: 1em;
}

	

h1 {
	font-size: 24px;
	font-weight: normal;
	padding-bottom:0px;
	margin-bottom:10px;
	border-bottom: 1px solid #0098D0;
}

h2 {
	font-size: 18px;
	font-weight: normal;
	padding-top:20px;
	padding-bottom:10px;
}


h3 {
	font-size: 18px;
	font-weight: normal;
	padding-top: 40px;
	margin-bottom: 0.6em;
	clear: left;
}

h4 {
	font-weight: normal;
	padding-top: 30px;
	margin-bottom: 1em;
	border-bottom: 1px solid gray;
	clear: left;
}



img {
	border: 0;
}





/* Formulare */


.form-group{
	margin-bottom:10px;
	width:100%;
	float:left;
}



input {
	border-radius:3px 3px 3px 3px;
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
}



textarea {
	border-radius:3px 3px 3px 3px;
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
}
	

select {
	border-radius:3px 3px 3px 3px;
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
	}
	


.button {
	background-color:#0098d0;
	border-radius:3px;
	color:#ffffff;
	padding:5px 5px;
	text-decoration:none;
	border:1px solid transparent;
	margin-top: 10px;
	margin-bottom: 30px;
	transition: 0.8s;
	box-shadow: 0 0 5px grey; 
}.button:hover {
	background-color:#007099;
	transition: 0.8s;
	box-shadow: 0 0 5px white; 
}.button:active {
	position:relative;
	top:1px;
}


.button_grau {
	background-color:grey;
	border-radius:3px;
	color:#ffffff;
	padding:5px 5px;
	text-decoration:none;
	border:1px solid transparent;
	margin-top: 10px;
	margin-bottom: 30px;
	transition: 0.8s;
	box-shadow: 0 0 5px grey; 
}.button:hover {
	background-color:#007099;
	transition: 0.8s;
	box-shadow: 0 0 5px white; 
}.button:active {
	position:relative;
	top:1px;
}






a.tfhmenuobenbutton:link, a.tfhmenuobenbutton:visited {
	color: white;
    cursor: pointer;
	float:left; 
	padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
	height:22px; 
	line-height:22px;
	margin-top:5px; 
	margin-bottom:5px; 
	margin-left:1px; 
	padding-left:3px; 
	border-radius: 4px;
	transition: 0.3s;
	text-decoration:none;
	}
	

	
a.tfhmenuobenbutton:hover, a.tfhmenuobenbutton:active {
	background-color: #0098D0 !important;
	}





label{
	display:block;
	margin-bottom:1px;
	margin-top:3px;
}

.help-block{
	color: #737373;
	display:block;
	font-size: 11px;
	}

.nach_oben_link{
	position:fixed;
	z-index:9999;
	right: 10px;
	bottom: 10px;
	background-color:#0098d0;
	display:block;
	padding:5px;
	border-radius:5px;
	box-shadow: 0 0 5px grey; 
	line-height:1em;
	font-size:5px;
}

.buchung_anfragen_link{
	position:fixed;
	z-index:9999;
	right: 50px;
	bottom: 13px;
	background-color:#0098d0;
	display:block;
}


tr {vertical-align: top;}



.ganzebreite {
	width: 100%
}

.kleinertext { 
	font-size: 11px;	
	}
	


/* http://linuxundich.de/webhosting/youtube-videos-responsive-in-wordpress-blogs-und-statische-webseiten-einbetten/ */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	
	
/* http://linuxundich.de/webhosting/youtube-videos-responsive-in-wordpress-blogs-und-statische-webseiten-einbetten/ */
.issuu-container {
    position: relative;
   padding-bottom: 100%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.issuu-container iframe,
.issuu-container object,
.issuu-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	
	
	
/* Links */



a:link, a:visited {
	color: #333333; 
	}
a:hover, a:active {
	color: #0098d0;
	}




a.menu:link, a.menu:visited {
	line-height:24px;
	display:block;
	border-bottom: 1px solid #0098d0;
	margin-bottom: 10px;
	color:#333333;
	text-decoration:none;
	transition: 0.3s;

}

a.menu:hover, a.menu:active {
	line-height:24px;
	display:block;
	border-bottom: 1px solid #0098d0;
	margin-bottom: 10px;
	color:#333333;
	text-decoration:none;
	font-style: italic;
	transition: 0.3s;
}



a.menu_titel:link, a.menu_titel:visited {
	height:34px; 
	overflow:hidden; 
	background-color:#0098d0; 
	color:white; 
	line-height:16px; 
	margin-bottom:4px;
	display:block;
	text-decoration:none;
	transition: 0.3s;
	font-size:13px;

}

a.menu_titel:hover, a.menu_titel:active {
	line-height:16px; 
	display:block;
	margin-bottom: 4px;
	background-color:#007099; 
	color:white; 
	text-decoration:none;
	font-style: italic;
	transition: 0.3s;
}






a.button2:link, a.button2:visited {
	background-color:#0098d0;
	border-radius:3px;
	color:#ffffff;
	padding:5px 5px;
	text-decoration:none;
	border:1px solid transparent;
	margin-top: 10px;
	margin-bottom: 30px;
	transition: 0.8s;
	box-shadow: 0 0 5px grey; 
	color:white;
}
a.button2:hover , a.button2:active{
	background-color:#007099;
	transition: 0.8s;
	box-shadow: 0 0 5px white; 
}





.menu_ul_li{
	list-style: none outside none;
	margin: 0px;
	}
	




a.tfhmenuoben:link, a.tfhmenuoben:visited {
	color: #FFFFFF;
    cursor: pointer;
	float:left; 
	padding-left: 10px;
    padding-right: 10px;
	height:30px; 
	line-height:30px;
	text-decoration:none;
	transition: 0.8s;
	}
	

	
a.tfhmenuoben:hover, a.tfhmenuoben:active {
	transition: 0.8s;
	background-color:#007099;
	}





	
	


a.tfhmenuoben_unterhalb:link, a.tfhmenuoben_unterhalb:visited {
	color: #333333;;
    cursor: pointer;
	float:left; 
	padding-left: 10px;
    padding-right: 10px;
	height:21px; 
	line-height:21px;
	text-decoration:none;
	transition: 0.3s;
	font-size: 11px;
	}   
	

	
a.tfhmenuoben_unterhalb:hover, a.tfhmenuoben_unterhalb:active {
	transition: 0.3s;
	text-decoration:underline;
	}





.untereleiste {
	border-top:100px solid #FFFFFF; 
	position:relative;
	width:100%;
	background-color: #0098d0;
	z-index:1;
	overflow:hidden; /* verhindert margin-top Probleme */
	padding-bottom: 40px;
}



.untereleiste_innen {
	margin-left: auto; 
	margin-right: auto; 
	max-width: 820px;
	min-width:240px;
	padding-top: 30px;
	color: white;
}










		
	
.obereleiste_table {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}










.tfh_mittlere_leiste{
	width:778px; 
	margin-left:auto;
	margin-right:auto; 
}

.tfh_rechte_spalte {
	width:160px; 
	float:right
}


.tfh_linke_spalte{
	width:560px; 
	float:left;
}


.hauptfeld {
	width: 760px;
	padding: 20px;
	padding-right: 20px;
	padding-top: 1px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}

.inhalt_links {
	width: 468px; 
	float:left;
	margin-right: 30px;
	padding-bottom: 20px;
	}
	
.inhalt_rechts{
	width: 240px;
	float: left;
	padding-bottom: 20px;
	}
	
.hinweisbox {
	background-color: #E9E9E9;
	padding: 4px;
	line-height: 14px;
	font-size: 11px;
	}




a.header_1:link, a.header_1:visited {
	color: white;
	text-decoration: none;
	font-weight: bold;
	margin: 1px;
	padding-bottom: 2px;
	padding-top: 6px;
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom:4px;
	-webkit-transition:all 933ms;
	-moz-transition:all 933ms;
	-ms-transition:all 933ms;
	-o-transition:all 933ms;
}

a.header_1:hover, a.header_1:active {
	text-decoration: none;
	font-weight: bold;
	margin: 1px;
	padding-bottom: 10px;
	padding-top: 6px;
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom:4px;
	border-bottom:1px solid white;
}


a.bottom:link, a.bottom:visited {
	color: white;
	text-decoration: none;
}


a.bottom:hover, a.bottom:active {
	color: white;
	text-decoration: underline;
}


a.header2link:link, a.header2link:visited {
	text-decoration: none;

}

a.header2link:hover, a.header2link:active {
	text-decoration: underline;

}


a.artikelueberschriftlink:link, a.artikelueberschriftlink:visited {
	text-decoration: none;


}

a.artikelueberschriftlink:hover, a.artikelueberschriftlink:active {
	text-decoration: underline;

}

.header_2 {
	font-size: 11px;
}


img {
	border: 0;
}

p {
	line-height: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 1.8em;
}

.main, .navi { 
	font-size: 11px;
}


.box130 {
	border: 1px solid black;
	padding: 1px;
	width: 128px;
	text-align:left;
}

	
.box130_2 {
	border-bottom: 1px solid gray;
 	padding: 1px;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	width: 128px;
	text-align:left;
}


.box130_2_innen {
	padding: 3px;
	text-align:left;
	font-size: 11px;
}






.box160 {
	border: 1px solid black;
	padding: 1px;
	width: 156px;
	text-align:left;
}


.box160_2 {
	border-bottom: 1px solid #99999B;
	border-left: 1px solid #99999B;
	border-right: 1px solid #99999B;
	width: 158px;
	text-align:left;
}


.box160_2_innen {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align:left;
	font-size: 11px;
	background-color: white;
}



.box468_simple {
	border:1px dotted grey;
	background-color:#f0f0f0;
	padding: 8px;
	}
	


	
	
	

.box468 {
	width: 100%;
	text-align:left;
}

.box468_innen {
	line-height:20px;
	padding-bottom: 2px;
	text-decoration:none;
}

.box468_2 {
	background-color:#f0f0f0;
	width: 100%;
	text-align:left;
	border:1px dotted grey;
}


.box468_2_innen {
	padding: 8px;
	text-align:left;
}





.box110 {
	border: 1px solid black;
	padding: 1px;
	width: 106px;
	text-align:left;
}



.box110_2 {
	border-bottom: 1px solid #99999B;
	border-left: 1px solid #99999B;
	border-right: 1px solid #99999B;
	width: 108px;
	text-align:left;
}


.box110_2_innen {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align:left;
	background-color: white;
}




ul.box {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	padding-left: 11px;
}

li.box {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	padding-left: 10px;
}




.tabellen tr:hover {background-color:#E9E9E9;}







a {
	color: #333333;
	-webkit-transition:all 1933ms;
	-moz-transition:all 1933ms;
	-ms-transition:all 1933ms;
	-o-transition:all 1933ms;
}


.rightbox {
	border: 1px solid black;
}

.navi a { 
	text-decoration: underline;
}

h2 {
	font-weight: bold;
}




.small p {
	font-size: 11px;
}

.hiddenlink, .hiddenlink a {
	font-size: 11px;
	color: #cccccc;
}

.article-title {
	font-size: 18px;
	font-weight: bold;
}
 
.article-rubrik {
	font-size: 11px;
	color:gray;
}

.article-subtitle {
}

.article-anreisser {
		font-weight: bold;
}

#preisliste td {
	font-size: 8pt;
}

.reddot {
        background: #df012b;
	color: white;
	font-weight: bold;
}

.orangeback {
	background: #ffccaa;
}





/*
Bezeichnung: Nordseewolf Profi-Wetter
Version: 1.0
Author: EnEsWe
Author URI: http://www.nordseewolf.de/ 
*/

/*
Wetterbox 1
*/

.NSWwetter_RA {
margin-top: 1px;
margin-bottom: 0px;
font-family:arial,verdana;
font-size:11px;
width:160px;
}


/*linke Spale*/
.NSWwetter_BOXa {
width:60px;
float:left;
clear:left;
margin-bottom:12px;
}


/*rechte Spale*/
.NSWwetter_BOXb {
font-family:arial,verdana;
font-size:11px;
width:85px;
min-height:65px;
float:right;
}


.clear {
clear:both;
margin:10px;
}

/*
Wetterbox BIG
*/

.NSWwetter_RA2 {
width:468px;
font-family:arial,verdana;
font-size:12px;
}

/*Tag und Temperaturen*/
.NSWwetter_BOX2a1 {
margin:0px 0px 5px 0px;
}

/*Wettergrafiken*/
.NSWwetterBOX2a1img {
float:left;
margin-right:5px;
width:65px;

}


.NSWwetter_BOX2a1text {
width:393px;
float:left;
height:65px;
line-height: 1.8em;
margin:0px 0px 25px 0px;

}

.NSWwettertitel2 {
font-weight:bold;
font-size:14px;
}

.clear2 {
clear:both;
}

.NSWwetter_BOXcopyright2 {
text-align:center;
font-size:10px;
text-decoration:none;
}