@charset "utf-8";
/* CSS Document */

*,
*::after,
*::before {
	box-sizing: border-box;
}

@font-face {
  font-family: "Nunito-VariableFont_wght";
  font-style: normal;
  src: url("fonts/Nunito-VariableFont_wght.woff2")format("woff2");
}

@font-face {
  font-family: "Mistral";
  font-style: normal;
  src: url("fonts/MISTRAL.woff")format("woff");
}

html {
	min-height:  100%;
	scroll-behavior: smooth !important;
	overflow: hidden;
}

html:focus-within {
	scroll-behavior: smooth !important;
}

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
  	scroll-snap-type: y mandatory;
	
}

a:link { 
  	text-decoration: none;
	color: #093771;
} 

a:visited { 
  	text-decoration: none;
	color: #093771;
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}



.navbar {
	top: 0;
	position: absolute;
	height: 70px;
	width: 100%;
	background-image: none;
	z-index: 100;
}

#title_left {
	width: 80%;
	height: 30%;
	color: red;
	font-family: "Mistral";
	font-size: 2.4em;
	font-weight: 700;
	opacity: 0;
	text-align: right;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-top: 30px;
	animation: secondspan 2s forwards cubic-bezier(0,0,0,0);
	animation: fadeInL 2s forwards;
	animation-fill-mode: forwards;
	webkit-animation-fill-mode: forwards;
	animation-delay: 1s;

}

#title_right {
	width: 80%;
	height: 30%;
	color: red;
	font-family: "Mistral";
	font-size: 1.3em;
	font-weight: 600;
	text-align: right;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-top: 28px;
	animation: secondspan 2s forwards cubic-bezier(0,0,0,0);
	animation: fadeInR 2s forwards;
	animation-fill-mode: forwards;
	webkit-animation-fill-mode: forwards;
	opacity: 0;
	animation-delay: 1s;
	transform: translateX(15%)

	}

@keyframes fadeInR{
	0%{
		transform: translateX(60%);
		opacity: 0;
	}
	100%{
		transform: translateX(20%);
		opacity: 1;
	}
}

@keyframes fadeInL{
	0%{
		transform: translateY(-100%);
		opacity: 0;
	}
	100%{
		transform: translateY(5%);
		opacity: 1;
	}


}

#navigation {
	width: 100%;
	float: left;
	height: 100%;

}

.sidebar {
		transition: transform 300ms ease-in-out;
		transform: scaleX(0);
		background-image: url("images/bg.png");
		background-repeat: repeat;
		width: auto;
		position: flex;
		display: block;
		margin-top: 25vh;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.4em;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		padding-top: 0;
		padding-bottom: 0;

		}

.sidebar nav {
	padding-left: 0;
	transform: translateX(-30px);
	padding: 6px 6px 1px;
}
.sidebar img {
	width: 30px;
	height: 30px;
	margin-top: 4px;
}
	nav ul li {
    list-style: none;
	}

	nav ul li a:hover{
	opacity: 0.7;
	}

.hamburger-menu:has(input:checked) + .sidebar {
		transform: scaleX(1);

	}




	.hamburger-menu {
		display: flex;
		flex-direction: column;
		gap: 5px;
		float: right;
		padding: 16px 6px 0px;
		width: max-content;
		position: absolute;
		top: 8px;
		right: 20px;
		cursor: pointer;
	}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: 40px;
	height: 6px;
	background-color: red;
	border-radius: 9999px;
	transform-origin: left center;
	transition: opacity 200ms ease-in-out, width 200ms ease-in-out, rotate 200ms ease-in-out, translate 200ms ease-in-out;
	}
.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
	}

.hamburger-menu:has(input:checked)::before {
	rotate: 45deg;
	width: 31px;
	translate: 0 -6;
	}

.hamburger-menu:has(input:checked)::after {
	rotate: -45deg;
	width: 31px;
	translate: 0 6;
	}
.hamburger-menu input:checked {
	opacity: 0;
	width: 0;
	}



#content {}

