/* =========================================================
SNIPPET: 31 - SECTION UTILITIES (Gap-basiert)
System:
- Vertical Spacing = var(--gap-*)
- Side Padding     = var(--space-side-fluid)
========================================================= */


/* ---------- Core Sections (Vertical via GAP) ---------- */

/* XXXL */
.elementor .elementor-element.section-xxxl,
.elementor .elementor-element.section-xxxl > .e-con-inner,
.elementor .elementor-element.section-xxxl > .elementor-container,
.elementor .elementor-element.sec-xxxl,
.elementor .elementor-element.sec-xxxl > .e-con-inner,
.elementor .elementor-element.sec-xxxl > .elementor-container{
  padding-block: var(--gap-xxxl) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* XXL */
.elementor .elementor-element.section-xxl,
.elementor .elementor-element.section-xxl > .e-con-inner,
.elementor .elementor-element.section-xxl > .elementor-container,
.elementor .elementor-element.sec-xxl,
.elementor .elementor-element.sec-xxl > .e-con-inner,
.elementor .elementor-element.sec-xxl > .elementor-container{
  padding-block: var(--gap-xxl) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* XL */
.elementor .elementor-element.section-xl,
.elementor .elementor-element.section-xl > .e-con-inner,
.elementor .elementor-element.section-xl > .elementor-container,
.elementor .elementor-element.sec-xl,
.elementor .elementor-element.sec-xl > .e-con-inner,
.elementor .elementor-element.sec-xl > .elementor-container{
  padding-block: var(--gap-xl) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* L */
.elementor .elementor-element.section-l,
.elementor .elementor-element.section-l > .e-con-inner,
.elementor .elementor-element.section-l > .elementor-container,
.elementor .elementor-element.sec-l,
.elementor .elementor-element.sec-l > .e-con-inner,
.elementor .elementor-element.sec-l > .elementor-container{
  padding-block: var(--gap-l) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* M */
.elementor .elementor-element.section-m,
.elementor .elementor-element.section-m > .e-con-inner,
.elementor .elementor-element.section-m > .elementor-container,
.elementor .elementor-element.sec-m,
.elementor .elementor-element.sec-m > .e-con-inner,
.elementor .elementor-element.sec-m > .elementor-container{
  padding-block: var(--gap-m) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* S */
.elementor .elementor-element.section-s,
.elementor .elementor-element.section-s > .e-con-inner,
.elementor .elementor-element.section-s > .elementor-container,
.elementor .elementor-element.sec-s,
.elementor .elementor-element.sec-s > .e-con-inner,
.elementor .elementor-element.sec-s > .elementor-container{
  padding-block: var(--gap-s) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* XS */
.elementor .elementor-element.section-xs,
.elementor .elementor-element.section-xs > .e-con-inner,
.elementor .elementor-element.section-xs > .elementor-container,
.elementor .elementor-element.sec-xs,
.elementor .elementor-element.sec-xs > .e-con-inner,
.elementor .elementor-element.sec-xs > .elementor-container{
  padding-block: var(--gap-xs) !important;
  padding-inline: var(--space-side-fluid) !important;
}

/* XXS */
.elementor .elementor-element.section-xxs,
.elementor .elementor-element.section-xxs > .e-con-inner,
.elementor .elementor-element.section-xxs > .elementor-container,
.elementor .elementor-element.sec-xxs,
.elementor .elementor-element.sec-xxs > .e-con-inner,
.elementor .elementor-element.sec-xxs > .elementor-container{
  padding-block: var(--gap-xxs) !important;
  padding-inline: var(--space-side-fluid) !important;
}


/* Base: nur Side Padding */
.elementor .elementor-element.section,
.elementor .elementor-element.section > .e-con-inner,
.elementor .elementor-element.section > .elementor-container,
.elementor .elementor-element.sec,
.elementor .elementor-element.sec > .e-con-inner,
.elementor .elementor-element.sec > .elementor-container{
  padding-inline: var(--space-side-fluid) !important;
}


/* Header Section */
.elementor .elementor-element.section-header,
.elementor .elementor-element.sec-header{
  padding-block: var(--gap-xs) !important;
  padding-inline: var(--space-side-fluid) !important;
}


/* Hero */
.elementor .elementor-element.section-hero,
.elementor .elementor-element.sec-hero{
  min-height: 100vh !important;
}
.elementor .elementor-element.section-hero > .e-con-inner,
.elementor .elementor-element.sec-hero > .e-con-inner{
  justify-content: center !important;
}


/* Offset (NICHT fluid machen!) */
:root{
  --section-offset-header: 80px;
}
.elementor .elementor-element.section-offset,
.elementor .elementor-element.sec-offset{
  padding-top: calc(var(--section-offset-header) + var(--gap-xxl)) !important;
}