/* =========================================================
   PNFLOW HERO

   Angepasst auf das Design-System:
   - Beide Titel-clamp() repariert, sie sind nie mitgewachsen
   - Glasfläche deckender, damit die Schrift unabhängig vom
     Foto lesbar bleibt
   - Badge auf --accent-dark, Schriftgrößen angehoben
   - z-Index und Übergänge über Tokens
========================================================= */


/* =========================================================
   HERO BASIS
   Hintergrundbild wird direkt in Elementor gepflegt.

   Höhe: Vorher 125svh – das Hero war eineinviertel Bildschirme
   hoch, man musste also ein Viertel Bildschirm scrollen, bevor
   der Abschnitt endete. Das war nicht nur zu viel, es war auch
   die Ursache für zwei Bildprobleme: die Box wurde dadurch fast
   quadratisch, das 16:9-Foto musste auf 156 % aufgeblasen
   werden und verlor 29 % seiner Breite.

   Warum clamp() und nicht einfach 84svh: svh hängt an der
   Fensterform. In einem hohen schmalen Fenster ergäbe 84svh
   wieder über 1100px. Der Deckel bei 760px hält die Höhe
   unabhängig davon im Rahmen.

   background-position: Das Hero-Foto ist auf 2.40:1 zugeschnitten,
   die Box ist bei 1440px aber nur 1.89:1 – es werden also rund
   21 % der Breite beschnitten. Bei 50 % bliebe der Person am
   rechten Bildrand kaum Abstand zur Kante. Die 55 % schieben den
   Ausschnitt so weit nach rechts, dass sie sicher im Bild bleibt
   und der Taleinschnitt links trotzdem vollständig sichtbar ist.
   "center" statt "top", weil der Zuschnitt vertikal bereits eng
   ist und oben nichts mehr wegfallen darf.
========================================================= */

body.home .pnflow-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(730px, 100svh, 900px);
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  background-position: 55% center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  overflow: hidden;
}


/* =========================================================
   HERO CONTENT
   Kein eigenes min-height mehr: Der Elternteil ist ein Flex-
   Container mit align-items: stretch, der Content füllt die
   Sektionshöhe also von selbst. Stünde hier weiter 100svh,
   würde diese zweite Höhenangabe das Hero unabhängig von der
   Sektionshöhe wieder auf Bildschirmhöhe aufziehen.

   Dafuer steht hier flex: 1 1 auto. Der Hero-Container laeuft
   in flex-direction: column (Elementor-Standard) – dort
   streckt align-items: stretch waagerecht, nicht senkrecht.
   Ohne flex bekaeme der Content nur seine Eigenhoehe, klebte
   am oberen Rand, und das justify-content: center weiter
   unten haette keinen Platz zum Verteilen: Der Glaskasten
   saesse oben statt mittig, egal wie hoch die Sektion ist.
   Vorher hat das min-height: 100svh diese Luecke zufaellig
   gefuellt.

   Das obere Polster ist neu und haelt den Textkasten unter
   dem Header frei. Der Header ist auf der Startseite
   position: fixed und liegt ueber dem Hero, das Hero beginnt
   also bei y=0 unter ihm. Bei 125svh ist das nie aufgefallen,
   weil so viel Luft da war, dass der mittig zentrierte Inhalt
   den Header nie erreicht hat. Mit der kuerzeren Sektion
   wandert er hoch – ohne dieses Polster verschwindet die
   erste Ueberschrift hinter der Kopfleiste.

   Warum eine Variable statt eines Pixelwerts: Die Header-
   Hoehe steht nirgends fest. Sie ergibt sich aus dem Polster
   der Leiste, dem Logo (clamp(200px, 22vw, 360px)) und den
   Menuespalten, waechst also mit dem Viewport und aendert
   sich, sobald das Logo getauscht wird. pnflow.js misst sie
   und schreibt sie als --pnflow-header-h an :root. Der
   Rueckfallwert im calc() greift, falls das Skript ausfaellt –
   er ist bewusst grosszuegig, lieber etwas zu viel Abstand
   als eine verdeckte Ueberschrift.

   Die --space-lg obendrauf sind nicht Zierde: Das Badge sitzt
   mit top: -20px ueber der Glasflaeche und ist damit das
   oberste Element, nicht der Kasten selbst.
========================================================= */

