/* hero */
.hero {
	--aspect-ratio: 2/1;
	position: relative;
	max-width: 100%;
	aspect-ratio: var(--aspect-ratio);
	margin-block-start: var(--header-offset);
}
@media screen and (min-width: 500px) {
	.hero {
		padding-block-end: initial;
	}
}
@media screen and (min-width: 850px) {
	.hero {
		--aspect-ratio: 3/1;
	}
	.layout-pagets__DetailPage .hero,
	.p-offer .hero {
		--aspect-ratio: 2.5/1;
	}
}


	.hero:after {
		content: '';
		position: absolute;
		background-color: rgba(0,0,0,var(--overlay-transparency));
		width: 100%;
		height: 100%;
		top: 0; left: 0; bottom: 0; right: 0;
	}
	.hero img {
		display: block;
		object-fit: cover;
		width: 100%;
		height:100%;
	}

	.layout-pagets__DetailPage .hero:after {
		background-color: rgba(0,0,0,0.25);
	}

/*
	.hero .claim {
		position: relative;
		z-index: 20;
		color: var(--color-white);
	}
	.hero .claim .inner {
		width: 100;
		padding: 1rem;
		background-color: rgba(30,45,71,0.8);
	}
*/
	.hero .claim {
		position: relative;
		z-index: 20;
		color: var(--color-white);
	}
	.hero .claim {
		position: absolute;
		width: 100%;
		bottom: 1rem;
	}
	.hero .claim .heading {
		font-size: clamp(100%,calc(1.2rem + 1.5vw),3em);
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		text-align: center;
	}

@media screen and (min-width:850px) {
	.hero .claim {
		bottom: 3rem;
	}
	.hero .claim .heading {
		max-width: 80%;
		margin-inline-start: auto;
		margin-inline-end: auto;
	}
}
@media screen and (min-width:80em) {
	.hero .claim .heading {
		max-width: 60%;
		margin-inline-start: auto;
		margin-inline-end: auto;
	}
}



.hero .claim .inner {
		width: 90%;
		max-width: var(--content-maxw);
		margin-inline: auto;
	}

/* variation home page */
.layout-pagets__Home .hero {
	min-height: 100vh;
}
.layout-pagets__Home .hero .claim {
	bottom: 0;
}
.layout-pagets__Home .hero .claim .heading {
	width: auto;
	max-width: 95%;
	padding-inline-start: 4vw;
	padding-inline-end: 4vw;
	margin-inline-start: initial;
	margin-inline-end: initial;
	text-align: left;
}

/* logo animation startseite */
.layout-pagets__Home .hero .logo  {
		--logo-color: var(--color-white);
		position: absolute;
		top: 45vh;
		left: 50%;
		transform: translate(-50%,-50%) scale(1.1);
		z-index: 999;
		pointer-events: none;
	}
.layout-pagets__Home .hero .logo.scrolled {
		top: -90px;
	}
@media screen and (min-width: 500px) {
	.layout-pagets__Home .hero .logo.scrolled {
		top: -117px;
	}
}
@media screen and (min-width: 850px) {
	.layout-pagets__Home .hero .logo  {
		top: 40vh;
		transform: translate(-50%,-50%) scale(1.5);
		font-size: 1em;
	}
	.layout-pagets__Home .hero .logo.scrolled {
		font-size: 1em;
		top: -117px;
	}
}
@media screen and (min-width: 1900px) {
	.layout-pagets__Home .hero .logo  {
		top: 47vh;
		transform: translate(-50%,-50%) scale(2.25);
	}
}
@media screen and (min-width: 2000px) {
	.layout-pagets__Home .hero .logo  {
		top: 45vh;
		transform: translate(-50%,-50%) scale(3);
	}
}
.layout-pagets__Home .hero .logo,
.layout-pagets__Home .hero .logo > .inner > svg path,
.layout-pagets__Home .hero .logo > .inner > svg rect,
.layout-pagets__Home .hero .logo > .logo-heading,
.layout-pagets__Home .hero .logo > .logo-claim {
	transition: all ease-in-out 0.5s;
}
.layout-pagets__Home .hero .logo.scrolled {
		--logo-color: var(--color-primary);
		transform: translateX(-50%) scale(1);
		position: fixed;
	}
.layout-pagets__Home .hero .logo.scrolled .inner,
.layout-pagets__Home .hero .logo.scrolled .logo-claim {
		--logo-color: transparent;
	}