/* =========================================================
   PNFLOW INTRO / ÜBER PNFLOW

   Angepasst auf das Design-System:
   - Eyebrow-Block entfernt, ersetzt durch .pnflow-kicker
   - Container und Abstände über Tokens
   - Claim-Farben als Textvarianten (Kontrast)
   - Gold-CTA mit dunkelblauer statt cremefarbener Schrift
========================================================= */


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

.pnflow-intro {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: var(--section-py-sm) 0 var(--section-py) !important;
  background-color: var(--pnflow-page-bg);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}


/* =========================================================
   CONTENT
   Vorher: min(1500px, calc(100% - 160px)) – 1500px war kein
   Token. Jetzt auf --container-xl, damit die Sektion dieselbe
   Breite hat wie der Rest der Seite.
========================================================= */

.pnflow-intro-content {
  width: min(var(--container-xl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-xl) !important;
}


/* =========================================================
   TOP
========================================================= */

.pnflow-intro-top {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  align-items: center !important;
  gap: clamp(48px, 5vw, 90px) !important;
}


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

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


/* =========================================================
   TITLE
   Vorher clamp(40px, 2vw, 58px): 2vw ergibt erst ab rund
   2900px Viewport mehr als 40px, die Überschrift war also
   auf jedem normalen Bildschirm konstant 40px groß und ist
   nie mitgewachsen. Mit 3.4vw skaliert sie wie vorgesehen.
========================================================= */

.pnflow-intro-title {
  width: 100% !important;
  margin: var(--space-md) 0 0 !important;
  padding: 0 !important;
}

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

.pnflow-intro-title .elementor-heading-title {
  max-width: 680px;
  margin: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(40px, 3.4vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em !important;
}

.pnflow-intro-title .elementor-heading-title strong {
  font-weight: 600 !important;
}


/* =========================================================
   LEAD
========================================================= */

.pnflow-intro-lead {
  position: relative;
  width: min(100%, 680px) !important;
  margin: 42px 0 0 !important;
  padding: 22px 0 0 !important;
}

.pnflow-intro-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 3px;
  background-color: var(--accent);
}

.pnflow-intro-lead .elementor-widget-container,
.pnflow-intro-lead p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35em;
}


/* =========================================================
   VISUAL
========================================================= */

.intro-visual {
  position: relative;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}


/* =========================================================
   IMAGE WRAP
========================================================= */

.intro-image-wrap {
  position: relative;
  width: min(100%, 650px) !important;
  margin: -50px 22px 0 0 !important;
  padding: 0 !important;
  overflow: visible;
  isolation: isolate;
}


/* =========================================================
   IMAGE

   Hoehe: Vorher feste 410px. Das Portrait ist 683x1024, in
   einem 477x410-Kasten waren damit nur 57 % der Bildhoehe zu
   sehen – und weil object-position auf 30 % stand, begann das
   Fenster erst bei 13 %. Peters Kopf faengt aber schon bei
   2,4 % an, oben wurde also der Haaransatz angeschnitten.

   object-position: center 0% holt das Fenster an die
   Bildoberkante. Mehr Luft ueber dem Kopf gibt das Foto nicht
   her – ueber ihm liegen nur diese 2,4 %, jeder groessere Wert
   schneidet ihn wieder an.

   Die groessere Hoehe zeigt jetzt 0–70 % statt 13–70 %, also
   Kopf bis Unterarm statt Haaransatz bis Unterarm. clamp()
   statt Festwert, damit der Kasten mit dem Viewport mitgeht;
   35vw liegt bei 1440px mit 504px klar ueber dem Minimum, der
   mittlere Wert greift also auf normalen Bildschirmen.
========================================================= */

