/* Kleine UI-Anpassungen vom 03.08.2026. */

/* Neben der Telefonnummer erscheint derselbe weiße Telefonhörer wie in der
   rechten Schnellkontaktleiste. Die transparente Originalgrafik bleibt rund. */
.hero-phone-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.hero-phone-icon img {
  display: block;
  width: 42px;
  height: auto;
  max-width: none;
}

/* Im Prozesslink wird exakt das Sprechblasenmotiv des untersten Buttons der
   rechten Leiste verwendet. Der Hintergrund ist bewusst etwas dunkler. */
.process-contact-icon {
  background: #535e66;
}

.process-contact-icon img {
  display: block;
  width: 54px;
  height: auto;
  max-width: none;
}

.process-contact-link:hover .process-contact-icon,
.process-contact-link:focus-visible .process-contact-icon {
  background: #465159;
}

@media (max-width: 420px) {
  .hero-phone-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .hero-phone-icon img {
    width: 40px;
  }
}