.card-style-white{
    margin-bottom: 2rem;
}
.projektkacheln .card {
    margin-bottom: 1rem;
    padding:.5rem;
    height: 100%;
}
.projektkacheln .card-style-grunge .card {
    padding:1rem 1.25rem;
}


.hide-parts-of-card-content-on-mobile .link_footer {
    text-align: end;
}
.hide-parts-of-card-content-on-mobile .content_wrapper,
.hide-parts-of-card-content-on-mobile .link_footer .link_text_wrapper {
    display: none;
}
@media (min-width: 768px) {

    .hide-parts-of-card-content-on-mobile .link_footer {
        text-align: start;
    }
    .hide-parts-of-card-content-on-mobile .content_wrapper,
    .hide-parts-of-card-content-on-mobile .link_footer .link_text_wrapper {
        display: inline;
    }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .projektkacheln .card {
        margin-bottom: 1rem;
        padding:.5rem;
    }
    .projektkacheln .card-style-grunge .card {
        padding:1rem 1.25rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .projektkacheln .card {
        margin-bottom: 1rem;
        padding:.75rem;
    }
    .projektkacheln .card-style-grunge .card {
        padding:1rem 1.5rem;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .projektkacheln .card {
        margin-bottom: 1.5rem;
        padding:1rem;
    }
    .projektkacheln .card-style-grunge .card {
        padding:1.25rem 2rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

    .projektkacheln .card {
        margin-bottom: 2rem;
        padding:1rem;
    }
    .projektkacheln .card-style-grunge .card {
        padding:1.5rem 2.5rem;
    }
}

.projektkacheln h1,
.projektkacheln h2,
.projektkacheln h3,
.projektkacheln h4,
.projektkacheln h5,
.projektkacheln h6 { margin: 0 !important;}

.projektkacheln a {
    text-decoration: none !important;
}


    /* --- Card Bild ---------------------------------------------------------------------------------------------------- */

.projektkacheln .icon-wrapper img {
    max-width: 41px;
    max-height: 41px;
}

/* --- Card Icon ---------------------------------------------------------------------------------------------------- */

.projektkacheln .img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.projektkacheln .image-container img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Card Style (Farben) ------------------------------------------------------------------------------------------ */

/* white */

.projektkacheln .card-style-white .card {
    background-color: var(--bs-white);
    border-radius: 0;
}
.projektkacheln .card-style-white .link_footer  {
    margin-top: 1rem;
}
.projektkacheln .card-style-white .link_footer img  {
    max-width: 24px;
    margin-top: -2px;
}

.projektkacheln .card-style-white .icon-wrapper img  { color: var(--dark); fill: var(--dark); margin-bottom: 1rem; }

.projektkacheln .card-style-white h1,
.projektkacheln .card-style-white h2,
.projektkacheln .card-style-white h3,
.projektkacheln .card-style-white h4,
.projektkacheln .card-style-white h5,
.projektkacheln .card-style-white h6,
.projektkacheln .card-style-white p,
.projektkacheln .card-style-white li,
.projektkacheln .card-style-white a,
.projektkacheln .card-style-white .card-body { color: var(--dark); }

/* white:hover */

.projektkacheln .card-style-white a:hover .card {
    background-color: #11CB9C;
}

.projektkacheln .card-style-white a:hover .card .icon-wrapper img  {
    filter: brightness(100);
}
.projektkacheln .card-style-white a:hover .card .link_footer img  {
    filter: brightness(100);
}

.projektkacheln .card-style-white a:hover .card h1,
.projektkacheln .card-style-white a:hover .card h2,
.projektkacheln .card-style-white a:hover .card h3,
.projektkacheln .card-style-white a:hover .card h4,
.projektkacheln .card-style-white a:hover .card h5,
.projektkacheln .card-style-white a:hover .card h6,
.projektkacheln .card-style-white a:hover .card p,
.projektkacheln .card-style-white a:hover .card li,
.projektkacheln .card-style-white a:hover .card a,
.projektkacheln .card-style-white a:hover .card .card-body { color: var(--bs-white); }

/* primary */

.projektkacheln .card-style-primary .card {
    background-color: #11CB9C;
    border-radius: 0;
}

.projektkacheln .card-style-primary .icon-wrapper img  {
    margin-bottom: 1rem;
    filter: brightness(100);
}
.projektkacheln .card-style-primary .link_footer  {
    margin-top: 1rem;
}
.projektkacheln .card-style-primary .link_footer img  {
    max-width: 24px;
    margin-top: -2px;
    filter: brightness(100);
}

.projektkacheln .card-style-primary h1,
.projektkacheln .card-style-primary h2,
.projektkacheln .card-style-primary h3,
.projektkacheln .card-style-primary h4,
.projektkacheln .card-style-primary h5,
.projektkacheln .card-style-primary h6,
.projektkacheln .card-style-primary p,
.projektkacheln .card-style-primary li,
.projektkacheln .card-style-primary a,
.projektkacheln .card-style-primary .card-body { color: var(--bs-white); }

/* grunge */

.projektkacheln .card-style-grunge .card {
    background: url("../Images/grunge_bg.png") no-repeat center center;
    /*background: url("../Images/grunge_bg.svg") no-repeat center center;*/
    background-size: 100% 100%;
    border: 0;
}

.projektkacheln .card-style-grunge .icon-wrapper img  {
    margin-bottom: 1rem;
}
.projektkacheln .card-style-grunge .link_footer  {
    margin-top: 1rem;
}
.projektkacheln .card-style-grunge .link_footer img  {
    max-width: 24px;
    margin-top: -2px;
}

.projektkacheln .card-style-grunge h1,
.projektkacheln .card-style-grunge h2,
.projektkacheln .card-style-grunge h3,
.projektkacheln .card-style-grunge h4,
.projektkacheln .card-style-grunge h5,
.projektkacheln .card-style-grunge h6,
.projektkacheln .card-style-grunge p,
.projektkacheln .card-style-grunge li,
.projektkacheln .card-style-grunge a,
.projektkacheln .card-style-grunge .card-body { color: var(--bs-white); }