/*--------------------------------------------------------------
VOREINSTELLUNGEN
--------------------------------------------------------------*/

*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* Bewirkt, dass padding- und border-Größen nicht zur width-Angabe hinzuaddiert werden
--------------------------------------------------------------*/

img{
	vertical-align:bottom;
	border:0px;
}
/* Korrigiert den HTML5-Bug, dass 3 Pixel rand unter einem <img /> dargestellt werden.
--------------------------------------------------------------*/

body,html{
	height:100%;
}
/* Aktiviert die volle Höhe eines Browserfensters
--------------------------------------------------------------*/

body,p,h1,h2,h3,h4,h5,h6{
	padding:0px;
	margin:0px;
}
/* Setzt die voreingestellten Abstände der angegebenen HTML-Elemente auf 0.
--------------------------------------------------------------*/

nav ul, nav li{
	padding:0px;
	margin:0px;
	list-style-type:none;
}
/* Setzt die Listeneinzüge für Listen und Listenpunkte innerhalb eines <nav> auf 0 und unterdrückt die Aufzählungszeichen (sinnvoll für Menüleisten).

--------------------------------------------------------------
ENDE VOREINSTELLUNGEN
--------------------------------------------------------------*/





body{
	
	background-color: white;
	background-image: url(img/fluss1_1.jpg);
	background-repeat: no-repeat;
}

.spacer{
	
	
	height:5%;
	
	
}

* {box-sizing:border-box}



.reihe0{
	
	position: relative;
	overflow: visible;
	z-index: 1;	
	display: flex;
	flex-direction: row;
	
	
}

.logo{
	
	background-image: url(img/logo.png);
	background-size: 9%;
	background-repeat: no-repeat;	
	width: 90%;
	height: 90%;
	position: absolute;
	margin-left: 2%;
	margin-top: 1%;
	z-index: -1;
	
	
}

.banner{
		white-space: nowrap;
	width: 100%;
	height: 200px;
	position: relative;
	overflow: visible;
	z-index: 1;	

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:white;
	font-family: 'source sans pro', sans-serif;
	font-weight: 300;
	font-size: 90pt;
	text-shadow: 0 0 3px black;
	text-align: center;
}

.bannercover{
		
	width: 100%;
	height: 200px;

	
	
	background-color: beige;
	opacity: 0%;
	position: absolute;
	z-index: 2;
	
	
	font-family: arial bold;
	font-size: 80pt;
	/*
	background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
}

.starttext{
		
	width: 100%;
	height: 100px;
	position: relative;
	overflow: visible;
	z-index: 1;	

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:white;
	font-family: 'source sans pro', sans-serif;
	font-size: 30pt;
	font-weight: 300;
	text-shadow: 0 0 6px black;
	text-align: center;
}

.buchungBox{
		

	max-width: 100%;
	height: 65%;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	display: flex;
	flex-direction:row;
	margin-top: 5%;
	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	

	background-color: white;
	font-family: 'source sans pro', sans-serif;
	font-size: 30pt;
	text-shadow: 0 0 1px black;

	align-content: center;

}

.buchungtxt{
		

	max-width: 1280px;
	height: 300px;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	width: 50%;

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:black;

	font-family: 'source sans pro', sans-serif;
	font-size: 15pt;
	/*text-shadow: 0 0 3px black;*/
	text-align: left;
	align-content: center;
	margin-left: 5%;
	margin-right: 4%;
	margin-top: 10%;
	vertical-align: middle;
}

.buchungPic {
	
		background-image: url(img/front1_1.jpg);
		background-size: 75%;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 10px;
		padding-left: 5px;

		width: 80%;
		margin-right: 1%;
	
}

.buchungBox2{
		

	max-width: 100%;
	height: 65%;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	display: flex;
	flex-direction:row;
	margin-top: 4%;
	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	

	background-color: white;
	font-family: 'source sans pro', sans-serif;
	font-size: 30pt;
	text-shadow: 0 0 1px black;
	text-align: center;
	align-content: center;

}

.buchungtxt2{
		

	max-width: 1280px;

	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	width: 80%;

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:black;

	font-family: 'source sans pro', sans-serif;
	font-size: 13pt;
	/*text-shadow: 0 0 3px black;*/
	text-align: left;

	margin: auto;
	margin-left: 15px;

}

