.underHero {}

.mobile {
    display: none;
}

.underHero img {
    object-fit: cover;
    object-position: 20% 30%;
    width: 100%;
    margin-inline: auto;
    height: 500px;
    position: relative;
}

.underHero div {
    display: grid;
    grid-template-columns: auto;
    height: 300px;
    /* background-color: #F64C72; */
    background-image: linear-gradient(to top right, #F64C72, #d33d5e);
    width: 28%;
    position: absolute;
    z-index: 11;
    top: 8rem;
    padding-bottom: 200px;
}

.underHero h1 {

    /* color: #F64C72; */
    color: white;
    /* background-color: #F64C72; */
    width: 400px;
    margin-inline: auto;
    position: relative;
    font-size: 65px;
    text-shadow: #5D5D5D 2px 2px 5px;
    margin-bottom: -100px;
    z-index: 12;
    /*new*/
}

.underHero a {
    position: relative;
    width: 55%;
    height: 45px;
    padding-top: 20px;
    margin-left: 30px;
    font-size: 1.7rem;
    top: -150px;
}
/* ORT_GRID ================================ */
.ort_grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.ort_h2{
    text-align: center;
    margin-top: 50px;
}
.ort_grid_display{
    display: grid;
    grid-template-columns: auto;
    margin-left: auto;
    margin-right: auto;
}
.ort_grid_display a{
    color: #5D5D5D;
    text-align: left;
}
.ortButton{
    width: 150px;
    margin-left: 40%;
    margin-bottom: 20px;
}
.ortButton:hover {
    cursor: pointer;
}

/* 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;
}
/*  */

/* CAT ===================================== */
.cat div{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(280px, 1fr));
}
.cat div span{
    width: 90%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto;
}
.cat div img {
    width: 90%;
    margin-left: 10px;
}
.cat div h2{
    text-align: center;
}
.cat div h3{
    text-align: center;
}
.cat div a {
   color: white;
   background-color: #F64C72;
   text-align: center;
   height: 30px;
   margin: 5px 15px;
   padding: 5px 10px;
   font-size: 23px;
}
/* TELECAT ================================= */
.telecat{
    background-color: #F64C72;
    height: 30px;
    width: 180px;
    padding: 10px 15px;
}
.telecat a{
    color: white;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
}

/* DIESNTE ================================= */
.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) {
    .underHero 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;
    }

    .underHero h1 {
        font-size: 65px;
    }
}

@media(max-width:850px) {
    .underHero div {
        display: grid;
        grid-template-columns: auto;
        height: 10%;
        background-color: #F64C72;
        width: 31%;
        position: absolute;
        z-index: 11;
        top: 18.5rem;
        padding-bottom: 200px;
    }
    .ort_grid_display{
        display: grid;
        grid-template-columns: auto;
        margin-left: 10px;
        
    }
    .ortButton{
        width: 150px;
        margin-left: 10px;
        padding: 20px 10px;
    }
}

@media(max-width:800px) {
    .underHero {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .underHero img {
        object-fit: cover;
        object-position: 60% 20%;
        height: 300px;
    }

    .underHero h1 {
        font-size: 28px;
        width: 90%;
        margin-left: 10px;
    }

    .underHero 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) {
    .underHero div {
        top: 21rem;
    }

    .underHero h1 {
        width: 90%;
    }
}