/* =========================================================
   PNFLOW UTILITIES
   Kleine wiederverwendbare Hilfsklassen.

   In Elementor immer OHNE Punkt eintragen:
   pnflow-u-container, pnflow-u-stack-lg, pnflow-u-glass usw.

   Neu: Container und Section-Abstände beziehen ihre Werte
   aus pnflow-variables.css. Die responsive Anpassung passiert
   dort über --gutter, deshalb hat diese Datei am Ende keine
   Media Queries mehr.
========================================================= */


/* =========================================================
   CONTAINER
========================================================= */

/* Standard Content Container */
.pnflow-u-container {
  width: min(var(--container-lg), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Schmaler Textcontainer */
.pnflow-u-container-sm {
  width: min(var(--container-sm), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mittlerer Container */
.pnflow-u-container-md {
  width: min(var(--container-md), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Breiter Layoutcontainer */
.pnflow-u-container-xl {
  width: min(var(--container-xl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sehr breiter Layoutcontainer, ersetzt hart gesetzte 1500px */
.pnflow-u-container-xxl {
  width: min(var(--container-xxl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   WIDTH
========================================================= */

.pnflow-u-width-full {
  width: 100% !important;
}
.pnflow-u-width-auto {
  width: auto !important;
}
.pnflow-u-width-fit {
  width: fit-content !important;
  max-width: 100% !important;
}


/* =========================================================
   FLEX
========================================================= */

.pnflow-u-flex {
  display: flex !important;
}
.pnflow-u-flex-column {
  display: flex !important;
  flex-direction: column !important;
}
.pnflow-u-flex-row {
  display: flex !important;
  flex-direction: row !important;
}
.pnflow-u-flex-wrap {
  flex-wrap: wrap !important;
}
.pnflow-u-flex-nowrap {
  flex-wrap: nowrap !important;
}


/* =========================================================
   ALIGNMENT
========================================================= */

.pnflow-u-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pnflow-u-align-start {
  align-items: flex-start !important;
}
.pnflow-u-align-center {
  align-items: center !important;
}
.pnflow-u-align-end {
  align-items: flex-end !important;
}
.pnflow-u-justify-start {
  justify-content: flex-start !important;
}
.pnflow-u-justify-center {
  justify-content: center !important;
}
.pnflow-u-justify-between {
  justify-content: space-between !important;
}


/* =========================================================
   STACK
   Vertikale Anordnung mit konsistenten Abständen
========================================================= */

.pnflow-u-stack-xs,
.pnflow-u-stack-sm,
.pnflow-u-stack-md,
.pnflow-u-stack-lg,
.pnflow-u-stack-xl {
  display: flex !important;
  flex-direction: column !important;
}
.pnflow-u-stack-xs {
  gap: var(--space-xs) !important;
}
.pnflow-u-stack-sm {
  gap: var(--space-sm) !important;
}
.pnflow-u-stack-md {
  gap: var(--space-md) !important;
}
.pnflow-u-stack-lg {
  gap: var(--space-lg) !important;
}
.pnflow-u-stack-xl {
  gap: var(--space-xl) !important;
}


/* =========================================================
   CLUSTER
   Horizontale Gruppe, die bei Bedarf umbrechen darf
========================================================= */

.pnflow-u-cluster-sm,
.pnflow-u-cluster-md,
.pnflow-u-cluster-lg {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.pnflow-u-cluster-sm {
  gap: var(--space-sm) !important;
}
.pnflow-u-cluster-md {
  gap: var(--space-md) !important;
}
.pnflow-u-cluster-lg {
  gap: var(--space-lg) !important;
}


/* =========================================================
   GRID
   Gleichmäßige Karten-Raster, brechen automatisch um.
   Ersetzt handgebaute grid-template-columns in den Sektionen.
========================================================= */

.pnflow-u-grid-2,
.pnflow-u-grid-3,
.pnflow-u-grid-4 {
  display: grid !important;
  gap: var(--space-lg) !important;
  align-items: stretch !important;
}
.pnflow-u-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}
.pnflow-u-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}
.pnflow-u-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}


/* =========================================================
   TEXT ALIGNMENT
========================================================= */

.pnflow-u-text-left {
  text-align: left !important;
}
.pnflow-u-text-center {
  text-align: center !important;
}
.pnflow-u-text-right {
  text-align: right !important;
}


/* =========================================================
   MARGIN
========================================================= */

.pnflow-u-m-0 {
  margin: 0 !important;
}
.pnflow-u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.pnflow-u-mt-sm {
  margin-top: var(--space-sm) !important;
}
.pnflow-u-mt-md {
  margin-top: var(--space-md) !important;
}
.pnflow-u-mt-lg {
  margin-top: var(--space-lg) !important;
}
.pnflow-u-mt-xl {
  margin-top: var(--space-xl) !important;
}
.pnflow-u-mt-2xl {
  margin-top: var(--space-2xl) !important;
}

.pnflow-u-mb-sm {
  margin-bottom: var(--space-sm) !important;
}
.pnflow-u-mb-md {
  margin-bottom: var(--space-md) !important;
}
.pnflow-u-mb-lg {
  margin-bottom: var(--space-lg) !important;
}
.pnflow-u-mb-xl {
  margin-bottom: var(--space-xl) !important;
}


/* =========================================================
   PADDING
========================================================= */

.pnflow-u-p-sm {
  padding: var(--space-sm) !important;
}
.pnflow-u-p-md {
  padding: var(--space-md) !important;
}
.pnflow-u-p-lg {
  padding: var(--space-lg) !important;
}
.pnflow-u-p-xl {
  padding: var(--space-xl) !important;
}


/* =========================================================
   SECTION SPACING
   Werte kommen aus den Tokens und passen sich mobil
   automatisch an.
========================================================= */

.pnflow-u-section {
  padding: var(--section-py) 0 !important;
}
.pnflow-u-section-sm {
  padding: var(--section-py-sm) 0 !important;
}
.pnflow-u-section-lg {
  padding: var(--section-py-lg) 0 !important;
}


/* =========================================================
   TRENNLINIE ZWISCHEN SEKTIONEN
   Dekorative goldene Linie, die zu den Rändern ausblendet.

   In Elementor: einen LEEREN Container zwischen die beiden
   Sektionen setzen und ihm die Klasse pnflow-u-divider geben.
   Die Linie ist ein background-image, kein ::before, weil
   Elementor ::before am Container für sein Overlay nutzt.

   Eigene Abstände hat die Linie nicht. Sie sitzt mittig im
   Abstand, den die Sektionen davor und danach mitbringen.
========================================================= */

.pnflow-u-divider {
  width: min(var(--container-md), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 50px auto !important;
  padding: 0 !important;
  flex: none !important;
  background-image: linear-gradient(90deg, rgba(var(--accent-rgb), 0) 0%, rgba(var(--accent-rgb), var(--alpha-strong)) 50%, rgba(var(--accent-rgb), 0) 100%);
  background-repeat: no-repeat;
}

/* Modifier: kurze Linie, z. B. zwischen zwei Textabschnitten */

.pnflow-u-divider--short {
  width: 120px !important;
}


/* =========================================================
   RADII
========================================================= */

.pnflow-u-radius-sm {
  border-radius: var(--radius-sm) !important;
}
.pnflow-u-radius-md {
  border-radius: var(--radius-md) !important;
}
.pnflow-u-radius-lg {
  border-radius: var(--radius-lg) !important;
}
.pnflow-u-pill {
  border-radius: var(--radius-pill) !important;
}

/* Für quadratische Elemente */
.pnflow-u-circle {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-circle) !important;
}


/* =========================================================
   SHADOWS
========================================================= */

.pnflow-u-shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}
.pnflow-u-shadow-medium {
  box-shadow: var(--shadow-medium) !important;
}
.pnflow-u-shadow-strong {
  box-shadow: var(--shadow-strong) !important;
}


/* =========================================================
   GLASS
========================================================= */

.pnflow-u-glass {
  background-color: rgba(var(--cream-rgb), 0.25) !important;
  border: 1px solid rgba(var(--primary-rgb), var(--alpha-soft)) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Leichtere Glasvariante */
.pnflow-u-glass-soft {
  background-color: rgba(var(--cream-rgb), 0.34) !important;
  border: 1px solid rgba(var(--primary-rgb), var(--alpha-soft)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   BACKGROUND COLORS
========================================================= */

.pnflow-u-bg-cream {
  background-color: var(--cream) !important;
}
.pnflow-u-bg-primary {
  background-color: var(--primary) !important;
}
.pnflow-u-bg-secondary {
  background-color: var(--secondary) !important;
}
.pnflow-u-bg-accent {
  background-color: var(--accent) !important;
}
.pnflow-u-bg-soft {
  background-color: var(--bg-section-soft) !important;
}
.pnflow-u-bg-gold {
  background-color: var(--bg-section-gold) !important;
}
.pnflow-u-bg-green {
  background-color: var(--bg-section-green) !important;
}
.pnflow-u-bg-green-strong {
  background-color: var(--bg-section-green-strong) !important;
}


/* =========================================================
   VISIBILITY
========================================================= */

.pnflow-u-hidden {
  display: none !important;
}

/* Für Screenreader sichtbar, optisch ausgeblendet */
.pnflow-u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}