.hero-wrapper {
    position: relative;
}

.hero-image {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.hero-height-fullheight .hero-image {
    height: 100vh;
}

.hero-height-reducedheight .hero-image {
    /* 475px - 750px */
    height: clamp(29.6875rem, -0.8681rem + 63.6574vw, 46.875rem);
    height: clamp(31.25rem, 24.5536rem + 29.7619vw, 46.875rem);
}

.hero-image::before {
    content: '';
    background: linear-gradient(182deg, rgba(0, 0, 0, 0) 1.92%, rgba(0, 0, 0, 0.40) 64.91%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.hero-image img,
.hero-image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


.hero-content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2;

    color: var(--color-white);
}

.hero-headline p {
    max-width: 600px;
    ;
}

.hero-content-wrapper {
	max-width: var(--header-maxwidth);
	padding-left: calc(2 * var(--defaultunit));
	padding-right: calc(2 * var(--defaultunit));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
    height: 100%;
}

.hero-height-fullheight .hero-content-wrapper { 
	height: calc(100% - var(--header-height));
	margin-top: var(--header-height);
}

@media (max-width: 1200px) {
    .hero-content-wrapper {
        padding-left: calc(1 * var(--defaultunit));
        padding-right: calc(1 * var(--defaultunit));
    }
}

@media (max-width: 1000px) {
    .hero-height-reducedheight .hero-content-wrapper {
        justify-content: flex-end;
    }
}


.hero-alignend-1 .hero-content-wrapper {
    justify-content: flex-end;
    height: calc(100% - 100px);
}

@media (max-width: 768px) {
    .hero-height-reducedheight.hero-alignend-1 .hero-content-wrapper {
        height: calc(100% - 50px);
    }
}

.hero-content-width-reducedwidth .hero-content-wrapper {
    max-width: var(--header-maxwidthsmall);
}

.hero-dividerline {
    height: var(--decoline-height);
    width: calc(2 * var(--decoline-width));
    margin-left: calc(var(--defaultunit) * (-2));
    background-color: var(--color-white);
    margin-top: var(--defaultunit);
    margin-bottom: var(--defaultunit);
}

.hero-content-width-reducedwidth .hero-dividerline {
    margin-left: 0;
    background-color: transparent;
    height: 0;
    margin-top: 0;
    margin-bottom: var(--defaultunit);
}

.hero-content .button {
    color: var(--color-white);
}

.hero-content .button:hover {
    color: var(--color-black);
}