/* Isolierte Styles für die Speisebilder auf mobilen Geräten */

/* Diese Styles gelten nur für mobile Geräte */
@media (max-width: 767px) {
  /* Direktes Styling für das Image-Tag mit hoher Spezifität */
  div[id="mobile-img-container"] {
    width: 100% !important;
    max-width: 430px !important;
    height: 260px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
  }
  
  .mobile-dish-image {
    width: auto !important;
    height: auto !important;
    max-width: 92% !important;
    max-height: 92% !important;
    transform: scale(0.92) !important;
  }
  
  /* Überschreiben des Image-Tags mit wichtigen Änderungen */
  img.mobile-dish-image {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* Erhöhter Abstand für den Titel */
  h2.itemTitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 10 !important;
    position: relative !important;
  }
  
  /* Erhöhter Abstand für die Beschreibung */
  p.itemDescription {
    margin-top: 8px !important;
    z-index: 10 !important;
    position: relative !important;
    line-height: 1.5 !important;
  }
}

/* Sehr kleine Geräte (iPhone SE und ähnliche) */
@media (max-width: 380px) {
  div[id="mobile-img-container"] {
    height: 220px !important;
    margin-bottom: 8px !important;
  }
  
  .mobile-dish-image,
  img.mobile-dish-image {
    max-width: 90% !important;
    max-height: 90% !important;
    transform: scale(0.9) !important;
  }
  
  /* Etwas weniger Abstand bei sehr kleinen Geräten */
  h2.itemTitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Extra kleine Geräte */
@media (max-width: 320px) {
  div[id="mobile-img-container"] {
    height: 220px !important;
  }
  
  .mobile-dish-image,
  img.mobile-dish-image {
    max-width: 92% !important;
    max-height: 92% !important;
    transform: scale(0.92) !important;
  }
  
  /* Noch weniger Abstand bei sehr kleinen Geräten */
  h2.itemTitle {
    margin-top: 5px !important;
  }
}