.intro-image-wrap-img {
  position: relative;
  z-index: var(--z-raised);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.intro-image-wrap-img .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.intro-image-wrap-img img {
  display: block;
  width: 100% !important;
  height: clamp(420px, 35vw, 520px) !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center 0%;
  border-radius: var(--radius-lg) !important;
}


/* =========================================================
   BADGE
========================================================= */

.intro-badge {
  position: absolute;
  z-index: var(--z-overlay);
  left: -72px;
  bottom: -20px;
  width: 180px !important;
  min-height: 180px !important;
  margin: 0 !important;
  padding: 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  background-color: var(--secondary-blue) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 42px rgba(var(--primary-rgb), 0.14);
}


/* =========================================================
   BADGE NUMBER
========================================================= */

.intro-badge-number {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.intro-badge-number .elementor-widget-container,
.intro-badge-number p {
  margin: 0 !important;
  padding: 0 !important;
}

.intro-badge-number p {
  color: var(--white) !important;
  font-family: var(--font-primary) !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
}

.intro-badge-number::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin: var(--space-sm) 0 14px;
  background-color: var(--accent);
}


/* =========================================================
   BADGE LABEL
========================================================= */

.intro-badge-label {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.intro-badge-label .elementor-widget-container,
.intro-badge-label p {
  margin: 0 !important;
  padding: 0 !important;
}

.intro-badge-label p {
  color: var(--white) !important;
  font-family: var(--font-secondary) !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  text-align: left !important;
}


/* =========================================================
   PATH GRID
   Die vierte Spalte steht auf auto statt auf festen 320px.
   Grund: Sie ist für die Gold-Karte .pnflow-intro-path-cta
   gedacht. Steht die Karte nicht im Elementor, bleibt eine
   feste Spur trotzdem stehen und frisst 320px – die drei
   Pfade teilen sich dann den Rest. Eine auto-Spur ohne Kind
   ist dagegen 0 breit. Mit Karte greift deren eigene Breite
   von 320px, das Layout bleibt also unverändert.
========================================================= */

.pnflow-intro-paths {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 32px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch !important;
  gap: 0 !important;
  border-top: 2px solid rgba(var(--accent-rgb), 0.70);
}


/* Elementor-Grid-Kinder neutralisieren */

.pnflow-intro-paths > .pnflow-intro-path {
  --width: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}


/* =========================================================
   PATH
========================================================= */

.pnflow-intro-path {
  position: relative;
  min-width: 0;
  margin: 0 !important;
  padding: 0 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.pnflow-intro-path:first-child {
  padding-left: 0 !important;
  padding-right: 44px !important;
}

.pnflow-intro-path:nth-child(2),
.pnflow-intro-path:nth-child(3) {
  padding-left: 44px !important;
  padding-right: 44px !important;
}


/* Vertikale Trennlinien */

.pnflow-intro-path:nth-child(2),
.pnflow-intro-path:nth-child(3),
.pnflow-intro-path-cta {
  border-left: 1px solid rgba(var(--accent-rgb), 0.30);
}


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

.pnflow-intro-path-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-title .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}


/* Goldlinie unter dem Titel */

.pnflow-intro-path-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background-color: var(--accent);
}


/* =========================================================
   PATH TITLE FARBEN
   Textvarianten statt der reinen Markenfarben.
   --claim-entfalten (Gold) erreichte als Text nur 2.3:1.
========================================================= */

.pnflow-intro-path-title-atmen .elementor-heading-title {
  color: var(--claim-atmen-text) !important;
}
.pnflow-intro-path-title-bewegen .elementor-heading-title {
  color: var(--claim-bewegen-text) !important;
}
.pnflow-intro-path-title-entfalten .elementor-heading-title {
  color: var(--claim-entfalten-text) !important;
}
.pnflow-intro-path-title-erleben .elementor-heading-title {
  color: var(--claim-erleben-text) !important;
}


/* =========================================================
   PATH TEXT
========================================================= */

.pnflow-intro-path-text {
  width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-text .elementor-widget-container,
.pnflow-intro-path-text p {
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-text p {
  width: 100%;
  max-width: 300px;
  color: var(--text-body) !important;
  font-family: var(--font-secondary) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}


/* =========================================================
   CTA PATH · GOLDKARTE
   Die Breite steht hier an der Karte, nicht mehr an der
   Grid-Spur – siehe Kommentar bei .pnflow-intro-paths.
========================================================= */

.pnflow-intro-path-cta {
  width: 320px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 5px !important;
  align-self: center !important;
  justify-self: stretch !important;
  background-color: var(--accent-deep);
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}


/* CTA TITLE
   Creme auf --accent-deep: 3.08:1. Der Titel steht auf 30px
   und liegt damit über der Schwelle für große Schrift. */

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

.pnflow-intro-path-cta .pnflow-intro-path-title .elementor-heading-title {
  max-width: none !important;
  color: var(--claim-erleben-text) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.pnflow-intro-path-cta .pnflow-intro-path-title::after {
  content: none !important;
}


/* =========================================================
   INTRO CTA BUTTON
   Weiß auf --accent-deep: 3.13:1, bei 22px/800 erfüllt.
========================================================= */

.pnflow-intro-path-button {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-button .elementor-widget-container,
.pnflow-intro-path-button .elementor-button-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-intro-path-button .elementor-button {
  width: 100% !important;
  min-height: 100px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--white) !important;
  background-color: var(--accent-deep) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  font-family: var(--font-primary) !important;
  font-size: 22px !important;
  line-height: 2em !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

.pnflow-intro-path-button .elementor-button-text {
  color: var(--white) !important;
  display: inline-flex;
  align-items: center;
}

.pnflow-intro-path-button .elementor-button-text::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1;
  transform: none;
  transition: transform var(--transition-base);
}

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


/* Tastaturfokus auf der Goldkarte */

.pnflow-intro-path-button .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);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .pnflow-intro-path-cta:hover {
    transform: translateX(3px);
    box-shadow: 0 18px 60px rgba(var(--primary-rgb), 0.18);
  }
}


/* =========================================================
   TABLET
   Die Content-Breite kommt jetzt aus --gutter-xl und braucht
   hier keine eigene Regel mehr.

   Die Bildhoehe bleibt wie sie war: Bei 277px Kastenbreite
   zeigen 320px bereits 0–77 % des Portraits, hier fehlt also
   nichts. Das object-position: center 0% erbt der Breakpoint
   aus der Basisregel.
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .pnflow-intro-content {
    gap: 54px !important;
  }

  .pnflow-intro-top {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 54px !important;
    align-items: center !important;
  }

  .pnflow-intro-title {
    margin-top: 24px !important;
  }
  .pnflow-intro-title .elementor-heading-title {
    max-width: 560px;
    font-size: clamp(38px, 4.8vw, 48px) !important;
  }

  .pnflow-intro-lead {
    margin-top: 32px !important;
    padding-top: 20px !important;
  }
  .pnflow-intro-lead::before {
    width: 64px;
  }

  .intro-image-wrap {
    width: 100% !important;
    margin: 0 !important;
  }
  .intro-image-wrap-img img {
    height: clamp(320px, 39vw, 390px) !important;
  }

  .intro-badge {
    left: -30px;
    bottom: -24px;
    width: 145px !important;
    min-height: 145px !important;
    padding: 21px 18px !important;
  }
  .intro-badge-number p {
    font-size: 40px !important;
  }
  .intro-badge-number::after {
    width: 32px;
    margin: 13px 0 11px;
  }
  .intro-badge-label p {
    font-size: 18px !important;
  }

  .pnflow-intro-paths {
    padding-top: 30px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .pnflow-intro-path {
    padding: 30px 32px !important;
    border: 0 !important;
  }
  .pnflow-intro-path:first-child {
    padding: 30px 32px 30px 0 !important;
  }
  .pnflow-intro-path:nth-child(2) {
    padding: 30px 0 30px 32px !important;
    border-left: 1px solid rgba(var(--accent-rgb), 0.30) !important;
  }
  .pnflow-intro-path:nth-child(3) {
    padding: 30px 32px 30px 0 !important;
    border-top: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  }

  .pnflow-intro-path-cta {
    width: auto !important;
    padding: 0 !important;
    border-top: 1px solid rgba(var(--accent-rgb), 0.22) !important;
    border-left: 1px solid rgba(var(--accent-rgb), 0.30) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Auf transparentem Grund wieder die helle Textvariante */
  .pnflow-intro-path-cta .pnflow-intro-path-title .elementor-heading-title {
    color: var(--claim-entfalten-text) !important;
  }

  .pnflow-intro-path-title .elementor-heading-title {
    font-size: 23px !important;
  }
  .pnflow-intro-path-text p {
    max-width: none;
    font-size: 18px !important;
  }

  .pnflow-intro-path-button {
    height: 100% !important;
    padding: 30px 0 30px 32px !important;
  }
  .pnflow-intro-path-button .elementor-widget-container,
  .pnflow-intro-path-button .elementor-button-wrapper {
    height: 100% !important;
  }
  .pnflow-intro-path-button .elementor-button {
    min-height: 100% !important;
    height: 100% !important;
    padding: 28px 22px !important;
    font-size: 19px !important;
    line-height: 1.35 !important;
  }
}


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

@media (max-width: 767px) {
  .pnflow-intro {
    padding: var(--section-py-sm) 0 var(--section-py) !important;
  }

  .pnflow-intro-content {
    gap: 46px !important;
  }

  .pnflow-intro-top {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }
  .pnflow-intro-copy {
    width: 100% !important;
  }

  .pnflow-intro-title {
    margin-top: 22px !important;
  }
  .pnflow-intro-title .elementor-heading-title {
    max-width: 100%;
    font-size: clamp(34px, 9vw, 42px) !important;
  }

  .pnflow-intro-lead {
    width: 100% !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
  }
  .pnflow-intro-lead::before {
    width: 58px;
  }

  .intro-visual {
    justify-content: stretch !important;
  }
  .intro-image-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 52px !important;
  }

  /* Der Kasten ist hier querformatig, das Portrait hochkant –
     sichtbar sind rund 0–53 %, also Kopf und Schultern. Auch
     hier muss das Fenster an der Oberkante sitzen, sonst wird
     der Kopf angeschnitten. */
  .intro-image-wrap-img img {
    height: clamp(260px, 72vw, 340px) !important;
    object-position: center 0%;
    border-radius: clamp(20px, 5vw, var(--radius-lg)) !important;
  }

  .intro-badge {
    left: 20px;
    bottom: 0;
    width: auto !important;
    min-width: 150px !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    border-radius: 16px !important;
  }
  .intro-badge-number {
    width: auto !important;
    flex: 0 0 auto;
  }
  .intro-badge-number p {
    font-size: 34px !important;
  }
  .intro-badge-number::after {
    display: none;
  }
  .intro-badge-label {
    width: auto !important;
  }
  .intro-badge-label p {
    max-width: 130px;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .pnflow-intro-paths {
    padding-top: 0 !important;
    grid-template-columns: 1fr !important;
    border-top: 2px solid rgba(var(--accent-rgb), 0.70);
  }

  .pnflow-intro-path,
  .pnflow-intro-path:first-child,
  .pnflow-intro-path:nth-child(2),
  .pnflow-intro-path:nth-child(3) {
    width: 100% !important;
    padding: 28px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.24) !important;
  }

  .pnflow-intro-path-title .elementor-heading-title {
    font-size: 22px !important;
  }
  .pnflow-intro-path-title::after {
    width: 30px;
    margin-top: 8px;
  }

  .pnflow-intro-path-text {
    margin-top: var(--space-sm) !important;
  }
  .pnflow-intro-path-text p {
    max-width: 100%;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .pnflow-intro-path-cta {
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    background-color: var(--accent-deep) !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Auf --accent-deep wieder Creme */
  .pnflow-intro-path-cta .pnflow-intro-path-title .elementor-heading-title {
    color: var(--claim-erleben-text) !important;
  }

  /* 19px statt 18px: unter 18.66px fett gilt die strengere Schwelle */
  .pnflow-intro-path-button .elementor-button {
    min-height: 76px !important;
    padding: 18px 20px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-lg) !important;
  }
}


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

@media (max-width: 480px) {
  .pnflow-intro-content {
    gap: var(--space-lg) !important;
  }

  .pnflow-intro-title .elementor-heading-title {
    font-size: clamp(31px, 9.5vw, 38px) !important;
  }

  .intro-image-wrap {
    padding-bottom: 48px !important;
  }
  .intro-image-wrap-img img {
    height: clamp(240px, 70vw, 310px) !important;
  }

  .intro-badge {
    left: 14px;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .intro-badge-number p {
    font-size: 31px !important;
  }
  .intro-badge-label p {
    max-width: 120px;
    font-size: 15px !important;
  }

  .pnflow-intro-path,
  .pnflow-intro-path:first-child,
  .pnflow-intro-path:nth-child(2),
  .pnflow-intro-path:nth-child(3) {
    padding: 25px 0 !important;
  }

  .pnflow-intro-path-title .elementor-heading-title {
    font-size: 20px !important;
  }
  .pnflow-intro-path-text p {
    font-size: 16px !important;
  }

  .pnflow-intro-path-cta {
    margin-top: var(--space-md) !important;
  }
  .pnflow-intro-path-button .elementor-button {
    min-height: 72px !important;
    font-size: 19px !important;
  }
}