.hero{
   
    
}

.mobile {
    display:none;
}

.hero img{
    object-fit: cover;
    width: 100%;
    margin-inline: auto;
    height: 800px;
    position: relative;
}
.hero article{
    display: grid;
    grid-template-columns:auto;
    height: 800px;
    /* background-color: #F64C72; */
    background-image: linear-gradient(to top right, #F64C72,#d33d5e);
    width: 28%;
    position: absolute;
    z-index:11;
    top: 8rem;
    padding-bottom: 200px;
}
.hero h1{
   
    /* color: #F64C72; */
    color: white;
    /* background-color: #F64C72; */
    width: 400px;
    margin-left: 30px;
    position:relative;
    font-size: 85px;
    text-shadow: #5D5D5D 2px 2px 5px;
    
    
    /*new*/
}
.hero a{
    position: relative;
    width: 55%;
    height: 45px;
    padding-top: 20px;
    margin-left:30px ;
    font-size: 1.7rem;
    top: -150px;
}
/* MOBILE PhONE ============================ */

.mobile_phone {
    border: white solid 2px;
    padding: 20px 10px 10px 10px;
    color: white;
    text-align: center;
}
/* DIENSTE ================================= */
.dienste{
    width: 70%;
    margin-top: -10rem;
    margin-inline: auto;
    background-color: white;
    padding: 40px 20px;
    position: relative;
    z-index: 13;
}
.dienste img{
    max-height: 50px;
    width: auto;
    margin-inline: auto;
}
.dienste div{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: 20px;
    width: 80%;
    margin-inline: auto;
}
.dienste a {
    display: grid;
    color: #5D5D5D;
}
 .dienste li {
     /*new*/
     list-style: none;
     text-align: center;
 }
.dienste p:nth-child(2){
   text-align: center;
   font-weight: 800;
   font-size: 18px;
}
.dienste p:nth-child(3) {
    width: 90%;
    margin-inline: auto;
    text-align: center;
}


/*Dienst in Menü*/

/* @MEDIA BEREICH ========================= */

@media(max-width:1025px) {
    .hero a {
        font-size: 1.3rem;
        width: 50%;
        height: 20px;
        padding: 15px 5px 15px 5px;
        
    }
    .dienste_menu{
        width: 224px;
        height: 44px;
        background-color: #F64C72;
        margin-inline: auto;
    }
    .dienst a:nth-child(1){
        color: #FFE9DE;
        display: block;
        text-align: center;
        padding: 5px 0px;
    }
    .dienst a:nth-child(1){
        cursor: pointer;
    }
    .dienste_menu a{
        display: none;
    }
    .hero h1{
        font-size: 65px;
    }
}
@media(max-width:850px){
    .hero article {
            display: grid;
            grid-template-columns: auto;
            height: 800px;
            background-color: #F64C72;
            width: 31%;
            position: absolute;
            z-index: 11;
            top: 20rem;
            padding-bottom: 200px;
        }
}
@media(max-width:800px) {
    .hero {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .hero img {
        object-fit: cover;
        object-position: 60% 20%;
        height: 300px;
    }
    
    .hero h1 {
        font-size: 28px;
        width: 100px;
        margin-left: 10px;
    }
    .hero a{
        display: none;
    }

    .dienste {
        margin-top: 1rem;
    }

    .dienste a {
        margin-bottom: 20px;
    }

    .dienste li {
        text-align: center;
    }
    /* MOBILE EINSTELLUNG ==================== */
    .mobile{
        background-color: white;
        display: block;
        position:fixed;
        z-index: 999;
        width: 90%;
        bottom: 0px;
        left: 5%;
        right: auto;
        text-align: center;
        color: #F64C72;
        height: 50px;
        font-size: 1.7rem;
        padding-top: 20px;
        border: #F64C72 solid 2px;
        box-shadow: inset #dadada -5px -5px 10px, inset #dadada 5px -5px 10px;
    }
    
}
/* DAS IST NICHT ERST ======================== */
@media(max-width:300px) {
    .hero article{
        top:21rem;
    }
    .hero h1{
        width: 90%;
    }
}