/* XS */

   @media (min-width: 475px) {
    .container{
      width: 100%;
    }
  }










  /* SM */
  
   @media (min-width: 640px) {
  .container{
    max-width: 640px;
  }
  }










  /* MD */
  
  @media (min-width: 768px) {
    .container{
      max-width: 768px;
    }

    /* Detailseite */


.desktopdetails{
  display: flex;
}
  }










  /* LG */
  
  @media (min-width: 1024px) {
    .container{
      max-width: 1024px;
    }
    body {
        padding-left: 280px; /* Platz für Sidebar links */
        padding-right: 0;
    }

    footer {
    margin-top: 12rem;
    margin-bottom: -5rem;

}

    /* --- SIDEBAR LINKS --- */
    .side-menu {
      left: 0;
      right: auto;
      height: 100%;
      width: 280px;
      transform: translateX(0); /* Immer sichtbar */
      visibility: visible;        border-left: none;
      box-shadow: 4px 0 15px rgba(0,0,0,0.05);
      background: var(--clr-darkgrey);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      flex-direction: column;
      border-right: 1px solid var(--clr-lightgrey);
      border-top: 1px solid var(--clr-darkgrey);
    }

    .menu-logo {
    width: 90%;
    margin-bottom: 3rem;
}

.side-menu-links li {
    margin-bottom: 2.5rem;
    font-size: 1.4rem;
}

.side-menu-links li :hover{
    color: var(--clr-red);
}

.desktop-fav-link { display: block !important; }

.social-links {
    gap: 2rem;  
}
.social-btn {
    font-size: 2.2rem; 
}
.social-btn :hover{
    color: var(--clr-red);
}

    /* Mobile Nav und Menü-Button ausblenden */
    .mobile-bottom-nav, .menu-overlay, #menuBtn {
        display: none !important;
    }







/* --- Startseite --- */












  /* --- HEADER ANPASSUNGEN --- */
    .main-header {
        left: 280px;
        width: calc(100% - 280px);
        border-radius: 0 0 40px 40px;
    }

    .header-top {
    justify-content: center;
    padding-top: 1rem;
    position: relative;
    z-index: 2;
}


    .brand-name  {
    font-size: 2rem;
    
}

/* Suchleiste */
.header-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}



.search-bar input {
    width: 25rem;
}


    .search-results {border: 1px solid var(--clr-red);
     
  
    left: 280px;
    margin-left: 20%;
    width: 36%;
    max-height: 450px;
    overflow-y: auto;
    z-index: 1999; 
}






body.season-default.scrolled .main-header {
    height: 140px; 
}


body.scrolled .header-bg { opacity: 1; }
body.scrolled .header-bottom {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: visible;
}





.product-grid {
    
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 Spalten auf Mobile */
    
}





.step-image {
  width: 180px;
  height: 180px;
}
.step-card-round p {
  font-size: 1.1rem; 
}
.step-card-round span {
  font-size: 1.2rem;
}




/* Service Cards Design */


.service-grid {
    margin: 0rem 2rem;
    gap: 4rem;
}


.service-card i {
    font-size: 2.4rem;
    
}

.service-card p {
    font-size: 1rem;
}




.category-item {
    width: 8rem;
}
.cat-icon-wrap i {
  font-size: 3.5rem;
}









/* Kategorieseite */







.category-list-grid {
    grid-template-columns: repeat(4, 1fr);
}



/* Variantenseite */






.variants-grid {
    grid-template-columns: repeat(4, 1fr);
}





/* Warenkorb */

.cart-items-list {
    margin-left: 8rem;
    margin-right: 8rem;
}

.cart-summary {
    margin-left: 8rem;
    margin-right: 8rem;
}

.cart-notes {
    margin-left: 8rem;
    margin-right: 8rem;
}
.cart-customer-info {
    margin-left: 8rem;
    margin-right: 8rem;
}

















}










  /* XL */
  
  @media (min-width: 1280px) {
    .container{
      max-width: 1280px;
    }

    .search-results {
    margin-left: 24%;
    width: 30%;
    }
    /* Warenkorb */

.cart-items-list {
    margin-left: 14rem;
    margin-right: 14rem;
}

.cart-summary {
    margin-left: 14rem;
    margin-right: 14rem;
}

.cart-notes {
    margin-left: 14rem;
    margin-right: 14rem;
}
.cart-customer-info {
    margin-left: 14rem;
    margin-right: 14rem;
}
}










  /* 2XL */

  @media (min-width: 1536px) {
    .container{
      max-width: 1536px;
    }

    .search-results {
    margin-left: 28%;
    width: 26%;
    }
    .step-image {
      margin-top: 3rem;
  width: 280px;
  height: 280px;
  }
  .production-section {
    margin: 6rem 0;
}

.production-grid {
  gap: 0.1rem;
    
}

.service-grid {
    margin: 0rem 8rem;
    gap: 16rem;
}


/* Kategorieseite */


.category-list-grid {
    grid-template-columns: repeat(5, 1fr);
}

/* Variantenseite */






.variants-grid {
    grid-template-columns: repeat(5, 1fr);
}



/* Warenkorb */

.cart-items-list {
    margin-left: 22rem;
    margin-right: 22rem;
}

.cart-summary {
    margin-left: 22rem;
    margin-right: 22rem;
}

.cart-notes {
    margin-left: 22rem;
    margin-right: 22rem;
}
.cart-customer-info {
    margin-left: 22rem;
    margin-right: 22rem;
}

}