.nav-leistungen {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Optionaler Abstand zwischen den Kacheln */
    justify-content: center; /* Zentriert die Kacheln */
}

.nav-leistungen .nav_entry {
    width: 250px;
    max-width:250px;
    height: 250px;
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Inhalts */
    justify-content: center; /* Horizontale Zentrierung des Inhalts */
    background-color: #f0f0f0; /* Hintergrundfarbe der Kachel */
    box-sizing: border-box;
    border-radius: 30px;
}
.nav-leistungen .nav_entry:hover{
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
}
/* Ab 1200px: 6 Kacheln pro Reihe */
@media (min-width: 1200px) {
    .nav-leistungen .nav_entry {
        flex-basis: calc(100% / 6 - 10px); /* 6 Kacheln pro Reihe */
    }
}

/* Ab 992px: 4 Kacheln pro Reihe */
@media (max-width: 1199px) and (min-width: 992px) {
    .nav-leistungen .nav_entry {
        flex-basis: calc(100% / 4 - 10px); /* 4 Kacheln pro Reihe */
    }
}

/* Ab 768px: 3 Kacheln pro Reihe */
@media (max-width: 991px) and (min-width: 768px) {
    .nav-leistungen .nav_entry {
        flex-basis: calc(100% / 3 - 10px); /* 3 Kacheln pro Reihe */
    }
}

/* Ab 576px: 2 Kacheln pro Reihe */
@media (max-width: 767px) and (min-width: 576px) {
    .nav-leistungen .nav_entry {
        flex-basis: calc(100% / 2 - 10px); /* 2 Kacheln pro Reihe */
    }
}

/* Unter 576px: 1 Kachel pro Reihe */
@media (max-width: 575px) {
    .nav-leistungen .nav_entry {
        flex-basis: 100%; /* 1 Kachel pro Reihe */
    }
}
.nav-leistungen .nav_entry .in .icon{
    display:block;
}
.nav-leistungen .nav_entry .in .icon img{
    width:60px;
    height:60px;
}
.nav-leistungen .nav_entry .in .text {
    text-align: center;
    text-decoration: none;
    color: var(--primaryColor);
    display:inline-block;
    padding-top:10px;
    font-weight:bold;
    font-size: 20px;
    text-transform: uppercase;
}
.nav-leistungen .nav_entry .in .text::after {
    content: "\f063"; /* Font Awesome Icon für einen Pfeil nach unten */
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300; /* für Solid Icons in Font Awesome 5 */
    display: block;
    text-align: center;
    margin-top: 5px; /* Abstand vom Text nach unten */
    font-size: 20px; /* Größe des Icons, anpassbar */
    color: var(--primaryColor);
}
/* colors */
.nav-leistungen .nav_entry.color01 {
    background-color: #E8C3C2; /* Beispiel für eine rosa Kachel */
}
.nav-leistungen .nav_entry.color02 {
    background-color: #F5F0F8; /* Beispiel für eine helle lila Kachel */
}
.nav-leistungen .nav_entry.color03 {
    background-color: #D1D1CD; /* Beispiel für eine graue Kachel */
}
.nav-leistungen .nav_entry.color04 {
    background-color: #EAE2F0; /* Beispiel für eine andere helle lila Kachel */
}
.nav-leistungen .nav_entry.color05 {
    background-color: #B9CCC3; /* Beispiel für eine grüne Kachel */
}
.nav-leistungen .nav_entry.color06 {
    background-color: #E8E8E6; /* Beispiel für eine blassrosa Kachel */
}
.nav-leistungen .nav_entry.color07 {
    background-color: #B9CCC3; /* Beispiel für eine weitere graue Kachel */
}
.nav-leistungen .nav_entry.color08 {
    background-color: #CCD1D6; /* Beispiel für eine lila-graue Kachel */
}
.nav-leistungen .nav_entry.color09 {
    background-color:#EBECEF; /* Beispiel für eine helle graue Kachel */
}
.nav-leistungen .nav_entry.color10 {
    background-color: #F4E1E1; /* Beispiel für eine cremefarbene Kachel */
}
.nav-leistungen .nav_entry.color11 {
    background-color: #E6E2E4; /* Beispiel für eine cremefarbene Kachel */
}