/** * Minimal-invasive Performance-Optimierungen für MYP Platform * Behält den ursprünglichen Style bei, reduziert nur CPU-intensive Operationen */ /* Reduzierte Animationen ohne Style-Verlust */ @media (prefers-reduced-motion: no-preference) { /* Nur längere Animationen verkürzen */ .animate-pulse { animation-duration: 1s !important; } /* Komplexe cubic-bezier durch einfache ease ersetzen */ .glass, .mobile-menu { transition-timing-function: ease !important; transition-duration: 0.2s !important; } } /* Glassmorphismus-Optimierung - nur bei schwachen Geräten */ @media (max-width: 768px) { .glass { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } } /* Performance-freundliche Hover-Effekte */ .hover-performance { transition: opacity 0.15s ease; } .hover-performance:hover { opacity: 0.85; } /* Optimierte Loading-States */ .loading-optimized { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Mobile-optimierte Glassmorphismus-Reduktion */ @media (max-device-width: 768px), (hover: none) { .glass { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } } /* FontAwesome-Animationen reduzieren */ .fa-spin { animation-duration: 1s !important; } .fa-pulse { animation-duration: 1.5s !important; } /* Reduzierte Transform-Animationen */ .scale-hover { transition: transform 0.15s ease; } .scale-hover:hover { transform: scale(1.02); } /* Performance-bewusste Box-Shadows */ .shadow-performance { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .shadow-performance-hover:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Conditional Animation Disabling for Performance */ @media (max-width: 768px) and (max-height: 1024px) { * { animation-duration: 0.3s !important; transition-duration: 0.15s !important; } }