.elementor-1162 .elementor-element.elementor-element-620deef1{--display:flex;}.elementor-1162 .elementor-element.elementor-element-63349445 .e-contact-buttons__chat-button svg{order:2;}.elementor-1162 .elementor-element.elementor-element-63349445 .e-contact-buttons{--e-contact-buttons-chat-button-gap:10px;--e-contact-buttons-button-icon:var( --e-global-color-primary );--e-contact-buttons-button-bg:var( --e-global-color-accent );--e-contact-buttons-button-icon-hover:var( --e-global-color-primary );--e-contact-buttons-button-bg-hover:var( --e-global-color-accent );--e-contact-buttons-horizontal-offset:50px;--e-contact-buttons-vertical-offset:10%;}.elementor-1162 .elementor-element.elementor-element-63349445 .e-contact-buttons__chat-button{font-family:"Oswald", Sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;line-height:1.1;}@media(max-width:767px){.elementor-1162 .elementor-element.elementor-element-63349445 .e-contact-buttons__chat-button svg{order:-1;}}/* Start custom CSS for contact-buttons-var-7, class: .elementor-element-63349445 *//* Button-Grundstil + Border-Radius */
.elementor-1162 .elementor-element.elementor-element-63349445 .e-contact-buttons__chat-button {
  border-radius: 50px 50px 0 50px;  /* TL, TR, BR, BL */
  position: relative;
  overflow: hidden;                 /* wichtig für den Unterstrich */
}

/* ==== 2. Text-Span vorbereiten ==== */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"] span[class*="chat-button-text"] {
  position: relative;
  display: inline-block;      /* Linie nur so breit wie der Text */
  padding-bottom: 3px;        /* etwas Luft für die Linie */
}

/* ==== 3. Unterstrich nur unter dem Text ==== */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"]
        span[class*="chat-button-text"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                  /* direkt an der Grundlinie */
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ==== 4. Animation bei Hover: von links nach rechts ==== */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"]:hover
        span[class*="chat-button-text"]::after {
  transform: scaleX(1);
}

/* Icon komplett ausblenden */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"] svg {
  display: none !important;
}


/* Startzustand: unsichtbar */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* sichtbar, wenn JS die Klasse .show-on-scroll setzt */
.elementor-1162 .elementor-element.elementor-element-63349445 a[class*="chat-button"].show-on-scroll {
  opacity: 1;
  transform: translateY(0);
}/* End custom CSS */