/* Bewegungs-Bausteine (siehe assets/js/bewegung.js). */

/* Dekorative Hintergrundebene: liegt hinter dem Inhalt und fängt keine Klicks ab */
.hg { position: absolute; inset: 0 0 auto 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hg svg { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Einblenden beim Scrollen */
  .bw-ein {
    opacity: 0; transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--bw-verz, 0ms);
  }
  .bw-ein.bw-da { opacity: 1; transform: none; }

  /* Wiederverwendbare Schleifen */
  @keyframes bw-ziehen { to { transform: translateX(-50%); } }
  @keyframes bw-drehen { to { transform: rotate(360deg); } }
  @keyframes bw-schweben { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, -6%) scale(1.08); } 66% { transform: translate(-5%, 4%) scale(0.95); } }
  @keyframes bw-strich { to { stroke-dashoffset: 0; } }
  @keyframes bw-laufen { to { stroke-dashoffset: -400; } }
  @keyframes bw-puls { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } }
}

/* Ohne Bewegung: alle dekorativen Schleifen stehen still */
@media (prefers-reduced-motion: reduce) {
  .hg *, .hg { animation: none !important; }
}