#landing {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

#landing_background {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
    transform: translateZ(-10px) scale(2);
    content: url(../media/backgrounds/landing_background.jpg);
}

#landing_text {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: clamp(100px, 6vw, 250px);
}

#landing_text i {
    font-size: 2rem;
    color: rgb(104, 104, 104);
}

#landing_text h1 {
    font-size: clamp(3.8rem, 1.8vw, 5.5rem);
    color: white;
    line-height: clamp(60px, 3vw, 100px);
}

#landing_text h2 {
    font-size: clamp(3.0rem, 1.3vw, 4.5rem);
    color: white;
    line-height: clamp(60px, 3vw, 100px);
}

#landing_text h3 {
    font-size: clamp(1rem, 0.5vw, 2rem);
    color: white;
    font-weight: 200;
    line-height: clamp(40px, 2.5vw, 70px);
}

/* Bildschirmbreite kleiner 3000px */
@media screen and (orientation: landscape) and (max-width: 3000px) {

    #landing_section_main {
        min-width: 1000px;
    }

    #landing_text {
        margin-top: clamp(50px, 4vw, 120px);
    }

    #landing_text h1 {
        font-size: clamp(2.8rem, 1.8vw, 3.7rem);
    }

    #landing_text h2 {
        font-size: clamp(2rem, 1.3vw, 2.7rem);
    }

    #landing_text h3 {
        font-size: clamp(1rem, 0.5vw, 1rem);
    }
}

/* Bildschirmbreite kleiner 2000px */
@media screen and (orientation: landscape) and (max-width: 2000px) {

    #landing_section_main {
        min-width: 1000px;
    }

    #landing_text h1 {
        font-size: clamp(2.8rem, 1.8vw, 3.7rem);
    }

    #landing_text h2 {
        font-size: clamp(2rem, 1.3vw, 2.7rem);
    }

    #landing_text h3 {
        font-size: clamp(1rem, 0.5vw, 1rem);
    }

    #landing_text i {
        font-size: 1.5rem;
    }
}

/* Bildschirmbreite kleiner 1500px UND horizontal */
@media screen and (orientation: landscape) and (max-width: 1500px) {

    #landing_section_main {
        min-width: 800px;
    }

    #landing_text h1 {
        font-size: clamp(2.8rem, 1.8vw, 3.7rem);
    }

    #landing_text h2 {
        font-size: clamp(2rem, 1.3vw, 2.7rem);
    }

    #landing_text h3 {
        font-size: clamp(1rem, 0.5vw, 1rem);
    }

    #landing_text i {
        font-size: 1rem;
    }
}

/* Bildschirmbreite kleiner 3000px */
@media screen and (orientation: portrait) and (max-width: 3000px) {

    #landing {
        justify-content: start;
        align-items: start;
    }

    #landing_section_main {
        width: 90%;
        height: 100%;
        min-width: 0;
        margin: 20% auto 20% auto;
    }

    #landing_text {
        margin-top: clamp(50px, 4vw, 120px);
    }

    #landing_text h1 {
        font-size: clamp(2.8rem, 1.8vw, 3.7rem);
    }

    #landing_text h2 {
        font-size: clamp(2rem, 1.3vw, 2.7rem);
    }

    #landing_text h3 {
        font-size: clamp(1rem, 0.5vw, 1rem);
    }
}

/* extended mobile */
/* Bildschirmbreite kleiner 1000px UND horizontal */
@media screen and (orientation: landscape) and (max-width: 1000px) {

    #landing_section_main {
        height: 70%;
        max-height: 100vh;
        max-width: 800px;
        min-width: 0;
    }

    #landing_text h1 {
        font-size: clamp(2.8rem, 1.8vw, 3.7rem);
    }

    #landing_text h2 {
        font-size: clamp(2rem, 1.3vw, 2.7rem);
    }

    #landing_text h3 {
        font-size: clamp(1rem, 0.5vw, 1rem);
    }

    #landing_text i {
        font-size: 1rem;
    }
}

/* Bildschirmbreite kleiner 800px orientierung horizontal*/
/* mobile */
@media screen and (max-width: 800px) and (orientation: landscape) {

    #landing_section_main {
        height: calc(80% - 20%);
        /*<-- Bei Änderung der Höhe - margin-top berücksichtigen */
        margin-top: auto;
        min-width: 0;
    }

    #landing_text h1 {
        font-size: clamp(1.25rem, 5vw, 2rem);
        line-height: clamp(50px, 3vw, 80px);
    }

    #landing_text h2 {
        font-size: clamp(1.0rem, 4vw, 1.75rem);
        line-height: clamp(50px, 3vw, 80px);
    }

    #landing_text h3 {
        font-size: clamp(0.75rem, 0.5vw, 1rem);
    }



    #landing_text i {
        font-size: 1rem;
    }
}

/* Bildschirmbreite kleiner 800px orientierung vertikal*/
/* mobile */
@media screen and (max-width: 800px) and (orientation: portrait) {

    #landing_section_main {
        padding: 20% 0 20% 0;
        margin: 0 auto 0 auto;
        min-width: 0;
    }

    #landing_text h1 {
        font-size: clamp(1.25rem, 5vw, 2rem);
        line-height: clamp(50px, 3vw, 80px);
    }

    #landing_text h2 {
        font-size: clamp(1.0rem, 4vw, 1.75rem);
        line-height: clamp(50px, 3vw, 80px);
    }

    #landing_text h3 {
        font-size: clamp(0.75rem, 0.5vw, 1rem);
    }

    #landing_text i {
        font-size: 1rem;
    }

    #landing_background {
        content: url(../media/backgrounds/mobile-landing-background.jpg);
    }

}