*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    font-family: 'Glacial-Indifference', sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

.hero-section{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #d10a14;
}

.hero-text{
    font-family: 'Dela Gothic One', cursive;
    color: #fff2eb;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-title{
    position: absolute;
    text-align: center;
    z-index: 10;
    text-shadow: 1px 1px 10px black;
}

.hero-subtitle{
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 1px #fff2eb;
}

.hero-subtitle h2{
   font-size: 14vw;
}

#hero-3d{
    position: absolute;
    max-width: 160%;
    animation: animateHeroImage 7s ease-in-out infinite;
}

#hero-wolke{
    max-width: 150%;
}

.stars-scene{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

.stars-scene i{
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: animateStars linear infinite;
    opacity: 0;
}

.marken-fundament-section{
    color: #fff2eb;
    background-color: #191919;
    position: relative;
    z-index: 11;
}

.marken-fundament-banner{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 2rem;
    color: transparent;
    -webkit-text-stroke: 0.5px #fff2eb;
    overflow: hidden;
    min-width: max-content;
    position: relative;
    display: flex;
    word-wrap: normal;
    justify-content: stretch;
   
}

.marken-fundament-banner-top > div{
	animation: slideLeft 40s linear infinite;
}

.marken-fundament-banner-bottom > div{
	animation: slideRight 40s linear infinite;
}

.marken-fundament-section-mobile{
    overflow: hidden;
    width: 100%;
    padding: 4em 3em;
    background-color: #191919;
    display: flex;
    flex-direction: column;
}

.marken-fundament-section-desktop{
    display: none;
}

.marken-fundament-baustein{
    margin-top: 4em;
}

.marken-fundament-baustein:first-child{
    margin-top: unset;
}

.marken-fundament-baustein-title{
    font-size: 10vw;
    color: #d10a14;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
    z-index: 10;
}

.marken-fundament-baustein-arrow{
    display: none;
}

.marken-fundament-baustein-text-default-1{
    font-size: 5.5vw;
    line-height: 1.5;
    opacity: 0;
    height: 0px;
    transition-duration: .2s;
}

.marken-fundament-baustein-text-default-2{
    font-size: 5vw;
    line-height: 1.2;
    opacity: 0;
    height: 0px;
    transition-duration: .2s;
}

.marken-fundament-baustein-text-default-2 > p{
    margin-top: 1.5em;
}

.marken-fundament-baustein-text-default-2 > p:first-child{
    margin-top: unset;
}

.marken-fundament-baustein-text-default-3{
    font-size: 4.5vw;
    line-height: 1.5;
    opacity: 0;
    height: 0px;
    transition-duration: .2s;
}

.marken-fundament-baustein-text-active{
    margin-top: 1.5em;
    opacity: 1;
    transition-duration: .2s;
}

.marken-fundament-baustein-text-active-1{
    height: 70vw;
}

.marken-fundament-baustein-text-active-2{
    height: 80vw;
}

.marken-fundament-baustein-text-active-3{
    height: 170vw;
}

.cta-section{
    padding: 1em 48px 3em 48px;
}


/* Keyframes */

@keyframes animateHeroImage{

    0%{
        transform: scale(100%);
    }

    50%{
        transform: scale(95%);
    }

    100%{
        transform: scale(100%);
    }

}

@keyframes animateStars{

    0%{
        opacity: 0;
        transform: translateY(0);
    }

    10%,90%{
        opacity: .5;
    }

    100%{
        opacity: 0;
        transform: translateY(-100px);
    }

}

@keyframes slideLeft{

    0%{
        transform: translateX(0%);
    }

    100%{
        transform: translateX(-100%);
    }

}

@keyframes slideRight{

    0%{
        transform: translateX(-100%);
    }

    100%{
        transform: translateX(0%);
    }

}

/* Mediaqueries */

@media (min-width: 450px){

    .hero-title h1{
        font-size: 10vw;
    }

    #hero-3d{
        max-width: 150vw;
    }

}

@media (min-width: 650px){

    .marken-fundament-baustein-text-active-3 {
        height: 150vw;
    }


    .cta-section {
        padding: 1em 48px 5em 48px;
    }

}


@media (min-width: 768px){

    .marken-fundament-banner{
        font-size: 3rem;
    }

    .marken-fundament-section-mobile {
        padding: 7em 5em;
        padding-bottom: 0em;
    }

    .marken-fundament-baustein-text-default-1 {
        font-size: 3.5vw;
    }

    .marken-fundament-baustein-text-active-1 {
        height: 30vw;
    }

    .marken-fundament-baustein-text-default-2 {
        font-size: 3.5vw;
    }

    .marken-fundament-baustein-text-active-2 {
        height: 42vw;
    }

    .marken-fundament-baustein-text-default-3 {
        font-size: 2.7vw;
    }

    .marken-fundament-baustein-text-active-3 {
        height: 55vw;
    }

    .cta-section{
        padding: 4em 80px;
    }

}

