#outer-menu {
    width: 100vw;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: var(--menu-height);
    padding: 0 5vw;

    box-shadow: rgba(50,50,93,0.15) 0 8px 14px -5px,rgba(0,0,0,0) 0 4px 8px -8px;
    transition: all 250ms ease;
}

nav.menu {
	width: 100%;

  display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--menu-height);

	background: var(--background);

	--background: var(--menu-background, #fff);
	--color: var(--menu-color, #000);
	--sub-color: var(--menu-sub-color, #000);
	--padding: 0.6rem 2rem;
	--dark-background: #e2a300;
  --mobile-breakpoint: 1415px;

  --mobile-link-padding: 0.6rem 0;
  --mobile-menu-level-padding: 0 0 0 2rem;
  --mobile-breakpoint: 1415px;
  --mobile-menu-background: #f0f0f0;
  --mobile-expand-button-size: 32px;

	& .logo {
		height: auto;
		width: 20%;
    min-width: 200px;
		margin-top: 10px;
	}

	&.dark {
		background: var(--background);
		box-shadow: rgba(50,50,93,0.15) 0 8px 14px -5px, rgba(0,0,0,0) 0 4px 8px -8px;
	}

	& div[file_id] {
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
		height: 100%;
		text-align:left;
		font-size: 18px;
		& a {
			color: var(--color);
			text-decoration: none;
			padding: var(--padding);
			display: block;
			font-weight: 600;
		}
		& a:hover {
			color: var(--primary);
		}
	}

	& div.active > a {
		color: var(--primary);
	}

	& .inner {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100%;
		margin-right: 30px;
		text-align: center;

		& .chevron {
			cursor: pointer;
			display: none;
		}

		& > div { /* Erste Ebene */
			& > .chevron {
				background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+) no-repeat center;
        display: none;
			}
		}
		& .chevron {
			background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQiPjxwYXRoIGQ9Im05IDE4IDYtNi02LTYiLz48L3N2Zz4=) no-repeat center;
			display: block;
			min-width: 24px;
			min-height: 24px;
		}

		& .sub {
			display: none;
		}
	}
}

@media (min-width: 1415px) {
	nav.menu {
    #menu {
      height: 100%;
    }

		& div[file_id] {
			& .sub {
				position: absolute;
				bottom: 5px;
				transform: translateX(100%);
				right: 0;
				background: var(--background);
        max-height: calc(100vh - var(--menu-height));

				& a {
					color: var(--sub-color);
					padding: 10px 25px;
					width: max-content;
				}

				& a:hover {
					color: var(--primary)
				}
        & div[file_id] {
            justify-content: space-between;
            & .chevron {
                margin-right: 1rem;
            }
        }
			}
			&:focus-within, &:hover, &.open {
				& > .sub {
					display: block;
				}
			}
		}
		& .inner {
			& > div > .sub {
				/* Erste ebene */
				transform: translateY(100%);
			}
			& .sub .sub {
				bottom: 100%;
				transform: translateX(100%) translateY(100%);
                overflow-y: auto;
			}
		}
		& .hamburger {
			display: none;
		}
	}
}

/* Mobile */
@media (max-width: 1415px) {
  nav.menu {
    &:not(.active) #menu {
        pointer-events: none;
        transform: scaleY(0);
        opacity: 0;
    }

    &.active .hamburger {
      position: relative;
      & div {
        border: 2px solid var(--sub-color);
        position: absolute;
        top: 50%;
        transform: rotate(45deg);
        &:last-child {
          transform: rotate(-45deg)
        }
      }

      & div: nth-child(2) {
        display:none
      }
    }

    & .hamburger {
      width: 32px;
      height: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 3;
      & div {
        border: 2px solid var(--color);
        width: 100%;
        height: 1px;
        transition: all 100ms ease-in-out;
      }
    }

    #menu {
      position: fixed;
      top: var(--menu-height);
      left: 0;
      z-index: 1000;

      transition: transform 250ms ease-in-out, opacity 300ms ease-in;
      transform: scaleY(1);
      transform-origin: top;
      opacity: 1;

      background: var(--mobile-menu-background);
      width: 100%;

      .inner {
        padding: 0 var(--content);
        display: flex;
        max-height: calc(100vh - var(--menu-height));
        overflow-y: auto;
        padding-bottom: 2vh;
        max-height: 50vh;
      }

      .inner > [file_id] > .chevron {
        --base-rotation: -90deg;
        transform: rotate(var(--base-rotation));
      }

      .chevron {
        align-self: center;
        width: var(--mobile-expand-button-size);
        height: var(--mobile-expand-button-size);
        display: block;
      }

      .inner .open > .chevron {
        transform: rotate(calc(var(--base-rotation, 0deg) + 90deg));
      }

      .inner, .sub, [file_id] {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        flex-basis: 100%;
      }

      [file_id], a {
        width: calc(100% - var(--mobile-expand-button-size));
      }

      [file_id] a {
        padding: var(--mobile-link-padding);
      }

      .open > .sub {
        display: flex;
        flex-basis: 100%;
        padding: var(--mobile-menu-level-padding);
      }
    }
  }
}