/* ============================================================
   BLACKY GLOW BACKGROUND — universelle Utility-Klasse
   Identischer Look wie die BLACKY²-Sektion.

   Anwendung: Elementor → Container/Section → Tab "Erweitert"
              → Feld "CSS Klassen" → blacky-glow-bg eintragen.

   Verfügbare Modifier (mit Leerzeichen anhängen):
     --berry (default) | --silver | --cool | --warm | --acid | --gold
     --right | --bottom | --center  (default: oben links)
     --soft | --strong
     --small | --large | --xl
     --double  (zweite Blase rechts unten)
     --transparent  (Glow auf bestehendem BG, ohne dunklen Base)

   Beispiele:
     blacky-glow-bg
     blacky-glow-bg blacky-glow-bg--silver blacky-glow-bg--right
     blacky-glow-bg blacky-glow-bg--cool blacky-glow-bg--double blacky-glow-bg--large
   ============================================================ */

/* Hohe Specificity gegen Elementors per-Element-CSS (0,3,0) plus !important.
   Listet alle gängigen Elementor-Wrapper-Typen explizit auf, damit die Regel
   überall greift, egal ob klassische Section, neuer Flex-Container oder
   einfache div-Wrapper. */
.blacky-glow-bg,
.elementor .blacky-glow-bg,
.elementor-element.blacky-glow-bg,
.e-con.blacky-glow-bg,
.e-con-inner.blacky-glow-bg,
.elementor-section.blacky-glow-bg,
.elementor-column.blacky-glow-bg{
  --bgx-c1:       #0c0c0e;
  --bgx-c2:       #120d11;
  --bgx-angle:    120deg;
  --bgx-color:    rgba(125,31,63,0.30);
  --bgx-size:     540px;
  --bgx-x:        -8%;
  --bgx-y:        -6%;
  --bgx-color-2:  transparent;
  --bgx-size-2:   480px;
  --bgx-x-2:      110%;
  --bgx-y-2:      110%;

  background:
    radial-gradient(circle var(--bgx-size) at var(--bgx-x) var(--bgx-y), var(--bgx-color), transparent 70%),
    radial-gradient(circle var(--bgx-size-2) at var(--bgx-x-2) var(--bgx-y-2), var(--bgx-color-2), transparent 70%),
    linear-gradient(var(--bgx-angle), var(--bgx-c1) 0%, var(--bgx-c2) 100%) !important;
}

/* Elementors eigene Background-Overlay wegklappen, damit unser Glow nicht verdeckt wird */
.blacky-glow-bg > .elementor-background-overlay{ display:none !important; }

/* ===== Farben (Hauptglow) ===== */
.blacky-glow-bg.blacky-glow-bg--berry  { --bgx-color: rgba(125,31,63,0.30) !important; }
.blacky-glow-bg.blacky-glow-bg--silver { --bgx-color: rgba(220,220,220,0.18) !important; }
.blacky-glow-bg.blacky-glow-bg--cool   { --bgx-color: rgba(60,120,200,0.24) !important; }
.blacky-glow-bg.blacky-glow-bg--warm   { --bgx-color: rgba(220,140,40,0.22) !important; }
.blacky-glow-bg.blacky-glow-bg--acid   { --bgx-color: rgba(120,200,80,0.20) !important; }
.blacky-glow-bg.blacky-glow-bg--gold   { --bgx-color: rgba(216,199,154,0.22) !important; }

/* ===== Doppelter Glow (zweite Blase rechts unten) ===== */
.blacky-glow-bg.blacky-glow-bg--double { --bgx-color-2: rgba(125,31,63,0.22) !important; }
.blacky-glow-bg.blacky-glow-bg--double.blacky-glow-bg--silver { --bgx-color-2: rgba(220,220,220,0.12) !important; }
.blacky-glow-bg.blacky-glow-bg--double.blacky-glow-bg--cool   { --bgx-color-2: rgba(60,120,200,0.18) !important; }
.blacky-glow-bg.blacky-glow-bg--double.blacky-glow-bg--warm   { --bgx-color-2: rgba(220,140,40,0.16) !important; }
.blacky-glow-bg.blacky-glow-bg--double.blacky-glow-bg--acid   { --bgx-color-2: rgba(120,200,80,0.14) !important; }
.blacky-glow-bg.blacky-glow-bg--double.blacky-glow-bg--gold   { --bgx-color-2: rgba(216,199,154,0.14) !important; }

/* ===== Position des Hauptglows ===== */
.blacky-glow-bg.blacky-glow-bg--right  { --bgx-x: 108% !important; }
.blacky-glow-bg.blacky-glow-bg--bottom { --bgx-y: 106% !important; }
.blacky-glow-bg.blacky-glow-bg--center { --bgx-x: 50% !important; --bgx-y: 50% !important; }

/* ===== Intensität ===== */
.blacky-glow-bg.blacky-glow-bg--soft   { --bgx-color: rgba(125,31,63,0.14) !important; }
.blacky-glow-bg.blacky-glow-bg--strong { --bgx-color: rgba(125,31,63,0.55) !important; --bgx-size: 720px !important; }

/* ===== Größe ===== */
.blacky-glow-bg.blacky-glow-bg--small { --bgx-size: 360px !important; --bgx-size-2: 320px !important; }
.blacky-glow-bg.blacky-glow-bg--large { --bgx-size: 760px !important; --bgx-size-2: 640px !important; }
.blacky-glow-bg.blacky-glow-bg--xl    { --bgx-size: 960px !important; --bgx-size-2: 800px !important; }

/* ===== Ohne Base-Gradient (Glow auf bestehendem BG) ===== */
.blacky-glow-bg.blacky-glow-bg--transparent{
  background:
    radial-gradient(circle var(--bgx-size) at var(--bgx-x) var(--bgx-y), var(--bgx-color), transparent 70%),
    radial-gradient(circle var(--bgx-size-2) at var(--bgx-x-2) var(--bgx-y-2), var(--bgx-color-2), transparent 70%) !important;
}