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

 .serviceOverlay {
     pointer-events: none;
 }

 .serviceButton,
 .serviceButton a {
     pointer-events: auto;
 }

 .serviceOverlay:hover {
     background: radial-gradient(ellipse at center,
             rgba(0, 0, 0, 0.4) 40%,
             rgba(0, 0, 0, 0.6) 100%
         );
 }

 .serviceDetail {
     scroll-margin-top: var(--headerHeight);
 }

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

 /* Services Carousel (Mobile) */
 .serviceCarouselWrapper {
     position: relative;
     width: 100%;
 }
 
 .serviceWrapper {
     display: flex;
     flex-wrap: nowrap;
     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 {
     --slides-per-view: 1;
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
 /*.service {*/
 /*    flex: 0 0 calc(100% / var(--slides-per-view));*/
 /*    scroll-snap-align: start;*/
 /*    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;
 }