@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 {
	scroll-behavior: smooth !important;
	overflow-x: hidden;
}

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

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	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: fixed;
	height: 3em;
	width: 100%;
	font-family: "Nunito-VariableFont_wght";
	background-color: none;
	z-index: 100;
}

#title_left {
	width: 50%;
	float: left;
	height: 100%;
	color: red;
	font-family: "Mistral";
	font-size: 2.4em;
	font-weight: 600;
	opacity: 0;
	text-align: right;
	padding-top: 0.1em;
	padding-right: 0.2em;
	display: inline-block;
	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: 30%;
	float: left;
	height: 100%;
	color: red;
	font-family: "Mistral";
	font-size: 1.2em;
	font-weight: 600;
	text-align: left;
	padding-top: 1em;
	padding-left: 0.3em;
	display: inline-block;
	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;
	}

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

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


}

#navigation {
	width: 20%;
	float: left;
	height: 80%;

}

.sidebar {
		transition: translate 400ms ease-in-out;
		translate: 100%;
		background-color: rgba(255,255,255,0.80);
		width: auto;
		position: flex;
		display: block;
		margin-top: 14vh;
		color: #093771;
		font-size: 0.8em;
		font-weight: 600;
		text-align: left;
		text-transform: uppercase;
		padding-top: 1px;
		padding-bottom: 0;
		}

		
.sidebar nav {
	padding-left: 0;
	transform: translateX(-30px) translateY(-10px);
	
	padding-top: 0px;
}
.sidebar img {
	width: 15px;
	height: 15px;
	margin-top: 2px;
}
	nav ul li {
    list-style: none;
	}

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

.hamburger-menu:has(input:checked) + .sidebar {
		translate: -50%;
	}

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

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: 30px;
	height: 4px;
	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: 23px;
	translate: 0 -6;
	}

.hamburger-menu:has(input:checked)::after {
	rotate: -45deg;
	width: 23px;
	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;
	width: 100vw;
	scroll-snap-align: start;
	margin-top: 0;
	}

#spacer_lp {
	height: 50vh;
	}
	
.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: 20vw;
	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.75em;
	margin-left: 27vw;
	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;
	}





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

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


.spacer_um {
	height: 14vh;
}

.slick-carousel {
		position: relative;
		width: 100vw;
		height: 100%;
		margin: 0 auto;
		z-index: 1;

	}
	.slick-carousel a hover {
	  	opacity: 1;
	}
	
.slick-prev, .slick-next {
	z-index: 2;
}

.slick-prev {
	left: 50px;
}
.slick-next {
	right: 50px;
}
	

	.desc_head {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.1rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #093771;
		text-align: left;
		padding-top: 16px;
		margin-left: 24px;
		opacity: 0;
	}
	.desc_head_str {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.1rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #ffffff;
		text-align: left;
		padding-top: 16px;
		margin-left: 24px;
		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.2s;
	}
	@keyframes AnimDesc_head{
	0% {
		opacity: 0;
		transform: translateY(50px)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}
.description_mobile {
	display: none;
}

		.description_skitouren {
		position: relative;
		background-color: transparent;
		height: auto;
		width: 95vw;
		top: -55vh;
		margin: 0 auto 0;
		opacity: 1;
		z-index: 9;
		}
		.description_skitourenreisen {
		position: relative;
		background: none;
		height: auto;
		width: 95vw;
		top: -50vh;
		margin: 0 auto 0;
		font-family: "Nunito-VariableFont_wght";
		color: #ffffff;
		opacity: 1;
		z-index: 9;
		}
		.description_skitourenkurse {
		position: relative;
		background: rgba(255,255,255,0.80);
		height: auto;
		width: 95vw;
		top: -56vh;
		margin: 0 auto 0;
		opacity: 1;
		z-index: 9;
		}
		.description_hochtouren {
		position: relative;
		background: none;
		height: auto;
		width: 95vw;
		top: -50vh;
		margin: 0 auto 0;
		font-family: "Nunito-VariableFont_wght";
		color: #ffffff;
		opacity: 1;
		z-index: 9;
		}
		.description_trekking {
		position: relative;
		background: none;
		height: auto;
		width: 95vw;
		top: -45vh;
		margin: 0 auto 0;
		opacity: 1;
		z-index: 9;
		}

	
@keyframes AnimDescription{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
	.description_skitouren p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 600;
		text-align: justify;
		padding: 6px 24px 24px;
		margin-top: 0;
		opacity: 1;
	}
	.description_skitourenreisen p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 600;
		text-align: justify;
		padding: 6px 24px 24px;
		margin-top: 0;
		opacity: 1;
	}
	.description_skitourenkurse p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 600;
		text-align: justify;
		padding: 6px 24px 24px;
		margin-top: 0;
		opacity: 1;
	}
	.description_hochtouren p {
		color: #ffffff;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 600;
		text-align: justify;
		padding: 6px 24px 24px;
		margin-top: 0;
		opacity: 1;
	}
	.description_trekking p {
		color: #ffffff;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 600;
		text-align: justify;
		padding: 6px 24px 24px;
		margin-top: 0;
		opacity: 1;
	}

	.anfrage {
		display: flex;
		flex-flow: column wrap-reverse;
		margin-top: -20vh;
		margin-left: 10vw;
		background-image: none;
		width: 100%;
		height: 100px;
	}
	.anfrage_mail {
		width: 40px;
		float: right;
		opacity: 0;
		margin-right: 14vw;
	}
	

	.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: 40px;
		float: right;
		opacity: 0;
		margin-right: 14vw;
	}

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

