/* =========================================================
   PNFLOW CTA

   Angepasst auf das Design-System:
   - Eyebrow-Block entfernt, ersetzt durch .pnflow-kicker
   - zwei ungültige Farbwerte repariert (siehe unten)
   - Kontraste auf Icons, Badge und Hover korrigiert
   - Container, z-Index und Übergänge über Tokens
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.pnflow-cta {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: var(--section-py) 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   BACKGROUND
   Weichgezeichnete Kopie des Hintergrundbilds plus
   Abdunklung, beide hinter dem Inhalt.
========================================================= */

.pnflow-cta::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -2;
  background: inherit;
  background-position: center center;
  background-size: cover;
  filter: blur(7px);
  transform: scale(1.01);
}

.pnflow-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--black-rgb), 0.40);
  pointer-events: none;
}


/* =========================================================
   SHAPE DIVIDER
========================================================= */

.pnflow-cta > .elementor-shape-top .elementor-shape-fill,
.pnflow-cta > .elementor-shape-bottom .elementor-shape-fill {
  fill: var(--pnflow-page-bg) !important;
}

.pnflow-cta > .elementor-shape-top,
.pnflow-cta > .elementor-shape-bottom {
  z-index: var(--z-overlay);
}


/* =========================================================
   GLASS CARD
   REPARIERT: stand vorher als
     background: var(--cream-rgb) 0.90;
     border: 1px solid var(--white-rgb), 0.50;
   Das ist kein gültiges CSS – --cream-rgb liefert nur die
   Zahlenfolge "254, 253, 250" und muss in rgba() stehen.
   Beide Deklarationen wurden vom Browser verworfen, die
   Karte hatte also weder Hintergrund noch Rand.
========================================================= */

.pnflow-cta-content {
  position: relative;
  z-index: var(--z-content);
  width: min(var(--container-xl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(54px, 4vw, 72px) clamp(58px, 4.5vw, 82px) !important;
  display: block !important;
  background: rgba(var(--cream-rgb), 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--white-rgb), 0.50);
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(var(--primary-rgb), 0.08);
}


/* =========================================================
   COPY WRAPPER
========================================================= */

.pnflow-cta-copy {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}


/* =========================================================
   INTRO ROW
========================================================= */

.pnflow-cta-intro-row {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.pnflow-cta-intro-copy {
  width: min(100%, var(--container-md)) !important;
  min-width: 0;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 0 !important;
}


/* =========================================================
   TITLE
========================================================= */

.pnflow-cta-title {
  width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.pnflow-cta-title .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-cta-title .elementor-heading-title {
  max-width: var(--container-lg);
  margin: 0 auto !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.04 !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-h1) !important;
  text-align: center !important;
  text-wrap: balance;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.pnflow-cta-text {
  width: min(100%, 600px) !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
}

.pnflow-cta-text .elementor-widget-container,
.pnflow-cta-text p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-body) !important;
  font-family: var(--font-secondary) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  text-align: center !important;
}


/* =========================================================
   CHOICES
========================================================= */

.pnflow-cta-choices {
  width: 100% !important;
  min-width: 0;
  margin: 42px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.pnflow-cta-choice-row {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 26px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}


/* =========================================================
   CHOICE CARD
   REPARIERT: stand vorher als
     background: var(--white-rgb) 0.38 !important;
   Ebenfalls ungültig, die Karten hatten keinen Hintergrund.
========================================================= */

.pnflow-cta-choice {
  position: relative;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  min-height: 200px;
  margin: 0 !important;
  padding: 50px 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: rgba(var(--white-rgb), 0.38) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.14) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.045);
  overflow: visible !important;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.pnflow-cta-choice-content {
  width: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 48px auto;
  align-items: center !important;
  justify-content: center !important;
  column-gap: var(--space-sm) !important;
}


/* =========================================================
   ICON
   Weißes Symbol auf --accent-deep: 3.13:1. Für grafische
   Elemente sind 3:1 gefordert, das reicht.
   Auf dem hellen --accent wären es nur 2.4:1 gewesen.
========================================================= */

.pnflow-cta-choice-icon {
  grid-column: 1;
  grid-row: 1;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

.pnflow-cta-choice-icon .elementor-widget-container,
.pnflow-cta-choice-icon .elementor-icon-wrapper,
.pnflow-cta-choice-icon .elementor-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-cta-choice-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--white) !important;
  background: var(--accent-deep) !important;
  border: 0 !important;
  border-radius: var(--radius-circle) !important;
}

