main{
	padding:0 var(--gap10) var(--content-gap60);
}

.logo-home{
	display: none;
}

/* Logo */
.logo {
	width: 90%;
	position: absolute;
	opacity: 1;
	transition: opacity 0.5s ease, transform 0.5s ease;
	z-index: 1050;
}

.logo.fade-out {
	opacity: 0;
	transform: translateY(-100px) scale(0.5); /* Leichter Parallax nach oben */
}

.logo.small {
	width: 175px;
	position: fixed;
	top: -100px;
	left: 0;
	opacity: 0;
	transform: translateY(0);
	transition: 
    	opacity 0.5s ease,
    	transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo.small.scroll-in {
	opacity: 1;
	transform: translateY(100px);
}

.logo.small.scroll-out {
	opacity: 0;
	transform: translateY(-20px); 
	transition: 
		opacity 0.6s ease,
    	transform 0.6s ease;
}

.desktop-nav-home{
	display: none;
}

.desktop-nav {
	display:none;
}

/* HERO */

.hero-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 98vh; /* Fallback für alle Browser */
	height: 98dvh; /* Modern mit höherer Priorität */
	max-height: -webkit-fill-available; /* iOS-Safari spezifisch */
	min-height: -webkit-fill-available; /* Alternative für einige Fälle */
	padding-bottom: var(--gap15);
}

.hero{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.intro{
	color: var(--grey400);
}

.intro{
	will-change: transform;
	transition: transform 0.05s linear;
	padding-bottom: var(--gap25);
}

/* Arrow */

@keyframes softVerticalJiggle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* Bewegung nach oben */
  }
}

.next{
	font-size: var(--text-2xl);
	text-align: center;
	animation: softVerticalJiggle 1.5s ease-in-out infinite;
	will-change: transform;
	transform-origin: center center;
	margin-top:-2vh;
}

/* Medium devices such as tablets (1024px and up) */
@media only screen and (min-width: 1024px) {
	main{
		padding:0 var(--gap12) var(--content-gap60);
	}

	.logo{
		display: none;
	}

	/* Logo Home */
	.logo-home {
		display: block;
		width: 100%;
		opacity: 1;
		transition: opacity 0.5s ease, transform .6s ease;
		z-index: 1050;
		mix-blend-mode: exclusion;
		display: inline-block;
		will-change: transform;
	}

	.logo-home.foul {
		opacity: 0;
		transform: translateY(-100px) scale(0.8); 
		transition: opacity 0.5s ease, transform 1s ease;
	}

	.logo-home.smal {
		width: 175px;
		position: fixed;
		top: -100px;
		left: 0;
		opacity: 0;
		transform: translateY(0);
		transition: 
			opacity 0.5s ease,
			transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.logo-home.smal.scrol-in {
		opacity: 1;
		transform: translateY(100px);
	}

	.logo-home.smal.scrol-out {
		opacity: 0;
		transform: translateY(-20px); 
		transition: 
			opacity 0.6s ease,
			transform 0.6s ease;
	}


	/* HERO */

	.hero-wrapper{
		height:99vh;
	}

	.hero{
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		align-items: normal;
		height: fit-content;
	}

	.intro{
			padding-bottom: 0;
	}

	.hero .intro{
		grid-column-start: 4;
		grid-column-end: 7;	
	}

	.next{
        width: fit-content;
		transition: color .3s ease-in-out;
		margin:0 auto;
		margin-top: auto;
	}

	.next:hover{
		color: var(--grey300);
	}

	.desktop-nav-home{
		position: sticky;
		top:var(--gap12);
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--gap12);
		width: 100%;
		padding: 0 var(--gap12);
		mix-blend-mode: exclusion;
		z-index: 1070;
		pointer-events: none;
		margin-top: 10px;
	}

	.nav-trigger {
		position: relative;
		top: 0; /* entspricht dem sticky top-Wert */
		width: 100%;
		height: 1px;
		pointer-events: none;
	}

	.stuck{
        position: fixed;
        top: 12px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        gap: 0;
        padding: 0;
        margin: 0;
	}

	.desktop-nav-home ul {
		display: flex;
		flex-direction: row;
		grid-column-start: 5;
		grid-column-end: 7;
		margin-top: -5px;
		pointer-events: auto;
	}

	.desktop-nav-home ul li:first-of-type{
		padding-right:var(--gap25);
	}

	.desktop-nav-home ul li a{
		color:var(--secondary);
		font-size: var(--text-lg);
		transition: all .3s ease-in-out;
	}

	.desktop-nav-home ul li a:hover{
		color: var(--grey400);
	}

}