{"id":85,"date":"2025-01-17T11:50:11","date_gmt":"2025-01-17T11:50:11","guid":{"rendered":"http:\/\/dev.lippert-studios.com\/?page_id=85"},"modified":"2026-05-05T11:41:56","modified_gmt":"2026-05-05T11:41:56","slug":"studio","status":"publish","type":"page","link":"https:\/\/lippert-studios.com\/en\/studio\/","title":{"rendered":"Studio"},"content":{"rendered":"<?xml encoding=\"UTF-8\"><?xml encoding=\"UTF-8\"><div data-elementor-type=\"wp-page\" data-elementor-id=\"85\" class=\"elementor elementor-85\">\n\t\t\t\t<section class=\"elementor-element elementor-element-a967e4c e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"a967e4c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-89ccaea e-con-full custom-cursor e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"89ccaea\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\"}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1fb120 elementor-widget elementor-widget-heading\" data-id=\"c1fb120\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Wer wir sind<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89f2b44 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"89f2b44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"0\" data-end=\"159\">Wir sind ein interdisziplin&auml;res Team aus Berlin, das seit 2003 Design, Technik und Entwicklung unter einem Dach vereint.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<a class=\"elementor-element elementor-element-496d62e e-con-full j-btn e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"496d62e\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\"}' href=\"#scroll-down\">\n\t\t\t\t<div class=\"elementor-element elementor-element-509f3fc elementor-widget elementor-widget-text-editor\" data-id=\"509f3fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Mehr erfahren<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c332c6 j-btn-icon e-transform e-transform elementor-widget elementor-widget-image\" data-id=\"2c332c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"_transform_rotateZ_effect\":{\"unit\":\"px\",\"size\":90,\"sizes\":[]},\"_transform_translateX_effect\":{\"unit\":\"px\",\"size\":2,\"sizes\":[]},\"_transform_translateY_effect\":{\"unit\":\"px\",\"size\":-3,\"sizes\":[]},\"_transform_rotateZ_effect_widescreen\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_rotateZ_effect_laptop\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_rotateZ_effect_tablet_extra\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_rotateZ_effect_tablet\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_rotateZ_effect_mobile_extra\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_rotateZ_effect_mobile\":{\"unit\":\"deg\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_widescreen\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_laptop\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_tablet_extra\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_tablet\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_mobile_extra\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateX_effect_mobile\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_widescreen\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_laptop\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_tablet_extra\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_tablet\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_mobile_extra\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"_transform_translateY_effect_mobile\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]}}' data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"8\" height=\"12\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/10\/arrow.svg\" class=\"attachment-full size-full wp-image-9476\" alt=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t\t<div class=\"elementor-element elementor-element-d16092b elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"d16092b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\n<div id=\"parallax_69fb16385ac34\"><\/div>\n\n<style>\n#parallax_69fb16385ac34{\n    position:relative;\n    width:100%;\n    height:450px;\n    overflow:visible;\n}\n\n#parallax_69fb16385ac34 .float-wrapper{\n    position:absolute;\n    animation: float 7s ease-in-out infinite alternate;\n}\n\n#parallax_69fb16385ac34 img{\n    width:100px;\n    pointer-events:none;\n    transition:transform 0.15s ease-out, opacity 0.6s ease-in-out;\n}\n\n@keyframes float{\n    0%{ transform:translate(0,0); }\n    50%{ transform:translate(-6px,-8px); }\n    100%{ transform:translate(6px,6px); }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function(){\n\n    const container = document.getElementById('parallax_69fb16385ac34');\n    const imageUrls = [\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Peter.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Justus.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Tristan.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Rayk.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Max.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Wai.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Tom.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Ulrike.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Nathan.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Meike.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cursor_Jenny.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cursor_Nora.svg\",\"https:\\\/\\\/lippert-studios.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cursor_Radwan.svg\"];\n    const visibleCount = Math.min(3, imageUrls.length);\n\n    const positions = [\n        {top:'5%',left:'20%'},\n        {top:'15%',left:'70%'},\n        {top:'60%',left:'80%'},\n        {top:'60%',left:'15%'},\n        {top:'35%',left:'85%'},\n        {top:'40%',left:'5%'}\n    ];\n\n    let active = [];\n\n    function shuffle(arr){\n        return arr.sort(()=>0.5-Math.random());\n    }\n\n    function getFreePosition(excludeIndex){\n\n\t\tconst used = active\n\t\t\t.map(a => a.wrapper.dataset.pos)\n\t\t\t.filter(pos => pos !== excludeIndex);\n\n\t\tconst available = positions\n\t\t\t.map((p,i)=>({ ...p, index:String(i) }))\n\t\t\t.filter(p =>\n\t\t\t\t!used.includes(p.index) &&\n\t\t\t\tp.index !== excludeIndex\n\t\t\t);\n\n\t\tif(available.length === 0){\n\t\t\treturn null;\n\t\t}\n\n\t\treturn available[Math.floor(Math.random()*available.length)];\n\t}\n\n    function getFreeImage(){\n        const used = active.map(a => a.img.src);\n        const available = imageUrls.filter(url => !used.includes(url));\n        if(available.length === 0) return imageUrls[Math.floor(Math.random()*imageUrls.length)];\n        return available[Math.floor(Math.random()*available.length)];\n    }\n\n    function createInitial(){\n\n        const shuffledImages = shuffle([...imageUrls]);\n        const shuffledPositions = shuffle([...positions]);\n\n        for(let i=0;i<visibleCount;i++){\n\n            const wrapper = document.createElement('div');\n            wrapper.className='float-wrapper';\n            wrapper.style.top = shuffledPositions[i].top;\n            wrapper.style.left = shuffledPositions[i].left;\n            wrapper.style.animationDuration = (6+Math.random()*4)+'s';\n            wrapper.dataset.pos = i;\n\n            const img = document.createElement('img');\n            img.src = shuffledImages[i];\n\n            wrapper.appendChild(img);\n            container.appendChild(wrapper);\n\n            active.push({wrapper, img});\n        }\n    }\n\n    function replaceOne(){\n\n\t\tconst target = active[Math.floor(Math.random()*active.length)];\n\t\tconst currentPos = target.wrapper.dataset.pos;\n\n\t\tconst newPos = getFreePosition(currentPos);\n\t\tif(!newPos){\n\t\t\tsetTimeout(replaceOne, 4000 + Math.random()*3000);\n\t\t\treturn;\n\t\t}\n\n\t\ttarget.img.style.opacity = 0;\n\n\t\tsetTimeout(()=>{\n\n\t\t\tconst newImage = getFreeImage();\n\n\t\t\ttarget.img.src = newImage;\n\n\t\t\ttarget.wrapper.style.top = newPos.top;\n\t\t\ttarget.wrapper.style.left = newPos.left;\n\t\t\ttarget.wrapper.style.animationDuration = (6+Math.random()*4)+'s';\n\t\t\ttarget.wrapper.dataset.pos = newPos.index;\n\n\t\t\ttarget.img.style.opacity = 1;\n\n\t\t},600);\n\n\t\tsetTimeout(replaceOne, 4000 + Math.random()*3000);\n\t}\n\n    createInitial();\n    setTimeout(replaceOne, 4000);\n\n    \/* Mouse Parallax *\/\n    container.addEventListener('mousemove', function(e){\n\n        const rect = container.getBoundingClientRect();\n        const mouseX = e.clientX - rect.left - rect.width\/2;\n        const mouseY = e.clientY - rect.top - rect.height\/2;\n\n        active.forEach((item,index)=>{\n            const speed = 0.15 - index*0.02;\n            item.img.style.transform =\n                `translate(${-mouseX*speed}px, ${-mouseY*speed}px) rotate(${mouseX*0.02}deg)`;\n        });\n    });\n\n    container.addEventListener('mouseleave', function(){\n        active.forEach(item=>{\n            item.img.style.transform='translate(0,0)';\n        });\n    });\n\n});\n<\/script>\n\n\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-715a95a elementor-absolute elementor-widget elementor-widget-image\" data-id=\"715a95a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"_position\":\"absolute\"}' data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-scaled.webp\" class=\"attachment-full size-full wp-image-11593\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-scaled.webp 2560w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-2048x1152.webp 2048w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-18x10.webp 18w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/11\/250814_Studio_Gesamt2.0-32x18.webp 32w\" sizes=\"(max-width: 2560px) 100vw, 2560px\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-2a69252e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"2a69252e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-353e95ab elementor-widget elementor-widget-heading\" data-id=\"353e95ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ein Team, eine Vision<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd748ac e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"fd748ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-260e13eb elementor-widget elementor-widget-text-editor\" data-id=\"260e13eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Unter einem Dach vereinen wir kreative Ideen, technisches Know-how und strategisches Denken. Durch unsere enge Zusammenarbeit entstehen durchdachte und &auml;sthetische Produkte, die begeistern.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d07be9d e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"d07be9d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3253228 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"3253228\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\"}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-0503cca elementor-widget elementor-widget-text-editor\" data-id=\"0503cca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Gemeinsam Grillen ist eine unserer Lieblingsaufgaben im Studio<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa4d41d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"fa4d41d\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\"}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f18fca elementor-widget elementor-widget-text-editor\" data-id=\"5f18fca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tWir arbeiten alle eng zusammen, <br>so nutzt jeder seine St&auml;rken\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c611145 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"c611145\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<a class=\"elementor-element elementor-element-a96ccb9 e-con-full lst-img-hover e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"a96ccb9\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"video\",\"background_video_link\":\"https:\\\/\\\/youtu.be\\\/ValkpKKfCvk\",\"background_play_on_mobile\":\"yes\",\"background_privacy_mode\":\"yes\"}' href=\"https:\/\/xn--fv-fka.com\/\" target=\"_blank\" rel=\"nofollow noopener\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\" role=\"presentation\"><\/div>\n\t\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-0e663b4 elementor-widget elementor-widget-text-editor\" data-id=\"0e663b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tEs gibt immer neue <br>und spannende Projekte\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<div class=\"elementor-element elementor-element-a4967b1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"a4967b1\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\"}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b4b13d elementor-widget elementor-widget-text-editor\" data-id=\"1b4b13d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Wir besuchen zusammen Ausstellungen oder alles, was noch so interessant ist<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba0ede5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no elementor-invisible e-con e-parent\" data-id=\"ba0ede5\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"animation\":\"fadeIn\"}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-b49adc0 elementor-widget__width-auto elementor-widget elementor-widget-heading\" data-id=\"b49adc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Erkunde unser Studio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1caae8 elementor-widget__width-inherit elementor-widget-widescreen__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"d1caae8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&amp;family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&amp;family=DM+Mono:wght@400;500&amp;display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.ls-hotspot-root *,\r\n.ls-hotspot-root *::before,\r\n.ls-hotspot-root *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.ls-hotspot-root {\r\n  --cream: #eeeeee;\r\n  --ink: #0d0d0b;\r\n  --panel-w: 400px;\r\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n  \/* Container padding from the page: 60px top + 60px bottom *\/\r\n  --container-pad: 120px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  overflow: hidden;\r\n  position: relative;\r\n  \/* Width shrinks to fit the height-constrained image *\/\r\n  display: inline-block;\r\n  width: 100%;\r\n  max-height: calc(100vh - var(--container-pad));\r\n  background: #0d0d0b;\r\n  border-radius: 12px;\r\n}\r\n\r\n.ls-hotspot-root .widget {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.ls-hotspot-root .stage {\r\n  position: absolute;\r\n  inset: 0;\r\n  transition: transform 0.9s var(--ease-out);\r\n  transform-origin: center top;\r\n  will-change: transform;\r\n  overflow: hidden;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .stage {\r\n  transform: scale(1.05) translateX(-7%);\r\n}\r\n\r\n.ls-hotspot-root .stage__bg-wrap {\r\n  width: 100%;\r\n  height: 100%;\r\n  line-height: 0;\r\n}\r\n\r\n\/*\r\n  The BG image is constrained by height, not width.\r\n  max-height = container height (set by JS on widget).\r\n  width\/height auto = proportional scaling from height.\r\n  object-fit + 100% height fills the stage correctly.\r\n*\/\r\n.ls-hotspot-root .stage__bg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  object-position: center top;\r\n}\r\n\r\n.ls-hotspot-root .stage__dim {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: rgba(13,13,11,0);\r\n  transition: background 0.6s ease;\r\n  z-index: 2;\r\n  pointer-events: none;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .stage__dim {\r\n  background: rgba(13,13,11,0.72);\r\n}\r\n\r\n.ls-hotspot-root .hs {\r\n  position: absolute;\r\n  cursor: pointer;\r\n  transform-origin: center bottom;\r\n  transition: transform 0.3s var(--ease-out), opacity 0.4s ease;\r\n  z-index: 3;\r\n}\r\n\r\n.ls-hotspot-root .hs__img-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  line-height: 0;\r\n}\r\n\r\n.ls-hotspot-root .hs__img {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  filter: brightness(0.93) contrast(1.04);\r\n  transition: filter 0.3s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n.ls-hotspot-root .hs:hover .hs__img {\r\n  filter: brightness(1.07) contrast(1.0);\r\n}\r\n\r\n.ls-hotspot-root .hs__shine-img {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n  pointer-events: none;\r\n  mix-blend-mode: screen;\r\n  filter: brightness(2.5) saturate(0);\r\n  opacity: 0;\r\n  -webkit-mask-image: linear-gradient(\r\n    105deg,\r\n    transparent  0%,\r\n    transparent  40%,\r\n    white        50%,\r\n    transparent  60%,\r\n    transparent  100%\r\n  );\r\n  mask-image: linear-gradient(\r\n    105deg,\r\n    transparent  0%,\r\n    transparent  40%,\r\n    white        50%,\r\n    transparent  60%,\r\n    transparent  100%\r\n  );\r\n  -webkit-mask-size: 300% 100%;\r\n  mask-size: 300% 100%;\r\n  -webkit-mask-position: -150% 0;\r\n  mask-position: -150% 0;\r\n  -webkit-mask-repeat: no-repeat;\r\n  mask-repeat: no-repeat;\r\n}\r\n\r\n.ls-hotspot-root .hs.shining .hs__shine-img {\r\n  animation: ls-shineSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\r\n}\r\n\r\n@keyframes ls-shineSweep {\r\n  0%   {\r\n    opacity: 1;\r\n    -webkit-mask-position: -150% 0;\r\n    mask-position: -150% 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-mask-position: 250% 0;\r\n    mask-position: 250% 0;\r\n  }\r\n}\r\n\r\n.ls-hotspot-root .hs.active {\r\n  z-index: 4;\r\n  transform: scale(1.07) translateY(-3%);\r\n}\r\n\r\n.ls-hotspot-root .hs.active .hs__img {\r\n  filter: brightness(1.12) contrast(1.0);\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .hs:not(.active) {\r\n  opacity: 0.12;\r\n  pointer-events: none;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .hs.active {\r\n  opacity: 1;\r\n}\r\n\r\n.ls-hotspot-root .pin-layer {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  transition: transform 0.9s var(--ease-out);\r\n  transform-origin: center top;\r\n  z-index: 50;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .pin-layer {\r\n  transform: scale(1.05) translateX(-7%);\r\n}\r\n\r\n.ls-hotspot-root .pin {\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  transform: translateX(-50%);\r\n  pointer-events: none;\r\n  opacity: 1;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.ls-hotspot-root .pin-dot {\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 50% 50% 50% 0;\r\n  background: var(--cream);\r\n  transform: rotate(-45deg);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background 0.3s ease;\r\n  box-shadow: 0 1px 4px rgba(0,0,0,0.35);\r\n}\r\n\r\n.ls-hotspot-root .pin-dot span {\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 7px;\r\n  font-weight: 500;\r\n  color: var(--ink);\r\n  transform: rotate(45deg);\r\n  line-height: 1;\r\n}\r\n\r\n.ls-hotspot-root .pin-line {\r\n  width: 1px;\r\n  height: 14px;\r\n  background: linear-gradient(to bottom, var(--cream), transparent);\r\n}\r\n\r\n@keyframes ls-pinFloat {\r\n  0%, 100% { transform: translateX(-50%) translateY(0px); }\r\n  50%       { transform: translateX(-50%) translateY(-5px); }\r\n}\r\n\r\n.ls-hotspot-root .widget:not(.panel-open) .pin {\r\n  animation: ls-pinFloat 2.8s ease-in-out infinite;\r\n  animation-delay: var(--delay, 0s);\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .pin { opacity: 0; }\r\n.ls-hotspot-root .widget.panel-open .pin.active { opacity: 1; }\r\n.ls-hotspot-root .pin.shining .pin-dot { background: #fff; }\r\n\r\n.ls-hotspot-root .scene__vignette {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(ellipse at 50% 45%, transparent 25%, rgba(13,13,11,0.62) 100%);\r\n  pointer-events: none;\r\n  z-index: 20;\r\n  transition: opacity 0.5s ease;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .scene__vignette { opacity: 0.2; }\r\n\r\n.ls-hotspot-root .hud {\r\n  position: absolute;\r\n  z-index: 25;\r\n  pointer-events: none;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n.ls-hotspot-root .hud--tl {\r\n  top: 28px; left: 32px;\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 11px;\r\n  letter-spacing: 0.12em;\r\n  color: rgba(240,235,226,0.4);\r\n}\r\n\r\n.ls-hotspot-root .hud--bc {\r\n  bottom: 28px; left: 50%;\r\n  transform: translateX(-50%);\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: rgba(240,235,226,0.32);\r\n  white-space: nowrap;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .hud { opacity: 0; }\r\n\r\n.ls-hotspot-root .panel {\r\n  position: absolute;\r\n  top: 0; right: 0;\r\n  width: var(--panel-w);\r\n  background: var(--cream);\r\n  z-index: 90;\r\n  display: flex;\r\n  flex-direction: column;\r\n  transform: translateX(100%);\r\n  transition: transform 0.65s var(--ease-out);\r\n  overflow: hidden;\r\n}\r\n\r\n.ls-hotspot-root .panel.visible { transform: translateX(0); }\r\n\r\n.ls-hotspot-root .panel__close {\r\n  position: absolute;\r\n  top: 20px; right: 20px;\r\n  width: 34px; height: 34px;\r\n  background: none;\r\n  border: 1px solid rgba(13,13,11,0.18);\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 5;\r\n  transition: background 0.2s ease, border-color 0.2s ease;\r\n}\r\n\r\n.ls-hotspot-root .panel__close:hover { background: var(--ink); border-color: var(--ink); }\r\n.ls-hotspot-root .panel__close:hover svg path { stroke: var(--cream); }\r\n.ls-hotspot-root .panel__close svg { width: 12px; height: 12px; }\r\n.ls-hotspot-root .panel__close svg path { stroke: var(--ink); stroke-width: 1.5; transition: stroke 0.2s; }\r\n\r\n.ls-hotspot-root .panel__img-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 46%;\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.ls-hotspot-root .panel__img-wrap::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0;\r\n  height: 70px;\r\n  background: linear-gradient(transparent, var(--cream));\r\n  z-index: 2;\r\n}\r\n\r\n.ls-hotspot-root .panel__img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  transition: opacity 0.35s ease, transform 0.8s var(--ease-out);\r\n}\r\n\r\n.ls-hotspot-root .panel__img.out { opacity: 0; transform: scale(1.05); }\r\n\r\n.ls-hotspot-root .panel__body {\r\n  flex: 1;\r\n  padding: 24px 32px 28px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.ls-hotspot-root .panel__body::-webkit-scrollbar { display: none; }\r\n\r\n.ls-hotspot-root .panel__meta {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.ls-hotspot-root .panel__index {\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px;\r\n  color: rgba(13,13,11,0.3);\r\n  letter-spacing: 0.14em;\r\n}\r\n\r\n.ls-hotspot-root .panel__sep { width: 20px; height: 1px; background: rgba(13,13,11,0.18); }\r\n\r\n.ls-hotspot-root .panel__category {\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  color: rgba(13,13,11,0.42);\r\n}\r\n\r\n.ls-hotspot-root .panel__title {\r\n  font-family: 'Bebas Neue', sans-serif;\r\n  font-size: clamp(30px, 3.8vw, 50px);\r\n  line-height: 0.93;\r\n  letter-spacing: 0.015em;\r\n  color: var(--ink);\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.ls-hotspot-root .panel__rule { width: 32px; height: 1px; background: rgba(13,13,11,0.22); margin-bottom: 16px; }\r\n\r\n.ls-hotspot-root .panel__text {\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 13.5px;\r\n  font-weight: 300;\r\n  line-height: 1.78;\r\n  color: rgba(13,13,11,0.68);\r\n  flex: 1;\r\n}\r\n\r\n.ls-hotspot-root .panel__nav { display: flex; gap: 8px; margin-top: 22px; }\r\n\r\n.ls-hotspot-root .panel__nav-btn {\r\n  flex: 1;\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px;\r\n  letter-spacing: 0.13em;\r\n  text-transform: uppercase;\r\n  background: none;\r\n  border: 1px solid rgba(13,13,11,0.18);\r\n  padding: 11px 14px;\r\n  cursor: pointer;\r\n  color: rgba(13,13,11,0.45);\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.ls-hotspot-root .panel__nav-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }\r\n\r\n.ls-hotspot-root .dot-nav {\r\n  position: absolute;\r\n  right: 24px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 9px;\r\n  z-index: 210;\r\n  transition: right 0.65s var(--ease-out), opacity 0.4s ease;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.ls-hotspot-root .widget.panel-open .dot-nav {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.ls-hotspot-root .panel.visible ~ .dot-nav {\r\n  right: calc(var(--panel-w) + 18px);\r\n}\r\n\r\n.ls-hotspot-root .dot {\r\n  width: 5px; height: 5px;\r\n  border-radius: 50%;\r\n  background: rgba(240,235,226,0.28);\r\n  cursor: pointer;\r\n  border: none;\r\n  padding: 0;\r\n  transition: background 0.2s ease, transform 0.2s ease;\r\n}\r\n\r\n.ls-hotspot-root .dot:hover { background: rgba(240,235,226,0.7); transform: scale(1.5); }\r\n.ls-hotspot-root .dot.active { background: var(--cream); transform: scale(1.6); }\r\n\r\n@media (max-width: 860px) {\r\n  .ls-hotspot-root .panel {\r\n    position: fixed;\r\n    top: auto; bottom: 0; right: 0; left: 0;\r\n    width: 100%;\r\n    height: 65vh !important;\r\n    transform: translateY(110%);\r\n    border-radius: 18px 18px 0 0;\r\n  }\r\n  .ls-hotspot-root .panel.visible { transform: translateY(0); }\r\n  .ls-hotspot-root .panel__img-wrap { height: 36%; }\r\n  .ls-hotspot-root .widget.panel-open .stage { transform: scale(1.03) translateY(-8%); }\r\n  .ls-hotspot-root .widget.panel-open .pin-layer { transform: scale(1.03) translateY(-8%); }\r\n  .ls-hotspot-root .dot-nav {\r\n    position: fixed;\r\n    right: 16px; top: auto; bottom: 24px;\r\n    transform: none;\r\n    flex-direction: row;\r\n    transition: bottom 0.65s var(--ease-out), opacity 0.4s ease;\r\n  }\r\n  .ls-hotspot-root .panel.visible ~ .dot-nav { right: 16px; bottom: calc(65vh + 14px); }\r\n  .ls-hotspot-root .panel__body { padding: 18px 22px 22px; }\r\n  .ls-hotspot-root .panel__title { font-size: 28px; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .ls-hotspot-root .panel { height: 72vh !important; }\r\n  .ls-hotspot-root .panel__img-wrap { height: 30%; }\r\n  .ls-hotspot-root .panel__title { font-size: 24px; }\r\n  .ls-hotspot-root .panel.visible ~ .dot-nav { bottom: calc(72vh + 12px); }\r\n}\r\n<\/style>\r\n\r\n<!-- ELEMENTOR HTML WIDGET: paste everything above this line into the widget -->\r\n<!-- The JS lives in ls-hotspot.js &ndash; enqueue it separately (see file comments) -->\r\n\r\n<div class=\"ls-hotspot-root\">\r\n  <div class=\"widget\" id=\"ls-widget\">\r\n\r\n    <div class=\"stage\" id=\"ls-stage\">\r\n      <div class=\"stage__bg-wrap\">\r\n        <img decoding=\"async\" class=\"stage__bg\" id=\"ls-stageBg\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Isometric_Studio.png\" alt=\"Lippert Studios\">\r\n      <\/div>\r\n      <div class=\"stage__dim\"><\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-web\" data-key=\"web\" style=\"top:69.4%;left:37.7%;width:11.9%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Web_Design.png\" alt=\"Web Design\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Web_Design.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-3d\" data-key=\"3d\" style=\"top:63%;left:48.9%;width:10.2%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_3D_Rendering.png\" alt=\"3D Rendering\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_3D_Rendering.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-kitchen\" data-key=\"kitchen\" style=\"top:69.8%;left:12.4%;width:8.5%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Kitchen.png\" alt=\"K&uuml;che\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-Studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Kitchen.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-monstera\" data-key=\"monstera\" style=\"top:20.1%;left:41.8%;width:16.8%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Monstera.png\" alt=\"Monstera\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Monstera.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-camera\" data-key=\"camera\" style=\"top:54.5%;left:36.75%;width:7.2%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Camera.png\" alt=\"Fotografie\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Camera.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-workshop\" data-key=\"workshop\" style=\"top:31.3%;left:67.8%;width:24.4%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Workshop.png\" alt=\"Workshop\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Workshop.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs\" id=\"ls-hs-product\" data-key=\"product\" style=\"top:60.12%;left:58.9%;width:10%\">\r\n        <div class=\"hs__img-wrap\">\r\n          <img decoding=\"async\" class=\"hs__img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Product_Design.png\" alt=\"Produktdesign\">\r\n          <img decoding=\"async\" class=\"hs__shine-img\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/01\/Iso_Studio_Product_Design.png\" aria-hidden=\"true\" alt=\"\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"pin-layer\" id=\"ls-pinLayer\"><\/div>\r\n    <div class=\"scene__vignette\"><\/div>\r\n    <div class=\"hud hud--bc\">&mdash; Hotspot erkunden<\/div>\r\n\r\n    <div class=\"panel\" id=\"ls-panel\">\r\n      <button class=\"panel__close\" id=\"ls-closeBtn\" aria-label=\"Schlie&szlig;en\">\r\n        <svg viewbox=\"0 0 12 12\" fill=\"none\"><path d=\"M1 1L11 11M11 1L1 11\" stroke-linecap=\"round\"><\/path><\/svg>\r\n      <\/button>\r\n      <div class=\"panel__img-wrap\">\r\n        <img decoding=\"async\" src=\"\" alt=\"\" class=\"panel__img\" id=\"ls-panelImg\">\r\n      <\/div>\r\n      <div class=\"panel__body\">\r\n        <div class=\"panel__meta\">\r\n          <span class=\"panel__index\" id=\"ls-panelIndex\">01 \/ 07<\/span>\r\n          <div class=\"panel__sep\"><\/div>\r\n          <span class=\"panel__category\" id=\"ls-panelCategory\">Kompetenz<\/span>\r\n        <\/div>\r\n        <div class=\"panel__title\" id=\"ls-panelTitle\"><\/div>\r\n        <div class=\"panel__rule\"><\/div>\r\n        <div class=\"panel__text\" id=\"ls-panelText\"><\/div>\r\n        <div class=\"panel__nav\">\r\n          <button class=\"panel__nav-btn\" id=\"ls-btnPrev\">&larr; Zur&uuml;ck<\/button>\r\n          <button class=\"panel__nav-btn\" id=\"ls-btnNext\">Weiter &rarr;<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"dot-nav\" id=\"ls-dotNav\"><\/div>\r\n\r\n  <\/div>\r\n<\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f761e1d e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"f761e1d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-604b680a elementor-widget elementor-widget-heading\" data-id=\"604b680a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Design Workshops<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71f19750 elementor-widget elementor-widget-text-editor\" data-id=\"71f19750\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>In unserem Studio haben wir zahlreiche Design-Workshops veranstaltet, um der n&auml;chsten Generation von Designern praxisnahe Einblicke in die Anwendung und Ergebnisse des Produktdesigns zu geben.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0ec482 elementor-widget elementor-widget-shortcode\" data-id=\"c0ec482\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"simple-carousel-wrapper\" id=\"carousel_69fb16386d0b3\">\r\n        <div class=\"carousel-container\">\r\n            <button class=\"carousel-arrow carousel-prev\">\r\n                <svg viewbox=\"0 0 1000 1000\" width=\"24\" height=\"24\">\r\n                    <path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path>\r\n                <\/svg>\r\n            <\/button>\r\n            \r\n            <div class=\"carousel-track-wrapper\">\r\n                <div class=\"carousel-track\">\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/Workshop_3.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/Workshop.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/240314_NYP_Designworkshop02-e1737977286454.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/240314_NYP_Designworkshop05-e1737977497927.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/240314_NYP_Designworkshop15-e1737977509484.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/240314_NYP_Designworkshop16-e1737977523988.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/240314_NYP_Designworkshop18-e1737977535444.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/Birkenrinde_Workshop_02-1.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/Birkenrinde_Workshop_04.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                            <div class=\"carousel-slide\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/Birkenrinde_Workshop_05.webp\" alt=\"Slide\">\r\n                        <\/div>\r\n                                    <\/div>\r\n            <\/div>\r\n            \r\n            <button class=\"carousel-arrow carousel-next\">\r\n                <svg viewbox=\"0 0 1000 1000\" width=\"24\" height=\"24\" style=\"transform: rotate(180deg)\">\r\n                    <path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path>\r\n                <\/svg>\r\n            <\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"carousel-pagination\"><\/div>\r\n    <\/div>\r\n    \r\n    <style>\r\n        .simple-carousel-wrapper {\r\n            max-width: 100%;\r\n            margin: 40px auto;\r\n            position: relative;\r\n        }\r\n        \r\n        .carousel-container {\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .carousel-track-wrapper {\r\n            overflow: hidden;\r\n            cursor: grab;\r\n        }\r\n        \r\n        .carousel-track-wrapper:active {\r\n            cursor: grabbing;\r\n        }\r\n        \r\n        .carousel-track {\r\n            display: flex;\r\n            gap: 20px;\r\n            transition: transform 0.4s ease;\r\n        }\r\n        \r\n        .carousel-slide {\r\n            flex-shrink: 0;\r\n            user-select: none;\r\n        }\r\n        \r\n        .carousel-slide img {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: block;\r\n            border-radius: 22px;\r\n            pointer-events: none;\r\n\t\t\tobject-fit: cover;\r\n        }\r\n        \r\n        .carousel-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            z-index: 10;\r\n        }\r\n        \r\n\t\t.carousel-arrow:hover {\r\n\t\t\tbackground: #00000020;\r\n\t\t}\r\n\t\t\r\n        .carousel-prev {\r\n            left: 10px;\r\n        }\r\n        \r\n        .carousel-next {\r\n            right: 10px;\r\n        }\r\n        \r\n        .carousel-arrow svg {\r\n            fill: #fff;\r\n        }\r\n        \r\n        .carousel-pagination {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 8px;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .carousel-dot {\r\n            width: 10px;\r\n            height: 10px;\r\n            border-radius: 50px;\r\n            background: #ddd;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .carousel-dot.active {\r\n            background: #333;\r\n            width: 24px;\r\n            border-radius: 5px;\r\n        }\r\n    <\/style>\r\n    \r\n    <script>\r\n        (function() {\r\n            const wrapper = document.getElementById('carousel_69fb16386d0b3');\r\n            const track = wrapper.querySelector('.carousel-track');\r\n            const slides = Array.from(wrapper.querySelectorAll('.carousel-slide'));\r\n            const prevBtn = wrapper.querySelector('.carousel-prev');\r\n            const nextBtn = wrapper.querySelector('.carousel-next');\r\n            const pagination = wrapper.querySelector('.carousel-pagination');\r\n            \r\n            const config = {\r\n                desktop: 2,\r\n                tablet: 2,\r\n                mobile: 1            };\r\n            \r\n            let currentIndex = 0;\r\n            let slidesPerView = getSlidesPerView();\r\n            let isDragging = false;\r\n            let startPos = 0;\r\n            let currentTranslate = 0;\r\n            let prevTranslate = 0;\r\n            let isInitialized = false;\r\n            \r\n            function getSlidesPerView() {\r\n                const width = window.innerWidth;\r\n                if (width >= 1024) return config.desktop;\r\n                if (width >= 768) return config.tablet;\r\n                return config.mobile;\r\n            }\r\n            \r\n            function updateSlideWidth() {\r\n                const containerWidth = track.parentElement.offsetWidth;\r\n                const gap = 20;\r\n                const slideWidth = (containerWidth - (gap * (slidesPerView - 1))) \/ slidesPerView;\r\n                slides.forEach(slide => {\r\n                    slide.style.width = slideWidth + 'px';\r\n                });\r\n            }\r\n            \r\n            function createPagination() {\r\n                const totalPages = slides.length - slidesPerView + 1;\r\n                pagination.innerHTML = '';\r\n                for (let i = 0; i < totalPages; i++) {\r\n                    const dot = document.createElement('div');\r\n                    dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\r\n                    dot.addEventListener('click', () => goToSlide(i));\r\n                    pagination.appendChild(dot);\r\n                }\r\n            }\r\n            \r\n            function updatePagination() {\r\n                const dots = pagination.querySelectorAll('.carousel-dot');\r\n                dots.forEach((dot, i) => {\r\n                    dot.classList.toggle('active', i === currentIndex);\r\n                });\r\n            }\r\n            \r\n            function goToSlide(index) {\r\n                const maxIndex = slides.length - slidesPerView;\r\n                currentIndex = Math.max(0, Math.min(index, maxIndex));\r\n                \r\n                const slideWidth = slides[0].offsetWidth;\r\n                const gap = 20;\r\n                const offset = -(currentIndex * (slideWidth + gap));\r\n                \r\n                track.style.transform = `translateX(${offset}px)`;\r\n                updatePagination();\r\n            }\r\n            \r\n            function nextSlide() {\r\n                if (currentIndex < slides.length - slidesPerView) {\r\n                    goToSlide(currentIndex + 1);\r\n                } else {\r\n                    goToSlide(0);\r\n                }\r\n            }\r\n            \r\n            function prevSlide() {\r\n                if (currentIndex > 0) {\r\n                    goToSlide(currentIndex - 1);\r\n                } else {\r\n                    goToSlide(slides.length - slidesPerView);\r\n                }\r\n            }\r\n            \r\n            function getPositionX(event) {\r\n                return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;\r\n            }\r\n            \r\n            function touchStart(event) {\r\n                isDragging = true;\r\n                startPos = getPositionX(event);\r\n                track.style.transition = 'none';\r\n            }\r\n            \r\n            function touchMove(event) {\r\n                if (!isDragging) return;\r\n                const currentPosition = getPositionX(event);\r\n                const diff = currentPosition - startPos;\r\n                const slideWidth = slides[0].offsetWidth + 20;\r\n                const offset = -(currentIndex * slideWidth) + diff;\r\n                track.style.transform = `translateX(${offset}px)`;\r\n            }\r\n            \r\n            function touchEnd(event) {\r\n                if (!isDragging) return;\r\n                isDragging = false;\r\n                track.style.transition = 'transform 0.4s ease';\r\n                \r\n                const movedBy = getPositionX(event) - startPos;\r\n                const threshold = 50;\r\n                \r\n                if (movedBy < -threshold) {\r\n                    nextSlide();\r\n                } else if (movedBy > threshold) {\r\n                    prevSlide();\r\n                } else {\r\n                    goToSlide(currentIndex);\r\n                }\r\n            }\r\n            \r\n            function initCarousel() {\r\n                if (isInitialized) return;\r\n                \r\n                slidesPerView = getSlidesPerView();\r\n                updateSlideWidth();\r\n                createPagination();\r\n                goToSlide(0);\r\n                isInitialized = true;\r\n            }\r\n            \r\n            \/\/ Warten bis alle Bilder geladen sind\r\n            function waitForImages() {\r\n                const images = Array.from(slides).map(slide => slide.querySelector('img'));\r\n                const promises = images.map(img => {\r\n                    if (img.complete) {\r\n                        return Promise.resolve();\r\n                    }\r\n                    return new Promise(resolve => {\r\n                        img.onload = resolve;\r\n                        img.onerror = resolve;\r\n                    });\r\n                });\r\n                \r\n                Promise.all(promises).then(() => {\r\n                    initCarousel();\r\n                });\r\n            }\r\n            \r\n            prevBtn.addEventListener('click', prevSlide);\r\n            nextBtn.addEventListener('click', nextSlide);\r\n            \r\n            track.addEventListener('mousedown', touchStart);\r\n            track.addEventListener('mousemove', touchMove);\r\n            track.addEventListener('mouseup', touchEnd);\r\n            track.addEventListener('mouseleave', () => {\r\n                if (isDragging) touchEnd({ pageX: startPos });\r\n            });\r\n            \r\n            track.addEventListener('touchstart', touchStart);\r\n            track.addEventListener('touchmove', touchMove);\r\n            track.addEventListener('touchend', touchEnd);\r\n            \r\n            window.addEventListener('resize', () => {\r\n                slidesPerView = getSlidesPerView();\r\n                updateSlideWidth();\r\n                createPagination();\r\n                goToSlide(0);\r\n            });\r\n            \r\n            \/\/ Initialisierung starten\r\n            waitForImages();\r\n        })();\r\n    <\/script>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-349f431f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"349f431f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9e65c97 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"9e65c97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[],"class_list":["post-85","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":938,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":14474,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/85\/revisions\/14474"}],"wp:attachment":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}