.pnflow-cta-choice-icon .elementor-icon i {
  font-size: 21px !important;
  line-height: 1 !important;
}


/* Bild als Icon */

.pnflow-cta-choice-icon.elementor-widget-image .elementor-widget-container {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-radius: var(--radius-circle) !important;
  overflow: hidden;
}

.pnflow-cta-choice-icon.elementor-widget-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
}


/* =========================================================
   CHOICE TITLE
========================================================= */

.pnflow-cta-choice-title {
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
}

.pnflow-cta-choice-title .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-cta-choice-title .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(21px, 1.4vw, 26px) !important;
  line-height: var(--lh-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}


/* =========================================================
   BADGE "KOSTENFREIES VORGESPRÄCH"
   Hintergrund auf --green-text: Creme auf --secondary-green
   erreichte 4.0:1, bei 11px Versalien sind 4.5:1 nötig.
   Jetzt 5.1:1, der Grünton bleibt erhalten.
========================================================= */

.pnflow-cta-choice-note {
  position: absolute !important;
  top: -12px;
  right: 18px;
  z-index: var(--z-raised);
  width: auto !important;
  margin: 0 !important;
  padding: 12px var(--space-sm) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  background-color: var(--green-text) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.16);
  pointer-events: none;
}

.pnflow-cta-choice-note .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Display-Element, bleibt bewusst in --font-primary */
.pnflow-cta-choice-note p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cream) !important;
  font-family: var(--font-primary) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}


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

.pnflow-cta-choice-button {
  width: auto !important;
  min-width: 0 !important;
  margin: auto 0 0 !important;
  padding: 20px 0 0 !important;
  align-self: center !important;
}

