/* Menü Container */
.menue-background{
  background-color: #001f33; /* Your desired menu background color#001f33; */
  width: 100%;
}

.footer-background {
  background-color: #001f33; /* Your desired footer background color #002632*/
  width: 100%;
}

.menue {
  max-width: 1200px;           /* max Breite */
  margin: 0 auto;              /* zentriert horizontal */
  display: flex;
  justify-content: space-between; /* links, mitte, rechts */
  align-items: flex-start;
  padding: 22px;
  flex-wrap: wrap;             /* Damit bei kleinen Bildschirmen umbrechen */
  gap: 20px;
  font-weight: bold;
  display: flex;
  text-align: left;          /* Text in jedem Kind linksbündig */
  min-width: 200px;
  font-family: 'Roboto', sans-serif;



}

/* Horizontales Menü (Header) */
.menue ul {
  display: flex;
  flex-direction: row;    /* Vertikal anordnen */
  gap: 20px;                  /* Abstand zwischen Menüpunkten */
  list-style: none;          /* Keine Punkte */
  padding: 0;                /* Entferne Standard-Padding der Liste */
  margin: 0;                 /* Entferne Standard-Margin der Liste */
}

.menue li {
    position: center;
  }

/* Links im Menü */
.menue a {
  display: block; /* Mache die Links zu Block-Elementen */
  text-align: left; /* Text im Link linksbündig */
  padding: 2px 0; /* Füge etwas Padding hinzu für bessere Klickbarkeit */
  font-size: 18px;
  transition: color 0.3s ease;
  color: #ffffff;
  text-decoration: none; /* unterstreichen beim Überfahren */
}





.footer {
  max-width: 1200px;           /* max Breite */
  margin: 0 auto;              /* zentriert horizontal */
  display: flex;
  justify-content: space-between; /* links, mitte, rechts */
  align-items: flex-start;
  padding: 22px;
  flex-wrap: wrap;             /* Damit bei kleinen Bildschirmen umbrechen */
  gap: 20px;
  font-weight: bold;
  color: #ffffff;
}

/*Gleiches aussehen Footer elemente unsorted list*/
.footer-nav,
.footer-social,
.footer-law {
  display: flex;
  text-align: left;          /* Text in jedem Kind linksbündig */
  min-width: 200px;
  font-family: 'Roboto', sans-serif;
} 

.footer-nav ul, 
.footer-social ul,
.footer-law ul {
  display: flex;
  flex-direction: column;    /* Vertikal anordnen */
  gap: 3px;                  /* Abstand zwischen Menüpunkten */
  list-style: none;          /* Keine Punkte */
  padding: 0;                /* Entferne Standard-Padding der Liste */
  margin: 0;                 /* Entferne Standard-Margin der Liste */
}

.footer-nav a:Hover,
.footer-social a:Hover,
.footer-law a:Hover,
.menue a:Hover {
  text-decoration: underline; /* unterstreichen beim Überfahren */
  color: #ffcc00;              /* z.B. gelb gelbe Farbe beim Hover */
  display: block;
  text-align: left;
}

.footer-nav li,
.footer-social li,
.footer-law li {
  position: center;
}

.footer-nav a,
.footer-social a,
.footer-law a {
  display: block; /* Mache die Links zu Block-Elementen */
  text-align: left; /* Text im Link linksbündig */
  padding: 2px 0; /* Füge etwas Padding hinzu für bessere Klickbarkeit */
  font-size: 14px;
  transition: color 0.3s ease;
  color: #ffffff;
  text-decoration: none; /* unterstreichen beim Überfahren */


}

/* Sprachumschalter nach rechts */
.menue .lang-switch {
  margin-left: auto;      /* Schiebt den Umschalter ganz nach rechts */ 
  list-style: none;       /* Keine Punkte */
  position: relative;     /* notwendig für Dropdown-Positionierung */
  display: inline-block;
}

/* Container */
.menue .lang-switch {
  margin-left: auto;  /* Rechts ausrichten */
  list-style: none;
  position: relative;
  display: inline-block;
}

/* Button nur Icon, ohne Hintergrund/Border/Text */
.menue .lang-switch .dropbtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Icons */
.menue .lang-switch .dropbtn img,
.menue .lang-switch .dropdown-content img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Dropdown-Inhalt */
.menue .lang-switch .dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background: none; /* kein Hintergrund */
  z-index: 10;
}

/* Links im Dropdown */
.menue .lang-switch .dropdown-content a {
  display: block;
  margin: 2px 0;
}

/* Dropdown beim Hover anzeigen */
.menue .lang-switch:hover .dropdown-content {
  display: block;
}


/* einrück menue leiste wenn unter 400px */
@media (max-width: 400px) {
  .menue ul {
    flex-direction: column; /* Links untereinander */
    align-items: flex-start; /* Optional: linksbündig */
    gap: 10px;               /* Etwas enger */
	}
}
  
.menue .right-controls {
  display: flex;           /* Container wird Flexbox */
  flex-direction: row;     /* Elemente nebeneinander */
  align-items: center;     /* Vertikale Zentrierung */
  gap: 15px;               /* Abstand zwischen Warenkorb & Sprachumschalter */
}

.menue .warenkorb {
  display: flex;
  align-items: center;
}

.menue .warenkorb img {
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: block;
}

.menue .lang-switch {
  list-style: none;
  position: relative;
  display: flex; 
  align-items: center;
}