/* Hintergrund-Effekt: dekorative Ebene hinter dem Inhalt des umgebenden Containers.
   Das Widget liegt im Frontend außerhalb des Flusses und bedeckt den Container
   (bei „Boxed“ den äußeren Container, in klassischen Spalten die Spaltenfläche).
   Werte kommen als CSS-Variablen aus den Widget-Reglern; Rahmen und Radius des Containers setzt das Skript. */

/* ---------- Container: eigene Stapelebene, damit die Ebene hinter den übrigen Widgets liegt ---------- */
.e-con:has(> .elementor-widget-up_hintergrund_effekt .up-effekt--flaeche),
.e-con:has(> .e-con-inner > .elementor-widget-up_hintergrund_effekt .up-effekt--flaeche),
.elementor-widget-wrap:has(> .elementor-widget-up_hintergrund_effekt .up-effekt--flaeche) {
  isolation: isolate;
}

/* ---------- Widget-Hülle ---------- */
/* Keine eigene Stapelebene, sonst landet die Effekt-Ebene vor dem Inhalt */
.elementor-widget-up_hintergrund_effekt {
  z-index: auto !important;
}
/* Frontend: aus dem Fluss nehmen und über den ganzen Container legen (schlägt Breiten, Abstände und Position aus Elementor) */
body:not(.elementor-editor-active) .elementor-widget-up_hintergrund_effekt {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* ---------- Effekt-Ebene ---------- */
.up-effekt {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.up-effekt__ebene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Platzhalter im Editor ----------
   Nur im Editor: kleines Schild oben links im Abschnitt, außerhalb des Flusses (Layout wie auf der Website).
   Sichtbar, solange man den Abschnitt überfährt oder das Widget ausgewählt ist; sonst über den Navigator erreichbar. */
.up-effekt-hinweis {
  display: none;
}
body.elementor-editor-active .elementor-widget-up_hintergrund_effekt {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 5 !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* mehrere Effekte im selben Abschnitt untereinander */
body.elementor-editor-active .elementor-widget-up_hintergrund_effekt + .elementor-widget-up_hintergrund_effekt { top: 36px; }
body.elementor-editor-active .elementor-widget-up_hintergrund_effekt + .elementor-widget-up_hintergrund_effekt + .elementor-widget-up_hintergrund_effekt { top: 64px; }
.elementor-editor-active .up-effekt-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px dashed rgb(41 218 255 / .45);
  border-radius: 999px;
  background: rgb(2 14 40 / .85);
  color: #c4cdd3;
  font: 500 10px/1.3 Roboto, system-ui, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.elementor-editor-active :is(.e-con, .elementor-widget-wrap):hover > .elementor-widget-up_hintergrund_effekt .up-effekt-hinweis,
.elementor-editor-active .e-con:hover > .e-con-inner > .elementor-widget-up_hintergrund_effekt .up-effekt-hinweis,
.elementor-editor-active .elementor-widget-up_hintergrund_effekt:is(:hover, .elementor-element-editable) .up-effekt-hinweis {
  opacity: 1;
}
.up-effekt-hinweis__punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #29daff;
  box-shadow: 0 0 8px #29daff;
}

/* ---------- Lichtstrahlen: Canvas von oben rechts ----------
   --up-effekt-versatz verschiebt die Oberkante; negativ reicht die Ebene über den Container hinaus. */
.up-effekt--lichtstrahlen .up-effekt__ebene {
  top: var(--up-effekt-versatz, 0px);
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: calc(100% - var(--up-effekt-versatz, 0px));
  margin: 0;
  animation: up-effekt-lichteinfall 2.6s cubic-bezier(.16, 1, .3, 1) .15s both;
}
/* Maske: Strahlen laufen zur Textseite unten links aus */
.up-effekt--lichtstrahlen.up-effekt--maske .up-effekt__ebene {
  -webkit-mask-image: radial-gradient(95% 115% at 100% 0%, #000 0%, rgb(0 0 0 / .75) 34%, rgb(0 0 0 / .25) 62%, transparent 86%);
          mask-image: radial-gradient(95% 115% at 100% 0%, #000 0%, rgb(0 0 0 / .75) 34%, rgb(0 0 0 / .25) 62%, transparent 86%);
}
@media (max-width: 767px) {
  .up-effekt--lichtstrahlen.up-effekt--maske .up-effekt__ebene {
    -webkit-mask-image: radial-gradient(140% 90% at 100% 0%, #000 0%, rgb(0 0 0 / .6) 40%, transparent 85%);
            mask-image: radial-gradient(140% 90% at 100% 0%, #000 0%, rgb(0 0 0 / .6) 40%, transparent 85%);
  }
}
@keyframes up-effekt-lichteinfall {
  from { opacity: 0; transform: translate3d(6%, -6%, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- Farbwolken: zwei verschwommene Wolken treiben langsam hinter dem Inhalt ----------
   Die Ebene schneidet auf die Innenfläche des Containers zu (Radius aus dem Skript). */
.up-effekt--farbwolken .up-effekt__ebene {
  overflow: hidden;
  border-radius: var(--up-effekt-radius-innen, var(--border-radius, 0px));
}
.up-effekt--farbwolken .up-effekt__ebene::before,
.up-effekt--farbwolken .up-effekt__ebene::after {
  content: "";
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(var(--up-wolken-unschaerfe, 34px));
  will-change: transform;
}
/* Wolke 1 oben links */
.up-effekt--farbwolken .up-effekt__ebene::before {
  top: -35%;
  left: -30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--up-wolke-1, #00b7d1) calc(42% * var(--up-wolken-deckkraft, 1)), transparent), transparent 68%);
  animation: up-effekt-schwebe-a calc(16s / var(--up-wolken-tempo, 1)) ease-in-out calc(var(--up-wolken-versatz, 0) * -1s) infinite alternate;
}
/* Wolke 2 unten rechts, mit Kern */
.up-effekt--farbwolken .up-effekt__ebene::after {
  right: -32%;
  bottom: -40%;
  background:
    radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--up-wolke-kern, #008caa) calc(34% * var(--up-wolken-deckkraft, 1)), transparent), transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--up-wolke-2, #1848be) calc(46% * var(--up-wolken-deckkraft, 1)), transparent), transparent 68%);
  animation: up-effekt-schwebe-b calc(21s / var(--up-wolken-tempo, 1)) ease-in-out calc(var(--up-wolken-versatz, 0) * -1.6s) infinite alternate;
}
@keyframes up-effekt-schwebe-a {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(28%, 18%) scale(1.18); }
  70%  { transform: translate(8%, 34%) scale(.92); }
  100% { transform: translate(34%, 6%) scale(1.1); }
}
@keyframes up-effekt-schwebe-b {
  0%   { transform: translate(0, 0) scale(1.05); }
  40%  { transform: translate(-30%, -16%) scale(.9); }
  75%  { transform: translate(-12%, -34%) scale(1.2); }
  100% { transform: translate(-36%, -8%) scale(1); }
}

/* ---------- Lichtrand: zwei Lichtpunkte laufen um den Rand des Containers ----------
   Liegt über dem Inhalt (nur der schmale Rand ist sichtbar) und auf dem Rahmen des Containers. */
@property --up-lichtrand-winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.up-effekt--lichtrand {
  z-index: 1;
}
.up-effekt--lichtrand .up-effekt__ebene {
  inset:
    calc(var(--up-effekt-rand-o, var(--border-top-width, 0px)) * -1)
    calc(var(--up-effekt-rand-r, var(--border-right-width, 0px)) * -1)
    calc(var(--up-effekt-rand-u, var(--border-bottom-width, 0px)) * -1)
    calc(var(--up-effekt-rand-l, var(--border-left-width, 0px)) * -1);
  padding: var(--up-lichtrand-breite, 1px);
  border-radius: var(--up-lichtrand-radius, var(--up-effekt-radius, var(--border-radius, 0px)));
  background: conic-gradient(from var(--up-lichtrand-winkel),
    transparent 0%, transparent 24%,
    var(--up-lichtrand-farbe, rgb(255 255 255 / .45)) 33%,
    var(--up-lichtrand-akzent, rgb(0 183 209 / .3)) 38%,
    transparent 47%, transparent 74%,
    var(--up-lichtrand-farbe, rgb(255 255 255 / .45)) 83%,
    transparent 91%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: up-effekt-lichtrand calc(14s / var(--up-lichtrand-tempo, 1)) linear infinite;
}
@keyframes up-effekt-lichtrand {
  to { --up-lichtrand-winkel: 360deg; }
}

/* ---------- Aurora: leise, wandernde Lichtwolken hinter der ganzen Seite ----------
   Das Skript hängt die Ebene an body, damit sie hinter allen Abschnitten liegt; bis dahin bleibt sie aus. */
.elementor-widget-up_hintergrund_effekt .up-effekt--aurora {
  display: none;
}
.up-effekt--aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  animation: up-effekt-einblenden 1.6s ease-out both;
}
.up-effekt--aurora::before,
.up-effekt--aurora::after {
  content: "";
  position: absolute;
  inset: -20vmax;
  pointer-events: none;
  will-change: transform, opacity;
}
.up-effekt--aurora::before {
  background:
    radial-gradient(38vmax 28vmax at 24% 30%, color-mix(in srgb, var(--up-aurora-1, #00b7d1) calc(var(--up-aurora-deckkraft, 10%) * .7), transparent), transparent 70%),
    radial-gradient(34vmax 26vmax at 76% 70%, color-mix(in srgb, var(--up-aurora-2, #024678) var(--up-aurora-deckkraft, 10%), transparent), transparent 70%);
  animation: up-effekt-aurora-a calc(48s / var(--up-aurora-tempo, 1)) ease-in-out infinite alternate;
}
.up-effekt--aurora::after {
  background:
    radial-gradient(30vmax 22vmax at 70% 24%, color-mix(in srgb, var(--up-aurora-3, #29daff) calc(var(--up-aurora-deckkraft, 10%) * .45), transparent), transparent 70%),
    radial-gradient(36vmax 26vmax at 30% 78%, color-mix(in srgb, var(--up-aurora-4, #008ca0) calc(var(--up-aurora-deckkraft, 10%) * .6), transparent), transparent 70%);
  animation: up-effekt-aurora-b calc(62s / var(--up-aurora-tempo, 1)) ease-in-out infinite alternate;
}
@keyframes up-effekt-aurora-a {
  0% { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .85; }
  50% { transform: translate3d(3%, 4%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(6%, -3%, 0) scale(1.02); opacity: .8; }
}
@keyframes up-effekt-aurora-b {
  0% { transform: translate3d(5%, 3%, 0) scale(1.04); opacity: .9; }
  100% { transform: translate3d(-5%, -4%, 0) scale(.96); opacity: .7; }
}
@keyframes up-effekt-einblenden {
  from { opacity: 0; }
}

/* ---------- Bewegung reduzieren: ruhige Standbilder ---------- */
@media (prefers-reduced-motion: reduce) {
  .up-effekt--lichtstrahlen .up-effekt__ebene,
  .up-effekt--farbwolken .up-effekt__ebene::before,
  .up-effekt--farbwolken .up-effekt__ebene::after,
  .up-effekt--lichtrand .up-effekt__ebene,
  .up-effekt--aurora,
  .up-effekt--aurora::before,
  .up-effekt--aurora::after {
    animation: none;
  }
}