@media (min-width: 992px) { /* ab Bootstrap lg breakpoint = Desktop */
.navbar {
  min-height: 80px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-link img {
  max-height: clamp(50px, 8vw, 65px);
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.logo-link:hover img {
  transform: scale(1.05);
}

.navbar .nav-link {
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.navbar-colored {
  background-color: var(--bs-primary) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.navbar-colored .nav-link {
  color: #fff;
}

/* Messenger Link */
.messenger-link {
    position: relative;
    padding-right: 2rem; /* Platz rechts für Icon & Badge */
}

/* Icon */
/* Icon läuft inline mit dem Text der Nav */
#mail-icon {
    font-size: 1.5em;        /* 1.0em = gleiche Größe wie Text, 1.5em ≈ 2 Stufen größer */
    vertical-align: middle;  /* bleibt auf Zeilenhöhe */
    line-height: 1;          /* verhindert Verrutschen */
}

/* Badge */
#total-unread-badge {
    position: absolute;
    top: 6px;             /* leicht nach oben über das Icon */
    right: -6px;           /* leicht nach rechts über das Icon */

    display: flex;         /* damit Text mittig */
    align-items: center;
    justify-content: center;

    min-width: 1.5rem;     /* Mindestbreite für runden Kreis */
    height: 1.5rem;        /* Höhe = Breite für Kreis */
    padding: 0 0.4rem;     /* bei 2–3 Zeichen breiter */

    background-color: #dc3545; /* Bootstrap Danger */
    color: #fff;
    border-radius: 50%;    /* rund */

    
    line-height: 1.5rem;   /* Text vertikal ausbalanciert */
    white-space: nowrap;
}

.navbar
{
    height: 80px;
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    background: rgba(var(--bs-nav-bg-rgb), 1);
    box-shadow: 0px 2px 15px rgba(255, 255, 255, 0.5);
    
    border-top: var(--bs-nav-border-top-size) solid rgba(var(--bs-nav-border-top-color-rgb), 1) !important;
    border-bottom: var(--bs-nav-border-bottom-size) solid rgba(var(--bs-nav-border-bottom-color-rgb), 1) !important;
    box-shadow:0 .46875rem 2.1875rem rgba(90,97,105,0.1),0 .9375rem 1.40625rem rgba(90,97,105,.1),0 .25rem .53125rem rgba(90,97,105,.12),0 .125rem .1875rem rgba(90,97,105,.1);
    
}

}

/* Logo */
.logo-link img {
    max-height: clamp(50px, 8vw, 65px);
    height: auto;
    transition: transform 0.3s ease;
}

.logo-link:hover img {
    transform: scale(1.05);
}