.header__shell {
  background-color: var(--colorBg);
  border-bottom: 3px solid var(--colorPrimary);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header__shell.is-scrolled {
  box-shadow: var(--shadowSoft);
}

.header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spaceL);
  padding: var(--spaceL) 0;
  position: relative;
}

.header__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spaceM);
  padding: var(--spaceL) 0 var(--spaceM) 0;

  @media all and (max-width:700px) {
    justify-content: center;
    flex: 1 1 100%;
  }

}

.header__top img {
  display: block;
  height: auto;
  max-height: clamp(4rem, 5.20vw, 8rem);
  width: auto;
}

.navigation__toggle {
  display: none;

  @media all and (max-width:700px) {
    display: block;
    margin-left: auto;
  }

}

.menu__shell {
  margin-left: auto;

  @media all and (max-width:700px) {
    flex: 1 1 100%;
    display: none;

    body.menu__open & {
      display: flex;
    }

  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaceL);
    margin: 0;
    padding: 0;
  }

  li {
    margin: 0;
    padding: 0;
    list-style: none;

    @media all and (max-width:700px) {
      width: 100%;
    }

  }

  a {
    text-decoration: none;
    font-size: var(--fSizeH5);
    font-weight: 500;
  }

}

.footer__shell {
  background-color: var(--colorPrimary);
  color: var(--colorOnPrimary);
  padding: var(--spaceXl) 0;
  margin-top: var(--spaceXl);

  a {
    color: var(--colorOnPrimary);
  }

  a:hover {
    color: var(--colorOnPrimaryHover);
  }

}

.footer__top {
  max-width: 70rem;
}

.footer__logo {
  display: inline-block;
  margin-bottom: var(--spaceM);
}

.footer__logo img {
  display: block;
  height: auto;
  max-height: clamp(4rem, 5.20vw, 8rem);
  width: auto;
}

.footer__bottom {
  margin-top: var(--spaceXl);
}

.footer__bottom,
.footer__bottom * {
  font-size: var(--fSizeMinimum);
}