.dienst_grid-layout{
    padding-inline: 20px;
    margin-block: 0;
}

.dienst_grid-layout .pk-row{
    padding-block: 0;
}
/* 
.dienst_grid-layout .diensten-images-container{
    aspect-ratio: 1.18; position: absolute;
    width: max(25rem, calc(25 * var(--su)));
    border-radius: .25rem;
    overflow: clip; border: 1px solid var(--button-border-color);
    box-shadow: 0 4px 60px 0 rgba(0, 0, 0, 0.30);
} */
.dienst_grid-layout .dienst-item .image-spacer{
   overflow: visible; flex-shrink: 0;
   width: max(25rem, calc(25 * var(--su))); height: auto;
}
.dienst_grid-layout .dienst-item .dienst-image{
    position: absolute; 
    aspect-ratio: 1.18; 
    width: max(25rem, calc(25 * var(--su))); height: auto;
    border-radius: .25rem;
    right: 25%; top: 50%;
    transform: translateY(-50%);
    overflow: clip; border: 1px solid var(--button-border-color);
    box-shadow: 0 4px 60px 0 rgba(0, 0, 0, 0.30);
    object-fit: cover; object-position: center;
    z-index: 0; opacity: 0; scale: .8; rotate: 0;
    pointer-events: none;
    transition: all .7s cubic-bezier(.2,1,.22,1);
}
.dienst_grid-layout .dienst-item .dienst-link:hover .dienst-image{
    scale: 1; opacity: 1; rotate: 4deg;
}

.dienst_grid-layout .dienst-item .dienst-link{
    text-decoration: none;
    display: flex; justify-content: space-between;
    position: relative;
}
.dienst_grid-layout .dienst-item:first-child .dienst-link{
    border-top: 1px solid var(--button-border-color);
}
.dienst_grid-layout .dienst-item .dienst-link{
    border-bottom: 1px solid var(--button-border-color);
}

.dienst_grid-layout .dienst-item .dienst-link{
    transition: all .7s cubic-bezier(.2,1,.22,1);
    /* overflow: clip; */
    padding-block: max(3.75rem, calc(3.75 * var(--su)));
    padding-inline: max(3.75rem, calc(3.75 * var(--su)));
}
.dienst_grid-layout .dienst-item .dienst-link .dienst-arrow{
    /* transform: translateX(-100%); */
    margin-left: -60px; opacity: 0;
    transition: all .7s cubic-bezier(.2,1,.22,1);
}
.dienst_grid-layout .dienst-item .dienst-link:hover .dienst-arrow{
    opacity: 1; margin-left: 0;
}

.dienst_grid-layout .dienst-item .dienst-title-wrapper{
    display: flex; flex-direction: row; align-items: center; gap: 2rem;
    margin-left: -60px;
    transition: all .7s cubic-bezier(.2,1,.22,1);
}
.dienst_grid-layout .dienst-item .dienst-link:hover .dienst-title-wrapper{
    margin-left: 0;
}
.dienst_grid-layout .dienst-item .dienst-link:hover{
    background-color: #1A1B1B;
}
.dienst_grid-layout .dienst-item .dienst-link .pk-button{
    transform: translateX(20px); opacity: 0;
    transition: all .7s cubic-bezier(.2,1,.22,1);
}
.dienst_grid-layout .dienst-item .dienst-link:hover .pk-button{
    transform: translateX(0); opacity: 1;
}

.dienst_grid-layout .dienst-item .dienst-title-wrapper .dienst-title{
    font-weight: 400;
    margin: 0;
    font-size: clamp(16px, 10vw, 48px);
    min-font-size: 16px;
}

@media screen and (max-width: 992px) {
    body:has(.dienst_grid-layout) {
        overflow-x: clip;
    }

    body:has(.dienst_grid-layout) .socials-sidebar {
        display: none;
    }

    .dienst_grid-layout {
        padding-inline: var(--pk-site-gutter, 16px);
        overflow: hidden;
    }

    .dienst_grid-layout .pk-row,
    .dienst_grid-layout .pk-row-content,
    .dienst_grid-layout .pk-col {
        width: 100%;
        max-width: none;
    }

    .dienst_grid-layout .dienst-grid {
        width: 100%;
    }

    .dienst_grid-layout .dienst-item .dienst-link {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
        min-height: 92px;
        padding: 24px 0;
        overflow: hidden;
    }

    .dienst_grid-layout .dienst-item .dienst-link:hover {
        background-color: transparent;
    }

    .dienst_grid-layout .dienst-item .dienst-title-wrapper,
    .dienst_grid-layout .dienst-item .dienst-link:hover .dienst-title-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        margin-left: 0;
    }

    .dienst_grid-layout .dienst-item .dienst-link .dienst-arrow,
    .dienst_grid-layout .dienst-item .dienst-link:hover .dienst-arrow {
        opacity: 1;
        margin-left: 0;
        flex-shrink: 0;
    }

    .dienst_grid-layout .dienst-item .dienst-link .dienst-arrow svg {
        width: 42px;
        height: 42px;
        display: block;
    }

    .dienst_grid-layout .dienst-item .dienst-title-wrapper .dienst-title {
        font-size: clamp(32px, 10vw, 48px);
        line-height: .96;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .dienst_grid-layout .dienst-item .image-spacer,
    .dienst_grid-layout .dienst-item .dienst-image {
        display: none;
    }

    .dienst_grid-layout .dienst-item .dienst-link .pk-button,
    .dienst_grid-layout .dienst-item .dienst-link:hover .pk-button {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .dienst_grid-layout .dienst-item .dienst-link {
        display: flex;
        align-items: center;
        min-height: 0;
        padding: 18px 0;
    }

    .dienst_grid-layout .dienst-item .dienst-title-wrapper .dienst-title {
        font-size: clamp(24px, 5vw, 42px);
    }
}

@media screen and (max-width: 374px) {
    .dienst_grid-layout .dienst-item .dienst-link .dienst-arrow svg {
        width: 36px;
        height: 36px;
    }

    .dienst_grid-layout .dienst-item .dienst-title-wrapper {
        gap: 10px;
    }
}