.hero-section {
  background-color: #e0eded;
	width:100%;
	margin-top:70px;
        margin-bottom:3em;
	overflow:visible;
	padding-right:20px;
}
 .hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 39px;
	text-align:right;
        }

        .hero-text {
            flex: 1;
            max-width: 500px;
        }

        .hero-text h1 {
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.2;
            color: #105251;
            margin-bottom: 20px;
        }

        .hero-text p {
            font-size: 1.2rem;
            color: #222;
            margin-bottom: 30px;
        }

        .hero-images {
            flex: 0 0 420px;
            position: relative;
            width: 420px;
            height: 410px;
        }

        .heroimg {
            position: absolute;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .heroimg:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .heroimg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .heroimg:hover img {
            transform: scale(1.05);
        }

        @media (min-width: 982px) {
        /* Spezifische Positionierung */
        .heroimg1 {
            top: -20px;
            left: 0;
            width: 200px;
            height: 270px;
					background-color:#5da2a1;
        }

        .heroimg1 img {
            width: 200px;
            height: 250px;
					margin-top:20px;
        }
.heroimg2 {
            top: -20px;
            right: 0;
            width: 200px;
            height: 160px;
					background-color:#dfa60a;
        }
.heroimg2 img {
            width: 200px;
            height: 140px;
					margin-top:20px;
        }
.heroimg3 {
            bottom: -20px;
            left: 0;
            width: 200px;
            height: 160px;
					background-color:#cc7f08;
        }

.heroimg3 img {
            width: 200px;
            height: 140px;
        }
.heroimg4 {
            top: 160px; /* 140px + 20px Gap */
            right: 0;
            width: 200px;
            height: 270px!important;
					background-color:#6d4c93;
        }

.heroimg4 img {
            width: 200px;
            height: 250px;
        }
}
        /* Mobile Ansicht */
        @media (max-width: 981px) {
.hero-content {
      flex-direction: column;
      gap: 0px;
      text-align: center;
            }

.hero-text h1 {
      font-size: 2.2rem;
			margin-top:30px;
            }

.hero-text p {
      font-size: 1.1rem;
            }

.hero-images {
       flex: none;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 13px;
	     width:100%!important;
       height: auto;
       overflow:visible;
       max-width: 100vw;
	margin-left:20px;
	margin-bottom:-20px;
            }

.heroimg {
       position: static;
       border-radius: 20px;
	height:244px;
            }

.heroimg1 {
       flex: 1;
       height: 244px;
       min-width: 80px;
	background-color:#cc7f08;
            }

.heroimg2 {
       flex:5;
       height: 244px;
	background-color:#5da2a1;
            }

.heroimg3 {
       flex:1;
       height: 244px;
       min-width: 80px;
	background-color:#6d4c93;
            }

.heroimg4 {
       display: none;
            }
					
.heroimg img {
       height: 224px;
	     margin-bottom:20px;
}
        }

        /* Sehr kleine Bildschirme */
        @media (max-width: 580px) {
.heroimg1, .heroimg3{
     	display:none
            }
        }