.vorher-nachher-container {
    position: relative;
    width: 450px; /* Beispielbreite */
    height: 600px; /* Beispielhöhe */
    overflow: hidden;
}

.vorher-nachher-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none; /* Deaktiviert Textauswahl */
    -moz-user-select: none; /* Für Firefox */
    -webkit-user-select: none; /* Für Chrome und Safari */
    -ms-user-select: none; /* Für Internet Explorer/Edge */
}
.nachher-bild {
    z-index: 2;
    /* width: 50%;  Anfangsbreite auf 50% setzen */ 
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); /* Zeigt nur die rechte Hälfte */
}

.vorher-bild {
    z-index: 1;
}


.slider-handle {
    position: absolute;
    left: 50%; /* Mittelposition des Containers */
    top: 0;
    bottom: 0;
    width: 10px;
    background: #000;
    cursor: ew-resize;
    z-index: 3;
    user-select: none;
    animation: sliderMove 3s forwards; /* 3 Sekunden für die Bewegung */
    
}
body {
    user-select: none;
}

@keyframes sliderMove {
    from { left: 0; }
    to { left: 50%; } /* Endet in der Mitte */
}
@keyframes blinker {
    50% { opacity: 0; }
}

.try-out-text {
    position: absolute;
    right: 28%; /* Rechts vom Slider */
    top: 33%; /* Vertikale Mitte */
    transform: translateY(-50%);
    display: none; /* Versteckt zu Beginn */
    z-index: 5; /* Stellt sicher, dass es über anderen Elementen liegt */
    /* Weitere Stilangaben hier (Farbe, Schriftart, Größe etc.) */

    /* Text styling */
    font-weight: bold; /* Makes the text bold */
    font-size: 20px; /* Adjust size as needed */

    /* Blinking effect */
    animation: blinker 1s linear 3; 
}