body.home .pnflow-hero-content {
  position: relative;
  z-index: var(--z-raised);
  width: calc(100% - 120px) !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  padding: calc(var(--pnflow-header-h, 20px) + var(--space-lg)) 40px 0 240px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  transform: translateY(20px);
}


/* =========================================================
   GLASFLÄCHE
   Deckkraft von 0.42 auf 0.58 erhöht. Bei 0.42 lag die
   dunkelblaue Schrift über einer dunklen Bildstelle bei
   3.49:1 – die Lesbarkeit hing also davon ab, welches Foto
   gerade eingestellt ist. Bei 0.58 sind es auch im
   ungünstigsten Fall 5.65:1, und die Fläche wirkt weiterhin
   klar als Glas.
========================================================= */

body.home .pnflow-hero-copy {
  position: relative !important;
  z-index: var(--z-raised);
  width: min(100%, 750px) !important;
  margin: 0 !important;
  padding: clamp(36px, 2.7vw, 46px) clamp(36px, 3vw, 48px) clamp(38px, 2.8vw, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  background-color: rgba(var(--cream-rgb), 0.58);
  border: 1px solid rgba(var(--white-rgb), 0.34);
  border-radius: var(--radius-lg) !important;
  overflow: visible !important;
  box-shadow: 0 18px 50px rgba(var(--primary-rgb), 0.06);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}


/* =========================================================
   HEADLINE 1
   Vorher clamp(48px, 2.5vw, 60px): 2.5vw ergibt bei 1440px
   nur 36px, der Mindestwert hat also immer gewonnen und die
   Überschrift blieb konstant 48px. Die 60px wurden erst ab
   2400px Viewport erreicht. Mit 4.2vw ist der Maximalwert
   bei rund 1430px erreicht.
========================================================= */

body.home .pnflow-hero-title-1 .elementor-heading-title {
  max-width: 760px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(48px, 4.2vw, 60px) !important;
  line-height: 1.08 !important;
  font-weight: 300 !important;
  letter-spacing: -0.045em !important;
}


/* =========================================================
   HEADLINE 2
   Gleicher Fehler: 3vw ergab bei 1440px nur 43px.
========================================================= */

body.home .pnflow-hero-title-2 .elementor-heading-title {
  max-width: 100%;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(54px, 4.75vw, 68px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-h2) !important;
  text-transform: uppercase;
}


/* =========================================================
   META-ZEILE
   Label-Element mit Goldstrich, bleibt bewusst in
   --font-primary. Der Strich ist dekorativ.
========================================================= */

body.home .pnflow-hero-title-brand {
  width: auto !important;
  margin: clamp(16px, 1.3vw, 20px) 0 0 !important;
  padding: 0 !important;
}

body.home .pnflow-hero-title-brand .elementor-widget-container,
body.home .pnflow-hero-title-brand p {
  margin: 0 !important;
  padding: 0 !important;
}

body.home .pnflow-hero-title-brand p {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-body) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
}

body.home .pnflow-hero-title-brand p::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  flex: 0 0 24px;
  background-color: var(--accent);
}

body.home .pnflow-hero-title-brand em {
  color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}


/* =========================================================
   BUTTON-ZEILE
========================================================= */

body.home .pnflow-hero-actions {
  width: 100% !important;
  margin: clamp(22px, 1.8vw, 28px) 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
}

body.home .pnflow-hero-actions > .elementor-element,
body.home .pnflow-hero-actions .elementor-widget-button,
body.home .pnflow-hero-actions .elementor-button-wrapper {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}


/* Hover füllt mit --accent-deep statt --accent:
   Weiß auf hellem Gold lag bei 2.4:1. */

