/* ao-sektion-buehne.css — langsam überblendender Hintergrund für eine Elementor-Sektion (Daniel 11.09.2026).
 *
 * Zwei Ebenen liegen als ::before und ::after hinter dem Inhalt und lösen sich gegenseitig ab:
 *   A  Partikelfeld  — feines Punktraster über die Fläche, blauer Schein unten rechts
 *   B  Lichtschacht  — diagonaler Lichtkeil in Markenblau, wandert dabei ganz langsam quer
 * Ein Durchlauf dauert 48 s: je 14 s stehen, je 10 s überblenden. Der Schacht braucht 76 s für eine Wanderung.
 *
 * Kein Bild, keine Ladezeit — alles Farbverläufe. Bewegt werden nur opacity und transform, die laufen im
 * Compositor. Außerhalb des Sichtfensters hält `ao-buehne--pause` die Animation an (siehe functions.php);
 * dieselbe Lehre wie beim Laserfeld, das ungesehen 26 % Bildrate kostete.
 *
 * Die Sektion wird über ihre Elementor-Kennung angesprochen — dieselbe steht als AO_SEKTION_BUEHNE in
 * functions.php. Ändert sich die Kennung, gehört sie an beiden Stellen nachgezogen.
 */

/* User Experience (UX) auf /web-design/ */
.elementor-element-4d996748 { position: relative; }

.elementor-element-4d996748 > * { position: relative; z-index: 1; }

.elementor-element-4d996748::before,
.elementor-element-4d996748::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
}

/* A — Partikelfeld */
.elementor-element-4d996748::before {
  background-image:
    radial-gradient(1150px 720px at 88% 84%, rgba(0,171,215,.15), rgba(0,171,215,0) 70%),
    radial-gradient(900px 560px at 6% 8%, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: auto, auto, 23px 23px;
  background-repeat: no-repeat, no-repeat, repeat;
  animation: ao-buehne-a 48s ease-in-out infinite;
}

/* B — Lichtschacht. Breiter als die Sektion, damit das Wandern an den Rändern nichts freilegt. */
.elementor-element-4d996748::after {
  left: -12%; right: -12%;
  background-image:
    linear-gradient(104deg, rgba(0,171,215,0) 34%, rgba(0,171,215,.14) 50%, rgba(0,171,215,0) 66%),
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%),
    radial-gradient(1000px 640px at 94% 102%, rgba(0,171,215,.11), rgba(0,171,215,0) 72%);
  background-repeat: no-repeat;
  opacity: 0;
  animation: ao-buehne-b 48s ease-in-out infinite, ao-buehne-wandern 76s ease-in-out infinite;
}

@keyframes ao-buehne-a { 0%, 29% { opacity: 1 } 50%, 79% { opacity: 0 } 100% { opacity: 1 } }
@keyframes ao-buehne-b { 0%, 29% { opacity: 0 } 50%, 79% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ao-buehne-wandern {
  0%   { transform: translate3d(-3.5%, 0, 0) }
  50%  { transform: translate3d(3.5%, 0, 0) }
  100% { transform: translate3d(-3.5%, 0, 0) }
}

/* Außerhalb des Sichtfensters: anhalten statt weiterrechnen. */
.ao-buehne--pause::before,
.ao-buehne--pause::after { animation-play-state: paused; }

/* Reduzierte Bewegung: nur der Lichtschacht, unbewegt. */
@media (prefers-reduced-motion: reduce) {
  .elementor-element-4d996748::before { animation: none; opacity: 0; }
  .elementor-element-4d996748::after  { animation: none; opacity: 1; transform: none; }
}