/* =========================================================
   PNFLOW KONTAKTSEITE
   Nur das Seitenlayout. Das Styling des Formulars selbst
   steht in forms.css und gilt fuer alle Formulare der Seite.

   Kicker und Hero-Ueberschrift kommen aus typography.css
   und werden hier nicht neu definiert.

   Aufbau: schmale, einspaltige Seite. Der Hero traegt die
   Farbe, die Formularkarte schiebt sich von unten in ihn
   hinein. Dadurch entsteht Tiefe, ohne dass die Seite laut
   wird.

   !important steht bewusst nur auf Layout-Eigenschaften der
   Elementor-Container (margin, padding, display, width, gap).
   Genau dort gibt Elementor pro Element eigene Regeln mit
   hoeherer Spezifitaet aus. Ueberall sonst ist es unnoetig.
========================================================= */


/* =========================================================
   SEITE
   --page-overlap steuert, wie weit die Karte in den Hero
   ragt. Einmal aendern, Hero-Polster und Versatz wandern mit.
========================================================= */

.pnflow-contact {
  --page-overlap: clamp(48px, 6vw, 96px);
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--pnflow-page-bg);
}


/* =========================================================
   HERO
   Warme Grundflaeche, darueber zwei weiche Farbschleier:
   Petrol von oben, Gold von rechts. Beide laufen ins
   Transparente aus, es entsteht kein harter Rand.
   Das untere Polster ist um den Ueberlappungswert groesser,
   damit die Karte Platz zum Hineinragen hat.
========================================================= */

.pnflow-contact .contact-hero {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: var(--section-py) 0 calc(var(--section-py-sm) + var(--page-overlap)) !important;
  background-color: var(--bg-section-soft);
  background-image: radial-gradient(130% 100% at 50% 0%, rgba(var(--secondary-rgb), 0.14) 0%, rgba(var(--secondary-rgb), 0) 62%);
  overflow: hidden;
}

/* Goldener Lichtschleier oben rechts */

.pnflow-contact .contact-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0) 70%);
  pointer-events: none;
}

/* Gruener Lichtschleier unten links */

.pnflow-contact .contact-hero::after {
  content: "";
  position: absolute;
  bottom: -28%;
  left: -14%;
  width: min(46vw, 540px);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(var(--secondary-green-rgb), 0.20) 0%, rgba(var(--secondary-green-rgb), 0) 70%);
  pointer-events: none;
}

/* z-index, damit der Text ueber den Schleiern liegt */

.pnflow-contact .contact-hero-inner {
  position: relative;
  z-index: var(--z-content);
  width: min(var(--container-md), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-md) !important;
  text-align: center;
}

/* Einleitungstext.
   Das Textfeld-Widget traegt keine eigene Klasse mehr,
   deshalb ueber die Struktur angesprochen. */

