.elementor-3682 .elementor-element.elementor-element-a3b48f9{--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-3682 .elementor-element.elementor-element-68d1b96{z-index:8;}.elementor-3682 .elementor-element.elementor-element-68d1b96.ha-has-bg-overlay:hover::before{transition:background 0.3s;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-68d1b96 *//**************************************
 * Floating Kontakt – Panel + Drehscheiben-Button
 **************************************/

/* ===============================
   WRAPPER: Panel + Button als Einheit
   =============================== */
.floating-contact {
  position: fixed;
  top: 50%;
  right: -370px;                     /* geschlossen: nur halber Button sichtbar */
  transform: translateY(-50%);
  width: 420px;                      /* 320 Panel + 100 Button - 50 Überlappung */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 8;
  font-family: inherit;
  transition: right 0.4s ease;
}

/* Geöffnet → bündig rechts */
.floating-contact.is-open {
  right: 0;
}

/* ===============================
   PANEL
   =============================== */
.floating-contact__panel {
  width: 370px;
  max-width: 80vw;
  background: #ffffff;
  border-radius: 16px 0 0 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.floating-contact__inner {
  padding: 20px 24px 22px;
  color: #1f2933;
  margin: 0 30px;
}

.floating-contact__title {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 700;
}

.floating-contact__subtitle {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: #6b7280;
}

.floating-contact__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.floating-contact__avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #059669;
}

.floating-contact__info {
  display: flex;
  flex-direction: column;
}

.floating-contact__name {
  margin: 0;
  font-weight: 600;
}

.floating-contact__role {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.floating-contact__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.floating-contact__detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  text-decoration: none;
  color: #111827;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.1s ease;
}

.floating-contact__detail i {
  font-size: 1rem;
}

.floating-contact__detail:hover {
  background: #ecfdf5;
  transform: translateX(2px);
}

.floating-contact__hint {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* ===============================
   RUNDER BUTTON (100×100)
   =============================== */
.floating-contact__toggle {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  border: 1px solid #998A56;        /* Goldrand */
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  outline: none;
  position: relative;
  color: #e86b6b;

  /* Button überlappt das Panel */
  margin-right: -50px;
}

.floating-contact__toggle:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  background: #ffffff;
}

.floating-contact__toggle:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 3px;
}

/* ===============================
   ICON-EFFEKT – Drehscheibe, aber immer EIN Symbol
   =============================== */

/* Radius der „Scheibe“ – kannst du bei Bedarf minimal anpassen */
:root {
  --fc-wheel-radius: 23px;
}

/* Bühne im Button, bleibt zentriert */
.fc-wheel {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
}

/* Alle Symbole:
   - sitzen im Zentrum
   - werden per Animation entlang eines Kreisbogens bewegt */
.fc-wheel-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  font-size: 1.5rem;
  color: ##998A56 !important;
  opacity: 0; /* standardmäßig unsichtbar */
}

/* KONTAKT-Bogen leicht kleiner + 90° nach links gedreht */
.fc-arc-text {
  width: 74px;
  height: 74px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* 
   fc-wheel-segment:
   - Symbol bewegt sich auf einer Bogenbahn:
     120° (links-oben) → 180° (links-mitte) → 240° (links-unten)
   - 0–10%: von links-oben rein
   - 10–40%: in der Mitte stehen („Produktpräsentation“)
   - ab 41%: nach links-unten raus, unsichtbar
   - 100%: unsichtbar unten
*/

@keyframes fc-wheel-segment {
  /* Start: oben links, unsichtbar */
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)
      rotate(260deg)
      translateX(var(--fc-wheel-radius))
      rotate(-260deg);
  }

  /* reinfahren */
  15% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(180deg)
      translateX(var(--fc-wheel-radius))
      rotate(-180deg);
  }

  /* Präsentation */
  30% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(180deg)
      translateX(var(--fc-wheel-radius))
      rotate(-180deg);
  }

  /* rausfahren */
  45% {
    opacity: 0;
    transform: translate(-50%, -50%)
      rotate(120deg)
      translateX(var(--fc-wheel-radius))
      rotate(-120deg);
  }

  /* ✅ ERZWUNGENE PAUSE – nichts sichtbar */
  100% {
    opacity: 0;
    transform: translate(-50%, -50%)
      rotate(260deg)
      translateX(var(--fc-wheel-radius))
      rotate(-260deg);
  }
}


