@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: nomral;
  src: url("fonts/MISTRAL.woff")format("woff");
}

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

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

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-behavior: smooth !important;
  	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: 12vh;
	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: 4em;
	font-weight: 600;
	opacity: 0;
	text-align: right;
	padding-top: 0.3em;
	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: 2em;
	font-weight: 600;
	text-align: left;
	padding-top: 1.4em;
	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: 100%;

}

.sidebar {
		transition: translate 400ms ease-in-out;
		translate: 200%;
		background-color: rgba(255,255,255,0.80);
		width: auto;
		position: flex;
		display: block;
		margin-top: 13vh;
		color: #093771;
		font-size: 1.1em;
		font-weight: 600;
		text-align: left;
		text-transform: uppercase;
		padding-top: 1em;
		padding-bottom: 0.1em;
		}
.sidebar img {
	width: 25px;
	height: 25px;
	margin-top: 2px;
}
	nav ul li {
    list-style: none;
	}

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

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


	.hamburger-menu {
		display: flex;
		flex-direction: column;
		gap: 6px;
		float: right;
		padding: 30px;
		width: max-content;
		position: absolute;
		top: 2px;
		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: 34px;
	translate: 0 -6;
	}

.hamburger-menu:has(input:checked)::after {
	rotate: -45deg;
	width: 34px;
	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: 24vw;
	}

/*.slogan {
	width: 30vw;
	height: 20vh;
	float: right;
	margin-right: 15vw;
}

.slogan img {
	width: 400px;
	height: 150px;
	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: 1s;
}*/
	
.slogan_gemeinsam{
	width: 100%;
	height: auto;
	text-align: center;
	padding-top: 0.8em;
	font-size: 6em;
	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.8em;
	margin-left: 27vw;
	font-size: 6em;
	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;
	}

.slogan_mobile_up {
	display: none;
}
.slogan_mobile_down {
	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);
	}
}

.description_mobile {
	display: none;
}

	.description_skitouren {
		position: relative;
		background-color: transparent;
		height: auto;
		width: 80%;
		top: -34vh;
		margin: 0 auto 0;
		opacity: 0;
		z-index: 9;
		}
		.description_skitourenreisen {
		position: relative;
		background: none;
		height: auto;
		width: 80%;
		top: -32vh;
		margin: 0 auto 0;
		font-family: "Nunito-VariableFont_wght";
		color: #ffffff;
		opacity: 0;
		z-index: 9;
		}
		.description_skitourenkurse {
		position: relative;
		background: rgba(255,255,255,0.80);
		height: auto;
		width: 85%;
		top: -30vh;
		margin: 0 auto 0;
		opacity: 0;
		z-index: 9;
		}
		.description_hochtouren {
		position: relative;
		background: none;
		height: auto;
		width: 85%;
		top: -30vh;
		margin: 0 auto 0;
		font-family: "Nunito-VariableFont_wght";
		color: #ffffff;
		opacity: 0;
		z-index: 9;
		}
		.description_trekking {
		position: relative;
		background: none;
		height: auto;
		width: 75%;
		top: -30vh;
		margin: 0 auto 0;
		opacity: 0;
		z-index: 9;
		}
	.descriptionAnim {
		animation: AnimDescription 0.3s cubic-bezier(0,0,0,1);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 0.4s;
}
	
@keyframes AnimDescription{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
	.desc_head {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.5rem;
		font-weight: 800;
		text-transform: uppercase;
		color: #093771;
		text-align: left;
		padding-top: 16px;
		margin-left: 50px;
		opacity:0;
	}
	.desc_head_str {
		font-family: "Nunito-VariableFont_wght";
		font-size: 1.5rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #ffffff;
		text-align: left;
		padding-top: 16px;
		margin-left: 50px;
		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: 0s;
	}
	@keyframes AnimDesc_head{
	0% {
		opacity: 0;
		transform: translateY(50px)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}

	.description_skitouren p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 600;
		text-align: justify;
		padding: 8px 50px 36px;
		margin-top: 0;
		opacity: 0;
	}
	.description_skitourenreisen p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 500;
		text-align: justify;
		padding: 8px 50px 36px;
		margin-top: 0;
		opacity: 0;
	}
	.description_skitourenkurse p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 500;
		text-align: justify;
		padding: 8px 50px 36px;
		margin-top: 0;
		opacity: 0;
	}
	.description_hochtouren p {
		color: #ffffff;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 500;
		text-align: justify;
		padding: 8px 50px 36px;
		margin-top: 0;
		opacity: 0;
	}
	.description_trekking p {
		color: #ffffff;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 500;
		text-align: justify;
		padding: 8px 50px 36px;
		margin-top: 0;
		opacity: 0;
	}
	.descriptionpAnim {
		animation: AnimDesc_p forwards 0.8s cubic-bezier(0,0,0,0.7);
		animation-fill-mode: forwards;
		webkit-animation-fill-mode: forwards;
		animation-delay: 1s;
	}

	@keyframes AnimDesc_p{
		0% {
		opacity: 0;
		}
		100% {
		opacity: 1;
		}
	}
	.anfrage {
		display: flex;
		flex-flow: column wrap-reverse;
		margin-top: -12vh;
		margin-left: 8vw;
		background-image: none;
		width: 100%;
		height: 100px;
	}

	.anfrage_mail {
		width: 50px;
		float: right;
		opacity: 0;
		margin-right: 10%;
	
	}
	.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: 50px;
		float: right;
		opacity: 0;
		margin-right: 10%;
	}
	.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 ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
	}

.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;
}
.slick_skitouren {
	top: -40vh;
}


#skitourenreisen {
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
}


#skitourenkurse {
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
}

#hochtouren {
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
}

#klettersteige {
	background-image: none;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
}

#trekking {
	background-image: none;
	background-position: center center;
	background-attachment: scroll ease-in-out;
	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 ease-in-out;
	scroll-snap-align: start;
	height: 100vh;
}


	.ueber_mich_wrapper {
		height: 80vh;
		width: 55%;
		margin: 0 auto 0;
		opacity: 0;
		z-index: 9;

		}

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

	.ueber_mich_p {
		height: auto;
		}
	.ueber_mich_p p {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		font-weight: 500;
		text-align: justify;
		padding: 4px 32px;
		margin-top: 4px;
		opacity: 0;
		line-height: 120%;
	}
	.ueber_mich_h3 h3 {
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		font-size: 18px;
		text-align: justify;
		padding: 12px 32px 0;
		margin-top: 0;
		opacity: 0;
	}
	
	
	.ueber_mich_pic {
		margin-top: 0;
		width: 40%;
		height: 65%;
		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: 0.4s;
		
	}

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

	.kontakt_left p {
		font-size: 1em;
		text-align: center;
		line-height: 0.6em;
		}
	
	.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: 11vw;
		height: 11vw;
		margin-left: 0px;
		object-fit: cover;
	}
	.kontakt_buttons {
		position: relative;
		width: 50%;
		height: 20%;
		margin-top: -30px;
		float: left;
		z-index: 2;
	}
	.kontakt_buttons img {
		height: 60px;
		width: 60px;
	}
	.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: 16vh auto 0;
		width: 66vw;
		height: auto;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
		z-index: 1;
		}
	.kontakt_bottom p {
		font-size: 1em;
		text-align: center;
		line-height: 18px;
		padding: 0 16px;
		opacity: 0;
	}
	.copyright {
		float: left;
		width: 100%;
		margin-top: -12px;
		opacity: 0;
	}
	.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.9em;
		font-weight: 600;
		color: #093771;
		font-family: "Nunito-VariableFont_wght";
	}