.introWrapper {
     position: relative;
     overflow: hidden;
 }

 .introImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
 }

 .introOverlay,
 .serviceOverlay {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     /* Ovaler Verlauf */
     background: radial-gradient(ellipse at center,
             rgba(0, 0, 0, 0.6) 40%,
             /* Mitte transparent */
             rgba(0, 0, 0, 0.9) 100%
             /* Rand dunkel */
         );
     color: var(--white);
 }

 .service {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     aspect-ratio: 7 / 10;
 }

 .serviceOverlay:hover {
     background: radial-gradient(ellipse at center,
             rgba(0, 0, 0, 0.8) 40%,
             /* Mitte transparent */
             rgba(0, 0, 0, 0.9) 100%
             /* Rand dunkel */
         );
 }

 .service h3 {
     transform: translateY(100%);
     transition: transform 0.5s ease-in-out;
 }

 .serviceButton {
     transform: translateY(100%) scale(0);
     transition: transform 0.5s ease-in-out;
     transform-origin: center;
 }

 .service:hover h3 {
     transform: translateY(0);
 }

 .service:hover .serviceButton {
     transform: translateY(0) scale(1);
 }

 .serviceDetail p {
     margin-bottom: 1rem;
 }

 /* Services Carousel (Mobile) */
 .serviceCarouselWrapper {
     position: relative;
     width: 100%;
 }
 
 .serviceWrapper {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     gap: 0; /* Wir nutzen jmb-g-6 aber auf mobile wollen wir eventuell volle Breite */
 }
 
 /* Scrollbar verstecken */
 .serviceWrapper::-webkit-scrollbar {
     display: none;
 }
 .serviceWrapper {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
 .service {
     flex: 0 0 100%;
     scroll-snap-align: center;
     width: 100%;
 }
 
 .carousel-control-prev,
 .carousel-control-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     background: rgba(0, 0, 0, 0.4);
     color: var(--white, #fff);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     transition: background 0.3s ease, opacity 0.3s ease;
 }
 
 .carousel-control-prev:hover,
 .carousel-control-next:hover {
     background: rgba(0, 0, 0, 0.7);
 }
 
 .carousel-control-prev {
     left: 10px;
 }
 
 .carousel-control-next {
     right: 10px;
 }