/* style.css für Floating Contact Buttons */

:root {
  --fcb-button-size: 55px; /* Größe der Buttons */
  --fcb-icon-size: 24px;  /* Größe der Icons */
  --fcb-bottom-spacing: 25px; /* Abstand vom unteren Rand */
  --fcb-right-spacing: 25px;  /* Abstand vom rechten Rand */
  --fcb-button-gap: 15px;   /* Vertikaler Abstand zwischen den Buttons */
  --fcb-bg-color: #0073aa; /* Hintergrundfarbe (WordPress Blau als Standard) */
  --fcb-bg-hover-color: #005a87; /* Hintergrundfarbe beim Hover */
  --fcb-icon-color: #ffffff; /* Icon-Farbe (Weiß) */
  --fcb-z-index: 9999; /* Stellt sicher, dass die Buttons über den meisten anderen Elementen liegen */
}

#floating-contact-container {
  position: fixed; /* Wichtig: Position relativ zum Viewport */
  bottom: var(--fcb-bottom-spacing); /* Positionierung von unten */
  right: var(--fcb-right-spacing);  /* Positionierung von rechts */
  z-index: var(--fcb-z-index);    /* Stapelreihenfolge */
  display: flex;                  /* Flexbox für Anordnung */
  flex-direction: column;         /* Buttons untereinander */
  gap: var(--fcb-button-gap);     /* Abstand zwischen den Flex-Items (Buttons) */
}

.floating-contact-button {
  display: flex; /* Flexbox für Icon-Zentrierung */
  justify-content: center; /* Icon horizontal zentrieren */
  align-items: center;     /* Icon vertikal zentrieren */
  width: var(--fcb-button-size);
  height: var(--fcb-button-size);
  background-color: var(--fcb-bg-color);
  color: var(--fcb-icon-color); /* Farbe für das Icon */
  border-radius: 50%; /* Macht die Buttons rund */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Kleiner Schatten für Tiefenwirkung */
  text-decoration: none; /* Standard-Link-Unterstreichung entfernen */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Sanfter Übergang für Hover-Effekte */
  -webkit-tap-highlight-color: transparent; /* Verhindert blauen Kasten bei Touch auf Mobilgeräten */
}

.floating-contact-button i {
  font-size: var(--fcb-icon-size);
  line-height: 1; /* Verhindert zusätzliche Höhenprobleme bei manchen Icons */
}

.floating-contact-button:hover,
.floating-contact-button:focus { /* :focus für Tastaturnavigation */
  background-color: var(--fcb-bg-hover-color);
  color: var(--fcb-icon-color); /* Sicherstellen, dass Icon-Farbe bleibt */
  transform: scale(1.1); /* Leichte Vergrößerung beim Hover/Fokus */
  outline: none; /* Standard-Fokus-Rahmen entfernen (optional, ggf. eigenen hinzufügen) */
  cursor: pointer;
}

/* Optional: Spezifische Farben pro Button (auskommentiert) */
/* Entferne die Kommentarzeichen /* und */ /* um diese Farben zu aktivieren */
/*
.floating-contact-button.phone-button {
    background-color: #4CAF50; // Grün
}
.floating-contact-button.phone-button:hover,
.floating-contact-button.phone-button:focus {
    background-color: #45a049;
}

.floating-contact-button.email-button {
    background-color: #ff9800; // Orange
}
 .floating-contact-button.email-button:hover,
 .floating-contact-button.email-button:focus {
    background-color: #f57c00;
}
*/


/* Media Query für kleinere Bildschirme (optional, aber empfohlen) */
/* Verkleinert die Buttons und den Abstand auf Handys */
@media (max-width: 768px) {
  :root {
    --fcb-button-size: 48px; /* Etwas kleiner */
    --fcb-icon-size: 20px;  /* Icon proportional kleiner */
    --fcb-bottom-spacing: 15px; /* Näher am Rand */
    --fcb-right-spacing: 15px;  /* Näher am Rand */
    --fcb-button-gap: 10px;   /* Weniger Abstand dazwischen */
  }
}