/*** aus der teaser.css **/

#body.tpl-2022-startseite .teaser .inhalt a h2,  .flex-teaser .inhalt h2 {
    font-size: 1.375rem;
    font-family: 'ApproachKoelnRegular';
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    word-wrap: break-word;
    letter-spacing: 0.001em;
    color: #2d2d2d !important;
    text-align: left !important;
    line-height: 1.5rem;
    margin-top: 0px;
    hyphens: auto;
}

.flex-teaser img {
    width: 100%
}
 
.one, .two, .three, .four, .linkbox_wrapper.two3rd,.linkbox_wrapper.three4th, .flex-fill {
    flex-basis: 100%;
}

/* Hintergrundfarbe Teaser */
main article.flex-teaser img, main body .flex-teaser .inhalt {
    background-color: #FAF7F5!important
}

/* aus elements-ww.css **/
article.flex-teaser div.inhalt a {
padding: .5rem .5rem .5rem 1rem;
display: block;
font-size: calc(var(--font-size) * 1.25);
font-family: var(--font-family-semibold);
border-bottom: none;
line-height: 1.2;
}

.flex-teaser.flex-fill {
    flex-shrink: 1;
    flex-basis: 100%!important;
}


@media only screen and (min-width: 768px) {
/* Service Kacheln mit 50% bekommen ein Extra Padding, um die Darstellung vertikal zu zentrieren, wenn sie neben flex-teasern stehen */
        div.d-flex article:not(.skachel) ~ article.skachel.flex-column.two:not(:only-of-type) .service-kachel {
            padding-top: 9%;
        }

        .flex-teaser {
            width: 100%;
        }

        .two, .three, .four {
            flex-basis: 48.75%;
            flex-grow: 0;
        }

        .linkbox_wrapper.four {
            flex-grow: 1;
        }

        .linkbox_wrapper.two3rd, .linkbox_wrapper.three4th, .linkbox_wrapper.three {
            flex-basis: 100%;
            column-count: 1;
        }


        .linkbox_wrapper.two3rd .linkbox_kachel div.lb_kachel_inner, .linkbox_wrapper.three4th .linkbox_kachel div.lb_kachel_inner {
            column-count: 3;
        }

        /* überflüssig? */ 
        /* .flex-teaser a {
            display: inline-flex;
        } */

        .flex-teaser img {
            width: 100%
        }

        .flex-teaser a span {
            display: none;
        }

        .flex-teaser.flex-fill {
            flex-shrink: 1;
            flex-basis: 49%!important;
        }


}

@media only screen and (max-width: 960px) {
    .linkbox_kachel div.lb_kachel_inner {
        column-count: 1!important;
    }
}

@media only screen and (min-width: 1200px) {
    .two {
        flex-basis: 49.2%;
    }

    .four {
    flex-basis: 24.125%;
    flex-grow: 0;
    }

    .flex-teaser:has(.service-kachel) .four /* .flex-teaser:has(.linkbox_kachel) */  {
        flex-basis: 24.3%;
    }

    .three {
        flex-basis: 32.6%;
        flex-grow: 0;
        }    

    .linkbox_wrapper.four {
        flex-grow: 1;
    }    

    .linkbox_wrapper.two3rd {
        flex-basis: 65%;
    }

    .linkbox_wrapper.two3rd .linkbox_kachel div.lb_kachel_inner {
        column-count: 3;
    }

    .linkbox_wrapper.three4th {
        flex-basis: 74%;
        flex-grow: 1;
    }

    .linkbox_wrapper.three4th .linkbox_kachel div.lb_kachel_inner {
        column-count: 3;
    }
    .linkbox_wrapper.three {
        flex-grow: 1;  
     }

     .linkbox_wrapper.three .linkbox_kachel .lb_kachel_inner {
        column-count: 3;
     }

    .flex-teaser.flex-fill {
        flex-basis: 24%!important;
       
    }
    }

main a:hover:not(.cgalerie) {
        border-bottom: none!important;
    }


main .container .flex-wrap .flex-teaser img.service-icon {
    width: 33%;
    margin: auto;
    display: block;

} 

main .container .flex-wrap .flex-teaser .service-titel {
    /* margin: auto; */
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    /* margin-top: 0.75rem;
    margin-bottom: 0.875rem; */
    line-height: 1.625rem;
    height: 100%;
}

main .container .flex-wrap .flex-teaser .service-kachel, main .container .flex-wrap .flex-teaser .linkbox_kachel {
    background-color: #FAF7F5;
    border-bottom: 2px solid transparent !important;
    padding: 1%;
}


/* keine Link-Icons bei Service Kachel */
main .container .flex-wrap .flex-teaser a:has(.service-kachel):before {
    display: none;
}

main .container  .flex-wrap .linkbox_wrapper.flex-teaser .service-kachel:hover{
    border-bottom: 2px solid transparent !important;
}

main .container .flex-wrap h2.flexheadline {
    flex-basis: 100%;
}

/* damit stretched-link funktioniert, muss das Elternelement eine andere position als static haben */
main article.flex-teaser.skachel {
    position: relative;
}

main article.flex-teaser, main .linkbox_kachel {
    margin-bottom: 1rem!important;
  
}

/* body main article.flex-teaser:has(.service-kachel) {
    background-color: #FAF7F5;
    /* margin-left: 4px!important;
    margin-right: 4px!important; 
} */

body main article.flex-teaser .service-titel {
    background-color: #FAF7F5;
    padding-bottom: 0.875rem;
}

body main article.flex-teaser .service-kachel figure.responsiveImage {
    margin-bottom: 0px;
}

main article.flex-teaser:has(.service-kachel):hover {
    box-shadow: 0px 2px red;
}

body main .flex-teaser .inhalt {
    border-bottom: none;
    box-shadow: 0px 2px red;
    background-color: #FAF7F5!important
}