/* =========================================================
   PNFLOW BUTTON SYSTEM
========================================================= */


/* =========================================================
   GEMEINSAME BASIS
========================================================= */

.pnflow-button-primary .elementor-button,
.pnflow-button-outline .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px;
  padding: 12px clamp(22px, 2vw, 30px) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(19px, 1.2vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.pnflow-button-primary .elementor-button-content-wrapper,
.pnflow-button-outline .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* =========================================================
   PRIMARY BUTTON
   Sonnengelb mit weißer Schrift, umgesetzt über --accent-deep
   (#c38529): Weiß darauf 3.13:1. Diese Schwelle gilt erst ab
   19px/700 – deshalb sind Größe und Gewicht oben fest gesetzt
   und dürfen nicht kleiner werden.

   Falls die Buttons leichter wirken sollen (z. B. 17px/500),
   muss die Fläche auf --accent-dark (#8f6220) wechseln, dort
   sind es 5.34:1 bei jeder Größe. Eine Zeile, siehe unten.
========================================================= */

.pnflow-button-primary .elementor-button {
  min-width: clamp(190px, 16vw, 245px);
  color: var(--white) !important;
  background-color: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}

.pnflow-button-primary .elementor-button:hover,
.pnflow-button-primary .elementor-button:focus {
  color: var(--white) !important;
  background-color: var(--deep-blue) !important;
  border-color: var(--deep-blue) !important;
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.pnflow-button-outline .elementor-button {
  min-width: 170px;
  color: var(--primary) !important;
  background-color: transparent !important;
  border-color: rgba(var(--primary-rgb), var(--alpha-medium)) !important;
}

.pnflow-button-outline .elementor-button:hover,
.pnflow-button-outline .elementor-button:focus {
  color: var(--accent-text) !important;
  background-color: rgba(var(--cream-rgb), var(--alpha-medium)) !important;
  border-color: rgba(var(--accent-text-rgb), var(--alpha-strong)) !important;
}


/* =========================================================
   BUTTONS AUF DUNKLEN FLÄCHEN
   Modifier pnflow-button-on-dark zusätzlich vergeben.
========================================================= */

.pnflow-button-on-dark.pnflow-button-outline .elementor-button {
  color: var(--cream) !important;
  border-color: rgba(var(--cream-rgb), var(--alpha-medium)) !important;
}
.pnflow-button-on-dark.pnflow-button-outline .elementor-button:hover,
.pnflow-button-on-dark.pnflow-button-outline .elementor-button:focus {
  color: var(--accent) !important;
  background-color: rgba(var(--cream-rgb), var(--alpha-soft)) !important;
  border-color: rgba(var(--accent-rgb), var(--alpha-strong)) !important;
}


/* =========================================================
   PFEIL
   aria-hidden ist nicht möglich, daher ::after –
   dekorative Pseudo-Elemente werden von Screenreadern
   ohnehin nicht vorgelesen.
========================================================= */

.pnflow-button-primary .elementor-button-text,
.pnflow-button-outline .elementor-button-text {
  display: inline-flex;
  align-items: center;
}

.pnflow-button-primary .elementor-button-text::after,
.pnflow-button-outline .elementor-button-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  line-height: 1;
  transition: transform var(--transition-base);
}

.pnflow-button-primary .elementor-button:hover .elementor-button-text::after,
.pnflow-button-primary .elementor-button:focus .elementor-button-text::after,
.pnflow-button-outline .elementor-button:hover .elementor-button-text::after,
.pnflow-button-outline .elementor-button:focus .elementor-button-text::after {
  transform: translateX(3px);
}


/* =========================================================
   TASTATURFOKUS
   Doppelring aus Creme und Dunkelblau, dadurch auf hellen
   UND dunklen Flächen sichtbar. Der transparente Outline
   bleibt für den Windows-Kontrastmodus stehen.
========================================================= */

.pnflow-button-primary .elementor-button:focus-visible,
.pnflow-button-outline .elementor-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--primary);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .pnflow-button-primary .elementor-button,
  .pnflow-button-outline .elementor-button {
    min-height: 48px;
    padding: 12px 20px !important;
    font-size: 19px !important;
  }
}


/* =========================================================
   MODIFIER SMALL
   Kompakter Button fuer enge Flaechen, zum Beispiel in
   Karten. Zusaetzlich zu pnflow-button-outline oder
   pnflow-button-primary vergeben.

   min-width faellt weg, sonst zwingen die 170px bzw. 190px
   von oben den Button auch in einer schmalen Karte in die
   Breite.

   Die doppelte Klasse im Selektor ist Absicht: dadurch
   gewinnt der Modifier auch gegen den Mobile-Block darueber,
   ohne dass dort etwas ergaenzt werden muss.

   Der Pfeil bleibt automatisch erhalten, er haengt an
   .elementor-button-text der Basisklassen.
========================================================= */

.pnflow-button-primary.pnflow-button-sm .elementor-button,
.pnflow-button-outline.pnflow-button-sm .elementor-button {
  min-width: 0 !important;
  min-height: 40px;
  padding: 9px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Kleiner heisst auch: weniger Kontrast pro Fläche. Weiss auf
   --accent-deep traegt erst ab 19px/700, deshalb wechselt die
   kleine Variante auf --accent-dark (5.34:1 in jeder Groesse).
   Genau der Fall, der oben im Primary-Block beschrieben ist. */

.pnflow-button-primary.pnflow-button-sm .elementor-button {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.pnflow-button-primary.pnflow-button-sm .elementor-button:hover,
.pnflow-button-primary.pnflow-button-sm .elementor-button:focus {
  background-color: var(--deep-blue) !important;
  border-color: var(--deep-blue) !important;
}

.pnflow-button-primary.pnflow-button-sm .elementor-button-text::after,
.pnflow-button-outline.pnflow-button-sm .elementor-button-text::after {
  margin-left: 8px;
}