/* =========================================================
SNIPPET: 20 - Gap Utilities
WOFÜR:
- Einheitliche Abstände für Container, Grid, Loop Grid,
  Loop Carousel und WP Media Folder Gallery
KLASSEN:
- gap-{0|xxs|xs|s|m|l|xl|xxl|xxxl}  → beide Achsen
- gx-{...}                          → nur horizontal
- gy-{...}                          → nur vertikal
WERTE KOMMEN VON:
- Tokens: var(--gap-*)
========================================================= */


/* =========================================================
   1) GAP TOKENS ZUWEISEN
========================================================= */
.elementor .gap-0    { --_gap: var(--gap-0); }
.elementor .gap-xxs  { --_gap: var(--gap-xxs); }
.elementor .gap-xs   { --_gap: var(--gap-xs); }
.elementor .gap-s    { --_gap: var(--gap-s); }
.elementor .gap-m    { --_gap: var(--gap-m); }
.elementor .gap-l    { --_gap: var(--gap-l); }
.elementor .gap-xl   { --_gap: var(--gap-xl); }
.elementor .gap-xxl  { --_gap: var(--gap-xxl); }
.elementor .gap-xxxl { --_gap: var(--gap-xxxl); }

.elementor .gx-0     { --_gx: var(--gap-0); }
.elementor .gx-xxs   { --_gx: var(--gap-xxs); }
.elementor .gx-xs    { --_gx: var(--gap-xs); }
.elementor .gx-s     { --_gx: var(--gap-s); }
.elementor .gx-m     { --_gx: var(--gap-m); }
.elementor .gx-l     { --_gx: var(--gap-l); }
.elementor .gx-xl    { --_gx: var(--gap-xl); }
.elementor .gx-xxl   { --_gx: var(--gap-xxl); }
.elementor .gx-xxxl  { --_gx: var(--gap-xxxl); }

.elementor .gy-0     { --_gy: var(--gap-0); }
.elementor .gy-xxs   { --_gy: var(--gap-xxs); }
.elementor .gy-xs    { --_gy: var(--gap-xs); }
.elementor .gy-s     { --_gy: var(--gap-s); }
.elementor .gy-m     { --_gy: var(--gap-m); }
.elementor .gy-l     { --_gy: var(--gap-l); }
.elementor .gy-xl    { --_gy: var(--gap-xl); }
.elementor .gy-xxl   { --_gy: var(--gap-xxl); }
.elementor .gy-xxxl  { --_gy: var(--gap-xxxl); }


/* =========================================================
   2) STANDARD: CONTAINER / FLEX / GRID / LOOP GRID
========================================================= */

/* beide Achsen */
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl),
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .e-con-inner,
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-container,
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-widget-container > .elementor-loop-container {
  gap: var(--_gap) !important;
}

/* horizontal */
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl),
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .e-con-inner,
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .elementor-container,
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .elementor-widget-container > .elementor-loop-container {
  column-gap: var(--_gx) !important;
}

/* vertikal */
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl),
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .e-con-inner,
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .elementor-container,
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .elementor-widget-container > .elementor-loop-container {
  row-gap: var(--_gy) !important;
}


/* =========================================================
   3) LOOP CAROUSEL (SWIPER)
   - Swiper reagiert am zuverlässigsten über Slide-Margins
========================================================= */

/* optional zusätzlich auf Wrapper */
.elementor .elementor-widget-loop-carousel:is(.gap-0,.gap-xxs,.gap-xs,.gap-s,.gap-m,.gap-l,.gap-xl,.gap-xxl,.gap-xxxl) .swiper-wrapper {
  gap: var(--_gap) !important;
}

/* horizontaler Abstand zwischen Slides */
.elementor .elementor-widget-loop-carousel:is(.gap-0,.gap-xxs,.gap-xs,.gap-s,.gap-m,.gap-l,.gap-xl,.gap-xxl,.gap-xxxl) .swiper-slide,
.elementor .elementor-widget-loop-carousel:is(.gx-0,.gx-xxs,.gx-xs,.gx-s,.gx-m,.gx-l,.gx-xl,.gx-xxl,.gx-xxxl) .swiper-slide {
  margin-right: var(--_gx, var(--_gap)) !important;
}

/* letzter Slide ohne zusätzlichen Überhang */
.elementor .elementor-widget-loop-carousel:is(.gap-0,.gap-xxs,.gap-xs,.gap-s,.gap-m,.gap-l,.gap-xl,.gap-xxl,.gap-xxxl) .swiper-slide:last-child,
.elementor .elementor-widget-loop-carousel:is(.gx-0,.gx-xxs,.gx-xs,.gx-s,.gx-m,.gx-l,.gx-xl,.gx-xxl,.gx-xxxl) .swiper-slide:last-child {
  margin-right: 0 !important;
}


/* =========================================================
   4) WP MEDIA FOLDER GALLERY (SLICK)
   - Abstand nur zwischen Slides
   - kein weißer Rand oben/links/rechts
========================================================= */

