body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

		

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: rgba(0, 0, 0, 0.3); /* Arrow color */
    cursor: pointer;
    z-index: 15; /* Ensure arrows are above other elements */
    user-select: none; /* Prevent text selection */
}

.left-arrow {
    left: 10%; /* Position from the left */
}

.right-arrow {
    right: 10%; /* Position from the right */
}

.contact-link {
    position: absolute;
    bottom: 4VH; /* Position unter dem Back-Link */
    left: 3vw;
    font-size: 16px;
    color: black;
    text-decoration: none;
    font-family: 'Inter';
    z-index: 20;
}


        .back-link {
            position: absolute;
            top: 4vh;
            left: 3vw;
            font-size: 18px;
            color: black;
            text-decoration: none;
            font-family: 'Inter';
            z-index: 20;
        }
        .left-content {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
        }
        .left-content .text-container {
            margin-left: 15%;
            white-space: nowrap;
            text-align: center;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .left-content span {
            font-size: 15px;
            font-family: 'Inter';
        }
        .image-container {
            position: relative;
            width: 80%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: filter 0.3s ease-in-out;
        }
        .image-container img {
            max-width: 70%;
            max-height: 70%;
            object-fit: contain;
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }
        .image-container img.hidden {
            opacity: 0;
        }
        .nav-area {
            position: absolute;
            top: 0;
            height: 100%;
            cursor: pointer;
            z-index: 10;
        }
        .nav-area.prev { left: 0; width: 50%; }
        .nav-area.next { right: 0; width: 50%; }
        .mobile-menu {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            background: rgba(255, 255, 255, 0.99);
            padding: 20px;
            z-index: 20;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mobile-menu a {
            display: block;
            padding: 15px 0;
            color: #333;
            text-decoration: none;
            font-family: 'Inter';
            font-size: 20px;
        }
        .menu-button {
            display: none;
            position: absolute;
            top: 3vh;
            right: 3vw;
            font-size: 28px;
            cursor: pointer;
            z-index: 20;
            background: none;
            padding: 5px 10px;
            line-height: 16px;
        }
       
        @media (max-width: 768px) {
            .left-content { display: none; }
            .image-container { width: 100%; }
            .menu-button { display: block; }
            .mobile-menu { display: flex; padding:0; }
            .back-link { left:7vw;}
			.left-arrow {
    				left: 5%; /* Position from the left */
						}
			.right-arrow {
    						right: 5%; /* Position from the right */
						}
			.contact-link {
    position: absolute;
    bottom: 4VH; /* Position unter dem Back-Link */
    left: 7vw;
    
}
        }