.pnflow-contact .contact-hero-inner .elementor-widget-text-editor p {
  max-width: var(--container-sm);
  margin: 0 auto;
  color: var(--text-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}


/* =========================================================
   HAUPTBEREICH
   Kein eigener Hintergrund und kein oberes Polster: die
   Sektion wird per negativem Rand nach oben in den Hero
   gezogen. z-index hebt sie ueber die Hero-Flaeche.
========================================================= */

.pnflow-contact .contact-main {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  margin: calc(var(--page-overlap) * -1) 0 0 !important;
  padding: 0 0 var(--section-py) !important;
  background-color: transparent;
}

.pnflow-contact .contact-main-inner {
  width: min(var(--container-sm), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
}


/* =========================================================
   FORMULAR-KARTE
   Weisse Karte auf getoenter Flaeche, kraeftigerer Schatten,
   weil sie jetzt frei ueber dem Hero schwebt.
   Die Abstaende macht gap, deshalb brauchen die einzelnen
   Widgets darin keine eigenen Raender mehr.

   Die Farbkante oben ist ein transparenter oberer Rahmen,
   durch den ein Verlauf scheint - dieselbe Technik wie bei
   den Karten auf der Hub-Seite (siehe .hub-orientation-card
   in hub.css):

   Zwei Hintergrundebenen liegen uebereinander. Die untere
   (der Farbverlauf) fuellt die border-box, die obere (Weiss)
   nur die padding-box. Sichtbar bleibt der Verlauf also
   genau dort, wo der Rahmen ist - und weil nur oben ein
   Rahmen gesetzt ist, entsteht die Kante. Sie folgt der
   Rundung exakt, weil beide Ebenen am jeweiligen Radius
   beschnitten werden und der Rahmen im Eckbogen ausläuft.

   Die Hoehe der Kante steuert border-top.
========================================================= */

.pnflow-contact .contact-form-wrap {
  margin: 0 !important;
  padding: clamp(32px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-sm) !important;
  background-color: transparent;
  background-image: linear-gradient(var(--white), var(--white)), linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 42%, var(--secondary) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 0;
  border-top: 10px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
}

.pnflow-contact .contact-form-title .elementor-heading-title {
  margin: 0;
  color: var(--primary);
}

.pnflow-contact .contact-form-intro p {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-body-sm);
}

.pnflow-contact .contact-form {
  margin-top: var(--space-sm) !important;
}


/* =========================================================
   ABSCHLUSS-BLOCK
   Steht unter der Formularkarte und beantwortet die drei
   Fragen, die beim Absenden entstehen: Wann kommt Antwort,
   geht es auch ohne Formular, und wo finde ich Termine.
   Die dritte Spalte faengt die Leute ab, die eigentlich nur
   einen Termin suchen und sonst danach fragen wuerden.

   Bewusst ohne Karte und ohne Schatten: die Formularkarte
   soll das einzige schwebende Element der Seite bleiben.
   Die goldene Oberkante ist dieselbe Sprache wie bei den
   Steckbrief-Kacheln der Angebotsseiten (page-ta.css).
========================================================= */

.pnflow-contact .contact-outro {
  width: 100% !important;
  margin: var(--space-xl) 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-md) !important;
  row-gap: var(--space-lg) !important;
  align-items: start !important;
  background-color: transparent;
}

.pnflow-contact .contact-outro-item {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: var(--space-sm) 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-xs) !important;
  background-color: transparent;
  border-top: 2px solid var(--accent);
}

/* Label und Text sprechen jeweils beide Ebenen an:
   steht im Widget ein <p>, greift sonst die globale
   p-Regel aus typography.css. */

.pnflow-contact .contact-outro-label .elementor-widget-container,
.pnflow-contact .contact-outro-label p {
  margin: 0;
  color: var(--accent-text);
  font-family: var(--font-primary);
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pnflow-contact .contact-outro-text .elementor-widget-container,
.pnflow-contact .contact-outro-text p {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  text-wrap: pretty;
}

.pnflow-contact .contact-outro-text a {
  color: var(--secondary-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.pnflow-contact .contact-outro-text a:hover,
.pnflow-contact .contact-outro-text a:focus-visible {
  color: var(--deep-blue);
}


/* =========================================================
   TABLET
   Der Abschluss-Block braucht hier keine Regel: die Spalte
   ist auf --container-sm begrenzt und aendert ihre Breite
   zwischen 1024px und 768px nicht.
========================================================= */

@media (max-width: 1024px) {

  .pnflow-contact .contact-form-wrap {
    padding: var(--space-lg) !important;
  }
}


/* =========================================================
   MOBILE
   Weniger Ueberlappung, sonst wirkt die Karte gequetscht.
========================================================= */

@media (max-width: 767px) {

  .pnflow-contact {
    --page-overlap: 40px;
  }

  .pnflow-contact .contact-form-wrap {
    padding: var(--space-lg) var(--space-md) !important;
    border-top-width: 8px;
    border-radius: var(--radius-md);
  }

  .pnflow-contact .contact-outro {
    margin-top: var(--space-lg) !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-md) !important;
  }

  .pnflow-contact .contact-hero-inner .elementor-widget-text-editor p {
    font-size: var(--fs-body);
  }
}