.kvhGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    gap: var(--grid_gap);
    margin-bottom: 5rem;
    /*margin-top: 5rem;*/
}


.kvhGrid h3 {
    line-height: 1.5rem;
    font-weight: 100;
}

.kvhGrid .widget-title-custom {
    z-index: 9;
}

.kvhGrid>div {
    background-color: #3D5F36;
    /*padding: 50px;*/
    /*text-align: center;*/
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    /*height: 100%;*/
}

.kvhGrid>div:not(.quote):not(.text) {
    cursor: pointer;
}
.kvhGrid>div>a>p {
    /*background-color: black;*/
    color: var(--color_pure_white);
    /*margin-left: auto;*/
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
}

.kvhGrid1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--grid_gap);
    grid-template-areas:
                "g1 g1 g2 g5"
                "g3 g4 g4 g5"
                "g6 g6 g7 g7"
                "g6 g6 g8 g8";
    background-color: unset;
}

.kvhGrid1 div,
.kvhGrid2 div {
    padding: .5rem 0.8rem;
}
.kvhGrid1 a,
.kvhGrid2 a {
    color: var(--color_pure_white);
    height: -webkit-fill-available;
    height: 100%;

    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9;
}
.kvhGrid1 .gridItem_0 {
    grid-area: g1;
}
.kvhGrid1 .gridItem_1 {
    grid-area: g2;

}
.kvhGrid1 .gridItem_2 {
    grid-area: g3;

}
.kvhGrid1 .gridItem_3 {
    grid-area: g4;
}
.kvhGrid1 .gridItem_4 {
    grid-area: g5;
}
.kvhGrid1 .gridItem_5 {
    grid-area: g6;

}
.kvhGrid1 .gridItem_5 a {
    aspect-ratio: 1 / 1;
}
.kvhGrid1 .gridItem_6 {
    grid-area: g7;
}
.kvhGrid1 .gridItem_7 {
    grid-area: g8;
}
.kvhGrid2 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--grid_gap);
    grid-template-areas:
                "g1 g2 g3 g3"
                "g1 g4 g4 g5"
                "g8 g7 g6 g5"
                "g8 g7 g9 g9";
    background-color: unset;
}
.kvhGrid2 .gridItem_0 {
    grid-area: g1;
}
.kvhGrid2 .gridItem_1 {
    grid-area: g2;
    aspect-ratio: 1 / 1;
}
.kvhGrid2 .gridItem_1 a {
    aspect-ratio: 1/ 1
 }
.kvhGrid2 .gridItem_2 {
    grid-area: g3;
    /*aspect-ratio: 1 / 1;*/
}
.kvhGrid2 .gridItem_3 {
    grid-area: g4;
}
.kvhGrid2 .gridItem_4 {
    grid-area: g5;
}
.kvhGrid2 .gridItem_5 {
    grid-area: g6;
    /*aspect-ratio: 1 / 1;*/
}
.kvhGrid2 .gridItem_6 {
    grid-area: g7;
}
.kvhGrid2 .gridItem_7 {
    grid-area: g8;
}
.kvhGrid2 .gridItem_8 {
    grid-area: g9;
}
/*Shadow*/
/*bei 1 beide bei 2 unten nur nicht bei zitat und text*/
.kvhGrid div:not(.quote):not(.text):not(.text):before,
.kvhGrid div:not(.quote):not(.text):not(.text):after {
    position: absolute;
    width: 100%;
    height: 8.5rem;
    content: '';
    left:0;
    opacity: 0.72;
    z-index: 1;
    transition: height .2s ease-in-out;
}
.kvhGrid div:before {
    background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100% );
    top: 0;
}
.kvhGrid div:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100% );
    bottom:0;
}

/*Quote*/
.kvhGrid>div.quote>a>p {
    position: relative;
    display: flex;
    align-items: center;
}
.kvhGrid>div.quote>a>p:after {
    position: relative;
    content: url('/wp-content/themes/kvhtheme/img/Gruppe 16(1).svg');
    position: absolute;
    left: -1rem;
    z-index: -1;
}
.kvhGrid1>div.quote,
.kvhGrid2>div.quote {
    background-image: none!important;
    padding: 1.9rem;
}

.kvhGrid1>div:nth-child(even).quote,
.kvhGrid2>div:nth-child(even).quote {
    background-color: var(--color_deep_forest_green);
    color: var(--color_pure_white);
}

.kvhGrid1>div:nth-child(even).quote p,
.kvhGrid2>div:nth-child(even).quote p{
    color: var(--color_pure_white);
}
.kvhGrid1>div:nth-child(odd).quote,
.kvhGrid2>div:nth-child(odd).quote {
    background-color: var(--coror_softer_sage);
    color: var(--color_blackest);
}

.kvhGrid1>div:nth-child(odd).quote p,
.kvhGrid2>div:nth-child(odd).quote p{
    color: var(--color_deep_forest_green);
}

.kvhGrid1>div:nth-child(odd).quote h3,
.kvhGrid2>div:nth-child(odd).quote h3{
    color: var(--color_dark-olive-black);
    line-break: auto;
    text-wrap: balance;
    hyphens: auto;
}

.kvhGrid1>div.quote:before,
.kvhGrid2>div.quote:after {
    display: none;
}

/*Mehr*/
.kvhGrid1 .widget-title-custom,
.kvhGrid2 .widget-title-custom {
    margin-top: auto;
}

