Projektarbeit-MYP/backend/static/css/raspberry-pi-optimizations.css

/**
 * Mercedes-Benz MYP Platform - Ausgewogene Raspberry Pi Performance Optimierungen
 * Optimierte Performance bei Erhaltung des visuellen Designs
 */

/* ===== SCHONENDE BROWSER OPTIMIERUNGEN ===== */

/* Reduzierte GPU-Layer Optimierung */
.professional-hero,
.professional-container,
.card-professional,
.stat-card,
.glass-card,
.glass-modal {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Entferne will-change nur bei problematischen Elementen */
.glass-base,
.glass-strong,
.glass-subtle {
  will-change: auto !important;
}

/* Sanfte Scroll-Performance */
html {
  scroll-behavior: auto;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ===== MODERATE ANIMATIONEN REDUZIERUNG ===== */

/* Verkürze Transitionen statt sie zu entfernen */
*,
*::before,
*::after {
  animation-duration: 0.2s !important;
  transition-duration: 0.15s !important;
}

/* Spezielle verkürzte Hover-Effekte */
.optimized-hover {
  transition: opacity 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease !important;
}

.optimized-hover:hover {
  opacity: 0.95;
}

/* ===== REDUZIERTE GLASSMORPHISM (nicht komplett entfernt) ===== */

/* Leichtere Glassmorphism-Effekte für bessere Performance */
.glass-base,
.glass-strong,
.glass-subtle,
.glass-card,
.glass-nav,
.glass-btn,
.glass-modal,
.glass-input,
.glass-dropdown,
.mb-glass {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Dark Mode: Noch reduzierter */
.dark .glass-base,
.dark .glass-strong,
.dark .glass-subtle,
.dark .glass-card,
.dark .glass-nav,
.dark .glass-btn,
.dark .glass-modal,
.dark .glass-input,
.dark .glass-dropdown,
.dark .mb-glass {
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* ===== MODERATE TRANSFORM OPTIMIERUNGEN ===== */

/* Reduziere nur problematische Transform-Hover-Effekte */
.professional-hero:hover,
.professional-container:hover {
  transform: translateY(-1px) !important; /* Minimal statt -2px */
}

.card-professional:hover,
.stat-card:hover {
  transform: none !important; /* Diese waren am problematischsten */
}

/* Behalte wichtige Navigation-Effekte */
.nav-item-professional:hover {
  transform: translateX(2px) !important; /* Reduziert von 4px */
}

/* ===== LEICHTE SHADOW OPTIMIERUNGEN ===== */

/* Reduziere nur die schwersten Shadows */
.professional-hero,
.professional-container,
.card-professional,
.stat-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.dark .professional-hero,
.dark .professional-container,
.dark .card-professional,
.dark .stat-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* ===== FONT RENDERING OPTIMIERUNG ===== */

body, * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* ===== MEMORY OPTIMIERUNGEN ===== */

/* Image Optimierung */
img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* SVG Optimierung */
svg {
  shape-rendering: optimizeSpeed;
}

/* ===== MOBILE/TABLET OPTIMIERUNGEN ===== */

@media (max-width: 1024px) {
  /* Weitere Reduzierung für kleinere Geräte */
  *,
  *::before,
  *::after {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
  }
  
  /* Entferne backdrop-filter nur auf schwächeren Geräten */
  .glass-base,
  .glass-strong,
  .glass-subtle,
  .glass-card,
  .glass-nav,
  .glass-btn,
  .glass-modal,
  .glass-input,
  .glass-dropdown,
  .mb-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Entferne Glaseffekte für Nutzer mit reduced motion */
  .glass-base,
  .glass-strong,
  .glass-subtle,
  .glass-card,
  .glass-nav,
  .glass-btn,
  .glass-modal,
  .glass-input,
  .glass-dropdown,
  .mb-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===== SELEKTIVE CPU INTENSIVE PROPERTIES OVERRIDE ===== */

/* Entferne nur die schwersten Filter */
.glass-professional {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Vereinfache Border-Radius nur bei den größten Elementen */
.professional-hero {
  border-radius: 12px !important;
}

/* ===== PRINT OPTIMIERUNGEN ===== */

@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===== ANTI-FLICKER MASSNAHMEN ===== */

/* Verhindere Flackern bei Hover-Übergängen */
.card-professional,
.stat-card,
.professional-container,
.nav-item-professional {
  transition: all 0.15s ease-out !important;
}

/* Sanftere Button-Transitionen */
.btn-professional,
.btn-secondary-professional {
  transition: background-color 0.1s ease, box-shadow 0.1s ease !important;
}

/* ===== FINALER PERFORMANCE-BALANCE ===== */

/* Stelle sicher, dass die schwersten Performance-Killer reduziert sind */
.glass-overlay {
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.animate-slide-up,
.animate-hover-lift,
.animate-scale-in {
  animation-duration: 0.2s !important;
  transition: opacity 0.1s ease !important;
}

.hover-lift:hover {
  transform: translateY(-1px) !important; /* Reduziert von -2px */
}