/* ==========================================================================
   1. NAVIGATION LAYOUT & GEOMETRY
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
}

.grau {
  background: #999999;
}

.nav-body {
  width: 100%;
  height: 74px;            
  overflow: hidden;
}

.navigation-bar {
  display: flex;
  justify-content: center; 
  align-items: flex-start; 
  width: 100%;
  height: 74px;
  padding: 30px 0 0 0;     
  gap: 24px;               
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 8px;                
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 6px;                /* Exactly 6px gap between numbers */
}

/* ==========================================================================
   2. TYPOGRAPHY SYSTEM (Arial, Regular, Letter-Spacing: 0.5px)
   ========================================================================== */
.nav-branding {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 17px;         /* Category labels remain at 17px */
  font-weight: normal;     
  letter-spacing: 0.5px;   
  color: #ffffff;          
  line-height: 1;          
}

.nav-links a {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 13px;         /* TECHNICAL SPECIFICATION: Exactly 13px font size */
  font-weight: normal;     
  letter-spacing: 0.5px;   
  color: #ffffff;          
  text-decoration: none;
  padding: 0;              
  line-height: 1.3;        /* Vertical line height adjustment for small text font alignment */
  display: inline-block;
  transition: color 0.15s ease-in-out;
}

/* Hover state */
.nav-links a:hover, 
.nav-links a:active {
  color: #bf001d;          
}

/* ==========================================================================
   3. RESPONSIVE SCALE ADJUSTMENT
   ========================================================================== */
@media screen and (max-width: 480px) {
  .navigation-bar {
    padding: 24px 0 0 0;   
    gap: 12px;
  }
  .nav-group {
    gap: 4px;
  }
  .nav-branding {
    font-size: 15px;
  }
  .nav-links a {
    font-size: 12px;
  }
}