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

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


/* =========================================================
   CONTENT
========================================================= */

.pnflow-highlight-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: 0 !important;
}

/* =========================================================
   INTRO
   Der Titel nutzt bereits .pnflow-section-title aus
   typography.css, hier steht nur noch das Layout.
========================================================= */

.pnflow-highlight-intro {
  width: 100% !important;
  margin: 0 0 46px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: clamp(23px, 2.3vw, 33px) !important;
}

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

.pnflow-highlight-lead-text {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-highlight-lead-text p {
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--text-body) !important;
  font-family: var(--font-secondary) !important;
  font-size: 20px !important;
  line-height: var(--lh-body) !important;
  font-weight: 400 !important;
  text-align: left !important;
}


/* =========================================================
   GRID
========================================================= */

.pnflow-highlight-grid {
  width: 100% !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch !important;
  gap: clamp(24px, 2.5vw, 36px) !important;
  border: 0;
}


/* =========================================================
   CARD
========================================================= */

.pnflow-highlight-card {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: rgba(var(--cream-rgb), 0.92) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.12) !important;
  border-radius: var(--radius-lg) !important;
  overflow: visible;
  transition: transform var(--transition-slow), box-shadow var(--transition-base), border-color var(--transition-base);
}


/* =========================================================
   CARD HOVER
   Der Button bekam weiße Schrift auf Gold (2.4:1).
   Jetzt Dunkelblau (6.4:1).
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .pnflow-highlight-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.5) !important;
    box-shadow: 0 18px 60px rgba(var(--primary-rgb), 0.15);
  }
}

/* =========================================================
   CARD BODY
========================================================= */

.pnflow-highlight-card-body {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(36px, 3vw, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
}


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

.pnflow-highlight-card-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start;
}

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

.pnflow-highlight-card-title .elementor-heading-title {
  max-width: 320px;
  min-height: 2.3em;
  margin: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  line-height: var(--lh-heading) !important;
  font-weight: 700;
  text-transform: uppercase;
}

.pnflow-highlight-card-title .elementor-widget-container::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin-top: 15px;
  background-color: rgba(var(--accent-rgb), 0.75);
}


/* =========================================================
   CARD SUBTITLE
========================================================= */

.pnflow-highlight-card-subtitle {
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 0 0 !important;
  align-self: start;
}

.pnflow-highlight-card-subtitle .elementor-widget-container {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-highlight-card-subtitle .elementor-heading-title {
  margin: 0 !important;
  color: var(--secondary-blue) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(20px, 2vw, 25px) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}


/* =========================================================
   CARD TEXT
========================================================= */

/* Der Textblock wächst und schiebt den Kartenfuß nach unten.
   Dadurch stehen die Buttons aller drei Karten auf einer
   Linie – egal ob eine Karte einen Hinweis hat oder nicht. */

.pnflow-highlight-card-text {
  width: 100% !important;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  flex: 1 1 auto !important;
  align-self: start;
}

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

.pnflow-highlight-card-text p {
  color: var(--text-body);
  font-family: var(--font-secondary);
}

/* =========================================================
   WISSEN CTA
   Abschluss-Sektion, identisch auf allen
   "Gut zu wissen"-Unterseiten.
========================================================= */

.page-wissen-cta {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, var(--primary) 0%, var(--deep-blue) 100%);
  overflow: hidden;
}

/* Dekorativer Goldschimmer hinter dem Inhalt. Bewusst auf
   .e-con-inner gesetzt und nicht auf den Container selbst:
   Elementor belegt ::before auf e-con bereits fuer die
   Hintergrund-Ueberlagerung. */

.page-wissen-cta > .e-con-inner {
  position: relative;
  z-index: 0;
}

.page-wissen-cta > .e-con-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(760px, 120%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0) 68%);
  pointer-events: none;
}

/* Der Textbaustein traegt in Elementor nur den Modifier
   --on-dark, nicht die Basisklasse pnflow-section-text.
   Farbe kommt dadurch aus typography.css, Breite und
   Schriftgroesse fehlen und werden hier ergaenzt. */

.page-wissen-cta .pnflow-section-text--on-dark,
.page-wissen-cta .pnflow-section-text--on-dark p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* =========================================================
   HUB BREADCRUMBS
   flex-wrap, weil "Atmung verstehen" eine dritte Ebene
   einfuehrt. Ohne Umbruch bricht der Text innerhalb der
   einzelnen Eintraege und die Zeile wird unleserlich.
