/* ==========================================================
   Banner (Startseite) — Variante 2, sanfter Lichtschein
   ========================================================== */
.banner {
	display: block;
	max-width: 840px;
	min-height: 150px;
    width:90%;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border-radius: 0px;
	margin: 0px auto;
    margin-bottom: 40px;
}

.banner__glow {
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	right: -120px;
	top: -180px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
	animation: bannerGlow 10s ease-in-out infinite;
	pointer-events: none;
}

@keyframes bannerGlow {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}
	50% {
		transform: translate(-40px, 40px) scale(1.15);
		opacity: 1;
	}
}

.banner__content {
	position: relative;
	z-index: 2;
	display: block;
	color: #ffffff;
	font-size: 20px;
	line-height: 1.4;
	padding: 22px 28px;
}

.banner__line {
	display: block;
}

.banner__cta {
    display: inline-block;
    color: #1c4071;
    background: #ffffff;
    padding: 12px 25px 12px 25px;
    box-sizing: border-box;
    font: 600 16px/20px Muli,Arial,Helvetica,sans-serif;
    background-color: #fff;
    cursor: pointer;
    transition: background-color .1s ease-in-out;
    margin-top:20px;
}

.banner:hover .banner__cta {
	background: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
	.banner__glow {
		animation: none;
	}
}

@media (max-width: 600px) {
	.banner {
		height: auto;
	}
	.banner__content {
		padding: 24px 20px;
	}
	.banner__line {
		font-size: 17px;
	}
}

@media (max-width: 768px) {
	.banner {
	
	margin-top: 87px;
    margin-bottom: 30px;
}
}