/* Effekte: Lichtpunkt am Logo, "Projekt anfragen" fliegt von rechts nach links herein.
   Kein Fremdcode, nichts wird nachgeladen. Wer in den Systemeinstellungen
   "Bewegung reduzieren" gewählt hat, sieht nichts davon. */

/* 1) Lichtpunkt am Logo */
.mk{display:block;position:relative;flex:none}
.spark{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;filter:drop-shadow(0 0 2px rgba(244,63,94,.8))}
.spark.on{opacity:1}
.spark.off{opacity:0;transition:opacity .8s ease-out}
.spark .tr{fill:none;stroke-linecap:round;stroke-linejoin:round}
.spark .tr-a{stroke:#8b5cf6;stroke-width:6;opacity:.30}
.spark .tr-b{stroke:#f43f5e;stroke-width:3.4;opacity:.60}
.spark .tr-c{stroke:#fff;stroke-width:1.5;opacity:.95}

@keyframes fx-pulse{
  0%{filter:none}
  35%{filter:drop-shadow(0 0 6px rgba(244,63,94,.95)) brightness(1.35)}
  100%{filter:none}
}
.mk.pulse .mark{animation:fx-pulse 1.1s ease-out}

/* 2) Button fliegt von rechts über den Bildschirm nach links, schwingt einmal über und setzt sich.
   Richtung ändern: im ersten Schritt (0%) 100vw durch -100vw und 16deg durch -16deg ersetzen,
   dann kommt er von links. */
@keyframes fx-fly{
  0%{transform:translateX(100vw) skewX(16deg);opacity:0}
  25%{opacity:1}
  72%{transform:translateX(-12px) skewX(-4deg)}
  87%{transform:translateX(5px) skewX(1.5deg)}
  100%{transform:none;opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .hero{overflow-x:clip}
  .btn.fx-fly{animation:fx-fly 1.1s cubic-bezier(.2,.8,.3,1) .9s backwards}
}
@media (prefers-reduced-motion:reduce){
  .spark{display:none}
}