/* ==========================================================================
   GEMEINSAMES BASIS-DESIGN (Gilt für beide Button-Typen)
   ========================================================================== */
.prButtonWhite a.elementor-button,
.prButtonBlack a.elementor-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 74px !important;
  padding-left: 30px !important;
  padding-right: 140px !important; /* Platz für den Pfeil */
  overflow: hidden !important;     /* Schneidet den blauen Kreis ab */
  border-radius: 55px !important;
  background-color: transparent !important; /* Verhindert Elementor-Hintergrundkonflikte */
  text-decoration: none !important;
}

/* Gemeinsamer Text-Wrapper-Schutz für den Z-Index */
.prButtonWhite a.elementor-button .elementor-button-content-wrapper,
.prButtonWhite a.elementor-button .elementor-button-text,
.prButtonBlack a.elementor-button .elementor-button-content-wrapper,
.prButtonBlack a.elementor-button .elementor-button-text {
  position: relative !important;
  z-index: 2 !important;
  transition: color 0.2s ease !important;
}

/* Gemeinsamer Hintergrund-Effekt (Der wachsende Kreis) */
.prButtonWhite a.elementor-button::before,
.prButtonBlack a.elementor-button::before {
  content: '' !important;
  background: #C6D8F1 !important;
  height: 74px !important;
  width: 74px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 55px !important;
  z-index: 1 !important;
  transition: width 0.6s ease !important;
}

.prButtonWhite a.elementor-button:hover::before,
.prButtonBlack a.elementor-button:hover::before {
  width: 100% !important;
}

/* Gemeinsame Masken-Eigenschaften für den Pfeil */
.prButtonWhite a.elementor-button::after,
.prButtonBlack a.elementor-button::after {
  content: "" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  width: 77.493px !important;
  height: 41.463px !important;
  
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='77.493' height='41.463' viewBox='0 0 77.493 41.463'><g id='Pfeil' transform='translate(-236 -17.393)'><line id='Linie_27' x2='76' transform='translate(236 39)' fill='none' stroke='%23000000' stroke-width='2'/><path id='Pfad_251' d='M1172.564,1265.125l22.178,20.657-22.178,19.32' transform='translate(-882.742 -1247)' fill='none' stroke='%23000000' stroke-width='2'/></g></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='77.493' height='41.463' viewBox='0 0 77.493 41.463'><g id='Pfeil' transform='translate(-236 -17.393)'><line id='Linie_27' x2='76' transform='translate(236 39)' fill='none' stroke='%23000000' stroke-width='2'/><path id='Pfad_251' d='M1172.564,1265.125l22.178,20.657-22.178,19.32' transform='translate(-882.742 -1247)' fill='none' stroke='%23000000' stroke-width='2'/></g></svg>") !important;
  
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  transition: background-color 0.3s ease !important;
}


/* ==========================================================================
   VARIANTE 1: prButtonWhite (Standard Weiß -> Hover Schwarz)
   ========================================================================== */
.prButtonWhite a.elementor-button .elementor-button-text {
  color: #ffffff !important; /* Text weiß */
}

.prButtonWhite a.elementor-button::after {
  background-color: #ffffff !important; /* Pfeil weiß */
}

/* Hover-Farben für prButtonWhite */
.prButtonWhite a.elementor-button:hover .elementor-button-text {
  color: #000000 !important; /* Text schwarz bei Hover */
}

.prButtonWhite a.elementor-button:hover::after {
  background-color: #000000 !important; /* Pfeil schwarz bei Hover */
}


/* ==========================================================================
   VARIANTE 2: prButtonBlack (Immer Schwarz)
   ========================================================================== */
.prButtonBlack a.elementor-button .elementor-button-text {
  color: #000000 !important; /* Text dauerhaft schwarz */
}

.prButtonBlack a.elementor-button::after {
  background-color: #000000 !important; /* Pfeil dauerhaft schwarz */
}

/* Hover-Farben für prButtonBlack (bleiben schwarz) */
.prButtonBlack a.elementor-button:hover .elementor-button-text {
  color: #000000 !important;
}

.prButtonBlack a.elementor-button:hover::after {
  background-color: #000000 !important;
}