/* =========================================================
   GAP UTILITIES – Elementor-kompatibel (Loop-Grid safe)
   ========================================================= */

/* 1) Tokens (wie gehabt) */
:root{
  --gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);
  --gap-xs:  clamp(0.5rem,  calc(0.45vw + 0.39rem), 0.75rem);
  --gap-s:   clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);
  --gap-m:   clamp(1.25rem, calc(0vw + 1.25rem),   1.25rem);
  --gap-l:   clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);
  --gap-xl:  clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);
  --gap-xxl: clamp(1.25rem, calc(11.36vw - 1.59rem), 7.5rem);
}

/* 2) Utilities setzen NUR die laufende Var */
.gap-xxs{--flow-gap:var(--gap-xxs)}
.gap-xs {--flow-gap:var(--gap-xs)}
.gap-s  {--flow-gap:var(--gap-s)}
.gap-m  {--flow-gap:var(--gap-m)}
.gap-l  {--flow-gap:var(--gap-l)}
.gap-xl {--flow-gap:var(--gap-xl)}
.gap-xxl{--flow-gap:var(--gap-xxl)}
.gap-none,.gap-stop{--flow-gap:0}

/* 3) Anwendung: normale (höhere) Spezifität als :where()
   → kann Elementor-Regeln überstimmen, WENN nach Elementor geladen */
.elementor .e-con,
.elementor .e-con-inner,
.elementor .elementor-container,
.elementor .elementor-widget-wrap{
  gap: var(--flow-gap, normal);
}

/* 4) Optional: .gap-* wirkt auch außerhalb von Elementor auf sich selbst */
.gap-xxs,.gap-xs,.gap-s,.gap-m,.gap-l,.gap-xl,.gap-xxl,.gap-none,.gap-stop{
  gap: var(--flow-gap, normal);
}

/* 5) (Optional) getrennte Achsen aktivieren, falls gebraucht */
/*
.gap-x-xxs{--flow-col-gap:var(--gap-xxs)} .gap-x-xs{--flow-col-gap:var(--gap-xs)}
.gap-x-s{--flow-col-gap:var(--gap-s)}   .gap-x-m{--flow-col-gap:var(--gap-m)}
.gap-x-l{--flow-col-gap:var(--gap-l)}   .gap-x-xl{--flow-col-gap:var(--gap-xl)}
.gap-x-xxl{--flow-col-gap:var(--gap-xxl)}

.gap-y-xxs{--flow-row-gap:var(--gap-xxs)} .gap-y-xs{--flow-row-gap:var(--gap-xs)}
.gap-y-s{--flow-row-gap:var(--gap-s)}     .gap-y-m{--flow-row-gap:var(--gap-m)}
.gap-y-l{--flow-row-gap:var(--gap-l)}     .gap-y-xl{--flow-row-gap:var(--gap-xl)}
.gap-y-xxl{--flow-row-gap:var(--gap-xxl)}

.elementor .e-con,
.elementor .e-con-inner,
.elementor .elementor-container,
.elementor .elementor-widget-wrap{
  column-gap: var(--flow-col-gap, var(--flow-gap, normal));
  row-gap:    var(--flow-row-gap, var(--flow-gap, normal));
}
*/

/* 6) Notfall-Hebel (falls ein Theme/Plugin hart verdrahtet):
   Nur falls nötig einkommentieren – gezielt, nicht global. */
/*
.elementor .e-con,
.elementor .e-con-inner,
.elementor .elementor-container,
.elementor .elementor-widget-wrap{
  gap: var(--flow-gap, normal) !important;
}
*/