/* ####################### Navigation alle Seiten  #################### */   

.navbar {
    max-width: 1920px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: var(--nav-hg);
   border-bottom: thin solid var(--schrift-bl);
   padding: 5px;
   margin-top: -4px;
   color: var(--schrift-w);
   position: sticky; /* Bleibt kleben, wenn Position erreicht wird */
   top: 0; /* Klebt am oberen Rand */
   z-index: 99; /* Über anderen Inhalten */
}
.navbar-brand {
   display: flex;
   align-items: center;
}
.navbar-links {
   display: flex;
   margin-right: 15px;
   gap: 20px;
}
.navbar-links a {
   color: var(--schrift-w);
   text-decoration: none;
}

.navbar-links p:hover {
   color: var(--schrift-bl);
   /* Ändert die Farbe bei Mausberührung (Hover) */
}

/* Standard-Linkstil */
a {
  text-decoration: none;
  color: var(--schrift-w);
}

/* Hover */
a:hover {
  color:var(--schrift-bl);
}


.hamburger {
   display: none;
   cursor: pointer;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 21px;
}
.hamburger .bar {
   height: 3px;
   width: 100%;
   background-color:  var(--schrift-w);
   border-radius: 10px;
}

/* Responsive Design für Geräte unter 860px */
@media (max-width: 860px) {
   .navbar {
       z-index: 99;
       padding: 1rem;
   }
   
   .hamburger {
       display: flex;
   }
   
   .navbar-links {
       position: absolute;
       top: 60px;
       left: 0;
       right: 0;
       background-color: var( --nav-hg);
       flex-direction: column;
       width: 100%;
       text-align: center;
       gap: 0;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease-out;
   }
   
   .navbar-links.active {
       max-height: 650px; /* Anpassen je nach Anzahl der Menüpunkte */
   }
   
   .navbar-links a {
       display: block;
       padding: 1rem;   
   }
}


#aktuell{
   color: var(--schrift-bl);
}

.wuerfel {
  position: relative;            /* Für absolute Positionierung des Markers */
  display: inline-flex;          /* Flexbox für vertikale Zentrierung */
  align-items: center;
  padding-left: 20px;            /* Platz für den Marker links */
  color: var(--schrift-bl); /* Standardfarbe */
  text-decoration: none;         /* Falls es ein Link ist */
  transition: color 0.3s ease;   /* Sanfter Farbwechsel */
}

/* Marker vor dem Text */
.wuerfel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  background-color: var(--schrift-bl);
  transition: width 0.3s ease, height 0.3s ease;
}

/* Hover: Marker + Textfarbe ändern */
.wuerfel:hover {
  color: var(--schrift-bl);
}
.wuerfel:hover::before {
  width: 10px;
  height: 10px;
}

/* Aktiv: Marker + Textfarbe dauerhaft */
.wuerfel.active {
  color: var(--schrift-bl);
}
.wuerfel.active::before {
  width: 10px;
  height: 10px;
}