/* ----------------------------
   Basis Styles für Navigation
----------------------------- */

/* Container */
.topnav {
  background-color: none;
  overflow: hidden;
  padding-left: 2rem;
}

/* Links in der Navigation */
.topnav a,
.dropdown .dropbtn {
  background: var(--mainnavbutton-bg1);
  color: var(--mainnavbutton-txt1);
  font-size: var(--mainnavfontsize);
  display: block;
  float: left;
  font-weight: 400;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

/* Dropdown Button */
.dropdown .dropbtn {
  display: inherit;
  float: none;
  outline: none;
}

/* Icon für Mobile Navigation (wird per Media Query sichtbar) */
.topnav .icon {
  display: none;
}

/* Dropdown Container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown Inhalt */
.dropdown-content {
  background-color: var(--subnavbutton-content-bg);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  display: none;
  min-width: 160px;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  border-bottom: 1px solid var(--subnavbutton-border);
  background-color: var(--subnavbutton-bg1);
  color: var(--subnavbutton-txt1);
  font-size: var(--subnavfontsize);
  display: block;
  float: none;
  padding: 12px 16px;
  text-align: left;
  text-decoration: none;
}

/* ----------------------------
   States
----------------------------- */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background: var(--mainnavbutton-bg2);
  color: var(--mainnavbutton-txt2);
}

.topnav a.active {
  background: var(--mainnavbutton-bg3);
  color: var(--mainnavbutton-txt3);
}

.dropdown-content a:hover {
  background-color: var(--subnavbutton-bg2);
  color: var(--subnavbutton-txt2);
}

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

/* ----------------------------
   Responsive Styles
----------------------------- */

/* bis 1200px */
@media screen and (max-width: 1200px), (max-device-width: 1200px) {
  .topnav {
    padding-left: 0rem;
  }
}

/* bis 830px */
@media screen and (max-width: 1120px), (max-device-width: 1120px) {
  .topnav {
    background-color: var(--mainnav-bg);
    width: 100%;
  }

  /* Standard-Links verstecken, nur Icon zeigen */
  .topnav a,
  .dropdown .dropbtn {
    display: none;
    background: none;
  }

  .topnav a.icon {
    color: var(--navicon);
    background: none;
    display: block;
    float: right;
    font-size: 1.25rem;
  }

  .topnav a.icon:hover {
    color: var(--navicon2);
  }

  /* Responsive Navigation */
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
  }

  .topnav.responsive a {
    display: block;
    float: none;
    text-align: left;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
    width: 100%;
  }
}