.splash-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		z-index: 9999; 
	}

	.splash-option {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		transition: transform 0.5s ease, filter 0.5s ease; 
	}

	#invest {
		background-color: #808000; 
	}

	#live {
		background-color: #d89000;
	}

	.splash-content {
		position: relative;
		width: 95%;
		cursor: pointer;
		display: flex; 
		flex-direction: column; 
		justify-content: center; 
		align-items: center; 
	}

	.splash-content img {
		width: 1000px;
		height: 875px;
		object-fit: cover;
		object-position: center;
		display: block; 
		transition: transform 0.3s ease, opacity 1s ease-out; 
		opacity: 0;
	}

	.splash-content img.image-loaded {
		opacity: 1;
	}


	.info {
		position: absolute;
		width: 50%; 
		left: 100%; 
		top: 0;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		text-align: center;
		transform: translateX(-100%) rotateY(-90deg); 
		transform-origin: 100% 50%; 
		transition: transform 0.5s ease;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		opacity: 0;
	}

	.splash-content:hover .info, .splash-content.active .info {
		transform: translateX(-100%) rotateY(0deg); 
		opacity: 1;
	}

	.splash-option:hover {
		transform: scale(1.03);
		z-index: 2; 
	}

	.splash-screen:hover .splash-option:not(:hover) {
		filter: brightness(50%);
	}

	.info-link {
		display: inline-block;
		margin-top: 10px;
		font-size: 32px;
		color: white;
		text-decoration: none; 
		font-weight: bold;
	}

	.info-link:hover {
		text-decoration: underline;
	}



	.impressum-link {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		color: white;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 10; 
		text-decoration: none; 
	}

	.splash-content:hover .impressum-link,
	.splash-content.active .impressum-link {
		opacity: 1;
	}

@media (max-width: 768px) {
    .splash-screen {
        flex-direction: column; 
		align-items: center;
    }
	
   .splash-option {
        width: 100%;
        height: auto; 
        display: flex;
        justify-content: center; 
        align-items: center;
    }

    .splash-option {
        width: 100%;
        height: 50vh; 
    }
	
	.splash-content {
        width: 100%; 
        max-width: 100%; 
		position: relative;
    }

    .splash-content img {
        width: 100%;
		max-width: 60vh;
        height: 45vh; 
        max-height: 50vh; 
    }
	
    .splash-content::after {
        position: absolute;
        bottom: 35px; 
        left: 50%;
        transform: translateX(-50%);
        display: block;
    }
	
	.info-link {
		font-size: 22px;
    }
	
    .splash-content::after {
		content: attr(data-after-content);
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: #ffffff;
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 14px;
		text-align: center;
		display: block;
}

    .splash-content.clicked::after {
    	display: none; 
}
}