/* =========================================================
SNIPPET 1/2: ELG + ELF ENGINE (2/3/4 Spalten) — Elementor scoped
- echte column-gap / row-gap
- virtuelle 12-Unit-Geometrie: u = (100% - 11*g) / 12
- Engine greift NUR opt-in, wenn elf-* aktiv UND elg-* gesetzt ist
- Desktop (>=1025): Grid
- Tablet+Mobile (<=1025): untereinander (1 Spalte)
- FIX: funktioniert sowohl bei Parent/boxed (mit .e-con-inner)
       als auch bei Child-Containern (ohne .e-con-inner)
========================================================= */

/* ---------------------------------------------
   1) ELG: Gutter-Stufen aus --gap-*
   elg-{0|xxs|xs|s|m|l|xl|xxl|xxxl}
---------------------------------------------- */
.elementor .elg-0    { --g: var(--gap-0); }
.elementor .elg-xxs  { --g: var(--gap-xxs); }
.elementor .elg-xs   { --g: var(--gap-xs); }
.elementor .elg-s    { --g: var(--gap-s); }
.elementor .elg-m    { --g: var(--gap-m); }
.elementor .elg-l    { --g: var(--gap-l); }
.elementor .elg-xl   { --g: var(--gap-xl); }
.elementor .elg-xxl  { --g: var(--gap-xxl); }
.elementor .elg-xxxl { --g: var(--gap-xxxl); }

/* ---------------------------------------------
   2) Basis: virtuelle 12-Unit-Einheit u
   -> nur aktiv, wenn elf-* UND elg-* gesetzt ist
---------------------------------------------- */
.elementor .elf-2[class*="elg-"],
.elementor .elf-3[class*="elg-"],
.elementor .elf-4[class*="elg-"]{
  --u: calc((100% - (11 * var(--g))) / 12);
}