/*the hover*/
.kvhGrid1>div:not(.quote):not(.text) p,
.kvhGrid2>div:not(.quote):not(.text) p {
    position: relative;
    top: -1.5rem;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform: rotateX(0deg);
}
.kvhGrid1>div:not(.quote):not(.text) a .mehr,
.kvhGrid2>div:not(.quote):not(.text) a .mehr {
    color: var(--coror_softer_sage);
    transform: rotateX(90deg);
}
.kvhGrid1>div:not(.quote):not(.text) a,
.kvhGrid2>div:not(.quote):not(.text) a {
    transform: translateY(2rem);
    transition: all .2s ease-in-out;
}
.kvhGrid1>div:not(.quote):not(.text) a .mehr,
.kvhGrid2>div:not(.quote):not(.text) a .mehr {
    opacity:0;
    transition: all .2s ease-in-out;
    transform: rotateX(90deg);
    margin-top: unset;
}
.kvhGrid1>div:not(.quote):not(.text):hover a,
.kvhGrid2>div:not(.quote):not(.text):hover a {
    transform: translateY(0);
}
.kvhGrid1>div:not(.quote):not(.text):hover a .mehr,
.kvhGrid2>div:not(.quote):not(.text):hover a .mehr {
    opacity:1;
    transform: rotateX(0deg);
}
kvhGrid1>div:not(.quote):not(.text) a p,
kvhGrid2>div:not(.quote):not(.text) a p {
    transition: opacity .2s ease-in-out;
    opacity: 1;
    transform: rotateX(0deg);
}

.kvhGrid1>div:not(.quote):not(.text):hover a p,
.kvhGrid1>div:not(.quote):not(.text):hover a p {
    opacity: 0;
    transition: all .2s ease-in-out;
    transform: rotateX(90deg);
}
/*pseudo hover*/
.kvhGrid div:not(.quote):not(.text):hover:before {
    height: 0;
    transition: height .2s ease-in-out;
}
.kvhGrid div:not(.quote):not(.text):hover:after {
    height: 100%;
    transition: height .2s ease-in-out;
    background: transparent linear-gradient(180deg, #3D5F3600 0%, #000000BF 100%) 0% 0% no-repeat padding-box;
}
/*XL: 1366px (Large desktops)*/
/*L: 1024px (Small desktops and tablets)*/
/*M: 768px (Tablets)*/
/*S: 480px (Mobile phones and other small devices)*/
@media screen and (max-width: 1024px) {
        .kvhGrid1, .kvhGrid2 {
            grid-template-areas: unset;
            grid-template-columns: 1fr 1fr;
            background-color: unset;
        }
        .kvhGrid .gridItem_0,
        .kvhGrid .gridItem_1,
        .kvhGrid .gridItem_2,
        .kvhGrid .gridItem_3,
        .kvhGrid .gridItem_4,
        .kvhGrid .gridItem_5,
        .kvhGrid .gridItem_6,
        .kvhGrid .gridItem_7,
        .kvhGrid .gridItem_8,
        .kvhGrid .gridItem_9 {
            grid-area: unset;

        }
        .kvhGrid .gridItem_0 a,
        .kvhGrid .gridItem_1 a,
        .kvhGrid .gridItem_2 a,
        .kvhGrid .gridItem_3 a,
        .kvhGrid .gridItem_4 a,
        .kvhGrid .gridItem_5 a,
        .kvhGrid .gridItem_6 a,
        .kvhGrid .gridItem_7 a,
        .kvhGrid .gridItem_8 a,
        .kvhGrid .gridItem_9 a {
            aspect-ratio: 1 / 1;
        }
        .kvhGrid>div {
            padding: unset;
        }
        .kvhGrid>div:not(.quote) a {
            padding: 1rem;
            height: calc(100% - 2rem);
        }

        /*.kvhGrid1>div:nth-child(odd).quote .widget-title-custom::after,*/
        /*.kvhGrid2>div:nth-child(odd).quote .widget-title-custom::after {*/
        /*    content: "";*/
        /*    position: absolute;*/
        /*    bottom: 16px;*/
        /*    right: 0;*/
        /*    width: 100%;*/
        /*    height: 1.5em;*/
        /*    background: linear-gradient(rgb(255 255 255 / 0%), #cdd6cb);*/
        /*}*/


        .kvhGrid .widget-title-custom {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
}
@media screen and (max-width: 412px) {
    .kvhGrid {
        grid-template-columns: 1fr!important;
    }
}
/*@supports (-webkit-touch-callout: none) {*/
/*    .kvhGrid1 a, .kvhGrid2 a {*/
/*        !*height: -webkit-fill-available;*!*/
/*    }*/
/*}*/
/*@media not all and (min-resolution:.001dpcm) {*/
/*    @supports (-webkit-appearance:none) {*/
/*        .kvhGrid1 a, .kvhGrid2 a {*/
/*            !*height: -webkit-fill-available;*!*/
/*        }*/
/*    }*/
/*}*/
.safari-browser .kvhGrid1 div,
.safari-browser .kvhGrid2 div {
        /*height: -webkit-fill-available;*/
}
.safari-browser {
    .kvhGrid1 .gridItem_5,
    .kvhGrid2 .gridItem_1 {
        /*aspect-ratio: 1 / 1;*/

    }
}
/*aspect-ratio: 1 / 1;*/
.kvhGrid2>div:not(.quote):not(.text):hover p {
    opacity:0;
}