{"uuid":"133ec658-f311-499f-8b89-bd2b3c39e35d","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d {\n font-family: inherit;\n box-sizing: border-box;\n position: relative;\n width: 100%;\n overflow: hidden;\n background: var(--wsw-color-black, #000);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *::before,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *::after {\n box-sizing: inherit;\n }\n\n /* --- Custom properties --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d {\n --transition-speed: 0.8s;\n --parallax-amount: 20px;\n --ease-luxe: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n /* --- Slider container (4:3 aspect ratio) --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slider {\n position: relative;\n width: 100%;\n aspect-ratio: 4 / 3;\n overflow: hidden;\n }\n\n /* --- Slide --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 0;\n transition: opacity var(--transition-speed) var(--ease-smooth);\n will-change: opacity;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active {\n opacity: 1;\n z-index: 2;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-exiting {\n opacity: 0;\n z-index: 1;\n }\n\n /* --- Media layer (image / video) --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-media {\n position: absolute;\n top: calc(var(--parallax-amount) * -1);\n left: 0;\n width: 100%;\n height: calc(100% + var(--parallax-amount) * 2);\n overflow: hidden;\n will-change: transform;\n transition: transform 0.05s linear;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-media img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transform: scale(1);\n transition: transform 6s var(--ease-luxe);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-media img {\n transform: scale(1.06);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-media video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n /* --- Overlay gradient --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.05) 40%,\n rgba(0, 0, 0, 0.4) 75%,\n rgba(0, 0, 0, 0.7) 100%\n );\n z-index: 1;\n pointer-events: none;\n }\n\n /* --- Content layer --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-content {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n padding: 4rem 5rem 6rem;\n max-width: 100%;\n }\n\n /* --- Typography --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-tagline {\n display: inline-block;\n font-family: inherit;\n font-size: 0.85rem;\n font-weight: 400;\n letter-spacing: 0.3rem;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 1rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s var(--ease-smooth) 0.2s, transform 0.6s var(--ease-smooth) 0.2s;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-tagline {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-title {\n font-family: inherit;\n color: #fff;\n margin: 0 0 0.75rem;\n line-height: 1.1;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s var(--ease-smooth) 0.35s, transform 0.7s var(--ease-smooth) 0.35s;\n max-width: 65ch;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-title {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-desc {\n display: block;\n font-family: inherit;\n color: rgba(255, 255, 255, 0.85);\n margin: 0 0 2rem;\n max-width: 540px;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s var(--ease-smooth) 0.5s, transform 0.7s var(--ease-smooth) 0.5s;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-desc {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* --- CTA Button --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.9rem 2rem;\n background: rgba(255, 255, 255, 0.12);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.25);\n color: #fff;\n text-decoration: none;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n border-radius: 2px;\n cursor: pointer;\n opacity: 0;\n transform: translateY(18px);\n transition:\n opacity 0.7s var(--ease-smooth) 0.65s,\n transform 0.7s var(--ease-smooth) 0.65s,\n background 0.3s ease,\n border-color 0.3s ease;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-cta {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta:hover,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta:focus-visible {\n background: rgba(255, 255, 255, 0.22);\n border-color: rgba(255, 255, 255, 0.5);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-arrow {\n display: inline-block;\n width: 18px;\n height: 18px;\n position: relative;\n transition: transform 0.3s var(--ease-smooth);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta:hover .slide-cta-arrow {\n transform: translateX(4px);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-arrow::before,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-arrow::after {\n content: '';\n position: absolute;\n background: #fff;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-arrow::before {\n width: 100%;\n height: 1.5px;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-arrow::after {\n width: 8px;\n height: 1.5px;\n top: 50%;\n right: 0;\n transform: translateY(-50%) rotate(40deg);\n transform-origin: right center;\n }\n\n /* --- Phone CTA special --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 1rem 2rem;\n background: rgba(255, 255, 255, 0.12);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.25);\n border-radius: 2px;\n opacity: 0;\n transform: translateY(18px);\n transition:\n opacity 0.7s var(--ease-smooth) 0.65s,\n transform 0.7s var(--ease-smooth) 0.65s;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slide.is-active .slide-cta-phone {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone-label {\n display: block;\n font-family: inherit;\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.15rem;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.65);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone a {\n color: #fff;\n text-decoration: none;\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 400;\n letter-spacing: 0.06rem;\n transition: color 0.3s ease;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone a:hover,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone a:focus-visible {\n color: rgba(255, 255, 255, 0.7);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone-numbers {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem 1.25rem;\n }\n\n /* --- Navigation arrows --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 52px;\n height: 52px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 50%;\n cursor: pointer;\n color: #fff;\n transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n -webkit-appearance: none;\n appearance: none;\n padding: 0;\n font-size: 0;\n line-height: 1;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav:hover,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav:focus-visible {\n background: rgba(255, 255, 255, 0.18);\n border-color: rgba(255, 255, 255, 0.35);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav:active {\n transform: translateY(-50%) scale(0.94);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav--prev {\n left: 1.5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav--next {\n right: 1.5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav svg {\n width: 20px;\n height: 20px;\n stroke: #fff;\n stroke-width: 1.5;\n fill: none;\n }\n\n /* --- Progress bar --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n z-index: 10;\n background: rgba(255, 255, 255, 0.1);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-progress-bar {\n height: 100%;\n width: 0;\n background: rgba(255, 255, 255, 0.6);\n transition: width 0.3s linear;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-progress-bar.is-running {\n transition: width linear;\n }\n\n /* --- Dots --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dots {\n position: absolute;\n bottom: 2rem;\n right: 5rem;\n z-index: 10;\n display: flex;\n gap: 0.6rem;\n align-items: center;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n border: none;\n padding: 0;\n cursor: pointer;\n transition: background 0.3s ease, transform 0.3s ease;\n -webkit-appearance: none;\n appearance: none;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dot:hover {\n background: rgba(255, 255, 255, 0.5);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dot.is-active {\n background: rgba(255, 255, 255, 0.85);\n transform: scale(1.3);\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dot:focus-visible {\n outline: 2px solid rgba(255, 255, 255, 0.8);\n outline-offset: 2px;\n }\n\n /* --- Slide counter --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-counter {\n position: absolute;\n bottom: 2rem;\n left: 5rem;\n z-index: 10;\n display: flex;\n align-items: baseline;\n gap: 0.25rem;\n color: rgba(255, 255, 255, 0.6);\n font-family: inherit;\n font-size: 0.85rem;\n font-weight: 300;\n letter-spacing: 0.1rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-counter-current {\n font-size: 1.2rem;\n font-weight: 500;\n color: #fff;\n }\n\n /* --- Video play icon overlay --- */\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-video-icon {\n position: absolute;\n top: 2rem;\n right: 2rem;\n z-index: 3;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n pointer-events: none;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-video-icon svg {\n width: 14px;\n height: 14px;\n fill: rgba(255, 255, 255, 0.7);\n }\n\n /* --- Reduced motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *::before,\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* --- Tablet --- */\n @media (max-width: 1024px) {\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-content {\n padding: 3rem 3rem 5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-counter {\n left: 3rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dots {\n right: 3rem;\n }\n }\n\n /* --- Mobile --- */\n @media (max-width: 768px) {\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .villa-slider {\n aspect-ratio: 3 / 4;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-content {\n padding: 2rem 1.5rem 5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav {\n width: 42px;\n height: 42px;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav--prev {\n left: 0.75rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav--next {\n right: 0.75rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-nav svg {\n width: 16px;\n height: 16px;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-counter {\n left: 1.5rem;\n bottom: 1.5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dots {\n right: 1.5rem;\n bottom: 1.5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-cta-phone-numbers {\n flex-direction: column;\n gap: 0.2rem;\n }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slide-content {\n padding: 1.5rem 1.25rem 4.5rem;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-dots {\n display: none;\n }\n #wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d .slider-counter {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n</style>\n\n<div id=\"wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d\">\n <div class=\"villa-slider\" role=\"region\" aria-label=\"Luxusvilla Opatija Bildergalerie\" aria-roledescription=\"Karussell\">\n\n <!-- Slide 1 — Hero -->\n <div class=\"villa-slide is-active\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"1 von 6\" data-duration=\"7000\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <img src=\"https://luxusvilla-opatija.com/s3/a/wsw.website.9313/public/images/pages/folder.8/innen.webp\" alt=\"Luxuriöses Interieur der Villa Opatija mit Meerblick\" loading=\"eager\" draggable=\"false\">\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Exklusive Ferienvilla · Opatija</span>\n <h2 class=\"slide-title\">Luxusvilla Opatija</h2>\n <span class=\"slide-desc\">Exklusives Wohnen mit Meerblick</span>\n <a href=\"https://luxusvilla-opatija.com/\" class=\"slide-cta\" aria-label=\"Villa jetzt entdecken\" draggable=\"false\">\n <span>Jetzt entdecken</span>\n <span class=\"slide-cta-arrow\" aria-hidden=\"true\"></span>\n </a>\n </div>\n </div>\n\n <!-- Slide 2 — Interieur -->\n <div class=\"villa-slide\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"2 von 6\" data-duration=\"6000\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <img src=\"https://luxusvilla-opatija.com/s3/a/wsw.website.9313/public/images/pages/folder.8/img-6977.webp\" alt=\"Stilvolles Wohnzimmer mit Designer-Möbeln\" loading=\"lazy\" draggable=\"false\">\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Design &amp; Komfort</span>\n <h2 class=\"slide-title\">Stilvolles Interieur</h2>\n <span class=\"slide-desc\">Hochwertiges Design trifft auf maximalen Komfort</span>\n </div>\n </div>\n\n <!-- Slide 3 — Meerblick von der Küche -->\n <div class=\"villa-slide\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"3 von 6\" data-duration=\"6000\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <img src=\"https://luxusvilla-opatija.com/s3/a/wsw.website.9313/public/images/pages/folder.8/img-7079.webp\" alt=\"Blick aus der Küche über den Balkon auf das Meer\" loading=\"lazy\" draggable=\"false\">\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Wohnen mit Aussicht</span>\n <h2 class=\"slide-title\">Meerblick aus jeder Perspektive</h2>\n <span class=\"slide-desc\">Von der Küche über den Balkon bis zum Horizont — das Meer immer im Blick</span>\n </div>\n </div>\n\n <!-- Slide 4 — Ausstattung -->\n <div class=\"villa-slide\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"4 von 6\" data-duration=\"6000\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <img src=\"https://luxusvilla-opatija.com/s3/a/wsw.website.9313/public/images/pages/folder.7/kueche-2.webp\" alt=\"Moderne Küche mit hochwertiger Ausstattung\" loading=\"eager\" draggable=\"false\">\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Premium Ausstattung</span>\n <h2 class=\"slide-title\">Moderne Ausstattung</h2>\n <span class=\"slide-desc\">Alles, was Sie für einen perfekten Aufenthalt benötigen</span>\n <a href=\"https://luxusvilla-opatija.com/ausstattung\" class=\"slide-cta\" aria-label=\"Ausstattung der Villa ansehen\" draggable=\"false\">\n <span>Ausstattung ansehen</span>\n <span class=\"slide-cta-arrow\" aria-hidden=\"true\"></span>\n </a>\n </div>\n </div>\n\n <!-- Slide 5 — Video 1: Einzigartige Lage -->\n <div class=\"villa-slide\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"5 von 6\" data-duration=\"12000\" data-type=\"video\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <video muted=\"\" playsinline=\"\" preload=\"metadata\" loop=\"\" poster=\"\">\n <source src=\"https://luxusvilla-opatija.com/files/video-1.mp4\" type=\"video/mp4\">\n </video>\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-video-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"8,5 20,12 8,19\"></polygon></svg>\n </div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Kvarner Bucht · Kroatien</span>\n <h2 class=\"slide-title\">Einzigartige Lage</h2>\n <span class=\"slide-desc\">Traumhafte Aussicht auf die Kvarner Bucht</span>\n <a href=\"https://luxusvilla-opatija.com/#Rezensionen\" class=\"slide-cta\" aria-label=\"Lage der Villa entdecken\" draggable=\"false\">\n <span>Lage entdecken</span>\n <span class=\"slide-cta-arrow\" aria-hidden=\"true\"></span>\n </a>\n </div>\n </div>\n\n <!-- Slide 6 — Video 2 -->\n <div class=\"villa-slide\" role=\"group\" aria-roledescription=\"Folie\" aria-label=\"6 von 6\" data-duration=\"12000\" data-type=\"video\">\n <div class=\"slide-media\" style=\"transform: translate(0px, 0px);\">\n <video muted=\"\" playsinline=\"\" preload=\"metadata\" loop=\"\" poster=\"\">\n <source src=\"https://luxusvilla-opatija.com/files/video-2.mp4\" type=\"video/mp4\">\n </video>\n </div>\n <div class=\"slide-overlay\"></div>\n <div class=\"slide-video-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"8,5 20,12 8,19\"></polygon></svg>\n </div>\n <div class=\"slide-content\">\n <span class=\"slide-tagline\">Jetzt anfragen</span>\n <h2 class=\"slide-title\">Ihr Urlaub beginnt hier</h2>\n <span class=\"slide-desc\">Entspannung, Luxus und Privatsphäre</span>\n <div class=\"slide-cta-phone\">\n <span class=\"slide-cta-phone-label\">Jetzt anfragen</span>\n <div class=\"slide-cta-phone-numbers\">\n <a href=\"tel:+385955786192\" aria-label=\"Anrufen Kroatien: +385 9 55 78 61 92\" draggable=\"false\">☎ +385 9 55 78 61 92</a>\n <a href=\"tel:+491716054649\" aria-label=\"Anrufen Deutschland: +49 171 6 05 46 49\" draggable=\"false\">☎ +49 171 6 05 46 49</a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Navigation arrows -->\n <button class=\"slider-nav slider-nav--prev\" aria-label=\"Vorheriges Bild\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n </button>\n <button class=\"slider-nav slider-nav--next\" aria-label=\"Nächstes Bild\">\n <svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n </button>\n\n <!-- Counter -->\n <div class=\"slider-counter\" aria-live=\"polite\">\n <span class=\"slider-counter-current\">01</span>\n <span>/</span>\n <span>06</span>\n </div>\n\n <!-- Dots -->\n <div class=\"slider-dots\" role=\"tablist\" aria-label=\"Folienauswahl\">\n <button class=\"slider-dot is-active\" role=\"tab\" aria-selected=\"true\" aria-label=\"Folie 1\"></button>\n <button class=\"slider-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Folie 2\"></button>\n <button class=\"slider-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Folie 3\"></button>\n <button class=\"slider-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Folie 4\"></button>\n <button class=\"slider-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Folie 5\"></button>\n <button class=\"slider-dot\" role=\"tab\" aria-selected=\"false\" aria-label=\"Folie 6\"></button>\n </div>\n\n <!-- Progress bar -->\n <div class=\"slider-progress\" aria-hidden=\"true\">\n <div class=\"slider-progress-bar is-running\" style=\"width: 100%; transition-duration: 7000ms; animation-play-state: paused;\"></div>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-133ec658-f311-499f-8b89-bd2b3c39e35d');\n if (!el) return;\n\n var slides = el.querySelectorAll('.villa-slide');\n var prevBtn = el.querySelector('.slider-nav--prev');\n var nextBtn = el.querySelector('.slider-nav--next');\n var dots = el.querySelectorAll('.slider-dot');\n var counterCurrent = el.querySelector('.slider-counter-current');\n var progressBar = el.querySelector('.slider-progress-bar');\n var sliderContainer = el.querySelector('.villa-slider');\n var totalSlides = slides.length;\n var currentIndex = 0;\n var autoTimer = null;\n var isTransitioning = false;\n var transitionLock = 800;\n\n function padNumber(n) {\n return n < 10 ? '0' + n : '' + n;\n }\n\n function stopAllVideos() {\n slides.forEach(function(slide) {\n var video = slide.querySelector('video');\n if (video) {\n video.pause();\n video.currentTime = 0;\n }\n });\n }\n\n function playVideoIfPresent(slide) {\n var video = slide.querySelector('video');\n if (video) {\n var playPromise = video.play();\n if (playPromise !== undefined) {\n playPromise.catch(function() {});\n }\n }\n }\n\n function resetProgress() {\n progressBar.classList.remove('is-running');\n progressBar.style.width = '0%';\n }\n\n function startProgress(duration) {\n resetProgress();\n void progressBar.offsetWidth;\n progressBar.classList.add('is-running');\n progressBar.style.transitionDuration = duration + 'ms';\n progressBar.style.width = '100%';\n }\n\n function goToSlide(index, direction) {\n if (isTransitioning || index === currentIndex) return;\n isTransitioning = true;\n\n var oldSlide = slides[currentIndex];\n var newSlide = slides[index];\n\n stopAllVideos();\n\n oldSlide.classList.remove('is-active');\n oldSlide.classList.add('is-exiting');\n\n newSlide.classList.add('is-active');\n\n playVideoIfPresent(newSlide);\n\n dots[currentIndex].classList.remove('is-active');\n dots[currentIndex].setAttribute('aria-selected', 'false');\n dots[index].classList.add('is-active');\n dots[index].setAttribute('aria-selected', 'true');\n\n counterCurrent.textContent = padNumber(index + 1);\n\n currentIndex = index;\n\n var slideDuration = parseInt(newSlide.getAttribute('data-duration')) || 6000;\n startProgress(slideDuration);\n\n clearTimeout(autoTimer);\n autoTimer = setTimeout(function() {\n goToSlide((currentIndex + 1) % totalSlides, 'next');\n }, slideDuration);\n\n setTimeout(function() {\n oldSlide.classList.remove('is-exiting');\n isTransitioning = false;\n }, transitionLock);\n }\n\n function nextSlide() {\n goToSlide((currentIndex + 1) % totalSlides, 'next');\n }\n\n function prevSlide() {\n goToSlide((currentIndex - 1 + totalSlides) % totalSlides, 'prev');\n }\n\n nextBtn.addEventListener('click', nextSlide);\n prevBtn.addEventListener('click', prevSlide);\n\n dots.forEach(function(dot, i) {\n dot.addEventListener('click', function() {\n goToSlide(i, i > currentIndex ? 'next' : 'prev');\n });\n });\n\n /* Keyboard navigation */\n sliderContainer.addEventListener('keydown', function(e) {\n if (e.key === 'ArrowRight') { nextSlide(); e.preventDefault(); }\n if (e.key === 'ArrowLeft') { prevSlide(); e.preventDefault(); }\n });\n\n /* Touch / swipe support */\n var touchStartX = 0;\n var touchEndX = 0;\n var touchThreshold = 50;\n\n sliderContainer.addEventListener('touchstart', function(e) {\n touchStartX = e.changedTouches[0].screenX;\n }, { passive: true });\n\n sliderContainer.addEventListener('touchend', function(e) {\n touchEndX = e.changedTouches[0].screenX;\n var diff = touchStartX - touchEndX;\n if (Math.abs(diff) > touchThreshold) {\n if (diff > 0) nextSlide();\n else prevSlide();\n }\n }, { passive: true });\n\n /* Parallax effect on mouse move (desktop only) */\n var rafId = null;\n var currentParallaxX = 0;\n var currentParallaxY = 0;\n var targetParallaxX = 0;\n var targetParallaxY = 0;\n\n function lerp(start, end, factor) {\n return start + (end - start) * factor;\n }\n\n function updateParallax() {\n currentParallaxX = lerp(currentParallaxX, targetParallaxX, 0.06);\n currentParallaxY = lerp(currentParallaxY, targetParallaxY, 0.06);\n\n var activeSlide = slides[currentIndex];\n if (activeSlide) {\n var media = activeSlide.querySelector('.slide-media');\n if (media) {\n media.style.transform = 'translate(' + currentParallaxX.toFixed(2) + 'px, ' + currentParallaxY.toFixed(2) + 'px)';\n }\n }\n\n rafId = requestAnimationFrame(updateParallax);\n }\n\n if (window.matchMedia('(pointer: fine)').matches) {\n sliderContainer.addEventListener('mousemove', function(e) {\n var rect = sliderContainer.getBoundingClientRect();\n var x = (e.clientX - rect.left) / rect.width - 0.5;\n var y = (e.clientY - rect.top) / rect.height - 0.5;\n var amt = 20;\n targetParallaxX = -x * amt;\n targetParallaxY = -y * amt;\n });\n\n sliderContainer.addEventListener('mouseleave', function() {\n targetParallaxX = 0;\n targetParallaxY = 0;\n });\n\n rafId = requestAnimationFrame(updateParallax);\n }\n\n /* Pause autoplay on hover */\n sliderContainer.addEventListener('mouseenter', function() {\n clearTimeout(autoTimer);\n progressBar.style.animationPlayState = 'paused';\n progressBar.style.transitionPlayState = 'paused';\n });\n\n sliderContainer.addEventListener('mouseleave', function() {\n var slideDuration = parseInt(slides[currentIndex].getAttribute('data-duration')) || 6000;\n progressBar.style.transitionPlayState = 'running';\n var computedWidth = getComputedStyle(progressBar).width;\n var containerWidth = progressBar.parentElement.offsetWidth;\n var progress = parseFloat(computedWidth) / containerWidth;\n var remaining = (1 - progress) * slideDuration;\n if (remaining < 500) remaining = 500;\n\n clearTimeout(autoTimer);\n autoTimer = setTimeout(function() {\n goToSlide((currentIndex + 1) % totalSlides, 'next');\n }, remaining);\n });\n\n /* Visibility API — pause when tab not visible */\n document.addEventListener('visibilitychange', function() {\n if (document.hidden) {\n clearTimeout(autoTimer);\n stopAllVideos();\n } else {\n playVideoIfPresent(slides[currentIndex]);\n var slideDuration = parseInt(slides[currentIndex].getAttribute('data-duration')) || 6000;\n startProgress(slideDuration);\n clearTimeout(autoTimer);\n autoTimer = setTimeout(function() {\n goToSlide((currentIndex + 1) % totalSlides, 'next');\n }, slideDuration);\n }\n });\n\n /* Initialize first slide */\n playVideoIfPresent(slides[0]);\n var firstDuration = parseInt(slides[0].getAttribute('data-duration')) || 6000;\n startProgress(firstDuration);\n autoTimer = setTimeout(function() {\n goToSlide(1, 'next');\n }, firstDuration);\n\n})();\n</script>","summary":null,"version":3,"inserted_version":3,"total_cost":2.0723727499999995,"total_messages_sent":3,"summarized_at_total":0}