/* =====================================================
   FONTS
===================================================== */

@font-face {
	font-family: Geosans;
	src: url("../Fonts/Geosanslight.ttf");
}

@font-face {
	font-family: CaliFont;
	src: url("../Fonts/CaliFont.ttf");
}



/* =====================================================
   GENERAL
===================================================== */


html,
body {
	margin:0;
	padding:0;
	border:0;
	overflow-x:hidden;
}


body {
	font-family:Geosans, Arial, sans-serif;
	font-size:145%;
	color:#222222;
}



h1,
h2,
h3 {
	font-weight:normal;
}


h1 {
	text-align:center;
	margin:40px 0;
	font-size:180%;
}



h2 {
	margin-top:30px;
}


h3 {
	margin-top:35px;
}





a {
	text-decoration:none;
	color:#AAAAAA;
}


a:hover {
	color:#FF8C00;
}




.cursorPointer {
	cursor:pointer;
}

html {
    scroll-behavior: smooth;
}



/* =====================================================
   HEADER
===================================================== */


#headSection {
	position:relative;
	height:100vh;
	min-height:600px;
}


h1 {
	position:relative;
	z-index:5;
	text-align:center;
	margin-top:70px;
	font-size:180%;
}

#TitleLogo {
    position:absolute;

    left:25%;
    top:60%;

    transform:translate(-50%, -50%);

    width:40%;

    z-index:5;
}

#TitleLogo img {
    display:block;
    width:100%;
    height:auto;
}

#headerBar {
	background: #7A263A;
	z-index:10;
	font-size: 70%;
	color: white;
	height: 3%;
	vertical-align: middle;
	padding-left: 10px;
	color: #AAAAAA;
}

#headerBar a.selected { color: #FFFFFF !important; }

#CoverSection {
	position:absolute;

	left:0;
	right:0;

	top:3%;
	bottom:70px;

	display:flex;
	justify-content:center;
	align-items:center;

	z-index:1;
}

#CoverSection img {
	width:100%;
	height:100%;
	object-fit:cover;

	border:none;
	box-shadow:none;
}

.menuBar {
	background:#7A263A;
	text-align:center;

	position:absolute;
	left:0;
	bottom:0;

	width:100%;
	height:70px;

	display:flex;
	align-items:center;
	justify-content:center;

	box-sizing:border-box;

	z-index:90;
}

.menuBar a {
    color:#999999;
    text-decoration:none;
    font-size:100%;
    margin:0 12px;
}

.menuBar span {
	color:#FFFFFF;
	font-size:100%;
}

.menuBar a:hover {
    color:#7A263A;
}


#goToTop {
	position:absolute;
	left:2%;

	display:none;
	align-items:center;
	justify-content:center;

	height:70px;
}


.fixedOnTop {
	position:fixed;
	top:0;
	left:0;

	width:100%;
	height:70px;

	display:flex;
	align-items:center;
	justify-content:center;

	box-sizing:border-box;

	z-index:100;
}





/* =====================================================
   MAIN CONTAINER
===================================================== */


#centeredSection {
	width:1000px;
	margin:0 auto;
	box-shadow:
	0 25px 50px 7px #BBBBBB;
}





/* =====================================================
   IMAGE SECTIONS
===================================================== */


#ueberImage,
#kurseImage,
#preiseImage,
#gutscheineImage,
#kontaktImage {
	height:26.6vw;
	background-size:cover;
	background-position:center;
}

#ueberImage {
	background-image:url("../Images/Durer.jpg");
}

#kurseImage {
	background-image:url("../Images/Panda.jpg");
}

#preiseImage {
	background-image:url("../Images/Aquarell.jpg");
}

#gutscheineImage {
	background-image:url("../Images/Gutscheine.jpg");
}

#kontaktImage {
	background-image:url("../Images/Kindermalkurse.jpg");
}


/* =====================================================
   SECTION HEADINGS
===================================================== */


#ueberHeading,
#kurseHeading,
#preiseHeading,
#gutscheineHeading,
#kontaktHeading {
	color:white;
	letter-spacing:6px;
	font-size:32px;
	font-family:"Century Gothic";
	position:relative;
	top:-50px;
	height:0;
	left:7%;
	font-weight:bold;
}