body.home .pnflow-hero-button-1 .elementor-button {
  min-width: 0 !important;
  padding: 11px 20px !important;
  color: var(--primary) !important;
  background-color: rgba(var(--cream-rgb), 0.5) !important;
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.home .pnflow-hero-button-1 .elementor-button:hover,
body.home .pnflow-hero-button-1 .elementor-button:focus {
  color: var(--white) !important;
  background-color: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}


/* =========================================================
   HERO BADGE · SIGNALPUNKT
   Dunkelblaue Pille mit pulsierendem Goldpunkt.
   Creme auf --primary: 14.9:1, das Goldwort 6.4:1.

   WICHTIG – Elementor-Eigenheit:
   Der Badge-Container ist ein Elementor-Container (e-con).
   Elementor belegt bei diesen Containern ::before selbst für
   die Hintergrund-Überlagerung, mit position: absolute und
   top/left: 0. Ein eigenes ::before erbt diese Positionierung
   und landet deshalb in der linken oberen Ecke. Zusätzlich
   schneiden e-con-Container mit overflow: hidden ab, wodurch
   der wachsende Schatten des Pulses unsichtbar wird.

   Deshalb sitzen Punkt und Pfeil hier NICHT am Container,
   sondern an .elementor-widget-container des Textfelds –
   ein schlichtes div, an dessen Pseudo-Elementen Elementor
   nichts macht.

   In Elementor:
   - Das Icon-Widget wird nicht mehr gebraucht (unten
     ausgeblendet, es darf also auch stehen bleiben).
   - Der Container ist selbst schon das <a>, der Link wird
     also am Container gesetzt.
========================================================= */

body.home .pnflow-hero-badge {
  position: absolute !important;
  top: -20px !important;
  right: 26px !important;
  z-index: var(--z-overlay);
  width: auto !important;
  max-width: calc(100% - 52px);
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  background-color: var(--primary) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.26);
  overflow: visible !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}


/* Icon-Widget wird nicht mehr gebraucht */

body.home .pnflow-hero-badge-icon {
  display: none !important;
}


/* Textfeld wird zur Zeile aus Punkt, Text und Pfeil */

body.home .pnflow-hero-badge-text {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
}

body.home .pnflow-hero-badge-text .elementor-widget-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}


/* Der Punkt. Der Puls läuft über box-shadow, dadurch braucht
   es kein zusätzliches Element und nichts verschiebt sich.
   position: relative setzt Elementors absolute Positionierung
   sicherheitshalber zurück. */

body.home .pnflow-hero-badge-text .elementor-widget-container::before {
  content: "";
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background-color: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: pnflow-pulse 2.6s ease-out infinite;
}

@keyframes pnflow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}


/* Pfeil am Ende */

body.home .pnflow-hero-badge-text .elementor-widget-container::after {
  content: "\2192";
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--transition-base);
}


/* Text. Sentence Case ohne Sperrung – das ist der eigentliche
   Lesbarkeitsgewinn. Das in Elementor fett gesetzte Wort
   erscheint in Gold. */

body.home .pnflow-hero-badge-text p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cream) !important;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.home .pnflow-hero-badge-text b,
body.home .pnflow-hero-badge-text strong {
  color: var(--accent) !important;
  font-weight: 600 !important;
}


/* Zustände */

@media (hover: hover) and (pointer: fine) {
  body.home .pnflow-hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.34);
  }
  body.home .pnflow-hero-badge:hover .pnflow-hero-badge-text .elementor-widget-container::after {
    transform: translateX(3px);
  }
}

body.home .pnflow-hero-badge:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

@media (min-width: 1025px) and (max-width: 1439px) {
  body.home .pnflow-hero-content {
    padding-left: 130px !important;
  }
}

/* =========================================================
   TABLET
   Auch hier greift jetzt der Deckel: 110svh ergab auf einem
   Tablet im Hochformat über 1100px Hero-Höhe.
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  body.home .pnflow-hero {
    min-height: clamp(499px, 68.9svh, 620px);
    background-position: 55% center !important;
  }

  body.home .pnflow-hero-content {
    width: calc(100% - 64px) !important;
    padding: calc(var(--pnflow-header-h, 110px) + var(--space-lg)) 0 0 !important;
    transform: none;
  }

  body.home .pnflow-hero-copy {
    width: min(100%, 720px) !important;
    padding: 34px 34px 32px !important;
  }

  body.home .pnflow-hero-title-1 .elementor-heading-title {
    max-width: 620px;
    font-size: clamp(42px, 5vw, 52px) !important;
  }
  body.home .pnflow-hero-title-2 .elementor-heading-title {
    font-size: clamp(46px, 5.8vw, 58px) !important;
  }
  body.home .pnflow-hero-title-brand p {
    font-size: 15px !important;
  }

  body.home .pnflow-hero-actions {
    margin-top: var(--space-md) !important;
  }

  body.home .pnflow-hero-badge {
    top: -18px !important;
    right: 18px !important;
    padding: 11px 18px !important;
  }
  body.home .pnflow-hero-badge-text p {
    font-size: 14px !important;
  }
}


/* =========================================================
   MOBILE
   Bild oben, Content darunter

   Hier bleibt background-size: 100% auto – mobil wird das
   ganze Bild gezeigt, nichts beschnitten. Deshalb gehört in
   Elementor unter dem Handy-Symbol das volle 16:9-Foto als
   eigenes Hintergrundbild, nicht der 2.40:1-Zuschnitt: der
   wäre hier nur ein schmales Band.

   Das Polster von 56.25vw ist exakt die Höhe eines 16:9-Bildes
   bei voller Breite und hält den Platz dafür frei. Es muss
   mitwandern, wenn das Bildformat je geändert wird.
========================================================= */

