/* =========================================================
   PNFLOW EVENTS-SEITE (Termine)
   Kicker, H2 und Fließtext im Intro-Bereich nutzen die
   globalen Komponenten aus typography.css (pnflow-kicker,
   pnflow-section-title, pnflow-section-text) und werden
   hier nicht erneut definiert – diese Datei regelt nur
   Container, Breiten und Abstände.
========================================================= */
 
/* Amelia: Plugin-Schrift durch die eigene Website-Schrift ersetzen.
   Amelia steuert seine gesamte Oberflaeche ueber --am-font-family und setzt
   die Variable an zwei Stellen: auf :root (style.css des Plugins) und zusaetzlich
   inline auf #amelia-container. Deshalb sind beide Regeln noetig - die
   :root-Regel erwischt auch Dialoge und Dropdowns, die Amelia ausserhalb des
   Containers direkt an den Body haengt, die zweite schlaegt das Inline-Style.
   Damit fragt kein Element mehr "Amelia Roboto" an, und der Browser laedt die
   Roboto-Dateien nicht mehr von fonts.gstatic.com (LAUNCH-006).
   Die Icon-Schrift amelia-icons bleibt unberuehrt. */

:root {
  --am-font-family: var(--font-secondary) !important;
}

#amelia-container {
  --am-font-family: var(--font-secondary) !important;
}

.page-events #amelia-container {
  --am-font-family: var(--font-secondary) !important;
}

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

.page-events {
  --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.
========================================================= */

.page-events .page-events-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 */

.page-events .page-events-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 */

.page-events .page-events-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 */

.page-events .page-events-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. */

.page-events .page-events-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.
========================================================= */

.page-events .page-events-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;
}

.page-events .page-events-main-inner {
  width: min(var(--container-lg), 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.
========================================================= */

.page-events .page-events-amelia-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);
}

.page-events .amelia-title .elementor-heading-title {
  margin: 0;
  color: var(--primary);
}

.page-events .amelia-intro p {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-body-sm);
}

.page-events .amelia-events {
  margin-top: var(--space-sm) !important;
}


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

@media (max-width: 1024px) {

  .page-events .page-events-amelia-wrap {
    padding: var(--space-lg) !important;
  }
}


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

@media (max-width: 767px) {

  .page-events {
    --page-overlap: 40px;
  }

  .page-events .page-events-amelia-wrap {
    padding: var(--space-lg) var(--space-md) !important;
    border-top-width: 8px;
    border-radius: var(--radius-md);
  }

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