/* Mobile-Optimierungen für alle Bilder */

/* Sicherstellen dass alle Bilder angezeigt werden */
@media (max-width: 768px) {

  /* Grid-Layout für Mobile optimieren */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }

  /* Bilder responsive machen */
  img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Video-Optimierung Mobile */
  video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Lazy Loading unterstützen */
  img[loading="lazy"] {
    opacity: 1 !important;
  }

  /* Aspect Ratios beibehalten */
  .aspect-square {
    aspect-ratio: 1 / 1 !important;
  }

  .aspect-\[2\/3\] {
    aspect-ratio: 2 / 3 !important;
  }

  .aspect-\[3\/2\] {
    aspect-ratio: 3 / 2 !important;
  }

  /* Fallback für ältere Mobile-Browser */
  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }

  /* Portrait-Modus */
  @media (orientation: portrait) {
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* Landscape-Modus */
  @media (orientation: landscape) {
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
}

/* Performance für Mobile */
@media (max-width: 768px) {
  * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}