@media (min-width: 992px){

    #hero-3d {
        max-width: 125vw;
    }

    .marken-fundament-banner{
        font-size: 4rem;
    }

    .marken-fundament-banner-top > div{
        animation: slideLeft 100s linear infinite;
    }
    
    .marken-fundament-banner-bottom > div{
        animation: slideRight 100s linear infinite;
    }

    .marken-fundament-section-mobile {
        padding: 7em 9em;
    }

    .marken-fundament-baustein-title {
        font-size: 8vw;
    }

    .marken-fundament-baustein-text-default-1 {
        font-size: 3vw;
    }

    .marken-fundament-baustein-text-active-1 {
        height: 25vw;
    }

    .marken-fundament-baustein-text-default-2 {
        font-size: 3vw;
    }

    .marken-fundament-baustein-text-active-2 {
        height: 39vw;
    }

    .marken-fundament-baustein-text-default-3 {
        line-height: 1.6;
    }

    .marken-fundament-baustein-text-active-3 {
        height: 60vw;
    }

    .cta-section{
        padding: 2em 144px 5em 144px;
    }

}

@media (min-width: 1200px){

    #hero-3d {
        width: 110vw;
        max-width: 1400px;
    }

    .marken-fundament-banner{
        font-size: 5.5rem;
    }

    .marken-fundament-section-mobile{
        display: none;
    }

    .marken-fundament-section-desktop{
        display: block;
    }

    .marken-fundament-wrapper-desktop{
        width: 100%;
        height: 850px;
        padding: 8em 8em;
        display: flex;
    }

    .marken-fundament-titles-desktop{
        width: 50%;
    }

    .marken-fundament-title-desktop{
        font-size: 3.25rem;
        margin-top: 1em;
        color: #d10a14;
        cursor: pointer;
        -webkit-filter: brightness(.7);
        filter: brightness(.7);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none; 
        user-select: none; 
        transition-duration: .2s;
    }

    .marken-fundament-title-desktop:first-child{
        margin-top: unset;
    }

    .marken-fundament-title-desktop:hover{
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }

    .marken-fundament-title-desktop-active{
        -webkit-filter: brightness(1);
        filter: brightness(1);
        transition-duration: .2s;
    }

    .marken-fundament-texts-desktop{
        width: 50%;
        position: relative;
    }

    .marken-fundament-text-desktop{
        position: absolute;
        opacity: 0;
        transition-duration: .2s;
    }

    .marken-fundament-text-desktop-active{
        opacity: 1;
        z-index: 10;
        transition-duration: .2s;
    }

    .marken-fundament-text-desktop-mission{
        font-size: 1.7rem;
        line-height: 1.5;
    }

    .marken-fundament-text-desktop-werte{
        font-size: 1.5rem;
    }

    .marken-fundament-text-desktop-werte > p{
        margin-top: 1em;
    }

    .marken-fundament-text-desktop-werte > p:first-child{
        margin-top: unset;
    }

    .marken-fundament-text-desktop-vision{
        font-size: 1.25rem;
        line-height: 1.5;
    }

}

@media (min-width: 1400px){

    .hero-title h1 {
        font-size: 8vw;
    }

    .hero-subtitle h2 {
        font-size: 12vw;
    }

    .marken-fundament-title-desktop {
        font-size: 4rem;
    }

    .marken-fundament-text-desktop-mission {
        font-size: 2.1rem;
    }

    .marken-fundament-text-desktop-werte {
        font-size: 2rem;
    }

    .marken-fundament-text-desktop-vision {
        font-size: 1.3rem;
        line-height: 1.6;
    }

    .cta-section{
        padding-top: 0em;
    }

}

@media (min-width: 1700px){

    #hero-3d {
        width: 90vw;
        max-width: 1750px;
    }

    .marken-fundament-banner{
        font-size: 6rem;
    }

    .marken-fundament-wrapper-desktop {
        height: 1100px;
        padding: 10em 14em;
        padding-bottom: 0em;
    }

    .marken-fundament-title-desktop {
        font-size: 5rem;
    }

    .marken-fundament-text-desktop-mission {
        font-size: 2.6rem;
    }

    .marken-fundament-text-desktop-werte {
        font-size: 2.4rem;
    }

    .marken-fundament-text-desktop-vision {
        font-size: 1.8rem;
        line-height: 1.6;
    }

    .cta-section{
        padding: 0em 224px 5em 224px;
    }

}

@media (min-width: 1920px){

    .marken-fundament-wrapper-desktop {
        height: 1150px;
    }

}