/* lokale Variablen */
.elementor .elementor-widget-wpmf_gallery.gap-0    { --wpmf-gap: var(--gap-0); }
.elementor .elementor-widget-wpmf_gallery.gap-xxs  { --wpmf-gap: var(--gap-xxs); }
.elementor .elementor-widget-wpmf_gallery.gap-xs   { --wpmf-gap: var(--gap-xs); }
.elementor .elementor-widget-wpmf_gallery.gap-s    { --wpmf-gap: var(--gap-s); }
.elementor .elementor-widget-wpmf_gallery.gap-m    { --wpmf-gap: var(--gap-m); }
.elementor .elementor-widget-wpmf_gallery.gap-l    { --wpmf-gap: var(--gap-l); }
.elementor .elementor-widget-wpmf_gallery.gap-xl   { --wpmf-gap: var(--gap-xl); }
.elementor .elementor-widget-wpmf_gallery.gap-xxl  { --wpmf-gap: var(--gap-xxl); }
.elementor .elementor-widget-wpmf_gallery.gap-xxxl { --wpmf-gap: var(--gap-xxxl); }

.elementor .elementor-widget-wpmf_gallery.gx-0     { --wpmf-gap-x: var(--gap-0); }
.elementor .elementor-widget-wpmf_gallery.gx-xxs   { --wpmf-gap-x: var(--gap-xxs); }
.elementor .elementor-widget-wpmf_gallery.gx-xs    { --wpmf-gap-x: var(--gap-xs); }
.elementor .elementor-widget-wpmf_gallery.gx-s     { --wpmf-gap-x: var(--gap-s); }
.elementor .elementor-widget-wpmf_gallery.gx-m     { --wpmf-gap-x: var(--gap-m); }
.elementor .elementor-widget-wpmf_gallery.gx-l     { --wpmf-gap-x: var(--gap-l); }
.elementor .elementor-widget-wpmf_gallery.gx-xl    { --wpmf-gap-x: var(--gap-xl); }
.elementor .elementor-widget-wpmf_gallery.gx-xxl   { --wpmf-gap-x: var(--gap-xxl); }
.elementor .elementor-widget-wpmf_gallery.gx-xxxl  { --wpmf-gap-x: var(--gap-xxxl); }

.elementor .elementor-widget-wpmf_gallery.gy-0     { --wpmf-gap-y: var(--gap-0); }
.elementor .elementor-widget-wpmf_gallery.gy-xxs   { --wpmf-gap-y: var(--gap-xxs); }
.elementor .elementor-widget-wpmf_gallery.gy-xs    { --wpmf-gap-y: var(--gap-xs); }
.elementor .elementor-widget-wpmf_gallery.gy-s     { --wpmf-gap-y: var(--gap-s); }
.elementor .elementor-widget-wpmf_gallery.gy-m     { --wpmf-gap-y: var(--gap-m); }
.elementor .elementor-widget-wpmf_gallery.gy-l     { --wpmf-gap-y: var(--gap-l); }
.elementor .elementor-widget-wpmf_gallery.gy-xl    { --wpmf-gap-y: var(--gap-xl); }
.elementor .elementor-widget-wpmf_gallery.gy-xxl   { --wpmf-gap-y: var(--gap-xxl); }
.elementor .elementor-widget-wpmf_gallery.gy-xxxl  { --wpmf-gap-y: var(--gap-xxxl); }

/* Wrapper hart neutralisieren */
.elementor .elementor-widget-wpmf_gallery .elementor-widget-container,
.elementor .elementor-widget-wpmf_gallery .gallery.wpmfslick,
.elementor .elementor-widget-wpmf_gallery .wpmf-gallerys,
.elementor .elementor-widget-wpmf_gallery .slick-list,
.elementor .elementor-widget-wpmf_gallery .slick-track,
.elementor .elementor-widget-wpmf_gallery .slick-slide,
.elementor .elementor-widget-wpmf_gallery .slick-slide > div,
.elementor .elementor-widget-wpmf_gallery .wpmf-gallery-item,
.elementor .elementor-widget-wpmf_gallery .wpmf-gallery-image {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

/* Bilder bündig */
.elementor .elementor-widget-wpmf_gallery .wpmf-gallery-item img,
.elementor .elementor-widget-wpmf_gallery .wpmf-gallery-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Abstand nur zwischen Slides, nie am ersten */
.elementor .elementor-widget-wpmf_gallery:is([class*="gap-"], [class*="gx-"]) .slick-slide + .slick-slide > div {
  padding-left: var(--wpmf-gap-x, var(--wpmf-gap, 0px)) !important;
}

/* erster sichtbarer Slide bleibt bündig */
.elementor .elementor-widget-wpmf_gallery:is([class*="gap-"], [class*="gx-"]) .slick-slide:first-child > div {
  padding-left: 0 !important;
}

/* optional vertikaler Abstand für Galerie-Items */
.elementor .elementor-widget-wpmf_gallery:is([class*="gap-"], [class*="gy-"]) .wpmf-gallery-item {
  margin-bottom: var(--wpmf-gap-y, var(--wpmf-gap, 0px)) !important;
}

/* keine zusätzliche obere Luft */
.elementor .elementor-widget-wpmf_gallery .slick-slide:first-child,
.elementor .elementor-widget-wpmf_gallery .slick-slide:first-child > div,
.elementor .elementor-widget-wpmf_gallery .slick-slide:first-child .wpmf-gallery-item,
.elementor .elementor-widget-wpmf_gallery .slick-slide:first-child .wpmf-gallery-image,
.elementor .elementor-widget-wpmf_gallery .slick-slide:first-child img {
  margin-top: 0 !important;
  padding-top: 0 !important;
}