.header__shell {
  position: relative;
  width: 100%;
  min-height: clamp(6rem, 4.38vw, 8.4rem);
  display: flex;
  padding-top: var(--spaceS);
  padding-bottom: var(--spaceS);
}

.navigation__toggle {
  pointer-events: all;
  margin-left: auto;
}

 body.menu__open {
   overflow: hidden;
   height: 100vh;
 }

 .header__logo img {
   width: clamp(14rem, 13.54vw, 26rem);
   height: auto;
 }

 @media all and (max-width: 440px) {

   .header__logo {
    flex: 1 1 100px;
    max-width: 200px;
   }

   .header__logo img {
    width: 100%;
   }

  }

.menu__shell {
  pointer-events: all;
  position: relative;
  margin-left: auto;
  --spaceL: clamp(2rem, 3.13vw, 6rem);

  @media all and (max-width:600px) {
    flex: 1 1 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    padding: var(--spaceXl) var(--sitePad);
    inset-block: 0;
    inset-inline-start: 0;
    background-color: var(--colorLinen);
    border-right: 1px solid var(--colorBronze);

    body.menu__open & {
      display: block;
      transform: translateX(0);
    }

  }

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

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

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

  }

}

.menu__shell ul a {
  color: var(--colorBlack);
  text-decoration: none;
  font-size: var(--fSizeH6);
  font-weight: 500;
  font-family: var(--fontSecondary);
  text-transform: uppercase;
  letter-spacing: 1px;

  &:hover {
    color: var(--colorBronze);
  }

  li.current_page_item & {
    color: var(--colorMuted);
    text-decoration: underline;
    text-underline-offset: 1.2rem;
    text-decoration-color: var(--colorBronze);
  }

}

.menu__controlls {
  margin: var(--spaceL) 0;
}

.footer__shell {
  padding: var(--spaceL) 0;
  border-top: 1px solid var(--colorBronze);
  position: relative;
  top: -1px;
  background-color: var(--colorPrimary);
  color: var(--colorOnPrimary);
  font-weight: 300;
}

.footer__shell :where(a) {
  color: var(--colorOnPrimary);
}

.footer__shell :where(a):hover,
.footer__shell :where(a):focus {
  color: var(--colorOnPrimaryHover);
}

.footer__shell .u__grid {
  align-items: center;

  @media (max-width: 600px) {
    align-items: stretch;
  }
}

.footer__top {
  max-width: 70rem;
}

.footer__logo {
  display: inline-flex;
}

.footer__logo img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 18.5rem;
  max-height: 100%;
}

.footer__image {
  display: block;
  height: auto;
  width: auto;
  max-width: 12rem;
  max-height: 6rem;
}

.footer__link {
  color: var(--colorBronze);

  &::after {
    content: "➛";
  }

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

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

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

.footer__col {
  display: flex;
  align-items: center;
}

.footer__col p {
  margin: 0;
}

.footer__right__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
}

.footer__right__logos {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spaceS);
}

.footer__right__group + .footer__right__group {
  border-left: 1px solid var(--colorBronze);
  padding-left: var(--spaceM);

  @media (max-width: 600px) {
    border-left: none;
    padding-left: 0;
    padding-top: var(--spaceXs);
  }
}

.footer__col__three {
  margin-right: auto;
}

.footer__shell a[href^="tel:"],
.footer__shell a[href^="mailto:"] {
  display: flex;
  align-items: center;

  &:before {
    content: '';
    width: 1em;
    height: 1.2em;
    display: inline-block;
    margin-right: 0.5em;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  }

}

.footer__shell a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

}

.footer__shell a[href*="linkedin"] {
  background-image: url('../images/linkedin.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 8rem;
  height: 2.4rem;
  position: relative;
  padding-right: 2.4rem;

  span {
    text-indent: -9999px;
    display: block;
  }

  &:after {
    text-indent: 0;
    position: absolute;
    right: -2.4rem;
    top: 0;
  }

}

.footer__shell a[href^="tel:"]:before {
  background-image: url('../images/icon-phone.svg');
}

.footer__shell a[href^="mailto:"]:before {
  background-image: url('../images/icon-mail.svg');
}

.footer__shell,
.footer__shell p {
  font-size: var(--fSizeH6);
}