/* tangerine-regular - latin */
@font-face {
	font-family: 'Tangerine';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(''),
		 url('../icons/tangerine-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../icons/tangerine-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* poppins-regular - latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(''),
		 url('../icons/poppins-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../icons/poppins-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* poppins-italic - latin */
  @font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local(''),
		 url('../icons/poppins-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../icons/poppins-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* poppins-700 - latin */
  @font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local(''),
		 url('../icons/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('../icons/poppins-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

* {
	margin:0; 
	padding:0;
}

body {
	font-family: 'Poppins', sans-serif;
	color: #515151;
	font-size: 14px;
	line-height: 1.8;
}

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

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

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

.fixed_oben_links{
	margin-top:3px;
	margin-left: 5px;
	z-index:99;
}

.fixed_oben_rechts{
	position: absolute; 
	right:5px; 
	top:1px;
	z-index:0;
}

.obereleiste {
	position: relative;
	width:100%;
	background-color: rgba(255,255,255,0.3);
	box-shadow: none; 
	z-index:1;
	overflow:hidden; 
	}
	
.navigation{
	width: 100%;
	margin-top: 2px;
}

.obereleiste_innen {
	margin-left: auto; 
	margin-right: auto; 
	padding-left:5px;
	padding-right:5px;
	max-width: 390px;  /* adapt to number and size of buttons */
	min-width: 240px;
	padding-top:3px;
	padding-bottom:5px;
}

.kartenleiste {
	position: relative; 
	}

.bildleiste{
	min-width: 240px;
	max-height:980px;
	overflow:hidden;
	margin-left: auto; 
	margin-right: auto; 
	margin-top:-180px;

}

@media (max-height: 900px) { /* passt die Bildleiste jeweils an die Browserfensterhöhe an */
  .bildleiste{
	max-height:910px;
	margin-top:-210px;
	z-index:0;
	}
}

@media (max-height: 800px) { /* passt die Bildleiste jeweils an die Browserfensterhöhe an */
  .bildleiste{
	max-height:870px;
	margin-top:-240px;
	z-index:0;
	}
}

@media (max-height: 700px) { /* passt die Bildleiste jeweils an die Browserfensterh�he an */
  .bildleiste{
	max-height:830px;
	margin-top:-310px;
	z-index:0;
	}
}


 @media (max-width: 850px) { /*blendet Inhalte aus, die nur angezeigt werden, wenn das Browserfenster ausreichend breit ist und es zu keinen �berlappungen mit den eigentlichen Inhalten kommt) */
	.ausblenden_schmal {
	display: none;
  } 
}


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

@media (max-width: 840px) {
    .bild_der_bildleiste{
	width:840px; 
  } 
    .bildleiste{
	margin-top:0px !important;
	}
}


@media (min-width: 560px) { /* ab dieser Größe skaliert das Bild der Bildleiste */
  .bild_der_bildleiste{
	width:100%; 
	}
}


/*Breites Display */
  .ausgeblendet_schmal {
   display: none;
  }
@media (min-width: 701px) {  
   .ausgeblendet_schmal {
   display: inline;
  }
}



/*Schmales Display */
  .ausgeblendet_breit {
   display: none;
  }
@media (max-width: 700px) {
   .ausgeblendet_breit {
   display: inline;
  }
}


.mittlereleiste {
	max-width: 820px; 
	min-width: 240px; 
	margin-left: auto; 
	margin-right: auto; 
	padding-top: 10px;
	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: 220px; 
	float: left; 
	margin-right: 40px;
	margin-bottom: 20px;
	margin-top:30px;
}

.spalten2_r560 {
	margin-left: 260px;
	min-width: 220px; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
	margin-bottom: 20px;
}
	
.single_spalte {
	margin-left: 50px;
	margin-bottom: 20px;
	min-width: 220px; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
	max-width: 600px;
}


	
/*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: 28px;
	padding-right: 28px;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background-color: rgb(240, 240, 240);
	margin-left: 40px;
	margin-bottom: 50px;
	padding-top:10px;
	margin-top:10px;
	border-radius:8px;
}

	

/* Für Formulare und Bilder-Abschnitte innerhalb der 560er Spalte */
.spalte560_l {
	min-width: 140px;  
	float:left; 
	width:40%;
	}

.spalte560_r {
	float:left; 
	min-width: 159px; 
	width:59%;
	}



/*2-Spaltenlayouts: Unter 580px wird die 160er Spalte jeweils ausgeblendet.  */
@media (max-width: 580px) {
  .spalten2_r560{
    margin-left: 0px;
  }
  .spalten2_l160 {
    display: none;
  }
  .spalten2_l560{
    margin-right: 0px;
  }
  .spalten2_r160 {
    display: none;
  }
  .ausblenden {
	display: none;
  }
  .bild_der_bildleiste{
	width:580px; 
  }
}


/*Unter 380px breite wird die Eingabemaske auf 100% gesetzt.  */
@media (max-width: 380px) {
  .spalte560_r{
  width:100%;
  }
}




.untereleiste {
	width: 100%;
	/* background-image: url("../bilder/seitendesign/bayern-grau.png"); */
	clear:both;
	/* border-top:70px solid #FFFFFF; */
}
.untereleiste_innen {
	margin-left: auto; 
	margin-right: auto; 
	max-width: 820px;
	min-width: 240px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}



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


.box_transparent {
    background-color: #DFFFD2;
	padding: 4px;
	width:98%;
	border-radius:5px;
}

.box_grau {
	border: 1px solid orange;
	padding: 5px;
	width:98%;
}

.box_fehlermeldung {
	background-color: #ffdada;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius:5px;
}


.box_grau_grauer_rahmen {
	background-color: #f0f0f0;
	padding: 5px;
	width:98%;
	border-radius:5px;
}


.bilderrahmen220_aussen {
	background-color: white;
	border: 5px solid white;
	box-shadow: 0 0 5px #404040;
	width:220px; 
	height:147px; 
	overflow:hidden; 
	float:right;
	}
	
.bilderrahmen220_innen {
	position:relative;
	height:147px;
	width:220px; 
}


.bilderrahmen220_umsbild {
	position:absolute; 
	margin:-100%; 
	top:0; 
	bottom:0; 
	left:0; 
	right:0;
}


.bilderrahmen220_img {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	}



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


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


/* Formatierungen */
p, br {
	margin-bottom: 0.5rem;
}

h1 {
	font-size: 24px;
	font-weight: normal;
	padding-top:20px;
	padding-bottom:10px;
}

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

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

img {
	border: 0;
	vertical-align: text-bottom;
}

img.rechteseite {
	border: 0;
	margin-top: 20px;
	margin-bottom: 0px;
	border:1px solid #CCCCCC;
}

.bildloeschen {
	top:-30px; 
	position:relative; 
	background-color:rgba(255,255,255,0.9); 
	padding:2px;
	margin-left: 3px; 
	border: 1px solid grey;
	}


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

input {
	border-radius:4px;
	background-color:rgb(255, 255, 255);
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
}

/* The new container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  /*position: absolute;*/
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;   
  border-radius: 3px;
  border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a pink background */
.container input:checked ~ .checkmark {
  background-color: #f36;
  border: 1px solid #f36;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

textarea {
	border-radius:4px;
	background-color:rgb(255, 255, 255);
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
}
	
select {
	border-radius:4px;
	background-color:rgb(255, 255, 255);
	border:1px solid #cccccc;
	padding: 5px 5px;
	-moz-box-sizing: border-box;
	color:#555555;
	}
	
	
.select_oben {
	border: 1px solid transparent;
	padding: 2px;
	font-size:12px; 
	background-color: rgba(0,0,0,0.5); 
	color:white; 
	border-radius:1px;
	}


/*Damit auch iOS die Buttons möglichst korrekt anzeigt */
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox {
-webkit-appearance: none;
}

/*Damit Chrome die Datepicket Felder ohne Pfeil "inner-spin-buttons" anzeigt */
input[type=date]::-webkit-inner-spin-button {
  display: none;
}


.button {
	background-color:#ff3366;
	border-radius:3px;
	color:#ffffff;
	padding:4px 4px;
	text-decoration:none;
	border:1px solid transparent;
	margin-bottom: 0px;
	transition: 0.3s;
}.button:hover {
	background-color:#023C64;
	transition: 0.3s;
	cursor: pointer;
	box-shadow: 0 0 5px white; 
}.button:active {
	position:relative;
	top:1px;
}


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

.help-block{
	color: #737373;
	display:block;
	margin-left:5px;
	font-size: 12px;
	text-align:right;
	font-style: italic;
	}


tr {vertical-align: top;}



.ganzebreite {
	width: 98%
}

.kleinertext { 
	font-size: 12px;	
	}
	

.menu_ul_li{
	list-style: none outside ;

	}
	
.gastgeber_eigenschaften_ul {
	list-style: none outside none;
	font-size: 12px; 
	line-height:18px; 
	width:100%; display:table
	}
.gastgeber_eigenschaften_li {
	float:left;
	margin-right:4px;
	margin-bottom:4px;
	border:1px solid #cccccc; 
	padding-left:2px;
	padding-right:2px;
	}



/* Links */

a:link, a:visited {
	color: #515151; 
	}
a:hover, a:active {
	color: #ff3399;
	transition: 0.3s;
	}


a.ohnedeko:link, a.ohnedeko:visited {text-decoration:none; color: #023C64;}
a.ohnedeko:hover, a.ohnedeko:active {text-decoration:underline; color: #008800;}
	
a.grau:link, a.grau:visited {color: grey;}
a.grau:hover, a.grau:active {color: #008800;}

a.menu:link, a.menu:visited {
	font-size:13px;
	line-height:22px;
	display:block;
	border-bottom: 1px solid #cccccc;
	margin-top: 0px;
	margin-bottom: 15px;
	color:#515151;
	text-decoration:none;
	transition: 0.3s;
	}

a.menu:hover, a.menu:active {
	font-size:13px;
	line-height:22px;
	display:block;
	border-bottom: 1px solid #ff3366;
	margin-top: 0px;
	margin-bottom: 15px;
	text-decoration:none;
	transition: 0.3s;
	background-color:#f0f0f0;
	}



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

a.tfhmenuoben:link, a.tfhmenuoben:visited {
	color: #484848;
    cursor: pointer;
	float:left; 
	padding-left: 9px;
    padding-right: 9px;
    margin-right: 6px;
	height:30px;
	line-height:30px;
	margin-bottom:4px;
	margin-top:3px;
	transition: 0.3s;
	text-decoration:none;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #656565;
	}
	
	
a.tfhmenuoben:hover, a.tfhmenuoben:active {
	background-color: #ff3366;
	color: white;
	transition: 0.3s;
	box-shadow: 0 0 2px #bfbfbf; 
	}


a.tfhmenuoben2 {
    cursor: pointer;
	padding-left: 9px;
    padding-right: 9px;
    margin-right: 6px;
	float:left; 
	height:30px; 
	line-height:30px;
	margin-bottom:4px;
	margin-top:3px;
	text-decoration:none;
	background-color:#023c64;
	color:white;
	border-radius:4px;
	box-shadow: 0px 0px 2px #656565;
	}
	

a.tfhmenuobenbutton:link, a.tfhmenuobenbutton:visited {
	color: white;
    cursor: pointer;
	float:left; 
	padding-left: 4px;
    padding-right: 4px;
    margin-right: 6px;
	height:28px; 
	line-height:28px;
	margin-bottom:3px; 
	margin-top:3px; 
	transition: 0.3s;
	text-decoration:none;
	border-radius: 4px;
	box-shadow: 0 0 1px #b2b2b2;
	}
	
a.tfhmenuobenbutton:hover, a.tfhmenuobenbutton:active {
	background-color: #023C64 !important;
	}


a.hellgruenbutton:link, a.hellgruenbutton:visited {
    cursor: pointer;
	float:left; 
	padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
	height:28px; 
	line-height:28px;
	margin-bottom:4px;
	margin-top:4px;
	transition: 0.3s;
	text-decoration:none;
	background-color: #ff3366;
	border-radius:4px;
	border: 1px solid white;
	box-shadow: 0 0 2px #b2b2b2; 
	}
	
	
a.hellgruenbutton:hover, a.hellgruenbutton:active {
	background-color: white;
	transition: 0.5s;
	box-shadow: 0 0 2px #b2b2b2;
	}