.navbar {
    /* Fixiert die Navbar am oberen Rand */
    position: fixed;
    top: 0;
    /* Stellt sicher, dass sie über die gesamte Breite geht */
    width: 100%;
    /* Hält sie über anderen Elementen, falls notwendig */
    z-index: 1030;
    /* Optional: dezente Trennlinie */
    border-bottom: var(--navbar-border);
    /* Setzt die Höhe der Navbar */
    height: var(--navbar-height);
}

.navbar-brand,
.navbar-brand-small {
    top: 0px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navbar-brand img {
    /*height: 120px;    Für überstehendes Logo von Früchte Frick
    margin-top: 40px;*/
    height: 50px;
}

.navbar-brand-small img {
    height: 40px;
}

/* Sorgt mit .content dafür, dass die Fußzeile immer unten ist, aber bei größeren Seiten erst nach scrollen sichtbar wird */
html,
body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    /* Stellt sicher, dass der Inhalt den Hauptbereich ausfüllt */
    padding-top: var(--navbar-height);
}

.footer {
    padding: 10px 0;
    text-align: center;
    border-top: var(--navbar-border);
}

.footer a {
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}

.offcanvas {
    margin-top: var(--navbar-height);
    /* Fußzeile ist nicht immer sichtbar, also nicht freilassen */
    /*padding-bottom: 45px;*/
}

#offcanvasMenu ul.list-group:not(:first-child)>li.list-group-item,
#offcanvasMenu ul.list-group:not(:first-child)

/* sonst sieht man die Abrundung während des collapse-Vorgangs wieder */
    {
    /* Bei verschachtelten Menüs werden die Ecken an den "falschen" Stellen abgerundet. Also erstmal entfernen und in JS korrekt abrunden */
    border-radius: 0;
}

#offcanvasMenu ul.list-group>li.list-group-item a {
    /* Damit das Icon rechts ist */
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* Links nicht als solche stylen */
    text-decoration: none;
    color: inherit;
}

#offcanvasMenu>.offcanvas-body>ul.list-group li.list-group-item {
    cursor: pointer;
    background-color: var(--bs-custom-color-offcanvas-menu-list-group-item);
}

#offcanvasMenu>.offcanvas-body>ul.list-group li.list-group-item:hover {
    opacity: 0.8;
}

.dropdown-menu-custom-color-header-dropdown-item.dropdown-menu .dropdown-item:hover {
    /* Kundenspezifische Farbe */
    background-color: var(--bs-custom-color-header-dropdown-item);
    /*color: white;*/
}

.search-line {
    margin-top: 10px;
}

#searchInputGroup {
    /* Standardbreite für große Bildschirme */
    max-width: 300px;
}

/* Verkleinere das Suchfeld bei kleineren Viewports */
@media (max-width: 1024px) {
    #searchInputGroup {
        max-width: 200px;
    }
}

@media (max-width: 900px) {
    #searchInputGroup {
        max-width: 150px;
    }
}

@media (max-width: 820px) {
    #searchInputGroup {
        max-width: 100px;
    }
}

/* Für kleine Bildschirme (nur das Such-Icon als Dropdown anzeigen) */
@media (max-width: 700px) {
    #searchInputGroup {
        display: none;
    }

    /*.search-dropdown {
        display: inline-block !important;
    }*/

    /* Überschreibe die Variable für kleinere Bildschirme */
    body.logged-in {
        --navbar-height: calc(var(--navbar-height-orig) + 50px);
        /* Größere Navbar für Suchleiste */
    }

    .search-line {
        display: inline-block !important;
    }
}

/* Für sehr kleine Bildschirme (Alle Icons in ein Menü packen) */
/* @media (max-width: 620px) { */
@media (max-width: 480px) {
    .navbar-icons {
        /* Versteckt die einzelnen Icons */
        display: none !important;
    }

    .compact-menu {
        /* Zeigt das kompakte Dropdown */
        display: inline-block !important;
    }
}

/* Für sehr kleine Bildschirme (Logo verkleinern) */
@media (max-width: 400px) {
    .navbar-brand {
        /* Standard-Logo verstecken */
        display: none !important;
    }

    .navbar-brand-small {
        /* Kleineres Logo einblenden */
        display: inline-block !important;
        top: 5px;
    }

    /* Überschreibe die Variable für kleinere Bildschirme */
    body {
        --navbar-height: calc(var(--navbar-height-orig) - 10px);
        /* Kleinere Navbar wegen kleinerem Logo */
    }

    /* Überschreibe die Variable für kleinere Bildschirme */
    body.logged-in {
        --navbar-height: calc(var(--navbar-height-orig) + 40px);
        /* Größere Navbar für Suchleiste, aber nicht ganz so viel größer wegen kleinerem Logo */
    }

    .search-line {
        margin-top: 5px;
    }
}

/* navbar-toggler lässt sich nicht richtig einfärben. Also eigene Klasse, die das optisch angleicht */
.navbar-toggler-custom-color>i {
    /* Exakte Breite setzen */
    width: 30px;
    /* Exakte Höhe setzen */
    height: 30px;
    /* Icon an sich vergrößern */
    font-size: 2em;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-badge-0 {
    display: none;
}

.cart-badge-1 {
    top: 0 !important;
    left: calc(100% - 0px);
}

.cart-badge-2 {
    top: 0 !important;
    left: calc(100% - 4px);
}

.cart-badge-3 {
    top: 0 !important;
    left: calc(100% - 8px);
}

@keyframes badgeUpdate {
    0% {
        box-shadow: 0 0 5px 2px #dc3545;
        border-color: gold;
    }

    50% {
        box-shadow: 0 0 25px 10px #ff6666;
        border-color: orangered;
    }

    100% {
        box-shadow: 0 0 5px 2px #dc3545;
        border-color: gold;
    }
}

.badge-animate {
    animation: badgeUpdate 1.2s ease-in-out;
}

.modal-md {
    max-width: 450px;
}