/* =====================================================
   CONTENT
===================================================== */


#ueber,
#kurse,
#preise,
#kontakt,
#gutscheine {
	padding:1.5% 7%;
	text-align:justify;
	line-height:145%;
	color:#222222;
}



#ueber {
	background:
	linear-gradient(
	to bottom,
	#EFEFEF,
	#EFEFEF,
	#FFFFFF
	);
}

#kurse {
	background:
	linear-gradient(
	to bottom,
	#EFEFEF,
	#EFEFEF,
	#FFFFFF
	);
}

#preise {
	background:
	linear-gradient(
	to bottom,
	#EFEFEF,
	#EFEFEF,
	#FFFFFF
	);
}

#gutscheine {
	background:
	linear-gradient(
	to bottom,
	#EFEFEF,
	#EFEFEF,
	#FFFFFF
	);
}

#kontakt {
	background:
	linear-gradient(
	to bottom,
	#EFEFEF,
	#EFEFEF,
	#FFFFFF
	);
}



ul {
	margin-left:30px;
}





/* =====================================================
   FOOTER
===================================================== */


#endBar {
	background:#7A263A;
	color:#FFFFFF;
	padding:20px;
	font-size:18px;
	text-align:center;
}


#endBar span {
	margin-right:2%;
}


#impressum:hover {
	color:#FF8C00;
}


/* =====================================================
   IMPRESSUM POPUP
===================================================== */


#impressumPopup {
	position:fixed;
	left:5%;

	top:5%;
	width:90%;
	max-height:90vh;
	overflow-y:auto;
	z-index:100;
	background:#FFFFFF;
	border:2px solid #AAAAAA;
	display:none;
	padding:20px;
	font-family:Arial,sans-serif;
}


#impressumPopup .part {


	font-size:30px;
	font-weight:bold;
	text-align:center;
	width:40%;
	margin:40px auto;
	padding-bottom:10px;
	border-bottom:1px solid #AAAAAA;
}


#operator {
	text-align:center;
}



#disclaimer,
#privacy {
	font-size:18px;
	text-align:justify;
	line-height:150%;
	padding:3%;
}


#operator a {
	color:#000000;
}




/* =====================================================
   MOBILE
===================================================== */


/* centered section extends to whole width */
@media screen and (max-width: 1080px){                             /* 1150px */

	#centeredSection {
		width: 100vw;  /* 100% */
		margin: 0;
		box-shadow: none;
		overflow-x: hidden;
	}

	#ueberImage, 
	#kurseImage,
	#preiseImage,
	#gutscheineImage,
	#kontaktImage {

		height: 36.6vw; /* 26.6vw keep aspect ratio for image 26.6 */
	}
}

@media screen and (max-width: 1080px) {
    div.slider {
        width: 80%; /* Anpassen der Breite für kleinere Bildschirme */
 
    }
}

/* mobile version */
@media only screen and (max-width:1080px){

	body {
		font-size:150%;
	}

	/*.menuBar {
		height:auto;
		min-height:70px;
		line-height:70px;
	}*/

	.menuBar span {
			font-size: 180%;
	}


   #TitleLogo {
        width:90%;
        left:50%;
    	  top:75%;
   }

	#centeredSection {
		width: 100vw;  /* 100% */
		margin: 0;
		box-shadow: none;
		overflow-x: hidden;
	}

	#headerBar {
			width: 100%;
		}

	a#back {
		font-size: 160%;
	}

	#ueberImage,
	#kurseImage,
	#preiseImage,
	#gutscheineImage,
	#kontaktImage {
		height:36.6vw;
	}

	#ueberHeading,
	#kurseHeading,
	#preiseHeading,
	#gutscheineHeading,
	#kontaktHeading {
		font-size:26px;
	}

	/*#ueber,
	#kurse,
	#preise,
	#kontakt,
	#gutscheine {
		padding:5%;
	}*/

	}



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

	.menuBar {
		height:auto;
		padding:10px;
		line-height:45px;
	}

	.menuBar span {
		display:inline-block;
	}

}