/* =========================================================
   STERNE (particles) – Gantry5 Helium
   Ziele:
   - Sterne als Overlay/Hintergrund in definierten Bereichen
   - UI bleibt klick-/hoverbar
   - keine Ränder / volle Abdeckung
   ========================================================= */

/* =========================================
   Sterne: volle Bildschirmbreite (100vw)
   ========================================= */

/* Der Block ist nur der Anker */
.sterne-scope.sterne-target{
  position: relative;
  overflow: visible; /* wichtig */
}

/* Canvas wird aus dem Container "herausgezogen" */
.sterne-scope.sterne-target > canvas.sterne-js-canvas-el{
  position: absolute !important;
  top: 0;
  left: 50% !important;

  width: 100vw !important;
  height: 100% !important;

  transform: translateX(-50%);
  z-index: 0 !important;

  pointer-events: none !important;
}

/* Inhalt bleibt normal im Grid */
.sterne-scope.sterne-target > .g-content{
  position: relative;
  z-index: 2;
}

/* -----------------------------------------
   1) Basis: Sterne-Ziel (empfohlen)
   Verwende im Layout: class="sterne-target"
   ----------------------------------------- */
.sterne-target{
  position: relative;
  overflow: visible; /* hidden schneidet Overhang ab, wenn nicht gewünscht */
}

/* Canvas, das die Library in den Container einfügt */
.sterne-target > canvas.sterne-js-canvas-el,
.sterne-target canvas.sterne-js-canvas-el{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;

  /* WICHTIG: UI darf nicht blockiert werden */
  pointer-events: none !important;

  /* verhindert "weiße Lücken" durch inline-canvas Verhalten */
  display: block !important;
}

/* Inhalt über den Sternen */
.sterne-target > .g-content,
.sterne-target .g-content,
.sterne-target .g-grid,
.sterne-target .g-block,
.sterne-target .g-particle,
.sterne-target .moduletable{
  position: relative;
  z-index: 2;
}

/* Sicherheitsnetz: interaktive Elemente immer oben */
.sterne-target a,
.sterne-target button,
.sterne-target input,
.sterne-target select,
.sterne-target textarea{
  position: relative;
  z-index: 3;
}

/* -----------------------------------------
   2) Optional: Overhang (größer als Container)
   Setze am gleichen Block: class="sterne-target sterne-overhang"
   ----------------------------------------- */
.sterne-target.sterne-overhang > canvas.sterne-js-canvas-el,
.sterne-target.sterne-overhang canvas.sterne-js-canvas-el{
  left: -0% !important;
  top: -20% !important;
  width: 100vw !important;
  height: 120% !important;
}

/* -----------------------------------------
   3) Optional: Sterne über ganzer Section (alternativ)
   Wenn du eine komplette Section als Sterne-Bereich willst:
   class="sterne-area" an <section> oder Block
   und dann ein inneres div für die Sterne:
   <div class="sterne-js"></div>
   ----------------------------------------- */
.sterne-area{
  position: relative;
  overflow: hidden;
}

/* Sterne-Layer (div), in den per JS ein Canvas gelegt wird */
.sterne-area .sterne-js{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* Content der Section darüber */
.sterne-area .g-container,
.sterne-area .g-grid,
.sterne-area .g-block,
.sterne-area .g-content{
  position: relative;
  z-index: 2;
}

/* Optionaler Overhang in Section-Variante */
.sterne-area .sterne-js.sterne-overhang{
  left: -30% !important;
  top: -30% !important;
  width: 150% !important;
  height: 150% !important;
}

/* -----------------------------------------
   4) Optional: Wrapper-Variante (wenn du .sterne-wrap nutzt)
   class="sterne-wrap" auf ein umschließendes Element
   und darin <div class="sterne-one"></div> als Layer
   ----------------------------------------- */
.sterne-wrap{
  position: relative;
  overflow: hidden;
}

/* Sterne-Layer im Wrapper */
.sterne-wrap .sterne-one{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* Content im Wrapper darüber */
.sterne-wrap .g-container,
.sterne-wrap .g-grid,
.sterne-wrap .g-block,
.sterne-wrap .g-content{
  position: relative;
  z-index: 2;
}

/* Optionaler Overhang für Wrapper-Variante 
.sterne-wrap .sterne-one.sterne-overhang{
  left: -10% !important;
  top: -10% !important;
  width: 120% !important;
  height: 120% !important;
}*/