.elementor-1590 .elementor-element.elementor-element-7bb502b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1590 .elementor-element.elementor-element-565b039c .e-contact-buttons__chat-button{font-family:"Poppins", poppins;font-size:18px;font-weight:400;}.elementor-1590 .elementor-element.elementor-element-565b039c .e-contact-buttons{--e-contact-buttons-button-icon:var( --e-global-color-c7f1427 );--e-contact-buttons-button-bg:var( --e-global-color-astglobalcolor4 );--e-contact-buttons-transition-duration:0.3s;--e-contact-buttons-horizontal-offset:40px;--e-contact-buttons-vertical-offset:40px;}.elementor-1590 .elementor-element.elementor-element-565b039c .e-contact-buttons__chat-button-drop-shadow{filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));}/* Start custom CSS for contact-buttons-var-9, class: .elementor-element-565b039c *//* =========================================================
   RHEINWEGE FLOATING CONTACT BUTTON – FINAL
   ========================================================= */

/* 0. Äußere Wrapper dürfen nichts abschneiden */
.rheinwege-chat-icon,
.rheinwege-chat-icon .e-contact-buttons,
.rheinwege-chat-icon .e-contact-buttons__chat-button-container {
  overflow: visible !important;
}

/* 1. Haupt-Button */
.rheinwege-chat-icon .e-contact-buttons__chat-button {
  display: flex !important;
  align-items: center;
  gap: 14px;

  padding: 8px 20px 8px 8px !important;
  min-width: 360px !important;

  border-radius: 999px !important;
  overflow: visible !important;
}

/* 2. Avatar (rundes Bild) */
.rheinwege-chat-icon .e-contact-buttons__chat-button-icon-container {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;

  background-image: url("https://rheinwege.de/wp-content/uploads/2025/12/vorderansicht-der-smiley-geschaftsfrau-scaled-e1766502538483.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 3px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;

  position: relative;
  z-index: 2;
}

/* Original SVG-Icon unsichtbar lassen */
.rheinwege-chat-icon
.e-contact-buttons__chat-button-icon-container svg {
  opacity: 0 !important;
}

/* 3. Text-Pill (Standard: unsichtbar) */
.rheinwege-chat-icon .e-contact-buttons__chat-button-text {
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;

  /* Sauberer Anschluss an Avatar */
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;

  margin-left: -10px;
  padding-left: 22px;
}

/* 4. Hover: Text einblenden */
.rheinwege-chat-icon
.e-contact-buttons__chat-button:hover
.e-contact-buttons__chat-button-text {
  opacity: 1;
  visibility: visible;
}/* Elementor Border-Radius komplett überschreiben */



/* Avatar vorbereiten für Bewegung */
.rheinwege-chat-icon .e-contact-buttons__chat-button-icon-container {
  transition: transform 0.25s ease;
}

/* Hover: Avatar leicht nach rechts schieben */
.rheinwege-chat-icon
.e-contact-buttons__chat-button:hover
.e-contact-buttons__chat-button-icon-container {
  transform: translateX(15px);
}/* End custom CSS */