.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 .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;
}