/*
 * DEPLA Theme: gemeinsame kleine Bausteine, die mehrere Elemente nutzen
 * Elementeigene Styles kommen je Element in eigene Dateien (Welle 2).
 */

/* Zeile mit Icon links, z.B. Telefon, Fax, E-Mail im Footer und auf Kontakt
 * <p class="icon-row"><span class="icon icon-phone" aria-hidden="true"></span><span>04121 50 40 5</span></p> */
.icon-row {
  position: relative;
  margin: 0;
  padding-left: 25px;
}

.icon-row > .icon {
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 14px;
  height: 14px;
}

.icon-row + :not(.icon-row) {
  margin-top: var(--p-mb);
}

/* Social-Links als Kacheln (Footer)
 * <div class="social-links"><a href="..." target="_blank" rel="noopener" aria-label="Instagram"><span class="icon icon-instagram" aria-hidden="true"></span></a></div> */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.667rem;
  height: 2.667rem;
  background: var(--color-white-05);
  font-size: 1.333rem;
}