/*--------------------------------------------------------------
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: #f2f4f7;
	background-image: url(img/fluss1_1.jpg);
	
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
	
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-right: 5%;
  width:50%;

  
}

.piccus {
	
	overflow: hidden;
	
}

/* Hide the images by default */

.mySlides {
  display: none;
  
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  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);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-family: Courier New;
  text-shadow: 2px 2px black;	

  font-size: 24px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

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

/*
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}
*/
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/*.size {
	
	height: 250px;
	
}
*/

.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: 80%;
	/*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: 18pt;
	/*text-shadow: 0 0 3px black;*/
	text-align: left;
	align-content: center;
	margin-left: 5%;
	margin-right: 4%;
	margin-top: 5%;
	vertical-align: middle;
}

.kalendus {
	
	margin-top: 4%;
	margin-right: 4%;
	
	
}

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

		width: 80%;
	
}

.buchungBox2{
		

	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;
	text-align: center;
	align-content: center;

}

.buchungtxt2{
		

	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: 12%;
	margin-top: 8%;
	vertical-align: middle;
}

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

		width: 80%;
	
}


.mapbox{
	
	width: 100%;
	height: 55%;
	display: flex;
	flex-direction:row;
	
	margin-top: 2%;

	
	background-color: white;
	
	
}


.mappus{
	

	
	margin-top: 1%;
	margin-left: 7%;
	

	
	
}

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

		width: 50%;
	
}

.spacer{
	
	height:4%;
}

.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;

	
}	
























/*RESPONSIVER PART _______________________________ */
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////
/*RESPONSIVE*///////////////////////////////////////////////////////





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

}

}








@media only screen and (max-width:480px){
    body{
        background-color:black;
		max-width: 480px;
    }



}


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

	font-size:23pt;

	}
	
}

@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);
	}
	
.buchungBox{	
	flex-direction: column;
	height: 150%;

}	

.kalendus{
	

	width: 95%;
	margin-left: 2.5%;
	margin-top: 42%;
	
}

.buchungtxt{
	
	
	font-size: 18pt;
	margin-left: 1%;
	width: 70%;
	
}

.mapbox{	
	flex-direction: column;
	height: 130%;

}

.mappus{	
	margin-top: -35%;
	margin-left: 16%;

}

.buchungPicx{	
	margin-top: -35%;
	margin-left: 2.5%;
	width: 100%;
	height: 95%;

}		
}


@media only screen and (max-width:768px){
	.kalendus{
		
	width: 95%;
	margin-left: 2.5%;
	margin-top: 42%;
		
	}
	.buchungtxt{
		
	margin-left: 1%;
	width: 70%;
		
	}
	.buchungPicx{
	margin-left: 2.5%;
	width: 95%;
		
	}	
.mappus{	

	margin-left: 11%;

}	
}

@media only screen and (max-width:640px){
	.kalendus{
		

	margin-top: 60%;
		
	}

	.mappus{
		
		margin-top: -55%;
		margin-left: 2%;
		width: 95%;
	}

}	


@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:24pt;
	line-height: 1.4;
	margin-left: 80px;
	}
	
.leiste {
	
	text-align: center;
	
}	

.reihe1 {
	margin-top: -7%;
	margin-left: -15%;
	
}	
	
 body{

	}
	
.kalendus{
	
	margin-top: 90%;
	margin-left: 2%;
	width: 95%;
}

.mappus{
	
	margin-top: -65%;
	margin-left: 2%;
	width: 95%;
}	
.buchungPicx{	
	margin-top: -85%;
	margin-left: 1%;
	background-size: 80%;

}

}

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

}
.buchungBox{	
	height: 140%;

}
	
	.mappus{
	
	margin-top: -95%;
	margin-left: 2%;
	width: 95%;
}
	
	.buchungPicx{	
	margin-top: -95%;

	background-size: 90%;

}
	
}



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

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

}
	.buchungPicx{	
	margin-top: -131%;

}

	.mappus{	
	margin-top: -141%;

}
	.kalendus{	
	margin-top: 91%;

}
}