.pnflow-cta-choice-button .elementor-widget-container,
.pnflow-cta-choice-button .elementor-button-wrapper {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-cta-choice-button .elementor-button {
  width: auto !important;
  min-width: 0 !important;
  padding: 12px 20px !important;
  white-space: nowrap;
}


/* Der Pfeil kommt aus buttons.css, hier nur der größere Abstand */

.pnflow-cta-choice-button .elementor-button-text::after {
  margin-left: 12px;
  font-size: 1.1em;
}


/* =========================================================
   HOVER
   Der Outline-Button füllt sich beim Karten-Hover mit
   --accent-deep und weißer Schrift (3.13:1, gilt ab 19px/700
   wie in buttons.css gesetzt).
   Der Primary-Button folgt dem Hover aus buttons.css.
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .pnflow-cta-choice:hover {
    transform: scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.44) !important;
    box-shadow: 0 14px 30px rgba(var(--primary-rgb), 0.08);
  }

  .pnflow-cta-choice:hover .pnflow-cta-choice-button .elementor-button-text::after {
    transform: translateX(2px);
  }

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

  .pnflow-cta-choice:hover .pnflow-button-outline .elementor-button {
    color: var(--white) !important;
    background-color: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
  }
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {
  .pnflow-cta-content {
    padding: 48px !important;
  }

  .pnflow-cta-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm) !important;
  }
  .pnflow-cta-choice {
    padding: 44px 24px 24px !important;
  }

  .pnflow-cta-choice-content {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px !important;
  }
  .pnflow-cta-choice-icon,
  .pnflow-cta-choice-icon .elementor-widget-container,
  .pnflow-cta-choice-icon .elementor-icon-wrapper,
  .pnflow-cta-choice-icon .elementor-icon,
  .pnflow-cta-choice-icon.elementor-widget-image .elementor-widget-container {
    width: 44px !important;
    height: 44px !important;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .pnflow-cta {
    padding: var(--section-py) 0 !important;
    background-position: center center !important;
  }

  .pnflow-cta-content {
    padding: 46px 38px !important;
    border-radius: 28px;
  }

  .pnflow-cta-intro-copy {
    width: min(100%, 760px) !important;
  }

  .pnflow-cta-title .elementor-heading-title {
    max-width: 760px;
    font-size: clamp(40px, 5.2vw, 52px) !important;
    line-height: 1.06 !important;
  }

  .pnflow-cta-text {
    width: min(100%, 620px) !important;
  }
  .pnflow-cta-text p {
    font-size: 17px !important;
  }

  .pnflow-cta-choices {
    margin-top: 38px !important;
  }
  .pnflow-cta-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
  }
  .pnflow-cta-choice {
    min-height: 210px;
    padding: 42px 24px 24px !important;
  }
  .pnflow-cta-choice:last-child {
    grid-column: 1 / -1;
    width: min(100%, calc(50% - 9px)) !important;
    justify-self: center !important;
  }

  .pnflow-cta-choice-note {
    top: -12px;
    right: var(--space-sm);
    padding: 10px 13px !important;
  }
  .pnflow-cta-choice-note p {
    font-size: 10px !important;
  }

  .pnflow-cta-choice-button {
    padding-top: 22px !important;
  }
}


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

@media (max-width: 767px) {
  .pnflow-cta {
    padding: var(--section-py) var(--gutter) !important;
    background-position: center center !important;
  }

  .pnflow-cta-content {
    width: 100% !important;
    padding: 38px 22px 28px !important;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .pnflow-cta-intro-copy {
    width: 100% !important;
  }

  .pnflow-cta-title {
    margin-top: 18px !important;
  }
  .pnflow-cta-title .elementor-heading-title {
    max-width: 100%;
    font-size: clamp(34px, 9.2vw, 43px) !important;
    line-height: 1.07 !important;
    letter-spacing: var(--ls-h2) !important;
  }

  .pnflow-cta-text {
    width: 100% !important;
    margin-top: 18px !important;
  }
  .pnflow-cta-text p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .pnflow-cta-choices {
    margin-top: 32px !important;
  }
  .pnflow-cta-choice-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm) !important;
  }

  .pnflow-cta-choice,
  .pnflow-cta-choice:last-child {
    grid-column: auto;
    width: 100% !important;
    min-height: 0;
    padding: 26px 20px 22px !important;
  }

  .pnflow-cta-choice-content {
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: 42px minmax(0, 1fr);
    justify-content: stretch !important;
    column-gap: 13px !important;
  }

  .pnflow-cta-choice-icon,
  .pnflow-cta-choice-icon .elementor-widget-container,
  .pnflow-cta-choice-icon .elementor-icon-wrapper,
  .pnflow-cta-choice-icon .elementor-icon,
  .pnflow-cta-choice-icon.elementor-widget-image .elementor-widget-container {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  .pnflow-cta-choice-icon .elementor-icon i {
    font-size: 18px !important;
  }

  .pnflow-cta-choice-title {
    width: 100% !important;
  }
  .pnflow-cta-choice-title .elementor-heading-title {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }

  .pnflow-cta-choice-button {
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
  }
  .pnflow-cta-choice-button .elementor-widget-container,
  .pnflow-cta-choice-button .elementor-button-wrapper,
  .pnflow-cta-choice-button .elementor-button {
    width: 100% !important;
  }
  .pnflow-cta-choice-button .elementor-button {
    min-height: 48px;
    padding: 11px var(--space-sm) !important;
    justify-content: center !important;
    white-space: normal;
  }

  .pnflow-cta-choice-note {
    top: -10px;
    right: 12px;
    max-width: calc(100% - 24px);
    padding: var(--space-xs) 10px !important;
  }
  .pnflow-cta-choice-note .elementor-widget-container {
    gap: 6px !important;
  }
  .pnflow-cta-choice-note p {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;
    white-space: normal;
    text-align: center;
  }
}


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

@media (max-width: 480px) {
  .pnflow-cta {
    padding: 68px 14px 72px !important;
  }
  .pnflow-cta-content {
    padding: 34px 18px 24px !important;
    border-radius: 22px;
  }

  .pnflow-cta-title .elementor-heading-title {
    font-size: clamp(31px, 9vw, 39px) !important;
  }
  .pnflow-cta-text p {
    font-size: 15px !important;
  }

  .pnflow-cta-choice {
    padding: 25px 18px 20px !important;
  }
  .pnflow-cta-choice-title .elementor-heading-title {
    font-size: 20px !important;
  }

  .pnflow-cta-choice-note {
    right: 10px;
    max-width: calc(100% - 20px);
  }
}