/* ********************************** ********************************** */
/* *                               HERO                                * */
/* ********************************** ********************************** */


/* Titel*/
.ly-hero-title {
    font-family: "Merlo Medium";
    color: #fff;
}

/* Claim */
.ly-hero-claim {
    font-family: "Merlo Light";    
    display: inline-block;
    color: #fff !important;
    background: var(--ly-color-violett);    
    margin: 0 !important;
}

/* SubClaim */
.ly-hero-subclaim {
    font-family: "Merlo RoundRegular"; 
    zfont-family: "Merlo Light";    
    color: #fff;    
}

/* .................................. .................................. */
/* .                            Media-Queries                          . */
/* ..................................................................... */

/* Styles für Bildschirme mit einer Mindestbreite von 0px */
@media only screen and (min-width: 0px) {
    .ly-hero-title {
        font-size: calc(1.0rem + 20vw * 0.3) !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: calc( (3vh + 5vw) * 0.5) !important;
    }

    .ly-hero-claim {
        font-size: calc(0.15rem + 20vw * 0.3) !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 0.5rem !important;
        padding-top: 0.7rem !important;
    }

    .ly-hero-subclaim {
        font-size: calc(0.05rem + 16vw * 0.3 ) !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: calc( (5vh + 5vw) * 0.7) !important;
    }
}

/* Styles für Bildschirme mit einer Mindestbreite von 576px */
@media only screen and (min-width: 576px) {
    .ly-hero-title {
        font-size: 3.5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: 4vh !important;
    }

    .ly-hero-claim {
        font-size: 2.7rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 11px !important;
        padding-top: 12px !important;
    }

    .ly-hero-subclaim {
        font-size: 2rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: 10vh !important;
    }
}

/* Styles für Bildschirme mit einer Mindestbreite von 992px */
@media only screen and (min-width: 768px) {
    .ly-hero-title {
        font-size: 4.0rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: 4vh !important;
    }

    .ly-hero-claim {
        font-size: 3.5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 15px !important;
        padding-top: 17px !important;
    }

    .ly-hero-subclaim {
        font-size: 1.5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: 10vh !important;
    }    
}

/* Styles für Bildschirme mit einer Mindestbreite von 992px */
@media only screen and (min-width: 992px) {
    .ly-hero-title {
        font-size: 4.5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: 5vh !important;
    }

    .ly-hero-claim {
        font-size: 4.0rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 20px !important;
        padding-top: 22px !important;
    }

    .ly-hero-subclaim {
        font-size: 1.7rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: 13vh !important;
    }
}

/* Styles für Bildschirme mit einer Mindestbreite von 1200px */
@media only screen and (min-width: 1200px) {
    .ly-hero-title {
        font-size: 5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: 7vh !important;
    }

    .ly-hero-claim {
        font-size: 5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 30px !important;
        padding-top: 35px !important;
    }

    .ly-hero-subclaim {
        font-size: 1.8rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: 10vh !important;
    }
}

/* Styles für Bildschirme mit einer Mindestbreite von 1400px */
@media only screen and (min-width: 1400px) {
    .ly-hero-title {
        font-size: 5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-bottom: 7vh !important;
    }

    .ly-hero-claim {
        font-size: 5rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        padding: 30px !important;
        padding-top: 35px !important;
    }

    .ly-hero-subclaim {
        font-size: 1.8rem !important;
        letter-spacing: 0.03rem !important;
        line-height: 2rem !important;
        margin-top: 10vh !important;
    }
}