diff --git a/css/style.css b/css/style.css
index 644ca7d..eede615 100644
--- a/css/style.css
+++ b/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;
diff --git a/img/frida.jpg b/img/frida.jpg
index fb948fe..cc1ee81 100644
Binary files a/img/frida.jpg and b/img/frida.jpg differ
diff --git a/img/frida01.jpg b/img/frida01.jpg
new file mode 100644
index 0000000..2afe4f2
Binary files /dev/null and b/img/frida01.jpg differ
diff --git a/img/frida02.jpg b/img/frida02.jpg
new file mode 100644
index 0000000..5e99781
Binary files /dev/null and b/img/frida02.jpg differ
diff --git a/img/frida03.jpg b/img/frida03.jpg
new file mode 100644
index 0000000..aa3a37a
Binary files /dev/null and b/img/frida03.jpg differ
diff --git a/img/frida04.jpg b/img/frida04.jpg
new file mode 100644
index 0000000..4439008
Binary files /dev/null and b/img/frida04.jpg differ
diff --git a/img/frida05.jpg b/img/frida05.jpg
new file mode 100644
index 0000000..90e5483
Binary files /dev/null and b/img/frida05.jpg differ
diff --git a/img/services/service_0004.jpg b/img/services/service_0004.jpg
new file mode 100644
index 0000000..56cd080
Binary files /dev/null and b/img/services/service_0004.jpg differ
diff --git a/img/services/service_0005.jpg b/img/services/service_0005.jpg
new file mode 100644
index 0000000..74e7ea9
Binary files /dev/null and b/img/services/service_0005.jpg differ
diff --git a/img/services/service_0006.jpg b/img/services/service_0006.jpg
new file mode 100644
index 0000000..08a762d
Binary files /dev/null and b/img/services/service_0006.jpg differ
diff --git a/img/services/service_0007.jpg b/img/services/service_0007.jpg
new file mode 100644
index 0000000..a798df6
Binary files /dev/null and b/img/services/service_0007.jpg differ
diff --git a/img/services/service_0008.jpg b/img/services/service_0008.jpg
new file mode 100644
index 0000000..958665a
Binary files /dev/null and b/img/services/service_0008.jpg differ
diff --git a/img/services/service_0009.jpg b/img/services/service_0009.jpg
new file mode 100644
index 0000000..6988d48
Binary files /dev/null and b/img/services/service_0009.jpg differ
diff --git a/img/services/service_0010.jpg b/img/services/service_0010.jpg
new file mode 100644
index 0000000..763ce23
Binary files /dev/null and b/img/services/service_0010.jpg differ
diff --git a/img/services/service_0012.jpg b/img/services/service_0012.jpg
new file mode 100644
index 0000000..2376b7a
Binary files /dev/null and b/img/services/service_0012.jpg differ
diff --git a/img/services/service_0014.jpg b/img/services/service_0014.jpg
new file mode 100644
index 0000000..a0f873d
Binary files /dev/null and b/img/services/service_0014.jpg differ
diff --git a/index.html b/index.html
index feceec9..f3732b6 100644
--- a/index.html
+++ b/index.html
@@ -159,7 +159,44 @@
Komm vorbei und entdecke unser Sortiment – ehrlich, hochwertig und mit Liebe ausgewählt.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Professionelle Weinverkostungen mit Expertenwissen. Entdecken Sie neue Geschmackserlebnisse!
+
+
+
Einblicke in unsere Service-Momente
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
@@ -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;
+ });
+ }