/* Grafiken der neuen Website (src/neu/Grafik.astro). Ruhezustand: fertige Grafik ohne Bewegung.
   Bewegung nur mit html.an (Skript laeuft), ohne Wunsch nach weniger Bewegung, und erst wenn die Grafik sichtbar ist
   (g-sichtbar, gesetzt von neu-bewegung.js). */
.grafik { margin: 0; position: relative; width: 100%; max-width: 560px; }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik .g-licht { opacity: .9; }
/* Punkte auf Pfaden: nur sichtbar, wenn der Browser Bewegung entlang eines Pfads kann und das Skript laeuft */
.g-fahrt { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .an [data-grafik] * { animation-play-state: paused; }
  .an [data-grafik].g-sichtbar * { animation-play-state: running; }
  .an .g-schweben { animation: g-schweben 7s ease-in-out infinite; transform-box: fill-box; }
  .an .g-schweben.g-v2 { animation-duration: 8.5s; animation-delay: -2s; }
  .an .g-schweben.g-v3 { animation-duration: 9.5s; animation-delay: -4s; }
  .an .g-schweben.g-v4 { animation-duration: 6.5s; animation-delay: -1s; }
  .an .g-dreh { animation: g-dreh 18s linear infinite; }
  .an .g-umlauf { animation: g-dreh 60s linear infinite; }
  .an .g-puls { animation: g-puls 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .an .g-puls.g-v2 { animation-delay: 1.4s; }
  .an .g-licht { animation: g-licht 9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .an .g-zeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-zeichnen 2.4s cubic-bezier(.6, 0, .2, 1) .3s forwards; }
  .an .g-block { animation: g-auf .9s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; transform-origin: left center; }
  .an .g-block.g-v2 { animation-delay: .15s; } .an .g-block.g-v3 { animation-delay: .3s; } .an .g-block.g-v4 { animation-delay: .45s; }
  .an .g-zeiger { animation: g-zeiger 5s ease-in-out infinite; }
  .an .g-tippen { clip-path: inset(0 100% 0 0); animation: g-tippen 2.6s steps(18) .4s forwards; }
  @supports (offset-path: path('M0 0')) {
    .an .g-fahrt { opacity: 1; animation: g-fahrt 3.6s cubic-bezier(.5, 0, .5, 1) infinite; }
    .an .g-fahrt.g-v3 { animation-delay: 1.8s; }
    .g-fahrt--a { offset-path: path('M110 110 C200 110 180 210 260 210 S330 310 410 310'); }
    .g-fahrt--b { offset-path: path('M250 210 C300 210 300 160 350 160'); }
  }
}
@keyframes g-schweben { 50% { transform: translateY(-10px); } }
@keyframes g-dreh { to { transform: rotate(360deg); } }
@keyframes g-puls { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes g-licht { to { transform: scale(1.12) translate(-12px, 8px); opacity: 1; } }
@keyframes g-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes g-auf { from { transform: scaleX(0); opacity: 0; } }
@keyframes g-zeiger { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-60px, -60px); } 55% { transform: translate(-60px, -60px) scale(.9); } 70% { transform: translate(-30px, -20px); } }
@keyframes g-tippen { to { clip-path: inset(0 0 0 0); } }
@keyframes g-fahrt { from { offset-distance: 0%; } to { offset-distance: 100%; } }