/* =========================================================
   HEADER
========================================================= */
.header-background {

  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--background-menuecolor);
  transition: background-color 0.3s ease;
  
}
.header {

  background-color: var(--background-menuecolor);

  max-width: var(--website-width);
  width: 100%;

  margin: 0 auto;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: var(--text-color-menue);
  font-family: var(--font-menu);
  font-size: var(--font-size-header);
  gap: 20px;
}


/* =========================================================
   LOGO
========================================================= */

.header .logo {

  max-width: var(--header-logo-width);
  max-height: 100px;

  width: auto;
  height: auto;

  display: block;
}


/* =========================================================
   NAVIGATION
========================================================= */

.header .nav {

  display: flex;
    flex: 1;
  align-items: center;

}


.header .nav ul {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 15px 25px; /* vertikal 15px, horizontal 25px */
  
  list-style: none; /* Aufzählungspunkte entfernen */

  padding: 0;
  margin: 0;
}


.header .nav ul li {

  white-space: nowrap;
}


.header .nav a {

  display: flex;

  align-items: center;

  color: var(--text-color-menue);

  text-decoration: none;

  transition:
    color 0.3s ease;
}


.header .nav a:hover {

  text-decoration: underline;

  color: var(--link-hover);
}





a,
a:link
 {
    color: var(--text-color-menue);
    text-decoration: none;
}

/* =========================================================
   NAV WRAPPER
========================================================= */

.nav-wrapper {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  text-decoration: none;

  color: var(--text-color-menue);

  transition:
    color 0.3s ease;
}


.nav-wrapper:hover .nav-icon {

  background-color: var(--link-hover);
}


.nav-wrapper:hover .nav-icon,
.nav-wrapper:hover .nav-icon-footer,
.themebtn:hover .nav-icon,
.loginbtn:hover .nav-icon,
.userbtn:hover .nav-icon {

  background-color: var(--link-hover);

  transition:
    background-color 0.3s ease;
}


/* =========================================================
   RIGHT CONTROLS
========================================================= */

.header .right-controls {

  display: flex;

  flex-wrap: nowrap;
  flex-direction: row;
  
  
  align-items: center;

  gap: 15px;

  list-style: none;

  padding: 0;

  height: 100%;
}


.header .right-controls li {

  display: flex;

  align-items: center;
  justify-content: center;

  white-space: nowrap;

  height: 100%;
}


/* =========================================================
   BUTTONS
========================================================= */

.right-controls .dropbtn,
.right-controls .loginbtn,
.right-controls .themebtn,
.right-controls .userbtn {

  display: flex;

  align-items: center;
  justify-content: center;

  background: none;
  border: none;

  padding: 0;

  cursor: pointer;

  line-height: 0;
}


/* =========================================================
   BUTTON SIZES
========================================================= */

.right-controls .dropbtn {

  width: var(--flag-size);
  height: var(--flag-size);
}


.right-controls .loginbtn {

  width: var(--login-btn-size);
  height: var(--login-btn-size);
}


.right-controls .themebtn {

  width: var(--theme-switcher-btn-size);
  height: var(--theme-switcher-btn-size);
}


.right-controls .userbtn {

  width: var(--user-btn-size);
  height: var(--user-btn-size);
}


/* =========================================================
   ICON SIZES
========================================================= */

.header .right-controls .themebtn .nav-icon {

  width: var(--theme-switcher-btn-size);
  height: var(--theme-switcher-btn-size);
}


.header .right-controls .loginbtn .nav-icon {

  width: var(--login-btn-size);
  height: var(--login-btn-size);
}


.header .right-controls .userbtn .nav-icon {

  width: var(--user-btn-size);
  height: var(--user-btn-size);
}


/* =========================================================
   FLAG IMAGE
========================================================= */

.header .right-controls .dropbtn img {

  width: var(--flag-size);
  height: var(--flag-size);

  display: block;

  object-fit: contain;

  margin: 0;
}


/* =========================================================
   DROPDOWN
========================================================= */

.header .dropdown {

  position: relative;

  display: inline-block;
}


.header .dropdown-content {

  display: none;

  position: absolute;

  top: 100%;
  right: 0;

  background-color: transparent;

  border: none;

  box-shadow: none;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding-top: 10px;

  z-index: 100;
}


.header .lang-switch:hover .dropdown-content {

  display: flex;
}


.header .dropdown-content a {

  display: flex;

  justify-content: center;
}


.header .dropdown-content a,
.header .dropdown-content a img {

  width: var(--flag-size);
  height: var(--flag-size);

  display: block;

  object-fit: contain;
}

@media (max-width: 736px) {

  .header {

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  gap: 15px;
  
  
  }


  /* =====================================================
     NAVIGATION
  ===================================================== */

  .header .nav {

    order: 2;

    width: 100%;

    display: flex;

    justify-content: center;
  }


.header .nav ul {

  justify-content: flex-start;

  gap: 12px 18px;

  width: 100%;
}


  .header .nav ul li {

    font-size: 16px;
  }


  /* =====================================================
     RIGHT CONTROLS
  ===================================================== */

  .header .right-controls {

    order: 3;

    width: 100%;

  justify-content: flex-start;

    gap: 12px;
  }
}



/* ==========================================
   DROPDOWN NAVIGATION
========================================== */

.dropdown-nav {
    position: relative;
}

.dropdown-nav > .nav-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.dropdown-menu {

    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    min-width: 220px;


    padding: 8px 0;

    list-style: none;

    background: var(--background-menuecolor);

    border: 1px solid var(--border-color);

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 9999;
}

.dropdown-nav:hover .dropdown-menu {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.dropdown-nav:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {

    display: flex;
    align-items: center;

    padding: 12px 16px;

    color: var(--text-color-menue);

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        padding-left .2s ease;
}

.dropdown-menu li a:hover {

    background-color: rgba(255,255,255,.08);

    padding-left: 22px;
}