/* Spezielle Styles für die mobile Ansicht der Menü-Seite */

/* Bildsektion anpassen */
@media (max-width: 767px) {
  /* Mehr Abstand zwischen Kategorien und Bild */
  .categoryNav {
    margin-bottom: 25px !important;
  }
  
  .featuredContainer {
    margin: 10px auto 20px !important;
    padding: 0 10px !important;
    max-width: 95% !important;
    overflow: visible !important;
    position: relative !important;
  }
  
  .featuredImage, 
  .itemImage,
  .itemImageContainer {
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  .itemImage {
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(0.92) !important;
  }
  
  /* Abstand zwischen Bild und Text */
  .featuredItem {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Text-Container für Titel und Beschreibung fixieren */
  .featuredItem > div:nth-of-type(2) {
    margin-top: 0px !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 1) 100%) !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }
  
  /* Text weiter nach unten schieben - Abstand leicht reduziert */
  .itemTitle {
    margin-top: 10px !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    position: relative !important;
    z-index: 10 !important;
    padding-top: 0 !important;
  }
  
  .itemDescription {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    padding: 0 10px !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Mehr Platz zum Preis */
  .itemMetaInfo {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Navigation-Pfeile anpassen */
  .navigationControls {
    top: 130px !important;
    z-index: 20 !important;
    padding: 0 5px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .navigationControls .navArrow {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Hinzufügen von Abstand zwischen den Hauptkategorien und der Navigation */
  .mainTabs {
    margin-bottom: 20px !important;
  }
}

/* Kleiner Screen (iPhone SE etc.) */
@media (max-width: 380px) {
  .featuredContainer {
    max-width: 95% !important;
    margin: 5px auto 15px !important;
  }
  
  .featuredImage, 
  .itemImageContainer,
  .itemImage {
    height: 220px !important;
  }
  
  .itemImage {
    transform: scale(0.9) !important;
  }
  
  .itemTitle {
    font-size: 18px !important;
    margin-top: 7px !important;
    margin-bottom: 8px !important;
  }
  
  .itemDescription {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding: 0 5px !important;
    font-size: 14px !important;
  }
  
  .navigationControls {
    top: 110px !important;
  }
  
  .navigationControls .navArrow {
    width: 28px !important;
    height: 28px !important;
  }
}