/* Impressum-Kontakt-Icons: Telefon wackelt, Mail klappt auf (Phase C). */

.contact-icon {
  display: inline-block;
}

/* --- Telefon: Wackeln bei Hover/Focus der Zeile --- */
.contact-icon--phone {
  transition: transform 0.2s ease;
  transform-origin: 50% 60%;
}

p:hover > .contact-icon--phone,
.contact-icon--phone:hover {
  animation: contactPhoneWiggle 0.5s ease-in-out;
}

@keyframes contactPhoneWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-16deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}

/* --- Mail: Umschlag klappt auf (zwei gestapelte Glyphen, kein Codepoint-Raten) --- */
.contact-icon--mail {
  position: relative;
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Globaler `* { color: var(--text-color) }` würde die Icons sonst weiß färben. */
.contact-icon--mail .bi {
  color: var(--primary);
}

.contact-icon--mail .contact-icon-open {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.contact-icon--mail .contact-icon-closed {
  transition: opacity 0.25s ease;
}

p:hover > .contact-icon--mail,
.contact-icon--mail:hover {
  transform: translateY(-2px) scale(1.08);
}

p:hover > .contact-icon--mail .contact-icon-closed,
.contact-icon--mail:hover .contact-icon-closed {
  opacity: 0;
}

p:hover > .contact-icon--mail .contact-icon-open,
.contact-icon--mail:hover .contact-icon-open {
  opacity: 1;
}

/* Reduced-Motion / User-Toggle: Effekte neutralisieren, Mail bleibt geschlossen sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .contact-icon--phone { animation: none !important; }
  .contact-icon--mail { transform: none !important; }
  .contact-icon--mail .contact-icon-open { display: none; }
  .contact-icon--mail .contact-icon-closed { opacity: 1 !important; }
}

html.no-animations .contact-icon--phone { animation: none !important; }
html.no-animations .contact-icon--mail { transform: none !important; }
html.no-animations .contact-icon--mail .contact-icon-open { display: none; }
html.no-animations .contact-icon--mail .contact-icon-closed { opacity: 1 !important; }