/* ==========================================================================
   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;
  text-align: left;
}

/* 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;
  margin-bottom: 2px;
}

/* 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;
}

/* ==========================================================================
   JET-FORM-BUILDER SUBMIT BUTTON (prButtonBlack Variante)
   ========================================================================== */

/* 1. Basis-Design des Buttons */
button.jet-form-builder__action-button.prButtonBlack {
  position: relative !important;
  
  /* Der Trick: Grid-Layout zwingt Pseudoelemente in ein festes Schichtsystem */
  display: inline-grid !important;
  align-items: center !important;
  justify-content: start !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;
  border: none !important;         
  background-color: transparent !important; 
  cursor: pointer !important;
  
  /* Text-Farbe und Schriftart */
  color: #000000 !important; /* Dauerhaft Schwarz */
  font-family: inherit !important;
  transition: color 0.2s ease !important;
  
  /* Erzeugt einen isolierten Stapelkontext für den nackten Text */
  isolation: isolate !important; 
}

/* Textfarbe bleibt auch bei Hover schwarz */
button.jet-form-builder__action-button.prButtonBlack:hover {
  color: #000000 !important;
}

/* 2. Hintergrund-Effekt (Der wachsende Kreis) */
button.jet-form-builder__action-button.prButtonBlack::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;
  
  /* Dank isolation: isolate auf dem Button bleibt z-index: -1 HINTER dem Text, 
     bricht aber nicht mehr aus dem Button aus */
  z-index: -1 !important; 
  
  transition: width 0.6s ease !important;
}

button.jet-form-builder__action-button.prButtonBlack:hover::before {
  width: 100% !important;
}

/* 3. Masken-Eigenschaften für den Pfeil (Dauerhaft Schwarz) */
button.jet-form-builder__action-button.prButtonBlack::after {
  content: "" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important; /* Ganz oben über dem Text */
  width: 77.493px !important;
  height: 41.463px !important;
  
  background-color: #000000 !important; /* Pfeil dauerhaft schwarz */
  
  -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;
}



/* ==========================================================================
   ELEMENTOR FLIP-BOX BUTTON (prButtonBlack Variante via Widget-Selektor)
   ========================================================================== */

/* 1. Basis-Design des Flip-Box-Buttons */
.elementor-widget-flip-box a.elementor-flip-box__button {
  position: relative !important;
  
  /* Grid-Layout zwingt das Pseudoelement unter den Text */
  display: inline-grid !important;
  align-items: center !important;
  justify-content: start !important;
  
  height: 74px !important;
  padding-left: 30px !important;
  padding-right: 140px !important; /* Gleicher Platz für den Pfeil */
  overflow: hidden !important;     /* Schneidet den blauen Kreis ab */
  border-radius: 55px !important;
  background-color: transparent !important; /* Entfernt Elementor-Standardhintergrund */
  text-decoration: none !important;
  
  /* Text-Farbe */
  color: #000000 !important; /* Dauerhaft Schwarz */
  transition: color 0.2s ease !important;
  
  /* Erzeugt den isolierten Stapelkontext für den Text */
  isolation: isolate !important; 
}

/* Textfarbe bleibt bei Hover schwarz */
.elementor-widget-flip-box a.elementor-flip-box__button:hover {
  color: #000000 !important;
}

/* 2. Hintergrund-Effekt (Der wachsende Kreis) */
.elementor-widget-flip-box a.elementor-flip-box__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;
  
  /* Bleibt sicher HINTER dem Text dank isolation: isolate */
  z-index: -1 !important; 
  
  transition: width 0.6s ease !important;
}

.elementor-widget-flip-box a.elementor-flip-box__button:hover::before {
  width: 100% !important;
}

/* 3. Der Pfeil (Dauerhaft Schwarz) */
.elementor-widget-flip-box a.elementor-flip-box__button::after {
  content: "" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important; /* Ganz oben */
  width: 77.493px !important;
  height: 41.463px !important;
  
  background-color: #000000 !important; /* Pfeil dauerhaft schwarz */
  
  -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;
}