========================================================= */

.hub-breadcrumbs {
  width: 100%;
  margin: 0 !important;
  padding: 10px 0 !important;
  background-color: var(--accent-deep);
}

.hub-breadcrumbs .elementor-widget-container,
.hub-breadcrumbs nav {
  width: 100%;
}

.hub-breadcrumbs .hfe-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-breadcrumbs .hfe-breadcrumbs-item,
.hub-breadcrumbs .hfe-breadcrumbs-separator {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-breadcrumbs,
.hub-breadcrumbs a,
.hub-breadcrumbs a:hover,
.hub-breadcrumbs a:focus,
.hub-breadcrumbs .hfe-breadcrumbs-text {
  font-family: var(--font-primary) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.hub-breadcrumbs .hfe-breadcrumbs-text,
.hub-breadcrumbs .hfe-breadcrumbs-separator-icon,
.hub-breadcrumbs .hfe-breadcrumbs-separator-icon i {
  color: var(--cream) !important;
}

.hub-breadcrumbs a {
  color: var(--cream) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.hub-breadcrumbs a .hfe-breadcrumbs-text {
  color: inherit !important;
  transition: color var(--transition-fast) !important;
}

.hub-breadcrumbs a:hover,
.hub-breadcrumbs a:focus,
.hub-breadcrumbs a:hover .hfe-breadcrumbs-text,
.hub-breadcrumbs a:focus .hfe-breadcrumbs-text {
  color: var(--secondary-blue) !important;
  text-decoration: none !important;
}

.hub-breadcrumbs .hfe-breadcrumbs-last .hfe-breadcrumbs-text {
  color: var(--cream) !important;
}

.hub-breadcrumbs .hfe-breadcrumbs-separator-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.hub-breadcrumbs .hfe-breadcrumbs-separator-icon i {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* =========================================================
   BREADCRUMBS · MOBILE
   Drei Ebenen brauchen auf schmalen Geraeten weniger
   Schriftgroesse und weniger Abstand. Umgebrochen wird
   ueber flex-wrap oben.
========================================================= */

@media (max-width: 767px) {
  .hub-breadcrumbs .hfe-breadcrumbs {
    gap: 8px;
  }

  .hub-breadcrumbs,
  .hub-breadcrumbs a,
  .hub-breadcrumbs .hfe-breadcrumbs-text {
    font-size: 15px !important;
  }
}

/* =========================================================
   MERKMALSLISTE
   Kompakte Faktenliste aus Merkmal und Wert, zum Beispiel
   fuer die Gegenueberstellung von Formaten.

   Bewusst unabhaengig vom Kartentyp: die Klasse kommt auf
   das Text-Widget und funktioniert dadurch sowohl in
   .hub-page-grid-card als auch in .pnflow-highlight-card.

   In Elementor ein einziges Text-Widget je Karte, im
   Code-Modus. Jedes <li> ist eine Zeile aus Merkmal und
   Wert, das <strong> darin wird zum Label - im Editor also
   NICHT zusaetzlich fett oder gross formatieren, das macht
   diese Datei.

   Die Trennlinie sitzt oben, damit die letzte Zeile ohne
   Sonderregel buendig mit dem Kartenfuss abschliesst.
========================================================= */

.pnflow-facts {
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  align-self: start;
}

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

.pnflow-facts ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pnflow-facts li {
  margin: 0 !important;
  padding: 14px 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  border-top: 1px solid rgba(var(--primary-rgb), 0.12);
  color: var(--text-body);
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.5;
}

.pnflow-facts li:last-child {
  padding-bottom: 0 !important;
}

.pnflow-facts li strong {
  color: var(--accent-text);
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* Folgt auf die Liste ein Button, bekommt er hier seinen
   Abstand - ohne dass am Widget eine weitere Klasse noetig
   waere. Weil .pnflow-facts flex-grow hat, wandert der Button
   in kuerzeren Karten zusaetzlich nach unten. Dadurch stehen
   die Buttons aller drei Karten auf einer Linie, auch wenn
   eine Liste eine Zeile mehr braucht. */

.pnflow-facts + .elementor-widget-button {
  margin-top: 28px !important;
}


/* =========================================================
   MERKMALSLISTE · TABLET
   Drei Karten nebeneinander lassen der Wertespalte zu wenig
   Platz, deshalb steht das Label hier ueber dem Wert.
========================================================= */

@media (max-width: 1024px) {
  .pnflow-facts li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0 !important;
    font-size: 15px;
  }
}


/* =========================================================
   MERKMALSLISTE · MOBILE
   Die Karten stehen wieder allein in der Zeile, deshalb
   passen Label und Wert erneut nebeneinander.
========================================================= */

@media (max-width: 767px) {
  .pnflow-facts li {
    grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 14px 0 !important;
    font-size: 16px;
  }
}


/* =========================================================
   CHECKLISTE MIT HINWEISBOX
   Textblock innerhalb von .hub-page-content-inner, der aus
   einer Aufzaehlung und einem oder mehreren Hinweis-Absaetzen
   besteht.

   In Elementor (Klassen ohne Punkt):
     Ueberschrift-Widget:  pnflow-section-title hub-checklist-title
     Text-Widget:          pnflow-section-text hub-checklist

   Das Text-Widget bleibt EIN Widget. Die <ul> darin wird zur
   Checkliste, ALLE <p> darunter bilden gemeinsam die
   Hinweisbox. Weitere Absaetze wachsen mit, ohne dass hier
   etwas angepasst werden muss.

   Optionaler Modifier hub-checklist--split stellt Liste und
   Hinweisbox ab 1025px nebeneinander.
========================================================= */

.hub-checklist-title,
.hub-checklist-title .elementor-heading-title {
  max-width: 900px !important;
  margin: 0 !important;
  font-size: var(--fs-h2-sm) !important;
  line-height: var(--lh-heading) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-h3) !important;
  text-align: left !important;
}

/* Die drei lokalen Variablen halten Zeilenhoehe, Marker und
   Innenabstand der Box zusammen. Der Haken weiter unten
   rechnet mit ihnen, deshalb reicht hier eine Aenderung. */

.hub-checklist {
  --checklist-row-py: 13px;
  --checklist-marker: 22px;
  --checklist-box-pad: clamp(20px, 1.7vw, 26px);
  width: 100% !important;
  max-width: 780px !important;
  margin: clamp(26px, 2.2vw, 34px) 0 0 !important;
  padding: 0 !important;
}

.hub-checklist .elementor-widget-container {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   CHECKLISTE · LISTE
   Trennlinie oben an jedem Eintrag, dadurch schliesst der
   letzte Eintrag ohne Sonderregel buendig ab.
========================================================= */

.hub-checklist ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hub-checklist li {
  position: relative;
  margin: 0 !important;
  padding: var(--checklist-row-py) 0 var(--checklist-row-py) calc(var(--checklist-marker) + 18px) !important;
  border-top: 1px solid rgba(var(--primary-rgb), 0.10);
  color: var(--text-body);
  font-family: var(--font-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

/* Marker aus Kreis (::before) und Haken (::after), komplett
   in CSS gezeichnet – dadurch keine Abhaengigkeit von Font
   Awesome. Die Position rechnet mit der halben Zeilenhoehe,
   der Haken sitzt deshalb auch bei zweizeiligen Eintraegen
   auf der ersten Zeile. */

.hub-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--checklist-row-py) + 0.75em - var(--checklist-marker) / 2);
  width: var(--checklist-marker);
  height: var(--checklist-marker);
  background-color: rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-circle);
}

.hub-checklist li::after {
  content: "";
  position: absolute;
  left: calc(var(--checklist-marker) / 2 - 3px);
  top: calc(var(--checklist-row-py) + 0.75em - 5px);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
}


/* =========================================================
   CHECKLISTE · HINWEISBOX
   Alle Absaetze teilen sich Flaeche und Rahmen. Der erste
   rundet oben ab, der letzte unten. Bei nur einem Absatz
   greifen beide Regeln auf dasselbe Element.

   max-width: none hebt die 720px aus typography.css auf,
   die Breite steuert hier der Block selbst.
========================================================= */

.hub-checklist p {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--checklist-box-pad) !important;
  background-color: rgba(var(--accent-rgb), 0.08);
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  color: var(--text-body);
  font-family: var(--font-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.hub-checklist p + p {
  padding-top: 12px !important;
}

.hub-checklist p:first-of-type {
  margin-top: clamp(26px, 2.2vw, 34px) !important;
  padding-top: var(--checklist-box-pad) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.hub-checklist p:last-of-type {
  padding-bottom: var(--checklist-box-pad) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.hub-checklist p strong {
  color: var(--primary);
  font-weight: 600;
}

.hub-checklist p:first-of-type::before {
  content: "Hinweis";
  display: block;
  margin-bottom: 8px;
  color: var(--accent-text);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* Modifier: andere Beschriftung der Hinweisbox, ohne dass
   dafuer der ganze Block dupliziert werden muss. Genutzt im
   Ausblick auf /gut-zu-wissen/atmung-verstehen/. */

.hub-checklist--note-ausblick p:first-of-type::before {
  content: "Wissen darf wachsen";
}


/* =========================================================
   CHECKLISTE · MODIFIER SPLIT
   Liste links, Hinweisbox rechts. Bewusst als Float und
   nicht als Grid: Liste und Absaetze sind Geschwister im
   selben Widget, in einem Grid wuerde die hoehere Liste die
   Zeilen auseinanderziehen und die Box aufreissen.
   flow-root faengt den Float wieder ein.
========================================================= */

@media (min-width: 1025px) {
  .hub-checklist--split {
    max-width: 1140px !important;
  }

  .hub-checklist--split .elementor-widget-container {
    display: flow-root;
  }

  .hub-checklist--split ul {
    float: left;
    width: 54%;
  }

  .hub-checklist--split p {
    margin-left: 60% !important;
  }

  .hub-checklist--split p:first-of-type {
    margin-top: 0 !important;
  }
}


/* =========================================================
   CHECKLISTE · MOBILE
   Marker und Innenabstand ruecken etwas zusammen, damit
   auf schmalen Geraeten mehr Platz fuer den Text bleibt.
========================================================= */

@media (max-width: 767px) {
  .hub-checklist {
    --checklist-row-py: 12px;
    --checklist-marker: 20px;
  }

  .hub-checklist li {
    padding-left: calc(var(--checklist-marker) + 14px) !important;
  }
}


/* =========================================================
   ARTIKELLISTE
   Aufzaehlung im Fliesstext eines Wissensartikels.

   Die <ul> aus typography.css hat padding-left: 0, dadurch
   stehen die Punkte ausserhalb des Textblocks und werden
   abgeschnitten. Diese Klasse setzt eigene Marker in Gold,
   passend zu .hub-checklist, aber ohne Hinweisbox.

   In Elementor auf dem Text-Widget:
     pnflow-section-text pnflow-article-list
========================================================= */

.pnflow-article-list ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pnflow-article-list li {
  position: relative;
  margin: 0 0 10px !important;
  padding: 0 0 0 var(--space-md) !important;
  color: var(--text-body);
  font-family: var(--font-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.pnflow-article-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  background-color: var(--accent);
  border-radius: var(--radius-circle);
}

.pnflow-article-list li strong {
  color: var(--primary);
  font-weight: 600;
}

/* =========================================================
   TEASER-KARTE
   Wiederverwendbarer Hinweis auf ein passendes Angebot,
   z. B. vor dem dunklen CTA am Seitenende.

   Verwendung in Elementor (Klassen ohne Punkt):
     Container   pnflow-teaser
     Kicker      pnflow-kicker pnflow-kicker--center
     Überschrift pnflow-section-title pnflow-section-title--h3
     Text        pnflow-section-text
     Button      pnflow-button-primary

   Die Farblinie oben ist ein background-image und kein
   ::before, weil Elementor ::before am Container für sein
   eigenes Hintergrund-Overlay nutzt.
========================================================= */

.pnflow-teaser {
  position: relative;
  width: min(var(--container-md), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin: 0 auto var(--section-py-sm) !important;
  padding: clamp(40px, 4vw, 64px) clamp(28px, 4vw, 64px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-md) !important;
  text-align: center;
  background-color: var(--white);
  background-image: linear-gradient(90deg, var(--secondary-blue), var(--secondary-green), var(--accent)), radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0) 60%);
  background-repeat: no-repeat;
  background-size: 100% 20px, 100% 100%;
  background-position: top, top;
  border: 1px solid rgba(var(--primary-rgb), var(--alpha-soft));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Abstand nach oben: Steht die Karte direkt nach
   hub-page-content, wird dessen unterer Innenabstand
   (bis 135px aus page-pnflow-knowledge.css) verkürzt.
   Sonst entsteht über der Karte eine große Lücke. */

.hub-page-content:has(+ .pnflow-teaser) {
  padding-bottom: var(--space-xl) !important;
}

/* Überschrift und Text schmaler als die Karte,
   damit die Zeilen zentriert ruhig bleiben.
   text-wrap: pretty verhindert ein einzelnes Wort
   in der letzten Zeile. */

.pnflow-teaser .pnflow-section-title--h3 .elementor-heading-title {
  max-width: 640px;
}

.pnflow-teaser .pnflow-section-text p {
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
  text-wrap: pretty;
}

/* Button etwas abgesetzt vom Text */

.pnflow-teaser .pnflow-button-primary {
  margin-top: var(--space-xs) !important;
}

/* Mehrere Buttons nebeneinander: Container mit
   pnflow-u-cluster-md pnflow-u-justify-center um die Buttons.
   Elementor gibt Widgets im Container standardmäßig volle
   Breite und eine flex-Basis, dadurch rutschte jeder Button
   in eine eigene Zeile. flex: 0 0 auto wie bei
   .page-about-cta-actions in page-pnflow-erleben.css.
   Der Abstand nach oben wandert auf die Gruppe, damit beide
   Buttons auf einer Höhe stehen. */

.pnflow-teaser .pnflow-u-cluster-md {
  width: 100% !important;
  margin-top: var(--space-xs) !important;
}

.pnflow-teaser .pnflow-u-cluster-md .elementor-widget-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 !important;
}


/* Mobile: kleinerer Radius und weniger Innenabstand */

@media (max-width: 767px) {
  .pnflow-teaser {
    padding: var(--space-lg) var(--space-md) !important;
    gap: var(--space-sm) !important;
    border-radius: var(--radius-md);
  }
}


/* =========================================================
   INTESOMA-SEITE (/intesoma-ausbildung)
   Seitenspezifische Ergänzungen. Alle Klassen beginnen mit
   page-intesoma- und greifen nur dort, wo sie vergeben sind.

   In Elementor (Klassen ohne Punkt):
     Hero-Text (Untertitel)  hub-hero-text page-intesoma-hero-lead
     Hero-Text (Absätze)     hub-hero-text page-intesoma-hero-intro
     Hero Visual             hub-hero-visual page-intesoma-hero-visual
     Badge im Hero           page-intesoma-hero-badge
     Rabatt-Störer           page-intesoma-offer
       Siegel                page-intesoma-offer-seal
         Betrag              page-intesoma-offer-amount
         Beschriftung        page-intesoma-offer-label
       Text-Spalte           page-intesoma-offer-copy
     Content Inner           page-intesoma-steps
     Hinweis ganz unten      Container page-intesoma-note-wrap nach PRE CTA,
                             darin pnflow-section-text page-intesoma-note
========================================================= */


/* Hero: Untertitel als Lead, darunter die Einstiegsabsätze */

.hub-hero-text.page-intesoma-hero-lead p {
  color: var(--primary) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.hub-hero-text.page-intesoma-hero-intro {
  margin-top: var(--space-md) !important;
}

.page-intesoma-hero-intro p + p {
  margin-top: var(--space-sm) !important;
}


/* Hero: Peters Foto mit Badge als Siegel unten links.
   Das Badge liegt absolut über dem Foto, das Foto selbst
   bleibt unverändert. */

.page-intesoma-hero-visual {
  position: relative;
  overflow: visible;
}

.page-intesoma-hero-badge {
  position: absolute !important;
  left: calc(var(--space-lg) * -1);
  bottom: var(--space-lg);
  z-index: var(--z-raised);
  width: clamp(110px, 9vw, 150px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: rotate(-5deg);
  filter: drop-shadow(0 12px 24px rgba(var(--primary-rgb), 0.18));
}

.page-intesoma-hero-badge img {
  display: block;
  width: 100% !important;
  height: auto !important;
}


/* Rabatt-Störer: helle Goldkarte, links der Betrag groß
   als Blickfang, durch eine feine Goldlinie vom Text
   getrennt. Goldener Text (--accent-text) erreicht auf
   --bg-section-gold 4.7:1. */

.page-intesoma-offer {
  width: min(var(--container-md), 100%) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 56px) !important;
  background-color: var(--bg-section-gold);
  background-image: radial-gradient(circle at 0% 50%, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0) 55%);
  border: 1px solid rgba(var(--accent-rgb), var(--alpha-medium));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.page-intesoma-offer-seal {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
  margin: 0 !important;
  padding: var(--space-xs) clamp(28px, 4vw, 56px) var(--space-xs) 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: var(--space-xs) !important;
  border-right: 1px solid rgba(var(--accent-rgb), 0.55);
}

/* Betrag greift auch, wenn er ohne <p> oder als
   Überschrift-Widget angelegt ist */

.page-intesoma-offer-amount .elementor-widget-container,
.page-intesoma-offer-amount p,
.page-intesoma-offer-amount .elementor-heading-title {
  margin: 0 !important;
  color: var(--accent-text) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(56px, 6vw, 88px) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-h2) !important;
  white-space: nowrap;
}

.page-intesoma-offer-label p {
  margin: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--kicker-size-sm) !important;
  line-height: 1.2 !important;
  font-weight: var(--kicker-weight) !important;
  letter-spacing: var(--kicker-tracking) !important;
  text-transform: uppercase;
}

.page-intesoma-offer-copy {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-sm) !important;
}

.page-intesoma-offer-copy .pnflow-section-text p {
  max-width: none;
}


/* So funktioniert es: weniger Luft zwischen Intro und
   Karten (vorher Intro 46px + Grid bis 76px) */

.page-intesoma-steps .pnflow-highlight-intro {
  margin-bottom: 0 !important;
}

.page-intesoma-steps .hub-page-grid {
  margin-top: var(--space-xl) !important;
}


/* Schritt-Symbol oben rechts in jeder Karte: Pfeil für
   Schritt 1 und 2, Haken für den letzten Schritt.
   ::after statt ::before, weil Elementor ::before am
   Container für sein Overlay nutzt. */

.page-intesoma-steps .hub-page-grid > .e-con::after {
  content: "→";
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  background-color: rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-circle);
  pointer-events: none;
}

.page-intesoma-steps .hub-page-grid > .e-con:last-child::after {
  content: "";
  background: var(--accent-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Platz für das Symbol, damit lange Titel nicht darunter laufen */

.page-intesoma-steps .hub-page-grid > .e-con .elementor-widget-heading {
  padding-right: var(--space-xl) !important;
}


/* Hinweis unter den Karten: volle Breite, linksbündig,
   als ruhige Box. Der Transparenz-Satz tritt zurück. */

.page-intesoma-note {
  width: 100% !important;
  max-width: none !important;
  margin: var(--space-lg) 0 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  background-color: rgba(var(--accent-rgb), var(--alpha-soft));
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  border-radius: var(--radius-sm);
}

.page-intesoma-note p {
  max-width: none !important;
  margin: 0 !important;
  color: var(--text-body);
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-body);
  text-align: left !important;
}

.page-intesoma-note p + p {
  margin-top: var(--space-xs) !important;
  color: var(--muted-text);
  font-size: var(--fs-small) !important;
}


/* Hinweis ganz unten unter der Teaser-Karte: eigener
   Container page-intesoma-note-wrap nach PRE CTA, so breit
   wie die Karte. Die Karte rückt näher heran, weil der
   Hinweis inhaltlich zu ihr gehört. */

.page-intesoma-note-wrap {
  width: min(var(--container-md), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin: 0 auto var(--section-py-sm) !important;
  padding: 0 !important;
}

.page-intesoma-note-wrap .page-intesoma-note {
  margin: 0 !important;
}

.pnflow-teaser:has(+ .page-intesoma-note-wrap) {
  margin-bottom: var(--space-lg) !important;
}


/* Tablet: Karten bleiben dreispaltig, damit die Pfeile
   weiter zur nächsten Karte zeigen */

@media (min-width: 768px) and (max-width: 1024px) {
  .page-intesoma-steps .hub-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Mobile: alles untereinander. Betrag über dem Text,
   Pfeile zeigen nach unten, das Badge rückt ins Foto,
   damit nichts am Rand abgeschnitten wird. */

@media (max-width: 767px) {
  .page-intesoma-hero-badge {
    left: var(--space-sm);
    bottom: var(--space-sm);
    width: 88px !important;
  }

  .page-intesoma-offer {
    flex-direction: column !important;
    text-align: center;
    padding: var(--space-lg) var(--space-md) !important;
    gap: var(--space-md) !important;
  }

  .page-intesoma-offer-seal {
    align-items: center !important;
    padding: 0 0 var(--space-md) !important;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.55);
  }

  .page-intesoma-offer-copy {
    align-items: center !important;
  }

  .page-intesoma-offer-copy .pnflow-section-title--left .elementor-heading-title {
    text-align: center;
  }

  .page-intesoma-steps .hub-page-grid > .e-con:not(:last-child)::after {
    transform: rotate(90deg);
  }

  .page-intesoma-note {
    padding: var(--space-md) !important;
  }
}