/* Basis-Design der Navigation */
.navi-container {
  position: relative;
}

.navi {
  display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

}

.navi a, .dropbtn {
  background: var(--mainnavbutton-bg1);
	color: var(--mainnavbutton-txt1);
	font-size: 1.2rem;
	font-weight: 400;
	font-style: normal;
	padding: 16px 12px;
	text-align: center;
	text-decoration: none;
	margin: 0;
	transition: all 0.2s ease-in;
}

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

.navi a.active, .dropbtn.active {
  background: var(--mainnavbutton-bg2);
	color: var(--mainnavbutton-txt3);
}

.dropdown {
  position: relative;
}

.dropdown-content {
  background-color: rgba(255,255,255,1);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	display: none;
	min-width: 200px;
	position: absolute;
	z-index: 1;
}

.dropdown-content a {
  border-bottom: 1px solid var(--mainnavbutton-txt1);
	color: var(--mainnavbutton-txt1);
	display: block;
	padding: 12px 16px;
	text-align: left;
	text-decoration: none;
	font-weight: 500;
	font-size: 1rem;
}

.dropdown-content a:hover {
  background: var(--middlegray);
	color: var(--mainnavbutton-txt1);
}

.dropdown-content a.active,
.dropdown-content a.active:hover {
  background: var(--middlegray);
	color: var(--mainnavbutton-txt1);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Hamburger-Menü */
.nav-icon {
  display: none;
  font-size: 30px;
  color: var(--mainnavbutton-txt1);
	padding: 16px 12px;
  cursor: pointer;
	margin: 0;
}

/* Off-Canvas Menü */
.nav-toggle {
  display: none;
}

@media (max-width: 1270px) {
  .navi {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 270px;
    background-color: var(--mainnav-bg);
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    transition: left 0.3s;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		overflow-y: auto;
  }

  .navi a, .dropbtn {
    font-size: 1.2rem;
		text-align: left;
		width: 100%;
		border-bottom: 1px solid var(--mainnavbutton-bg2);;
  }

  .dropdown-content {
    position: relative;
		box-shadow: none;
  }

	.dropdown-content a {
	font-size: 1rem;
	}

  .nav-toggle:checked + .nav-icon + .navi {
    left: 0;
  }

  .nav-icon {
    display: block;
    /*position: absolute;
    top: 0;
    right: 0;
    padding: 15px;*/
  }
}