#projectSlider {
  max-width: 1600px;
}

.mockup-wrapper {
  margin-top: 2rem;
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 800px; 
}



.desktop-stack {
  position: relative; 
  width: 100%;
  
}


.monitor-frame {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; 
  z-index: 2; 
  position: relative;
}


.monitor-screen {

  position: absolute;
  z-index: 1; 
  background-color: #fff; 
  overflow-y: scroll; 
  
  top: 3.5%;    /* (10.26 / 290.07) * 100 */
  left: 3.1%;   /* (10.77 / 352.86) * 100 */
  width: 93.8%; /* (331.32 / 352.86) * 100 */
  height: 63.8%;/* (185.09 / 290.07) * 100 */
  

  border-radius: 4px; 
}


.monitor-screen::-webkit-scrollbar { display: none; }
.monitor-screen { -ms-overflow-style: none; scrollbar-width: none; }

.monitor-screen img, video {
  width: 100%;
  height: auto;
  display: block;
}


/* --- PHONE MOCKUP --- */

.phone-mockup {
  position: absolute;
  bottom: 5%; 
  right: -5%;
  z-index: 10; 
  width: 15%; 
  min-width: 80px; 
  aspect-ratio: 9/19.5; 
  overflow-y: scroll;
  
  /* Styling */
  border: 4px solid #000000;
  border-radius: 16px; 
  background-color: #fff;
  
}

.phone-mockup img, video {
  width: 100%;
  height: auto;
  display: block;
}


.phone-mockup::-webkit-scrollbar { display: none; }
.phone-mockup { -ms-overflow-style: none; scrollbar-width: none; }


.tablet-mockup {
  position: absolute;
  bottom: 5%; 
  left: -10%; 
  z-index: 10;
  width: 25%; 
  aspect-ratio: 3/4; 
  overflow-y: scroll; 
  border: 8px solid #000000; 
  border-radius: 12px; 
  background-color: #fff;
 
}

.tablet-mockup img {
  width: 100%;
  height: auto;
  display: block;
}


.tablet-mockup::-webkit-scrollbar { display: none; }
.tablet-mockup { -ms-overflow-style: none; scrollbar-width: none; }

.tablet-mockup-quer {
  position: relative;
  border: 8px solid #000000; 
  border-radius: 12px; 
  aspect-ratio: 4/3; 
  z-index: 10;

}

.tablet-mockup-quer img {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-carousel-container {
    width: 100%;
    padding-left: 50px; 
    padding-right: 50px;
    padding-bottom: 20px;
}

.custom-arrows {
    width: 8%; 
    opacity: 1; 
   
}

.custom-arrows .carousel-control-prev-icon,
.custom-arrows .carousel-control-next-icon {
    border-radius: 50%; 
    padding:35px; 
    background-size: 80% 80%; 
    z-index: 100 !important;
    
}
.custom-arrows .carousel-control-prev-icon {
  background-image: url(../img/icons/arrows/back.svg);
}

.custom-arrows .carousel-control-next-icon {
  background-image: url(../img/icons/arrows/front.svg);
}
.custom-arrows:hover .carousel-control-prev-icon,
.custom-arrows:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8); 
    background-color: var(--rosa);
    
    
}
.carousel-dark .carousel-control-next-icon, .carousel-dark .carousel-control-prev-icon {
    filter: invert(0) grayscale(0); 
}



@media (max-width: 600px) {

  
  .mockup-carousel-container {
    width: 100%;
    padding-left: 10px;  
    padding-right: 10px;
    
  
    padding-bottom: 80px; 
    position: relative; 
  }

  .mockup-wrapper {
    margin-bottom: 0; 
    display: inline-block;
  }


  
  .custom-arrows {
    /* Positionierung ändern */
    top: auto;       /* Nicht mehr oben/mittig */
    bottom: 0;       /* Ganz unten am Rand des Containers */
    height: 60px;    /* Feste Höhe für den Bereich */
    width: 40%;      
    opacity: 1;
    display: flex;
    align-items: center;
  }


  .carousel-control-prev.custom-arrows {
    left: 20px;            
    justify-content: flex-start;
  }


  .carousel-control-next.custom-arrows {
    right: 20px;        
    justify-content: flex-end;
  }


  .custom-arrows .carousel-control-prev-icon,
  .custom-arrows .carousel-control-next-icon {
      padding: 25px;      
      background-size: 60%;
      background-color: transparent;
   
  }
  
  
  .custom-arrows:hover .carousel-control-prev-icon,
  .custom-arrows:hover .carousel-control-next-icon {
      background-color: transparent; 
  }




  .tablet-mockup {
    width: 30%;       
    left: -2%;          
    bottom: 0;        
    top: auto;      
    right: auto;        
    border-width: 3px;  
    border-radius: 6px; 
    min-width: 0 !important; 
    display: inline-block;
    

  }

  .phone-mockup {
    width: 18%;         
    right: -2%;         
    bottom: 0;         
    top: auto;
    left: auto;         
    border-width: 2px;
    border-radius: 6px; 
    min-width: 0 !important; 
    display: inline-block;
    
  }
  
  .phone-mockup img, .phone-mockup video,
  .tablet-mockup img, .tablet-mockup video {
      border-radius: 2px; 
  }
}
@media (max-width: 900px) {
 
  .tablet-mockup {
    left: 0;
    bottom: -5%;
    width: 30%;
  }
  .phone-mockup {
    right: 0;
    bottom: -5%;
    min-width: 30px !important;
  }

  /* 2. SCROLLEN VERBIETEN (Freeze) */
  .monitor-screen, 
  .phone-mockup, 
  .tablet-mockup {
      overflow: hidden !important; 
      pointer-events: none; /* Verhindert Wischen im Mockup */
      object-fit: cover !important;
      object-position: top !important;
  }
}