Add about carousel and interactive services gallery

css/style.css

@@ -426,6 +426,85 @@ section {
     justify-content: center;
 }
 
+.about-carousel {
+    width: 100%;
+    max-width: 900px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.about-carousel .carousel-inner {
+    aspect-ratio: 3 / 2;
+}
+
+.about-carousel.carousel-fade .carousel-item {
+    transition: opacity 1.35s ease-in-out;
+}
+
+.about-carousel-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transform: scale(1.02);
+}
+
+.about-carousel .carousel-item.active .about-carousel-img,
+.about-carousel .carousel-item.carousel-item-next .about-carousel-img,
+.about-carousel .carousel-item.carousel-item-prev .about-carousel-img {
+    animation: aboutKenBurns 6.5s ease-out both;
+}
+
+@keyframes aboutKenBurns {
+    from {
+        transform: scale(1.02) translate3d(0, 0, 0);
+    }
+    to {
+        transform: scale(1.08) translate3d(0, -1.2%, 0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .about-carousel.carousel-fade .carousel-item {
+        transition-duration: 0.01ms;
+    }
+
+    .about-carousel .carousel-item.active .about-carousel-img,
+    .about-carousel .carousel-item.carousel-item-next .about-carousel-img,
+    .about-carousel .carousel-item.carousel-item-prev .about-carousel-img {
+        animation: none;
+    }
+
+    .about-carousel-img {
+        transform: none;
+    }
+}
+
+.about-carousel .carousel-indicators {
+    margin-bottom: 0.8rem;
+}
+
+.about-carousel .carousel-indicators [data-bs-target] {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.about-carousel .carousel-control-prev,
+.about-carousel .carousel-control-next {
+    width: 12%;
+}
+
+.about-carousel .carousel-control-prev-icon,
+.about-carousel .carousel-control-next-icon {
+    background-color: rgba(44, 44, 44, 0.45);
+    border-radius: 50%;
+    background-size: 55% 55%;
+}
+
 .about-img {
     width: 100%;
     max-width: 900px;
@@ -615,6 +694,109 @@ section {
     color: var(--accent-color);
 }
 
+.services-gallery-wrap {
+    margin-top: 36px;
+}
+
+.services-gallery-title {
+    font-size: 1.55rem;
+    color: var(--primary-color);
+    margin-bottom: 14px;
+    text-align: center;
+}
+
+.services-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 12px;
+}
+
+.services-gallery-item {
+    margin: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    background: var(--light-bg);
+    aspect-ratio: 4 / 5;
+}
+
+.services-gallery-button {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: zoom-in;
+}
+
+.services-gallery-button:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+}
+
+.services-gallery-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease, filter 0.45s ease;
+}
+
+.services-gallery-item:hover .services-gallery-img {
+    transform: scale(1.05);
+    filter: saturate(1.05) contrast(1.03);
+}
+
+.services-modal-image {
+    max-width: 100%;
+    max-height: 82vh;
+    border-radius: 8px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.services-modal-stage {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+}
+
+.services-modal-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(20, 20, 20, 0.52);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.2s ease;
+    z-index: 2;
+}
+
+.services-modal-nav:hover {
+    background: rgba(20, 20, 20, 0.72);
+}
+
+.services-modal-nav:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
+.services-modal-prev {
+    left: 14px;
+}
+
+.services-modal-next {
+    right: 14px;
+}
+
 /* Events Section */
 .section-events {
     background: var(--light-bg);
@@ -1158,6 +1340,10 @@ section {
         gap: 40px;
     }
 
+    .about-carousel {
+        max-width: 100%;
+    }
+
     .image-placeholder {
         width: 250px;
         height: 250px;
@@ -1189,6 +1375,24 @@ section {
         grid-template-columns: 1fr;
     }
 
+    .services-gallery {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 10px;
+    }
+
+    .services-modal-nav {
+        width: 40px;
+        height: 40px;
+    }
+
+    .services-modal-prev {
+        left: 8px;
+    }
+
+    .services-modal-next {
+        right: 8px;
+    }
+
     .events-content {
         grid-template-columns: 1fr;
         gap: 40px;
@@ -1225,6 +1429,11 @@ section {
         font-size: 2rem;
     }
 
+    .services-gallery {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 8px;
+    }
+
     .supplier-icon {
         font-size: 2rem;
         padding: 30px;

index.html

@@ -159,7 +159,44 @@
                     <p>Komm vorbei und entdecke unser Sortiment – ehrlich, hochwertig und mit Liebe ausgewählt.</p>
                 </div>
                 <div class="about-image">
-                    <img src="img/frida.jpg" alt="Frida & Fred Feinkostgeschäft in der Untere Bachgasse, Regensburg – Innenansicht mit Bio-Produkten" class="about-img">
+                    <div id="aboutImageCarousel" class="carousel slide carousel-fade about-carousel" data-bs-ride="carousel" data-bs-interval="6500" aria-label="Bildergalerie von Frida & Fred">
+                        <div class="carousel-indicators">
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Bild 1"></button>
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="1" aria-label="Bild 2"></button>
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="2" aria-label="Bild 3"></button>
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="3" aria-label="Bild 4"></button>
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="4" aria-label="Bild 5"></button>
+                            <button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="5" aria-label="Bild 6"></button>
+                        </div>
+                        <div class="carousel-inner">
+                            <div class="carousel-item active">
+                                <img src="img/frida.jpg" alt="Innenansicht von Frida & Fred in Regensburg" class="about-carousel-img" loading="eager">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="img/frida01.jpg" alt="Feinkost und Spezialitaeten bei Frida & Fred" class="about-carousel-img" loading="lazy">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="img/frida02.jpg" alt="Blick in das Ladenlokal von Frida & Fred" class="about-carousel-img" loading="lazy">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="img/frida03.jpg" alt="Ausgewaehlte Produkte bei Frida & Fred" class="about-carousel-img" loading="lazy">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="img/frida04.jpg" alt="Stimmungsbild aus dem Feinkostgeschaeft Frida & Fred" class="about-carousel-img" loading="lazy">
+                            </div>
+                            <div class="carousel-item">
+                                <img src="img/frida05.jpg" alt="Frida & Fred in der Untere Bachgasse in Regensburg" class="about-carousel-img" loading="lazy">
+                            </div>
+                        </div>
+                        <button class="carousel-control-prev" type="button" data-bs-target="#aboutImageCarousel" data-bs-slide="prev" aria-label="Vorheriges Bild">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Vorheriges Bild</span>
+                        </button>
+                        <button class="carousel-control-next" type="button" data-bs-target="#aboutImageCarousel" data-bs-slide="next" aria-label="Naechstes Bild">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Naechstes Bild</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -237,9 +274,66 @@
                     <p>Professionelle Weinverkostungen mit Expertenwissen. Entdecken Sie neue Geschmackserlebnisse!</p>
                 </div>
             </div>
+
+            <div class="services-gallery-wrap">
+                <h3 class="services-gallery-title">Einblicke in unsere Service-Momente</h3>
+                <div class="services-gallery" aria-label="Bildergalerie Services">
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0005.jpg" data-alt="Service Impression 0005" aria-label="Bild vergroessern: Service Impression 0005">
+                            <img src="img/services/service_0005.jpg" alt="Service Impression 0005" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0004.jpg" data-alt="Service Impression 0004" aria-label="Bild vergroessern: Service Impression 0004">
+                            <img src="img/services/service_0004.jpg" alt="Service Impression 0004" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0007.jpg" data-alt="Service Impression 0007" aria-label="Bild vergroessern: Service Impression 0007">
+                            <img src="img/services/service_0007.jpg" alt="Service Impression 0007" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0008.jpg" data-alt="Service Impression 0008" aria-label="Bild vergroessern: Service Impression 0008">
+                            <img src="img/services/service_0008.jpg" alt="Service Impression 0008" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0010.jpg" data-alt="Service Impression 0010" aria-label="Bild vergroessern: Service Impression 0010">
+                            <img src="img/services/service_0010.jpg" alt="Service Impression 0010" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                    <figure class="services-gallery-item">
+                        <button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0014.jpg" data-alt="Service Impression 0014" aria-label="Bild vergroessern: Service Impression 0014">
+                            <img src="img/services/service_0014.jpg" alt="Service Impression 0014" loading="lazy" class="services-gallery-img">
+                        </button>
+                    </figure>
+                </div>
+            </div>
         </div>
     </section>
 
+    <div class="modal fade" id="servicesImageModal" tabindex="-1" aria-labelledby="servicesImageModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl">
+            <div class="modal-content border-0 bg-transparent">
+                <div class="modal-header border-0 p-0 pb-2 justify-content-end">
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Schliessen"></button>
+                </div>
+                <div class="modal-body p-0 text-center">
+                    <div class="services-modal-stage">
+                        <button type="button" class="services-modal-nav services-modal-prev" id="servicesModalPrev" aria-label="Vorheriges Service-Bild">
+                            <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                        </button>
+                        <img id="servicesModalImage" src="" alt="" class="services-modal-image">
+                        <button type="button" class="services-modal-nav services-modal-next" id="servicesModalNext" aria-label="Naechstes Service-Bild">
+                            <i class="fas fa-chevron-right" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Events Section -->
     <section id="events" class="section-events">
         <div class="container-fluid px-5">
@@ -777,6 +871,77 @@
                 return false;
             });
         }
+
+        // Services gallery lightbox
+        const servicesModalEl = document.getElementById('servicesImageModal');
+        const servicesModalImage = document.getElementById('servicesModalImage');
+        const servicesModalPrev = document.getElementById('servicesModalPrev');
+        const servicesModalNext = document.getElementById('servicesModalNext');
+
+        if (servicesModalEl && servicesModalImage && servicesModalPrev && servicesModalNext) {
+            const servicesModal = bootstrap.Modal.getOrCreateInstance(servicesModalEl);
+            const lightboxButtons = Array.from(document.querySelectorAll('.js-services-lightbox'));
+            let activeLightboxIndex = -1;
+
+            const updateModalImage = function(index) {
+                if (!lightboxButtons.length) {
+                    return;
+                }
+
+                const safeIndex = (index + lightboxButtons.length) % lightboxButtons.length;
+                const activeButton = lightboxButtons[safeIndex];
+                servicesModalImage.src = activeButton.dataset.fullSrc || '';
+                servicesModalImage.alt = activeButton.dataset.alt || '';
+                activeLightboxIndex = safeIndex;
+            };
+
+            lightboxButtons.forEach((button, index) => {
+                button.addEventListener('click', function() {
+                    updateModalImage(index);
+                    servicesModal.show();
+                });
+            });
+
+            servicesModalPrev.addEventListener('click', function() {
+                if (activeLightboxIndex < 0) {
+                    return;
+                }
+                updateModalImage(activeLightboxIndex - 1);
+            });
+
+            servicesModalNext.addEventListener('click', function() {
+                if (activeLightboxIndex < 0) {
+                    return;
+                }
+                updateModalImage(activeLightboxIndex + 1);
+            });
+
+            servicesModalEl.addEventListener('keydown', function(event) {
+                if (activeLightboxIndex < 0) {
+                    return;
+                }
+
+                if (event.key === 'ArrowLeft') {
+                    event.preventDefault();
+                    updateModalImage(activeLightboxIndex - 1);
+                }
+
+                if (event.key === 'ArrowRight') {
+                    event.preventDefault();
+                    updateModalImage(activeLightboxIndex + 1);
+                }
+            });
+
+            servicesModalEl.addEventListener('shown.bs.modal', function() {
+                servicesModalEl.focus();
+            });
+
+            servicesModalEl.addEventListener('hidden.bs.modal', function() {
+                servicesModalImage.src = '';
+                servicesModalImage.alt = '';
+                activeLightboxIndex = -1;
+            });
+        }
     </script>
 
 <!-- Back to Top Button -->