/* Nav Styles */

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

/* -------------- */
/* DESKTOP */
/* TABLET */
/* MOBILE */
/* MINI-MOBILE */
/* -------------- */

/* DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
02. NoScript / Old Browser Banner
*/

/*
-----------------------------------------------------------------------------

01. Navigation

-----------------------------------------------------------------------------
*/

/***** Display */

.nav-wrap .mobile--trigger {
  display: none;
}

/***** Nav-Wrap */

.nav-wrap {
  width: 100%;
  height: 6.25em;
  position: fixed;
  top: 0;
  z-index: 99999;
  background: var(--color_accent);
  overflow: visible;
  transition: all 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav-wrap__inner {
  z-index: 9999;
  position: relative;
  max-width: 100%;
  margin: auto;
  height: 100%;
  width: 100%;
  padding: 0.6em 2em;
  overflow: hidden;
  transition: all 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav-wrap__inner .flex-wrap {
  transition: all 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}

/***** Nav-Styling */

.nav-wrap * {
  color: var(--color_white);
}

.nav-wrap .brand {
  margin: 0.4rem 0;
  font-size: var(--fsize_h3);
}

.nav-wrap .brand .item {
  display: inline-block;
}

.nav-wrap .brand svg.logo {
  width: 19rem;
}

.nav-wrap .brand svg.logo * {
  transition: all 1.2s cubic-bezier(0.77, 0, 0.18, 1), opacity 3s;
}

.nav-wrap .brand svg.logo path {
  fill: var(--color_secondary);
}

.nav-wrap .brand .jb-title {
  display: block;
  transform: translateY(200%);
  color: var(--color_white);
  transition: all 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.navtrigger-wrap {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-left: 2em;
}

.navtrigger-wrap > span {
  position: absolute;
  right: 0;
  top: 40%;
  width: 4rem;
  background: var(--color_white);
  height: 0.2rem;
  display: block;
  transform-origin: center;
}

.navtrigger-wrap > span:nth-child(2) {
  top: 65%;
}

.nav-wrap a,
.nav-wrap a.actual-parent {
  color: var(--color_white);
}

.nav-wrap a:hover {
  color: var(--color_secondary);
}

.nav-wrap a.actual-site {
  color: var(--color_secondary);
}

/**/

.nav-wrap .lang--toggler {
  padding-left: 0;
  margin: 0;
  text-transform: uppercase;
}

.nav-wrap .lang--toggler li {
  display: inline-block;
  margin: 0 0 0 0.5em;
}

/* flyout menu */

.nav-wrap .nav--flyout {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.nav-wrap .nav--flyout__inner {
  max-width: 80em;
  margin: auto;
  position: relative;
}

.nav-wrap .nav--flyout__inner .overflow-container {
  position: relative;
  max-height: 80vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.nav-wrap .nav--flyout__inner .overflow-container::-webkit-scrollbar {
  display: none;
}

.nav-wrap .nav--flyout .item {
  overflow: hidden;
  cursor: pointer;
}
.nav-wrap .nav--flyout .nav--download {
  display: block;
}
.nav-wrap .nav--flyout .item.item--main {
  font-size: var(--fsize_h2);
  margin-bottom: 0.5em;
  padding-bottom: 0.2em;
  position: relative;
}

.nav-wrap .nav--flyout .item.item--main > div.line {
  position: absolute;
  bottom: 0;
  height: 0.1rem;
  width: 100%;
  background: var(--color_white);
  transform: scaleX(0);
  transform-origin: left;
}

.nav-wrap .nav--flyout .item.item--sub {
  font-size: calc(var(--fsize_h3) * 0.6);
  margin-top: 0.3em;
  margin-bottom: 0.2em;
}

/**/

.donnation-button {
  cursor: pointer;
  position: fixed;
  display: flex;
  right: 2em;
  bottom: 2em;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  z-index: 999999;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 5px 5px 11px -2px rgba(0, 0, 0, 0.21);
  box-shadow: 5px 5px 11px -2px rgba(0, 0, 0, 0.21);
}

.donnation-button svg {
  width: 70%;
  display: block;
  margin: auto;
}

.donnation-button:hover {
  transform: scale(1.1);
}

/**/

.crumb {
  box-shadow: 0 9.00390625px 11px -7px rgba(0, 0, 0, 0.05);
  padding: 0.4em 1em;
  position: relative;
  z-index: 999;
  background: var(--color_base);
}

.crumb a,
.crumb a:hover {
  border-bottom: 0;
  color: var(--color_accent);
  font-family: "Theinhardt Medium", sans-serif;
  font-weight: 500;
}

/***** Scrolled-Nav-State */

.scrolled-nav.nav-wrap {
  height: 3em;
}

.scrolled-nav.nav-wrap .nav-wrap__inner {
  padding: 0.4em 1em;
}

.scrolled-nav.nav-wrap .brand {
  margin: 0;
}

.scrolled-nav.nav-wrap .brand svg.logo .visual {
  transform: scale(0.5);
}

.scrolled-nav.nav-wrap .brand svg.logo .name {
  transform: translate3d(-1em, 0.25em, 0);
}

.scrolled-nav.nav-wrap .brand svg.logo .claim {
  transform: translate3d(-1em, 2em, 0);
}

.scrolled-nav.nav-wrap .brand svg.logo .claim {
  opacity: 0;
}

.scrolled-nav.nav-wrap .brand .jb-title {
  display: block;
  transform: translateY(-60%);
}

.scrolled-nav.nav-wrap .nav-section--right {
  transform: translateY(-26%);
}

/***** Breadcrumb */

.breadcrumb .current-page {
  color: var(--color_red);
}

/*
-----------------------------------------------------------------------------

02. NoScript / Old Browser Banner

-----------------------------------------------------------------------------
*/

/****** Warning Banner */

.warning-banner {
  background: var(--color_red);
  top: 0em;
  text-align: center;
  padding: 1em;
}

.warning-banner {
  width: 100%;
  display: block;
  position: fixed;
  border-radius: 0.2em;
  z-index: 99999;
}

.warning-banner table {
  width: 100%;
  height: inherit;
  text-align: center;
  margin: 0;
}

.warning-banner p,
.warning-banner b,
.warning-banner a {
  color: var(--color_white);
  margin: 0 0.6em 0 0.6em;
}

.warning-banner p:nth-child(2) {
  margin: 0.6em;
}

.warning-banner a {
  border: 0.0625em solid var(--color_white);
  padding: 0.4em;
  white-space: nowrap;
  border-radius: 0.0625em;
}

.warning-banner a:hover {
  border: 0.0625em solid var(--color_white);
  color: var(--color_white);
}

.noscript-banner:target {
  opacity: 0;
  top: -6.25em;
}

.ie-banner.closed,
.no-access-banner.closed {
  display: none;
}

/* MINI-DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
02. NoScript / Old Browser Banner
*/

@media only screen and (max-width: 80em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  .nav-wrap {
    height: 3em;
  }

  .navtrigger-wrap {
    height: 1.6rem;
    margin-left: 1em;
    width: 3rem;
    transform: translateY(-35%);
  }

  .navtrigger-wrap > span {
    top: 0%;
    width: 3rem;
  }

  .nav-wrap .nav-wrap__inner {
    padding: 0.4em 1em;
  }

  .nav-wrap .nav-wrap__inner .flex-wrap {
    height: 100%;
  }

  .nav-wrap .brand {
    margin: 0;
  }

  .nav-wrap .brand svg.logo .country {
    display: none;
  }

  .nav-wrap .brand svg.logo .claim {
    display: none;
  }

  .nav-wrap .brand svg.logo .visual {
    transform: scale(0.5);
  }

  .nav-wrap .brand svg.logo .name {
    transform: translate3d(-1em, 0.25em, 0);
  }

  .nav-wrap .nav--flyout .item.item--main {
    font-size: 3vw;
  }

  .nav-wrap .nav--flyout .item.item--sub {
    font-size: 2.2vw;
  }

  /**** scrolled nav */

  .scrolled-nav.nav-wrap .nav-section--right {
    transform: translateY(-0%);
  }

  .nav-wrap .brand .jb-title,
  .scrolled-nav.nav-wrap .brand .jb-title {
    position: absolute;
    top: 15%;
    left: 45vw;
    max-width: 7em;
    text-align: center;
    transform: translateY(-0%);
    font-size: var(--fsize_s);
    line-height: 1.2em;
  }
}

/* TABLET //////////////////////////////////////////////////////////////// */
/*
01. Navigation
02. NoScript / Old Browser Banner
*/

@media only screen and (max-width: 55em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  .navtrigger-wrap {
    transform: translateY(-33%);
  }

  .nav-wrap .brand svg.logo {
    width: 13rem;
    margin-top: 0.15em;
  }

  .nav-wrap .lang--toggler li {
    margin: 0 0 0 0.3em;
  }

  .nav-wrap .lang--toggler li * {
    font-size: var(--fsize_s);
  }

  .nav-wrap .nav--flyout .item.item--main {
    font-size: 7vw;
  }

  .nav-wrap .nav--flyout .item.item--sub {
    font-size: 5vw;
  }

  .nav-wrap .nav--flyout__inner {
    width: 80vw;
  }

  /**/

  .donnation-button {
    width: 4.5em;
    height: 4.5em;
    right: 1em;
    bottom: 1.5em;
  }

  /*
  -----------------------------------------------------------------------------

  02. NoScript / Old Browser Banner

  -----------------------------------------------------------------------------
  */
}

/* MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
02. NoScript / Old Browser Banner
*/

@media only screen and (max-width: 36em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  .scrolled-nav.nav-wrap,
  .nav-wrap {
    height: 3em;
  }

  .scrolled-nav.nav-wrap .nav-wrap__inner,
  .nav-wrap .nav-wrap__inner {
    padding: 0.4em 0.6em;
  }

  .nav-wrap .lang--toggler {
    transform: translateY(10%);
  }

  .nav-wrap .lang--toggler li {
    margin: 0 0 0 0.2em;
  }

  .navtrigger-wrap {
    margin-left: 0.5em;
  }

  .navtrigger-wrap > span {
    width: 2.5rem;
  }

  .nav-wrap .brand .jb-title,
  .scrolled-nav.nav-wrap .brand .jb-title {
    top: 10%;
    left: 35vw;
  }

  /*
  -----------------------------------------------------------------------------

  02. NoScript / Old Browser Banner

  -----------------------------------------------------------------------------
  */

  .warning-banner p,
  .warning-banner b,
  .warning-banner a {
    font-size: var(--fsize_s);
  }

  a.close-banner-btn {
    margin-top: 0.6em;
  }
}

/* MINI-MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
02. NoScript / Old Browser Banner
*/

@media only screen and (max-width: 27em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  .navtrigger-wrap {
    margin-left: 0;
    transform: scale(0.8);
    transform-origin: right center;
  }

  /*
  -----------------------------------------------------------------------------

  02. NoScript / Old Browser Banner

  -----------------------------------------------------------------------------
  */
}