#landingpage {
	background-image: url("images/landingpage_sw.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	height: 100vh;
	scroll-snap-align: start;
	margin-top: 0;
	}

#spacer_lp {
	height: 40vh;
	}

.slogan_gemeinsam{
	width: 100%;
	height: auto;
	text-align: center;
	padding-top: 0;
	font-size: 4em;
	font-weight: 700;
	font-family: "Mistral";
	color: red;
	opacity: 0;
	margin-left: 0;
	transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
	animation: AnimSlogan forwards 2.2s cubic-bezier(0.2,0.3,0.4,0.5);
	animation-fill-mode: forwards;
	webkit-animation-fill-mode: forwards;
	animation-delay: 1s;
	}

.slogan_unterwegs{
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: -0.3em;
	margin-left: 5vw;
	font-size: 4em;
	font-weight: 700;
	font-family: "Mistral";
	color: red;
	opacity: 0;
	animation: AnimSlogan forwards 2.2s cubic-bezier(0.2,0.3,0.4,0.5);
	animation-fill-mode: forwards;
	webkit-animation-fill-mode: forwards;
	animation-delay: 1.7s;
	}
.spacer-um {
	display: none;
}
	





@keyframes AnimSlogan{
	0% {
		opacity: 0;
		transform: scale(1.2) rotateX(-30deg) rotateY(30deg);

	}
	100% {
		opacity: 1;
		transform: scale(1) rotateX(-30deg) rotateY(25deg);
	}
}

#skitouren {
	background-color: whitesmoke;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
	}
	.spacer_pg {
		display: none;
	}

.slick-carousel {
		width: 100vw;
		height: 45vh;
		margin: 0 auto 0;
		background-color: transparent;

	}
	.slick-carousel a hover {
	  	opacity: 1;
	}


.slick-prev, .slick-next {
	z-index: 2;
}

.slick-prev {
	left: 50px;
}
.slick-next {
	right: 50px;
}
	
	.description_mobile {
		background-image: none;
		height: 55vh;
		width: 100vw;
		margin: 0 auto 0;
		border: none;
		opacity: 1;
		font-family: "Nunito-VariableFont_wght";
		color: #093771;
		text-align: justify;
		padding: 8px 30px;
		}

	.desc_head {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.1rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #093771;
		text-align: center;
		padding-top: 8px;
		opacity: 0;
	}

	.desc_head_str {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.1rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #093771;
		text-align: center;
		padding-top: 8px;
		opacity: 0;
	}

	.desc_headAnim {
		animation: AnimDesc_head forwards 0.8s cubic-bezier(0,0,0,0.7);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 0.6s;
	}
	@keyframes AnimDesc_head{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.description_skitouren {
	display: none;
}
.description_skitourenreisen {
	display: none;
}
.description_skitourenkurse {
	display: none;
}
.description_hochtouren {
	display: none;
}
.description_trekking {
	display: none;
}


	.description_mobile p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 0.9em;
		font-weight: 500;
		text-align: justify;
		padding: 8px 8px 8px;
		margin-top: 0;
		opacity: 1;
	}

	.anfrage {
		margin: 29vh auto 0;
		padding: 0;
		background-image: none;
		width: 100px;
		height: auto;
	}
	.anfrage_mail {
		width: 50%;
		float: left;
		opacity: 0;
	}
	

	.anfrage_mailAnim {
		animation: AnimButton forwards 0.8s cubic-bezier(0,0,0,0.7);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 1.3s;
	}

	@keyframes AnimButton{
		0% {
		transform: translateY(50%);
		opacity: 0;
		}
		100% {
		transform: translateY(0%);
		opacity: 1;
		}
	}
	.anfrage_whatsapp {
		width: 50%;
		float: left;
		opacity: 0;
	}

	.anfrage_whatsappAnim {
		animation: AnimButton forwards 0.8s cubic-bezier(0,0,0,0.7);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 1.6s;
	}

	.button {
		background-color: transparent;
		border: none;
		cursor: pointer;
		
	}