/* ---------------------------------------------
   3) Desktop: Grid Engine (>=1025px)
   -> Parent neutralisieren, Grid auf Wrapper (Parent/boxed)
   -> oder Grid direkt auf Container (Child-Container ohne Wrapper)
---------------------------------------------- */
@media (min-width: 480px){

  /* Parent nicht flexen lassen (Elementor setzt oft e-flex) */
  .elementor .elf-2[class*="elg-"],
  .elementor .elf-3[class*="elg-"],
  .elementor .elf-4[class*="elg-"]{
    display: block !important;
  }

  /* ===========================
     2 SPALTEN — Parent/boxed
  ============================ */
  .elementor .elf-2[class*="elg-"] > .e-con-inner,
  .elementor .elf-2[class*="elg-"] > .elementor-container{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-2[class*="elg-"] > .e-con-inner > :nth-child(1 of .e-con, .elementor-element),
  .elementor .elf-2[class*="elg-"] > .elementor-container > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-2[class*="elg-"] > .e-con-inner > :nth-child(2 of .e-con, .elementor-element),
  .elementor .elf-2[class*="elg-"] > .elementor-container > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }

  /* ===========================
     2 SPALTEN — Child-Container (kein .e-con-inner)
     -> NUR wenn e-child, damit Parent nicht kaputtgeht
  ============================ */
  .elementor .elf-2.e-child[class*="elg-"]{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-2.e-child[class*="elg-"] > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-2.e-child[class*="elg-"] > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }

  /* ===========================
     3 SPALTEN — Parent/boxed
  ============================ */
  .elementor .elf-3[class*="elg-"] > .e-con-inner,
  .elementor .elf-3[class*="elg-"] > .elementor-container{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w) var(--c3w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-3[class*="elg-"] > .e-con-inner > :nth-child(1 of .e-con, .elementor-element),
  .elementor .elf-3[class*="elg-"] > .elementor-container > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-3[class*="elg-"] > .e-con-inner > :nth-child(2 of .e-con, .elementor-element),
  .elementor .elf-3[class*="elg-"] > .elementor-container > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }
  .elementor .elf-3[class*="elg-"] > .e-con-inner > :nth-child(3 of .e-con, .elementor-element),
  .elementor .elf-3[class*="elg-"] > .elementor-container > :nth-child(3 of .e-con, .elementor-element){
    grid-column: 3; min-width: 0;
  }

  /* ===========================
     3 SPALTEN — Child-Container (kein .e-con-inner)
     -> NUR wenn e-child
  ============================ */
  .elementor .elf-3.e-child[class*="elg-"]{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w) var(--c3w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-3.e-child[class*="elg-"] > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-3.e-child[class*="elg-"] > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }
  .elementor .elf-3.e-child[class*="elg-"] > :nth-child(3 of .e-con, .elementor-element){
    grid-column: 3; min-width: 0;
  }

  /* ===========================
     4 SPALTEN — Parent/boxed
  ============================ */
  .elementor .elf-4[class*="elg-"] > .e-con-inner,
  .elementor .elf-4[class*="elg-"] > .elementor-container{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w) var(--c3w) var(--c4w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-4[class*="elg-"] > .e-con-inner > :nth-child(1 of .e-con, .elementor-element),
  .elementor .elf-4[class*="elg-"] > .elementor-container > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-4[class*="elg-"] > .e-con-inner > :nth-child(2 of .e-con, .elementor-element),
  .elementor .elf-4[class*="elg-"] > .elementor-container > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }
  .elementor .elf-4[class*="elg-"] > .e-con-inner > :nth-child(3 of .e-con, .elementor-element),
  .elementor .elf-4[class*="elg-"] > .elementor-container > :nth-child(3 of .e-con, .elementor-element){
    grid-column: 3; min-width: 0;
  }
  .elementor .elf-4[class*="elg-"] > .e-con-inner > :nth-child(4 of .e-con, .elementor-element),
  .elementor .elf-4[class*="elg-"] > .elementor-container > :nth-child(4 of .e-con, .elementor-element){
    grid-column: 4; min-width: 0;
  }

  /* ===========================
     4 SPALTEN — Child-Container (kein .e-con-inner)
     -> NUR wenn e-child
  ============================ */
  .elementor .elf-4.e-child[class*="elg-"]{
    display: grid !important;
    grid-template-columns: var(--c1w) var(--c2w) var(--c3w) var(--c4w);
    column-gap: var(--g) !important;
    row-gap: var(--g) !important;
    align-items: stretch;
  }

  .elementor .elf-4.e-child[class*="elg-"] > :nth-child(1 of .e-con, .elementor-element){
    grid-column: 1; min-width: 0;
  }
  .elementor .elf-4.e-child[class*="elg-"] > :nth-child(2 of .e-con, .elementor-element){
    grid-column: 2; min-width: 0;
  }
  .elementor .elf-4.e-child[class*="elg-"] > :nth-child(3 of .e-con, .elementor-element){
    grid-column: 3; min-width: 0;
  }
  .elementor .elf-4.e-child[class*="elg-"] > :nth-child(4 of .e-con, .elementor-element){
    grid-column: 4; min-width: 0;
  }
}

/* ---------------------------------------------
   4) Mobile: untereinander (<=767px)
   -> sowohl Wrapper-Variante als auch Child-Variante
---------------------------------------------- */
@media (max-width: 479px){

  /* Wrapper-Variante (Parent/boxed) */
  .elementor .elf-2[class*="elg-"] > .e-con-inner,
  .elementor .elf-3[class*="elg-"] > .e-con-inner,
  .elementor .elf-4[class*="elg-"] > .e-con-inner,
  .elementor .elf-2[class*="elg-"] > .elementor-container,
  .elementor .elf-3[class*="elg-"] > .elementor-container,
  .elementor .elf-4[class*="elg-"] > .elementor-container{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: var(--g) !important;
    column-gap: 0 !important;
  }

  /* Child-Variante (ohne .e-con-inner) */
  .elementor .elf-2.e-child[class*="elg-"],
  .elementor .elf-3.e-child[class*="elg-"],
  .elementor .elf-4.e-child[class*="elg-"]{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: var(--g) !important;
    column-gap: 0 !important;
  }
}