header {
  position: absolute;
  background: transparent;
  width: 100%;
  z-index: 2;

  height: $header-height;

  padding: 0 2vw;

  .title-bar {
    max-height: 100%;
    padding: 0;
    justify-content: space-between;

    @include breakpoint(small down) {
      &-right {
        max-width: 30vw;
      }
    }

    .toggle-offcanvas {
      float: right;
      width: 45px;
      height: 70px;
      position: relative;
      z-index: 44;

      display: block;
      cursor: pointer;

      min-width: 40px;
      padding-top: $global-padding;
      margin-left: $global-padding/2;

      @include breakpoint(small down) {
        right: 15px;
        top: 40px;
      }

      #toggler {
        &, &:before, &:after {
          height: 5px;
          width: 100%;
          //border-radius: 2px;
          display: block;
          background-color: $brand-primary;
          content: '';
          position: absolute;
          transition: all 200ms ease-in;
        }

        & {
          top: 30%;
        }

        &:before {
          top: -12px;
        }

        &:after {
          top: 12px;
        }
      }

      #toggle-text {
        color: $brand-primary;
        padding-top: $global-padding;
        display: block;
        bottom: 0;

        text-align: center;

        font-size: $small-font-size*1.25;

        @include breakpoint(small down) {
          display: none;
        }
      }
    }

    .title-bar-left {
      padding-top: $global-padding;

      .language-menu {
        display: none; // nach Entwurf 2
        font-size: $small-font-size;

        a.active {
          font-weight: bold;
        }
      }

      .language-menu > * {
        color: $brand-white;
      }
    }

    .title-bar-center {
      z-index: 44;

      .logo {
        padding: $global-padding*2 0;

        #logo-white {
          display: block;
        }
      }

      @media only screen and (max-width: 328px) {
        .logo {
          padding-top: 35px;
          padding-bottom: 0;
        }
      }
    }
  }

  .secondary-title-bar {
    .toggle-offcanvas:hover {
      #toggler {
        top: 18px;

        &:before {
          top: -16px;
        }

        &:after {
          top: 15px;
        }
      }
    }
  }

  .title-bar.menu-title-bar {
    .toggle-offcanvas:hover {
      #toggler {
        transform: rotate(-180deg);

        &:after {
          opacity: 0;
          top: 14px;
        }
      }
    }
  }

  .menu-title-bar {
    padding: 0 2vw;
    padding-left: calc(2vw + 17px); // Scrollbalken-Fix, um Springen des Language-Menüs zu vermeiden
    z-index: 15;

    @include breakpoint(small down) {
      &-right {
        max-width: 30vw;
      }
    }

    @media only screen and (max-width: 328px) {
      margin-top: -$global-padding;
    }

    .toggle-offcanvas {
      #toggler {
        &, &:before, &:after {
          display: block;
          background-color: $brand-primary;
          content: '';
          position: absolute;
          top: 16px;
        }

        & {
          transform: rotate(-45deg);
        }

        &:before {
          display: none;
        }

        &:after {
          transform: rotate(450deg) translateX(-14px);
        }

      }

      #toggle-text {
        color: $brand-primary;
      }
    }

    .title-bar-left {
      z-index: 25;

      .title-bar-title {
        display: none;
      }

      .language-menu, .language-menu > * {
        color: $brand-primary;
      }
    }

    .title-bar-center {
      padding-right: $global-padding/2;
      z-index: 25;

      @include breakpoint(small down) {
        padding-right: 0;
      }
    }
  }

  a.logo {
    display: block;

    width: 300px;
    height: 60px;

    img {
      width: 300px;
      height: 60px;
    }

    @media only screen and (max-width: 328px) {
      width: 200px;
      height: 40px;

      img {
        width: 200px;
        height: 40px;
      }
    }
  }

  .toggle-offcanvas {
    top: $global-padding;

    span {
      border-radius: 0px;
    }
  }
}