@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root {
	--color-light-shades: #FFFFFF;
	--color-light-accent: #A4A8A7;
	--color-main-brand: #FC8610;
	--color-dark-accent: #867C7D;
	--color-dark-shades: #000000;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
}

.light-shades{
	background-color: var(--color-light-shades);
	color: var(--color-dark-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
}

.dark-accent{
	background-color: var(--color-dark-accent);
	color: var(--color-light-shades);
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.wrapper_inner{
	width: 98vw;
	margin-left: 151vw !important;
}

.section{

	padding-top: 20vh;
	padding-bottom: 20vh;
}


body{
overflow-x: hidden;
font-family: 'Gentium Book Plus', serif;

}

#mobileoverflow{
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, li, a{
font-family: 'Gentium Book Plus', serif;
}

h2, h3{
	text-align: center; 
	width: 60%;
	margin-left: 20%;
}

p, li{
	font-size: 1.1em;
	line-height: 140%;
}

#head_bg{
	height: 90vh;
	width: 400vw;
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
	overflow: hidden;
	margin-left: -160vw;
	font-family: 'Gentium Book Plus', serif;
}

#head_bg_pic{
	width: 15vw;
	position: absolute;
	top: 40vh;
	left: 10vw;
}

#head_bg_pic img{
	width: 100%;
}

#header{
    animation: scale3 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	
	z-index: 100;
}

@keyframes scale3{
  to {

	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	  background-color: var(--color-light-shades);
  }
}

#logo{
	padding: 20px;
	width: 15vw;
	float: left;

	animation: scale1 0.15s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
}

@keyframes scale1{
  to {
    	width: 10vw;
	    background-color: var(--color-light-shades);
	  
  }
}

#mainmenu{
	width: 85vw;
	float: left;
	font-family: 'Gentium Book Plus', serif;
	
	animation: scale2 0.15s linear infinite;
   	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
}

@keyframes scale2{
  to {
    width: 90vw;
	padding-top: 3vh;
	background-color: var(--color-light-shades);

  }
}

#navbarNavAltMarkup{
	justify-content: flex-end;
	
}

#mainmenu nav{
	padding-top: 5vh;
	padding-right: 5vw;
	font-size: 1.3em;
	
}


#headtext{
	width: 40vw;
    text-align: right;
    position: absolute;
    right: 10vw;
    bottom: 30vh;
}

@media only screen and (max-width: 990px) {
	#headtext h1{
		font-size: 2em;
	}
	
}


#headtext h5{
	margin-bottom: 5vh;
}

#headtext .name{
}

#headtext .name1{
	margin-right: 1vw;
}

#headtext .name2{
	margin-left: 1vw;
}

#about{
	text-align: right;
	

}

#aboutpic{
	overflow: hidden;
	
}

#aboutpic img{
	height: 80vh;
	width: auto;
}

#abouttext{
	border-right: 5px solid var(--color-dark-shades);
	padding: 3vh;
}

#offers{
	width: 400vw;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	overflow-x: hidden;
	margin-left: -150vw;
}

.offer-item-outer{
	padding: 2vw;
}

.offer-item-inner{
	color: var(--color-light-shades);
}

#offers h3{
	color: var(--color-dark-shades);
	background-color: var(--color-light-shades);
	border-top: 5px solid var(--color-main-brand);
	border-bottom: 5px solid var(--color-main-brand);
	padding: 2vw;
	margin-bottom: 10vh;
}

#offers h4{
	color: var(--color-dark-shades);
	background-color: var(--color-light-shades);
	border-top: 5px solid var(--color-main-brand);
	border-bottom: 5px solid var(--color-main-brand);
}

#gallery{

}

.gallery-item{
	overflow: hidden;
	height: 40vh;
	padding: 1vh;
}

.gallery-item img{
	height: 100%;
	width: auto;
}

#team{
padding: 1vw;
padding-top: 10vh;
text-align: center;
padding-bottom: 10vh;
}

#team .team-member{
	margin-top: 10vh;
}

#team .team-member img{
	border-radius: 100%;
	margin-bottom: 1vh;
}

#footer{
	padding: 3vw;
}

#footer a{
	color: var(--color-light-shades);
}

#footer p{
	font-size: 1em;
}



/* Optimierung für mobile Geräte */

@media only screen and (max-width: 768px) {
	
	#header{
    animation: scalemobile3 0.05s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	
	z-index: 100;
		
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	 background-color: var(--color-light-shades);
}

	#logo{
		width: 50vw;
		
		animation: scalemobile1 0.05s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
	}


	#mainmenu{
		width: 50vw;

		animation: scalemobile2 0.05s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
	
	.container-fluid{
		text-align: right;
	}
	
	
	#headtext{
		width: 80vw;
		text-align: center;
		position: absolute;
		right: 10vw;
		bottom: 20vh;
	}
	
	#headtext h1{
		font-size: 1.5em;
		text-align: center;
	}

	#head_bg_pic{
		width: 30vw;
		position: absolute;
		top: 20vh;
		left: 40vw;
	}

}

@media only screen and (max-width: 991px) {
	
	#header{
    animation: scalemobile3 0.05s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	
	z-index: 100;
		
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	 background-color: var(--color-light-shades);
}

	#logo{
		width: 20vw;
		
		animation: scalemobile1 0.05s linear infinite;
    	animation-play-state: paused;
    	animation-delay: calc(var(--scroll) * -1s);

    	animation-iteration-count: 1;
    	animation-fill-mode: both;
	}


	#mainmenu{
		width: 80vw;

		animation: scalemobile2 0.05s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
	
	.container-fluid{
		text-align: right;
	}
	
	#headtext{
    bottom: 10vh;
}
	
	#headtext h5{
	margin-bottom: 10vh;
}

	
	#abouttext{
		margin-top: 5vh;
	}
	
	#offers h3{
		width: 80vw;
		margin-left: 6vw;
	}
	
	#aboutpic img{
	height: 60vh;
	width: auto;
}

}


@keyframes scalemobile1{
  to {
    	width: 20vw;
	    background-color: var(--color-light-shades);
	  
  }
}

@keyframes scalemobile2{
  to {
    width: 80vw;
	background-color: var(--color-light-shades);

  }
}

@keyframes scalemobile3{
  to {


  }
}