@media (max-width: 767px) {
  body.home .pnflow-hero {
    min-height: 0;
    margin-top: var(--pnflow-header-h, 100px) !important;
    display: block !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-color: var(--bg-section-soft) !important;
    overflow: visible;
  }

  body.home .pnflow-hero-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 56.25vw 0 0 !important;
    display: block !important;
    transform: none;
  }

  /* Auf Mobil steht die Copy auf einer Volltonfläche,
     deshalb hier kein Glas und keine Deckkraftfrage. */
  body.home .pnflow-hero-copy {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 54px var(--space-md) 52px !important;
    background-color: var(--bg-section-soft) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  body.home .pnflow-hero-title-1 .elementor-heading-title {
    max-width: 390px;
    font-size: clamp(34px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }
  body.home .pnflow-hero-title-2 .elementor-heading-title {
    max-width: 390px;
    margin-top: 5px !important;
    font-size: clamp(38px, 10vw, 47px) !important;
    line-height: 1.04 !important;
    letter-spacing: var(--ls-h2) !important;
  }

  body.home .pnflow-hero-title-brand {
    margin-top: 18px !important;
  }
  body.home .pnflow-hero-title-brand p {
    gap: var(--space-xs);
    font-size: 14px !important;
  }
  body.home .pnflow-hero-title-brand p::before {
    width: 20px;
    flex-basis: 20px;
  }

  body.home .pnflow-hero-actions {
    margin-top: 26px !important;
    gap: 10px !important;
  }
  body.home .pnflow-hero-button-1 .elementor-button {
    padding: 10px 17px !important;
    border-color: rgba(var(--accent-dark-rgb), 0.8) !important;
  }

  /* Der Sticker sitzt auf der unteren Bildkante, halb auf
     dem Foto. Das geht jetzt gefahrlos, weil die Pille eine
     deckende dunkelblaue Fläche ist – der Kontrast hängt
     also nicht mehr vom Bild ab. */
  body.home .pnflow-hero-badge {
    position: absolute !important;
    top: -26px !important;
    left: var(--space-md) !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.26);
  }

  body.home .pnflow-hero-badge-text p {
    font-size: 14px !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
}


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

@media (max-width: 480px) {
  body.home .pnflow-hero-content {
    padding-top: 56.25vw !important;
  }
  body.home .pnflow-hero-copy {
    padding: 52px 20px 46px !important;
  }

  body.home .pnflow-hero-title-1 .elementor-heading-title {
    max-width: 350px;
    font-size: clamp(31px, 9.2vw, 38px) !important;
  }
  body.home .pnflow-hero-title-2 .elementor-heading-title {
    max-width: 350px;
    font-size: clamp(35px, 10.5vw, 43px) !important;
  }
  body.home .pnflow-hero-title-brand p {
    font-size: 13px !important;
  }

  body.home .pnflow-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.home .pnflow-hero-actions > .elementor-element,
  body.home .pnflow-hero-actions .elementor-widget-button,
  body.home .pnflow-hero-actions .elementor-button-wrapper,
  body.home .pnflow-hero-actions .elementor-button {
    width: 100% !important;
  }
  body.home .pnflow-hero-actions .elementor-button {
    justify-content: center !important;
  }

  body.home .pnflow-hero-badge {
    top: -24px !important;
    left: 20px !important;
    max-width: calc(100% - 40px) !important;
    padding: 10px 16px !important;
  }
  body.home .pnflow-hero-badge-text p {
    font-size: 13.5px !important;
  }
}