.slider-container {
    background: transparent;
    color: white;
    font-family: Calibri;
    text-align: center;
    height: 40%;
    display: inline-flex;

    margin-left: -7.5%; /*ist so weil das main-div einen Margin hat*/
   
    overflow: hidden;
    scrollbar-width: none;

    transform: translateX(0px); /*wird mit js animiert*/
    transition: transform 0.3s ease-out; 
    will-change: transform; /*sagt dem Browser das hier animiert wird, für Optimierung*/
    cursor: grab; /* wird per js später auf "grabbing" gestellt wenn maus1 */  
}

#hinweis {
    margin-right: 65vw;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    transition: opacity 0.5s ease-out;
}

#hinweis p{
    margin-top: 10px;
    margin-left: 6vw;
    border: none;
    background: none;
    font-style: italic;
    opacity: 60%;
}

#hinweis img{
    width: 20px;
    filter: invert(1) hue-rotate(180deg);
    font-style: italic;
    opacity: 60%;
}




.slide {
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /*sonst clippt h3 in der Decke*/

     /*für 3d Rotate Effekt, Abstand zur Kamera*/
     perspective: 2000px; /*je kleiner der Wert, desto stärker die Verzerrung*/
}

.slide h3{
    font-size: 2rem;
    padding: 20px;
}
@media screen and (max-width: 999px) {
    .slide h3 {
        font-size: 1.5rem;
    }
  }

.slide p{
    color: white;
    background: black;
    border: 2px solid white;
    padding: 10px;
    border-radius: 10px;
    user-select: none;
    font-size: 1rem;
    transform: translateY(-3rem);
}
@media screen and (max-width: 999px) {
    .slide p {
        font-size: 1rem;
        transform: translateY(0);
        width: 90vw;
    }
  }

.slide p:hover {
    text-decoration: underline;
}


.slide img{
    width: 50vw;
    border-radius: 20px;
    user-select: none;

    /*für 3d Rotate Effekt*/
    transform-origin: center center; /*Rotations Effekt um vertikale Achse*/
    transform-style: preserve-3d; /*Damit nur ein Child Element alleine transformiert werden kann*/
    backface-visibility: hidden; /*Rückseite des Elements wird ausgeblendet*/
  }
  @media screen and (max-width: 999px) {
    .slide img{
        width: 90vw;
    }
    .slider-container {
        margin-left: 0%;
        margin-bottom: 5%;
        margin-top: 2%;
    }
  }



/* .grabbing Klasse */
.grabbing {
    cursor: grabbing;
}

.grabbing img {
    box-shadow: 5px 5px 20px -1px white;
    transition: box-shadow 0.2s ease-in-out; /*darf nur box-shadow sein, sonst bezieht es sich auf die slide Animation und wird träger*/
}