#skitouren {
	background-image: none;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}
#skitourenreisen {
	background-image: none;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}

#skitourenkurse {
	background-image: none;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}

#hochtouren {
	background-image: none;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}


#trekking {
	background-image: none;
	background-position: center center;
	background-attachment: scroll;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}

#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: 110vh;
	width: 100vw;
}

.ueber_mich_wrapper {
		height: 80vh;
		width: 62%;
		margin: 15px auto 0;
		opacity: 1;
		z-index: 9;

		}

.ueber_mich_desc {
		float: right;
		width: 60%;
		}

	.ueber_mich_p {
		height: 64vh;
		overflow-y: scroll;
	}
	.ueber_mich_p p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 12px;
		font-weight: 600;
		text-align: justify;
		padding: 0px 16px;
		margin-top: 10px;
		margin-bottom: 0px;
		opacity: 1;
		line-height: 120%;
	}
	.ueber_mich_h3 h3 {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 14px;
		font-weight: 500;
		text-align: justify;
		padding: 0px 16px;;
		margin-top: -16px;
		opacity: 1;
	}

	
	.ueber_mich_pic {
		margin-top: -20px;
		width: 40%;
		height: 60%;
		float: left;	
	}

	.ueber_mich_pic img {
		opacity: 0;
		width: 100%;
		height: auto;
		float: left;
		margin: 1em;
		
}
	
	.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: 1.6s;
		
	}

	@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 ease-in-out;
	scroll-snap-align: start;
	height: 110vh;
	width: 100vw;
}
.spacer_kt {
	height: 14vh;
}
	.kontaktcanvas {
		position: relative;
		width: 60%;
		height: 55vh;
		margin: 0 auto auto;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		opacity: 1;
	}
	
	.kontaktcanvas h1 {
		text-align: center;
		font-size: 1.2em;
		margin-top: 35px;
		color: #093771;
	}
	.kontaktcanvas h2 {
		text-align: center;
		font-size: 1em;
		font-weight: 500;
		
	}
	
	.kontakttop {
		position: relative;
		height: 50%;
		z-index: 3;
	}

	.kontakt_left p {
		font-size: 0.8em;
		text-align: center;
		line-height: 0.4em;
		}
	
	.kontakt_left {
		position: relative;
		float: left;
		width: 55%;
		height: 50%;
		opacity: 0;

	}
	.kontakt_right {
		position: relative;
		float: left;
		width: 45%;
		height: 100%;
		margin-top: 10vh;
		opacity: 0;
	}
	.ivbv img{
		width: 15vw;
		height: auto;
		margin-left: 0px;
		object-fit: cover;
	}
	.kontakt_buttons {
		position: relative;
		width: 50%;
		height: 20%;
		margin-top: 65px;
		float: left;
		z-index: 2;
	}
	.kontakt_buttons img {
		height: 30px;
		width: 30px;
	}
	.anfrage_mail_k {
		display: flex;
		justify-content:flex-end;
		width: 54%;
		float: left;
		opacity: 0;
}

	.anfrage_whatsapp_k {
		display: flex;
		justify-content:flex-start;
		padding-left: 6px;
		width: 30%;
		float: left;
		opacity: 0;
	}
	

	.kontakt_bottom {
		position: relative;
		margin: 38px auto 0;
		width: 70vw;
		height: auto;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		z-index: 1;
		}
	.kontakt_bottom p {
		font-size: 0.6em;
		text-align: justify;
		line-height: 10px;
		padding: 8px 16px 0;
		opacity: 1;
	}
	.copyright {
		float: left;
		width: 100%;
		margin-top: -12px;
		opacity: 1;
	}
	.copyrightAnim {
		animation: AnimDesc_p forwards 0.8s cubic-bezier(0,0,0,0.7);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 1.9s;
}
	.copyright h3 {
		text-align: center;
		font-size: 0.7em;
		font-weight: 600;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
	}