header.nav,
.wrapper--pageHeader {
  position: fixed;
  z-index: 999999;
  width: 100%;

  transition: transform 0.5s;
}

/* ///////////////////////////////////////////////////////// */
/* // Transform page-header (nav) when scrolling downward // */
/* ///////////////////////////////////////////////////////// */

header.nav.scrolled:not(.active),
.wrapper--pageHeader.scrolled:not(.active) {
  transform: translateY(calc((100% - 65px) * -1));
}

.wrapper--pageHeader.wrapper--pageHeader_about.scrolled:not(.active),
.wrapper--pageHeader.wrapper--pageHeader_overview.scrolled:not(.active) {
  transform: translateY(calc((100% - 15px) * -1));
}

@media only screen and (min-width: 768px) {
  header.nav.scrolled:not(.active),
  .wrapper--pageHeader.scrolled:not(.active) {
    transform: translateY(calc((100% - (21px + 47px + 11px)) * -1));
  }

  .wrapper--pageHeader.wrapper--pageHeader_about.scrolled:not(.active),
  .wrapper--pageHeader.wrapper--pageHeader_overview.scrolled:not(.active) {
    transform: translateY(calc((100% - 20px) * -1));
  }
}

@media only screen and (min-width: 1600px) {
  header.nav.scrolled:not(.active),
  .wrapper--pageHeader.scrolled:not(.active) {
    transform: translateY(calc((100% - 92px) * -1));
  }
}

@media only screen and (min-width: 1800px) {
  header.nav.scrolled:not(.active),
  .wrapper--pageHeader.scrolled:not(.active) {
    transform: translateY(calc((100% - 109px) * -1));
  }
}

/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */

header.nav,
#pageHeader {
  padding-top: var(--margin_menu_top);
  padding-bottom: var(--margin_menu_bottom);
  padding-left: var(--margin_global_left);
  padding-right: var(--margin_global_right);
}

header.nav.scrolled,
.menu--main.hidden--dis + #pageHeader.scrolled,
.page.projects_grafik #pageHeader.scrolled:not(.active),
.page.about #pageHeader.scrolled:not(.active),
.active #pageHeader {
  color: black !important;
  background: white;
  border-bottom: var(--ui_stroke_width) solid black;
}

#pageHeader {
  display: flex;
  margin-bottom: var(--margin_drittelzeile);

  transition: transform 0.5s;
}
#pageHeader > div,
#pageHeader > button {
  flex: 1;
}
#pageHeader > div:nth-of-type(1) {
  flex: 2;
}

#projectInfo button {
  transition: transform 0.5s;
}
@media only screen and (min-width: 768px) {
  #projectInfo button {
    transform: translateY(calc((var(--margin_zeile) * 0.7) * -1));
  }
}

.active #projectInfo button,
.scrolled #projectInfo button {
  transform: translateY(-2.5px);
}

/* ****************************** */

.menu--main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;

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

  color: black;
}

/* ****************************** */

.menu--main > a {
  width: calc(100%);

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

  border-bottom: var(--ui_stroke_width) solid black;

  /* DEV */
  background: white;
}
.menu--main > a:last-of-type {
  border: none;
}
.menu--main > a:hover {
  background-color: white;
}

/* ****************************** */

.menu--main button {
  position: absolute;
  top: 0;
  left: 0;
}

/* ****************************** */

.hamburger.custom {
  padding: 0;
  line-height: 0;
}

.hamburger.custom.pos--ab.is-active {
  left: var(--margin_global_left);
}

.hamburger.custom .hamburger-box {
  width: var(--ui_btn_width);
  height: var(--ui_btn_height);
}
.hamburger.custom .hamburger-inner:before {
  top: var(--ui_btn_height_half);
}
.hamburger.custom .hamburger-inner:after {
  bottom: var(--ui_btn_height_half);
}

.hamburger.custom .hamburger-inner,
.hamburger.custom .hamburger-inner:after,
.hamburger.custom .hamburger-inner:before {
  width: var(--ui_btn_width);
  height: var(--ui_stroke_width);
  border-radius: 0;
}

.hamburger-box:hover .hamburger-inner,
.hamburger-box:hover .hamburger-inner:after,
.hamburger-box:hover .hamburger-inner:before {
  background-color: blue !important;
}

/* /////////////////////// */
/* // Page Header (nav) // */
/* /////////////////////// */

.PageHeader {
}

.PageHeader__textElement {
  transition: transform 0.5s;
  transform: translateY(-5px);
}

/* .wrapper--pageHeader.active .PageHeader__textElement {
  transform: translateY(-1px);
} */

/* /////////////////// */
/* // Image Counter // */
/* /////////////////// */

.ImageCounter {
  position: fixed;
  top: -5px;
  right: 0;
  z-index: 999999;

  padding-right: var(--margin_global_right);
  padding-top: var(--margin_menu_top);

  transition: top 0.5s;
}

.ImageCounter_hidden {
  display: none !important;
}

/* .ImageCounter_whileProjectinfoActive {
  top: 0px;
} */