.buchungPic2 {
	
		background-image: url(img/back1.jpg);
		background-size: 95%;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 10px;
		padding-left: 5px;

		width: 80%;
		margin-right: 4%;
	
}

.buchungBox3{
		

	max-width: 100%;
	height: 65%;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	display: flex;
	flex-direction:row;
	margin-top: 4%;
	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	

	background-color: white;
	font-family: 'source sans pro', sans-serif;
	font-size: 30pt;
	text-shadow: 0 0 1px black;
	text-align: center;
	align-content: center;

}

.buchungtxt3{
		

	max-width: 1280px;
	height: 300px;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	width: 80%;

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:black;

	font-family: 'source sans pro', sans-serif;
	font-size: 15pt;
	/*text-shadow: 0 0 3px black;*/
	text-align: left;
	align-content: center;
	margin-left: 4%;
	margin-right: 2%;
	margin-top: 10%;
	vertical-align: middle;
}

.buchungPic3 {
	
		background-image: url(img/kueche1.jpg);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 10px;
		padding-left: 5px;

		width: 80%;
	
}

.buchungBox4{
		

	max-width: 100%;
	height: 200%;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	display: flex;
	flex-direction:row;
	margin-top: 4%;
	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	

	background-color: white;
	font-family: 'source sans pro', sans-serif;
	font-size: 30pt;
	text-shadow: 0 0 1px black;
	text-align: center;
	align-content: center;

}

.buchungtxt4{
		

	max-width: 1280px;
	height: 300px;
	/*position: relative;
	overflow: visible;
	z-index: 1;	*/
	width: 80%;

	

	/*background-image: url(img/front1.jpg);
	background-size: 100%;
	background-position:center;
	background-repeat: no-repeat;*/
	
	color:black;

	font-family: 'source sans pro', sans-serif;
	font-size: 16pt;
	/*text-shadow: 0 0 3px black;*/
	text-align: left;
	align-content: center;
	margin-left: 4%;
	margin-right: 2%;
	margin-top: 4%;
	vertical-align: middle;
}

.buchungPic4 {
	
		background-image: url(img/fluss1.jpg);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center;
		padding-top: 10px;
		padding-left: 5px;

		width: 80%;
	
}

.elternDiv{

	/*max-width:1280px;*/
	margin:auto;
	height: 900px;
	position: relative;
	z-index: 2;
	
	
	/*background-color:#edf4ff;	*/

}

/*
.backblatt {
	
	height: 500px;
	position: relative;
	z-index: 2;

	
}
*/


.reihe1{
	
	/*background-color: beige;*/
	
}

.leiste{
	
	
	/*margin-left: 38%;	*/
	text-align: center;
	display: inline;
	font-family: 'source sans pro', sans-serif;
	font-weight: 400;
	text-shadow: 0 0 3px black;
	background-color: #c2d4f2;
	
}


.leiste ul li a{
	color:white;
	font-size:30pt;
	margin-left:90px;
}



li {
	
	padding: 10px;
	display: inline-block;
	/*margin-left: 10%;*/
	
}


a:link {
	
	text-decoration: none;
	color:blue;

	
}	

a:visited {
	
	text-decoration: none;
	color:blue;

	
}	








/*SLIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDE*/

/* Position the image container (needed to position the left and right arrows) */
.container {
	position: relative;
	height: 50%;
	width: 50%;
	overflow: show;
	margin: auto;
	background-color:white;

}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}






/*RESPONSIVER PART _______________________________ */

/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////





@media only screen and (max-width:1440px){
	.banner{
		
		font-size: 70pt;
		height: 120px;
		
	}
	
	.starttext{
		
		
		
	}	
	
	.logo{
		
		
		
	}	
	.buchungtxt2 {
	font-size: 13pt;
 
}
.buchungBox4 {
height: 120px;
}



}










