/* style.css */

.highlight-banner--background {
    height: 80vh;
    background: rgb(0, 35, 110);
    background: linear-gradient(0deg, rgba(0, 35, 110, 1) 50%, rgba(255, 255, 255, 0) 50%);
	position: relative;
}




.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(255, 255, 255, 0) 70%, rgba(0, 0, 0, 1) 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: 24px;
    margin: 0 0 10px;
	color:#FFF !important;
}

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




.highlight-banner .link-circle {
  border-radius: 100%;
  background: #fff;
  position: absolute;
  width: 200px;
  height: auto;
  z-index: 10;

  /* Positionierung */
  top: 50%;
  right: -100px;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  /* Kreisverhältnis und Schatten */
  aspect-ratio: 1 / 1;
  box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  color: rgba(var(--color-1), 1);
  opacity: 0;
	  cursor: pointer;

  /* Animation */
  transition: opacity 0.3s ease, width 0.3s ease;

}

.highlight-banner .link-circle svg {
  fill: rgba(var(--color-1), 1);
  width: 50px;
  transition: transform 0.3s ease; /* Animation für das SVG */
}

a:hover .highlight-banner .link-circle {
  opacity: 1;
}


@media only screen and (max-width: 767px) {
	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;
	}
	
	
}