/* style.css */

.highlight-banner--background {
    height: 80vh;
    background: rgb(0, 35, 110);
    background: linear-gradient(0deg, rgba(var(--color-3), 1) 50%, rgba(255, 255, 255, 0) 50%);
	position: relative;
	
	
	 width: 100vw !important;
}





.highlight-banner {
    position: relative;
    border-radius: 25px;
    height: 60vh;
	-webkit-box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.1);
}

.highlight-banner__image-container {
    position: relative;
    overflow: hidden; /* Wichtiger Schritt, um alles innerhalb der Box zu halten */
    border-radius: 25px; /* Gleiche Abrundung wie das Bild */
    width: 100%;
    height: 100%;
}

.highlight-banner__image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;   
    display: block;
	 transition: transform 0.5s ease;
}

.highlight-banner__image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none; /* Damit es nicht mit Hover- oder Klick-Events interferiert */
    z-index: 1; /* Über dem Bild, aber unter anderen Inhalten */
}


.highlight-banner__image-container:hover img {
    transform: scale(1.1); /* Vergrößert das Bild um 10% */
    transition: transform 0.5s ease; /* Sanfte Animation */
}


.highlight-banner--background .container {
	overflow: visible !important;
}

/* Text-Overlay */
.highlight-banner__text-overlay {
    position: absolute;
    bottom: 40px; /* Abstand vom unteren Rand */
    left: 40px; /* Abstand vom linken Rand */
    z-index: 2; /* Über dem Gradient */
    color: #fff;
    width: calc(100% - 80px); /* Verhindert, dass der Text den Rand überlappt */
}

.highlight-banner__text-overlay h5 {
    font-size: 50px !important;
    margin: 0 0 10px;
	color:#FFF !important;
}

.highlight-banner__text-overlay p {
    line-height: 1.5;
    margin: 0;
}





@media only screen and (max-width: 767px) {
	
	
	
	
	.highlight-banner--background {
		margin-top: 50px;
		height: auto;
		padding-bottom: 50px;
	}
	
	a .highlight-banner .link-circle {
		opacity: 1 !important;
		left:50% !important;
		 transform: translate(-50%, 0);
		right: auto !important;
		top:-100px !important;
	}
	
	
	.highlight-banner .link-circle {
    width: 150px;
		font-size: 15px;
	}
	.highlight-banner__text-overlay {
		font-size: 15px;
	}
	
	.highlight-banner__image-container::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
	
	.highlight-banner__text-overlay h5 {
		font-size: 25px !important;
	}

	.highlight-banner .countdown-timer {
		font-size: 14px !important;
	}
	
	
	.highlight-banner__image-container {
		padding-top:25px !important;
	}
	
	
	
	
}