@media only screen and (max-width:1024px){
	.banner{
		
		font-size: 60pt;
		height: 120px;
		
	}
	
.leiste ul li a{

	font-size:23pt;

	}
.buchungBox{	
	flex-direction: column;
	height: 95%;
}

.buchungtxt{
	width: 80%;
	margin-left: 12%;
}

.buchungPic {
	height: 75%;
	width: 75%;
	margin-left: 10%;

}
.buchungBox2{	
	flex-direction: column;
	height: 130%;

}

.buchungtxt2{
margin-left: 15%;
font-size: 15pt;
}

.buchungPic2{
	height: 50%;

	margin-left: 10%;
}

/*33333333333333333333*/

.buchungBox3{	
	flex-direction: column;
	height: 100%;

}

.buchungtxt3{
margin-left: 15%;
font-size: 15pt;
margin-top: 4%;
}

.buchungPic3{
	height: 50%;
	margin-top: 1%;
	margin-left: 10%;
}
.container {


	width: 80%;



}	

.buchungBox4{	
	
	height: 230%;

}
}

@media only screen and (max-width:850px){
	.banner{
		
		font-size: 48pt;
		height: 120px;
		
	}
	.starttext{
		
		font-size: 25pt;
		
		
	}	
	
.leiste ul li a{
	
	font-size:45pt;
	line-height: 1.4;
	}
	
.leiste {
	
	text-align: center;
	
}	

.reihe1 {
	
	margin-left: -9%;
	
}	
	
 body{
background-image: url(img/fluss_1_1_phone.jpg);
	}
	
.buchungBox4{
	height: 230%;

}

.buchungtxt3{
	margin-top: -4%;

}

.buchungPic2{
	

}	
	
.container {


	width: 90%;



}	
}


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

	.buchungBox4{
		
	height: 255%;
	
		
	}


}

@media only screen and (max-width:480px){
	.logo{
		
	background-image: url(img/Logo2.png);
	background-size: 8%;
	
	width: 90%;
	height: 90%;


		
	}
	.banner{
		
		font-size: 28pt;
		height: 120px;
		
	}
	.starttext{
		
		margin-top: -11%;
		font-size: 19pt;
		
		
	}	
	
.leiste ul li a{
	
	font-size:23pt;
	line-height: 1.4;
	margin-left: 80px;
	}
	
.leiste {
	
	text-align: center;
	
}	

.reihe1 {
	margin-top: -7%;
	margin-left: -15%;
	
}	
	
 body{
	background-repeat: repeat;
	}
.slideshow-container {
  margin-top: 1%;
  width: 90%;
  margin-left: 5%;
 
}	

.buchungtxt {
	font-size: 11pt;
 
}
.buchungBox {
	height: 70%;
 
}
.buchungBox3 {
	height: 75%;
 
}
.buchungPic3 {
	background-size: 100%;
 
}
.buchungtxt3 {
	font-size: 11pt;
	margin-top: -1%;
	margin-left: 9%;
 
}
	.buchungPic2 {

	background-size: 120%;
}

.buchungBox4 {
	height: 360%;
 
}
.spacer {
	display: none;
 
}

}

@media only screen and (max-width:425px){
	.banner{
		
		font-size: 24pt;
		height: 120px;
		
	}
	
	.starttext{
		
		margin-top: -15%;
		font-size: 14pt;
		
		
	}	

	.buchungtxt{
		
		font-size: 10pt;
		
		
	}
	.buchungtxt2{
		
		font-size: 11pt;
		
		
	}
	.buchungtxt3{
		
		font-size: 10pt;
		
		
	}
	.buchungtxt4{
		
		font-size: 11pt;
		
		
	}	
.buchungBox2 {
	height: 75%;
 
}

.buchungBox4 {
	height: 185%;
 
}
	.buchungPic2 {

	background-size: 85%;
}
	
}



@media only screen and (max-width:385px){
	.banner{
		
		font-size: 23pt;
		height: 120px;
		
	}
	
	.starttext{
		
		margin-top: -15%;
		font-size: 14pt;
		
		
	}	


.buchungBox4 {
	height: 205%;
 
}
.buchungBox2 {
	height: 95%;
 
}
	.buchungPic2 {

	background-size: 85%;
}

.buchungtxt3 {
	margin-top: -15%;
 
}
	
}

@media only screen and (max-width:320px){
	.banner{
		
		font-size: 19pt;
		height: 120px;
		
	}
	
	.starttext{
		
		margin-top: -22%;
		font-size: 13pt;
		
		
	}	
.slideshow-container {
  margin-top: 15%;

 
}	
.buchungPic3 {
	margin-top: -15%;
 
}
.buchungtxt3 {
	margin-top: -18%;
 
}
.buchungBox4 {
	height: 220%;
 
}

}