/* 
   Jetzt steuern wir, WANN welches Symbol diesen Ablauf durchläuft.
   Dauer: 12 Sekunden.
   Pro Symbol ist nur 30% der Zeit sichtbar → KEIN Überlappen.
*/

.fc-wheel-icon--phone {
    color: #998A56;
  animation: fc-wheel-segment 15s infinite;
  animation-timing-function: ease-in-out;
}

.fc-wheel-icon--mail {
    color: #998A56;
  animation: fc-wheel-segment 15s infinite;
  animation-delay: 5s;
  animation-timing-function: ease-in-out;
}

.fc-wheel-icon--whatsapp {
    color: #998A56;
  animation: fc-wheel-segment 15s infinite;
  animation-delay: 10s;
  animation-timing-function: ease-in-out;
}


/* ===============================
   SCHLIESS-PFEIL IM OFFENEN ZUSTAND
   =============================== */

.fc-icon-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  transition-delay: 0.5s; /* ⏱ Pfeil kommt nach 2 Sekunden */
}


.floating-contact.is-open .fc-wheel {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 0s; /* ⏱ verschwindet nach 2 Sekunden */
}


.floating-contact.is-open .fc-icon-close {
  opacity: 1;
  transition: opacity 0.4s ease;
  transition-delay: 1s;
}

/* ===============================
   MOBILE ANPASSUNGEN
   =============================== */
@media (max-width: 480px) {
  .floating-contact {
    width: 340px;
    right: -300px;
  }

  .floating-contact__panel {
    width: 260px;
  }

  .floating-contact__toggle {
    width: 90px;
    height: 90px;
    margin-right: -45px;
  }

  .fc-arc-text {
    width: 68px;
    height: 68px;
  }
}

/* Animation mit Pfeil bei schließen */


#closeanimation {
  width: 100px;
  aspect-ratio: 1/1;
  margin: 0px;
  position: relative;
  overflow: hidden;
  

  &::before {
    content: "";
    clip-path: var(--arrow);
    width: 50%;
    height: 50%;
    margin-left: -25px;
    margin-top: 25px;
    position: absolute;
    background-color: #8c1627;
    z-index: 1;
    transition: 1s ease-in-out;
  }
  div {
    width: 100%;
    height: 100%;
    scale: 0;
    transition: 1s ease-in-out;
    clip-path: var(--circle);

    &::after {
      content: "";
      background: linear-gradient(135deg, #000000, #122e52, #998a56, #122e52);
      width: 400%;
      height: 400%;
      position: absolute;
    }
  }
  &:hover {
    &::before {
      transform: rotate(360deg);
      background-color: #ffffff;
      width: 30%;
      height: 15%;
      margin-left: -15%;
      margin-top: 45%;
    }

    div {
      scale: 1;
      animation: shapeshift 5s ease-in-out infinite forwards;

      &::after {
        animation: gradientMove 3.5s ease-in-out infinite alternate;
      }
    }
  }
}

@keyframes shapeshift {
  0% {
    clip-path: var(--circle);
    rotate: 0turn;
  }

  25% {
    clip-path: var(--flower);
  }

  50% {
    clip-path: var(--cylinder);
  }

  75% {
    clip-path: var(--hexagon);
  }

  100% {
    clip-path: var(--circle);
    rotate: 1turn;
  }
}

@keyframes gradientMove {
  0% {
    translate: 0 0;
  }

  100% {
    translate: -75% -75%;
  }
}/* End custom CSS */