#skitourenreisen {
	background-color: whitesmoke;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}

#skitourenkurse {
	background-color: whitesmoke;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}

#hochtouren {
	background-color: whitesmoke;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}


#trekking {
	background-color: whitesmoke;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}

#ueber_mich {
	background-image: url("images/ueber_mich.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}

.spacer_um {
	height: 10vh;
}
	.ueber_mich_wrapper {
		height: 100vh;
		width: 100vw;
		margin: 0 auto 0;
		}

	.ueber_mich_desc {
		width: 90vw;
		height: auto;
		margin: 0 auto;
		}

	.ueber_mich_p {
		height: 30vh;
		overflow-y: scroll;
	}
	.ueber_mich_p  p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 0.9rem;
		font-weight: 500;
		text-align: justify;
		padding: 0px 16px;
		margin-top: 0px;
		margin-bottom: 10px;
		opacity: 1;
		line-height: 120%;
	}
	.ueber_mich_h3 h3 {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 1rem;
		font-weight: 700;
		text-align: justify;
		padding: 0px 16px;
		margin-top: 0;
		opacity: 1;
	}
	
	
.ueber_mich_pic {
		width: 100%;
		height: auto;
	}

	.ueber_mich_pic img {
		opacity: 0;
		width: 70vw;
		height: 40vh;
		display: block;
		margin: 0 auto;
}
	
	.ueberMichPicImgAnim {
		animation: AnimUeberMich forwards 1s cubic-bezier(0,0,0,0.8);
		animation-duration: 1000ms;
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 0.5s;
		
	}

	@keyframes AnimUeberMich {
		0% {
		opacity: 0;
		-webkit-filter: blur(5px);
  		filter: blur(5px);
		scale: 1.1;
		}
		100% {
		opacity: 1;
		-webkit-filter: blur(0px);
  		filter: blur(0px);
		scale: 1;
		}
	}

#kontakt {
	background-image: url("images/kontakt.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 100vh;
}
.spacer_kt {
	height: 10vh;
}	
	.kontaktcanvas {
		position: relative;
		width: 90vw;
		height: 62vh;
		margin: 0 auto;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		border: none;
	}
	
	.kontaktcanvas h1 {
		text-align: center;
		font-size: 1.1em;
		margin-top: 12px;
	}
	.kontaktcanvas h2 {
		text-align: center;
		font-size: 1em;
		font-weight: 500;
		
	}
	
	.kontakttop {
		position: relative;
		height: 36%;
		z-index: 3;
	}

	.kontakt_left p {
		font-size: 0.8em;
		text-align: center;
		line-height:4px;
		padding: 4px;
		}
	
	.kontakt_left {
		display: block;
		margin: 0 auto;
		width: 70%;
		opacity: 0;

	}
	.kontakt_right {
		position: block;
		margin: 12vh auto 0;
		width: 70%;
		opacity: 0;
		text-align: center;
	}
	.ivbv img{
		width: 100px;
		height: 100px;
	}
	.kontakt_buttons {
		display: block;
		margin: 12px auto 0;
		width: 75vw;
		height: 15%;
		padding-top: 0;
		z-index: 2;
	}
	.kontakt_buttons img {
		height: 50px;
		width: 50px;

	}
	.anfrage_mail_k {
		float: left;
		width: 50%;
		opacity: 0;
		text-align: right;
	}

	.anfrage_whatsapp_k {
		float: left;
		width: 50%;
		opacity: 0;
		text-align: left;
	}
	

	.kontakt_bottom {
		position: relative;
		margin: -30px auto 0;
		width: 90vw;
		height: auto;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		}
	.kontakt_bottom p {
		font-size: 0.7em;
		text-align: justify;
		line-height: 16px;
		padding: 8px 16px 0;
		opacity: 1;
	}
	.copyright {
		float: left;
		width: 100%;
		margin-top: -12px;
		opacity: 1;
	}
	.copyright h3 {
		text-align: center;
		font-size: 0.7em;
		font-weight: 600;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
	}