.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-link i {
    margin-bottom: 1px; /* Optional: Adds some space between the icon and the text */
}


/* https://www.w3schools.com/cssref/css3_pr_mediaquery.php
hier ist eine beispiel für display none 
und überschreiben von classen

*/
/* Überschreiben von Klassen für Mobilgeräte UND Tablets */
/* Mobile-Navigation (nur für kleine Geräte) */
@media only screen and (max-width: 767px) {
    .sticky-top {
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100%;
        z-index: 1020;
    }
    
    a.px-2 {
        padding-right: 13px 10px !important;
    }
    
    body {
        padding-bottom: 100px;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Vertikale Navigation für Mobilgeräte */
    .nav-pills {
        flex-direction: row !important;
    }
}

/* iPad/Tablet-Navigation (mittlere Geräte) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sticky-top {
        position: fixed;
        bottom: 0; /* Oben statt unten */
        top: auto;
        width: 100%;
        z-index: 1020;
        background-color: #ECEDEE; /* Hintergrundfarbe */
    }
    
    body {
        padding-bottom: 100px; /* Platz für die obere Navigation */
    }
    
    /* Horizontale Navigation für Tablets */
    .nav-pills {
        flex-direction: row !important;
        justify-content: center;
    }
    
    /* Kleinere Icons und Text für Tablets */
    .nav-link svg {
        width: 20px;
        height: 20px;
    }
    
    .nav-link span {
        font-size: 0.8rem;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
}

/* Desktop-Navigation */
@media only screen and (min-width: 992px) {
    .hide-on-desktop {
        display: none !important;
    }
    
    .sticky-top {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        height: 100%;
    }
    
    body {
        padding-left: 6rem;
        padding-top: 0;
    }
    
    /* Vertikale Navigation für Desktop */
    .nav-pills {
        flex-direction: column !important;
    }
}
/*
styles für page-analyse navbar
*/

.btn-primary-custom {
    background-color: #ffffff;
    border: solid 1px #007bff;
    color:#007bff
}

.btn-primary-custom:hover {
    background-color: #007bff;
    color: white;
}

.custom-active {
    background-color: #BAC8D4; /* Hintergrundfarbe ändern */
    color: black; /* Textfarbe ändern */
    border: solid 1px #BAC8D4; /* Rahmenfarbe ändern */
}