/* Perfekte Mobile-Darstellung - 2 Spalten + vollständige Bilder */

/* Mobile First - Alle Bildschirmgrößen */
@media screen and (max-width: 768px) {

  /* Container-Fix für vollständige Bilder */
  .container,
  .max-w-5xl,
  .mx-auto {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 !important;
  }

  /* Grid-System Mobile - 2 Spalten garantiert */
  .grid,
  .grid-cols-3,
  .md\\:grid-cols-4,
  .lg\\:grid-cols-6,
  [class*="grid-cols"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Exakt 2 Spalten */
    gap: 4px !important;
    width: 100% !important;
  }

  /* Bild-Container - Vollständige Anzeige */
  .aspect-square,
  .aspect-\\[2\\/3\\],
  .aspect-\\[3\\/2\\] {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
  }

  /* Bilder - Keine abgeschnittenen Fotos mehr */
  img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: none !important;
    outline: none !important;
    min-height: 120px !important; /* Mindesthöhe für kleine Bildschirme */
  }

  /* Video-Container Mobile */
  video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    min-height: 120px !important;
  }

  /* Aspect Ratios Mobile-optimiert */
  .aspect-square {
    aspect-ratio: 1 / 1 !important;
    min-height: calc((100vw - 16px) / 2 - 2px) !important; /* Perfekte Quadrate */
  }

  .aspect-\\[2\\/3\\] {
    aspect-ratio: 2 / 3 !important;
    min-height: calc((100vw - 16px) / 2 * 1.5 - 3px) !important;
  }

  .aspect-\\[3\\/2\\] {
    aspect-ratio: 3 / 2 !important;
    min-height: calc((100vw - 16px) / 2 * 0.67 - 1px) !important;
  }

  /* Layout-Fixes */
  .py-20,
  .py-32 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .px-10,
  .px-16,
  .md\\:px-16 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Scroll-Performance */
  * {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}

/* Sehr kleine Bildschirme (unter 480px) */
@media screen and (max-width: 480px) {

  .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .grid,
  .grid-cols-3,
  .md\\:grid-cols-4,
  .lg\\:grid-cols-6 {
    gap: 2px !important;
  }

  img {
    min-height: 100px !important;
  }

  .aspect-square {
    min-height: calc((100vw - 8px) / 2 - 1px) !important;
  }

}

/* Landscape-Modus auf Mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {

  .grid,
  .grid-cols-3,
  .md\\:grid-cols-4,
  .lg\\:grid-cols-6 {
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 Spalten im Landscape */
  }

  .aspect-square {
    min-height: calc((100vw - 24px) / 3 - 2px) !important;
  }

}

/* Fallback für ältere Mobile-Browser */
.no-grid .grid,
.no-cssGrid .grid {
  display: flex !important;
  flex-wrap: wrap !important;
}

.no-grid .grid > *,
.no-cssGrid .grid > * {
  width: calc(50% - 2px) !important;
  margin: 1px !important;
}

/* Debug-Info für Entwicklung */
@media screen and (max-width: 768px) {
  body::after {
    content: "📱 Mobile: " attr(data-projects) " Projekte";
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    z-index: 10000;
    display: none; /* Nur für Debugging aktivieren */
  }
}