/**HEADER ICONS*/

#header-icons {
  z-index: 100;
  display: grid;
  pointer-events: all;
  grid-template-columns: repeat(2, 56px);
  grid-template-rows: repeat(2, 56px);
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  gap: calc(var(--gap-s) * 0.9);
}

#header-icons img {
  height: var(--icon-height) !important;
  display: block;
  width: auto;
}

.icon {
  display: flex;
  text-align: center;
  vertical-align: top;
  transition: all 0.5s ease 0s;
  /* border-radius: 50%; */
  /* background-color: #fff; */
  /* border: solid 2px transparent; */
}
.icon:hover {
  background-color: transparent;
  border: solid 2px #fff;
}

/* #header-icons .icon {
  border-radius: 3rem;
  background-color: #fff;
} */
.icon:hover img {
  filter: brightness(13);
}

.icon img {
  transition: all 0.5s ease 0s;
}

.icon a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/**Desktop*/
@media (min-width: 1060px) {
  #header-icons {
    display: none;
  }
}

/**Mobile*/
@media (max-width: 1059px) {
  #header-icons {
    --position: clamp(2.313rem, 2.102rem + 0.6vw, 2.5rem);
    grid-template-columns: repeat(2, 25px);
    grid-template-rows: repeat(1, 25px);
    position: absolute;
    top: var(--position);
    right: var(--position);
  }
}

/**GTRANSLATE*/

html:lang(auto) .icon a[title="German"],
html:lang(en) .icon a[title="English"],
html:lang(de-DE) .icon a[title="German"],
html:lang(de) .icon a[title="German"] {
  display: none;
  opacity: 0;
}

.gtranslate_wrapper {
  height: 100%;
  width: 100%;
}

a.glink {
  font-size: 0;
}

.glink-dsgvo-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

a.glink:after {
  height: var(--icon-height);
  width: var(--icon-height);
  background-image: url(/wp-content/themes/astra-impuls-child/img/icon-lang.svg);
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease 0s;
}

.icon:hover a.glink::after {
  filter: brightness(13);
}

/* MOBILE ICONS */
@media (min-width: 990px) {
  div#mobile-icons {
    display: none;
  }
}

#mobile-icons {
  z-index: 9;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  background-color: var(--ast-global-color-1);
  pointer-events: all;
}

.mobile-icon {
  padding-block: calc(var(--gap-s) * 0.7) calc(var(--gap-m) * 0.7);
  margin-inline: auto;
}

#header-icons .icon a,
.mobile-icon a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#header-icons .icon a:before,
.mobile-icon a:before {
  --size: 25px;
  content: "";
  display: inline-block;
  height: var(--size);
  width: var(--size);
  background-repeat: no-repeat;
  background-size: contain;
}

#header-icons .icon:first-child a:before,
.mobile-icon:first-child a:before {
  background-image: url(../img/icon-phone.svg);
}
#header-icons .icon:last-child a::before,
.mobile-icon:last-child a:before {
  background-image: url(../img/icon-mail.svg);
}