🎉 Improved database performance by adding shm and wal files to 'backend/database/' and removing outdated documentation. 🛠️ Also updated log files for better tracking: 'backend/logs/*', 'backend/static/css/*', and 'backend/templates/base.html'. 🐛 Fixed minor CSS issues in 'backend/static/css/*.css'. 📚 Enhanced code organization and optimization across various directories. 💄 No major design changes, just refinements.

backend/static/css/caching-optimizations.css

@@ -1,17 +1,16 @@
 /**
- * MYP Platform - CSS Caching-Optimierungen
- * Performance-optimierte Styles für besseres Caching und schnellere Ladezeiten
+ * MYP Platform - CSS Caching-Optimierungen für Raspberry Pi
+ * Performance-optimierte Styles ohne GPU-intensive Effekte
  */
 
-/* ===== KRITISCHE ABOVE-THE-FOLD STYLES ===== */
+/* ===== KRITISCHE ABOVE-THE-FOLD STYLES - RASPBERRY PI OPTIMIERT ===== */
 /* Diese Styles sollten inline im HTML-Head geladen werden */
 .critical-header {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.98);
   position: sticky;
   top: 0;
   z-index: 1000;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  /* Entfernt: backdrop-filter, box-shadow */
 }
 
 .critical-nav {
@@ -30,29 +29,20 @@
 
 .critical-main {
   min-height: 100vh;
-  background: linear-gradient(135deg, #fafbfc 0%, #f5f7f9 100%);
+  background: #fafbfc;
+  /* Entfernt: gradient für bessere Performance */
 }
 
-/* ===== LAZY LOADING PLACEHOLDER ===== */
+/* ===== LAZY LOADING PLACEHOLDER - VEREINFACHT ===== */
 .lazy-placeholder {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite ease-in-out;
+  background: #f0f0f0;
   border-radius: 4px;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
+  /* Entfernt: gradient und animation */
 }
 
 .dark .lazy-placeholder {
-  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
-  background-size: 200% 100%;
+  background: #374151;
+  /* Entfernt: gradient und animation */
 }
 
 /* ===== PRELOAD HINTS ===== */
@@ -66,19 +56,15 @@
   contain-intrinsic-size: 100px;
 }
 
-/* ===== CACHE-OPTIMIERTE KOMPONENTEN ===== */
+/* ===== CACHE-OPTIMIERTE KOMPONENTEN - RASPBERRY PI OPTIMIERT ===== */
 .cache-card {
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.98);
   border: 1px solid rgba(229, 231, 235, 0.5);
   border-radius: 8px;
   padding: 1rem;
   margin-bottom: 1rem;
-  transition: transform 0.2s ease;
-  contain: layout style paint;
-}
-
-.cache-card:hover {
-  transform: translateY(-1px);
+  contain: layout style;
+  /* Entfernt: transition, hover-transform, paint containment */
 }
 
 .cache-button {
@@ -88,8 +74,8 @@
   border-radius: 6px;
   padding: 0.5rem 1rem;
   font-weight: 600;
-  transition: background-color 0.2s ease;
   contain: layout style;
+  /* Entfernt: transition */
 }
 
 .cache-button:hover {
@@ -97,23 +83,23 @@
 }
 
 .cache-input {
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.98);
   border: 1px solid rgba(229, 231, 235, 0.8);
   border-radius: 4px;
   padding: 0.5rem;
-  transition: border-color 0.2s ease;
   contain: layout style;
+  /* Entfernt: transition, box-shadow */
 }
 
 .cache-input:focus {
   outline: none;
   border-color: #0073ce;
-  box-shadow: 0 0 0 2px rgba(0, 115, 206, 0.1);
+  /* Entfernt: box-shadow */
 }
 
 /* ===== LAYOUT SHIFT PREVENTION ===== */
 .prevent-cls {
-  min-height: 200px; /* Prevent layout shift */
+  min-height: 200px;
   contain: layout;
 }
 
@@ -128,7 +114,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: opacity 0.3s ease;
+  /* Entfernt: transition */
 }
 
 .image-container img[loading="lazy"] {
@@ -158,14 +144,14 @@
   contain: layout style;
 }
 
-/* ===== DARK MODE CACHE OPTIMIZATIONS ===== */
+/* ===== DARK MODE CACHE OPTIMIZATIONS - VEREINFACHT ===== */
 .dark .cache-card {
-  background: rgba(30, 41, 59, 0.9);
+  background: rgba(30, 41, 59, 0.98);
   border-color: rgba(100, 116, 139, 0.3);
 }
 
 .dark .cache-input {
-  background: rgba(30, 41, 59, 0.9);
+  background: rgba(30, 41, 59, 0.98);
   border-color: rgba(100, 116, 139, 0.5);
   color: #e2e8f0;
 }
@@ -211,28 +197,23 @@
   }
   
   .cache-card {
-    box-shadow: none;
     border: 1px solid #000;
     break-inside: avoid;
   }
 }
 
-/* ===== GPU ACCELERATION HINTS ===== */
-.gpu-accelerated {
-  transform: translateZ(0);
-  will-change: transform;
-}
+/* ===== ALLE GPU ACCELERATION ENTFERNT ===== */
+/* GPU-Beschleunigung ist auf Raspberry Pi problematisch */
 
-/* ===== EFFICIENT ANIMATIONS ===== */
+/* ===== NUR FADE-IN OHNE TRANSFORM ===== */
 .fade-in-optimized {
   opacity: 0;
-  transform: translateY(10px);
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  /* Entfernt: transform und alle transform-Animationen */
 }
 
 .fade-in-optimized.visible {
   opacity: 1;
-  transform: translateY(0);
+  /* Nur opacity change */
 }
 
 /* ===== CONTAINER QUERIES SUPPORT ===== */
@@ -255,13 +236,15 @@
   content-visibility: hidden;
 }
 
-/* ===== REDUCED MOTION PREFERENCES ===== */
+/* ===== REDUCED MOTION PREFERENCES - ERWEITERT ===== */
 @media (prefers-reduced-motion: reduce) {
   .fade-in-optimized,
   .cache-card,
   .cache-button,
   .cache-input {
     transition: none !important;
+    transform: none !important;
+    animation: none !important;
   }
   
   .lazy-placeholder {
@@ -285,4 +268,20 @@
     border-width: 2px;
     border-color: #000;
   }
+}
+
+/* ===== RASPBERRY PI SPECIFIC OPTIMIERUNGEN ===== */
+.raspberry-pi-optimized {
+  /* Minimale CSS Properties */
+  /* Keine will-change */
+  /* Keine Transforms */
+  /* Keine Shadows */
+  /* Nur opacity und color Transitions */
+  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+}
+
+.performance-critical {
+  /* Für kritische Bereiche */
+  contain: layout style;
+  /* Keine paint containment */
 }