.ecc-service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.ecc-service-card{
    position:relative;
    overflow:hidden;
    background:#d9d9d9;
    text-decoration:none!important;
    color:#000;
    display:flex;
    flex-direction:column;
}

.ecc-service-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}

.ecc-service-content{
    width:100%;
    background:rgba(221,221,221,.96);
    padding:18px;
    min-height:180px;
}

.ecc-service-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
}

.ecc-service-header h3{
    margin:0;
    color:#000;
    font-size: clamp(13px, 1.1vw, 24px);
    line-height:1.1;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    font-weight:700;
    transition:color .3s ease;
    hyphens:none;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:normal;
    min-width:0;
    max-width:100%;
}

.ecc-service-card:hover h3{
    color:#ff0000;
}

.ecc-arrow{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#3f3da5;
    color:#fff;
    border-radius:4px;
    flex-shrink:0;
}

.ecc-service-description{
    margin-top:18px;
    text-align:center;
    color:#333;
    line-height:1.5;
    font-size:clamp(13px,.95vw,16px);
}

@media (hover:hover){

    .ecc-service-content{
        position:absolute;
        left:0;
        bottom:0;
        transform:translateY(calc(100% - 74px));
        transition:transform .4s ease;
    }

    .ecc-service-card:hover .ecc-service-content{
        transform:translateY(0);
    }
}

@media (hover:none){

    .ecc-service-content{
        position:relative;
        transform:none;
    }
}

@media(max-width:1024px){

    .ecc-service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .ecc-service-header h3{
        font-size:clamp(12px,1.8vw,20px);
    }
}

@media(max-width:767px){

    .ecc-service-grid{
        grid-template-columns:1fr;
    }

    .ecc-service-content{
        position:relative!important;
        transform:none!important;
    }

    .ecc-service-header h3{
        font-size:clamp(20px,6vw,26px);
    }
}


/* Anpassung lange Titel: kleiner, sauber neben Pfeil, kein unschoenes Abschneiden */
.ecc-service-header{
    flex-wrap: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}

.ecc-service-header h3{
    font-size: clamp(15px, 1.15vw, 22px) !important;
    line-height: 1.15;
    max-width: calc(100% - 46px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

.ecc-arrow{
    width: 28px;
    height: 28px;
    font-size: 16px;
    flex: 0 0 28px;
}

@media(max-width:767px){
    .ecc-service-header h3{
        font-size: clamp(17px, 5vw, 22px) !important;
    }
}