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

Wichtig:
- Padding wird nur auf das Element gesetzt, das die Klasse trägt.
- Kein Padding auf .e-con-inner oder .elementor-container,
  damit sich Boxed-Container nicht doppeln.
========================================================= */


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

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

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

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

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

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

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

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

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


/* ---------- Base: nur Side Padding ---------- */

.elementor .elementor-element.section,
.elementor .elementor-element.sec {
  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;
}