Farbwechsel Widget<\/title>\r\n <style>\r\n .product-widget {\r\n width: 100%;\r\n margin: auto;\r\n text-align: center;\r\n font-family: sans-serif;\r\n background: #f3f3f3;\r\n padding: 0em;\r\n border-radius: 20px;\r\n }\r\n\r\n .image-container {\r\n position: relative;\r\n width: 100%;\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n\r\n .product-image {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n opacity: 1;\r\n transition: opacity 0.5s ease;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n margin-top: -100px\r\n }\r\n\r\n .product-image.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .color-selector {\r\n margin-top: 0px;\r\n padding-top: 25px;\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .color-circle {\r\n width: 35px;\r\n height: 35px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: transform 0.2s, border-color 0.2s;\r\n border-color: #3c3c3c10;\r\n background-size: cover !important;\r\n }\r\n\r\n .color-circle:hover {\r\n transform: scale(1.1);\r\n border-color: #007396;\r\n }\r\n \r\n .color-circle.selected {\r\n transform: scale(1.2);\r\n border: 2px solid #007396;\r\n }\r\n \r\n @media only screen and (max-width:767px) {\r\n .product-widget {\r\n width: 100%;\r\n height: 340px;\r\n overflow: hidden;\r\n}\r\n\r\n.elementor img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.image-container {\r\n height: 100% !important;\r\n width: 100%\r\n}\r\n\r\n.product-image {\r\n height: 100%;\r\n width: 100%;\r\n margin-top: -60px\r\n}\r\n }\r\n <\/style>\r\n\r\n<body>\r\n<div class=\"product-widget\">\r\n <div class=\"color-selector\">\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Grau_swatch.png);\" onclick=\"selectColor('1', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Grau_White_swatch.png);\" onclick=\"selectColor('2', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_metallic-_blue_swatch.png);\" onclick=\"selectColor('3', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_metallic_swatch.png);\" onclick=\"selectColor('4', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Orange_swatch.png);\" onclick=\"selectColor('5', this)\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"image-container\" style=\"height: 600px;\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Grau.webp\" class=\"product-image\" id=\"image-1\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Grau_White.webp\" class=\"product-image hidden\" id=\"image-2\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_metallic-_blue.webp\" class=\"product-image hidden\" id=\"image-3\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_metallic.webp\" class=\"product-image hidden\" id=\"image-4\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Orange.webp\" class=\"product-image hidden\" id=\"image-5\">\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let autoChangeInterval;\r\n let userSelected = false;\r\n const colors = ['1', '2', '3', '4', '5'];\r\n let currentIndex = 0;\r\n const colorCircles = document.querySelectorAll('.color-circle');\r\n \r\n \/\/ Automatischer Farbwechsel am Anfang\r\n function startAutoChange() {\r\n autoChangeInterval = setInterval(() => {\r\n if (!userSelected) {\r\n currentIndex = (currentIndex + 1) % colors.length;\r\n switchColor(colors[currentIndex]);\r\n updateSelectedCircle(colors[currentIndex]);\r\n }\r\n }, 2000); \/\/ Wechsel alle 2 Sekunden\r\n }\r\n \r\n \/\/ Farbwechsel Funktion\r\n function switchColor(id) {\r\n const images = document.querySelectorAll('.product-image');\r\n images.forEach(img => img.classList.add('hidden'));\r\n\r\n const selectedImage = document.getElementById('image-' + id);\r\n if (selectedImage) {\r\n selectedImage.classList.remove('hidden');\r\n }\r\n }\r\n \r\n \/\/ Ausgewählten Kreis aktualisieren\r\n function updateSelectedCircle(colorId) {\r\n colorCircles.forEach(circle => {\r\n circle.classList.remove('selected');\r\n });\r\n \r\n const selectedCircle = document.querySelector(`.color-circle[onclick*=\"'${colorId}'\"]`);\r\n if (selectedCircle) {\r\n selectedCircle.classList.add('selected');\r\n }\r\n }\r\n \r\n \/\/ Manuelle Auswahl durch Benutzer\r\n function selectColor(id, element) {\r\n if (!userSelected) {\r\n userSelected = true;\r\n clearInterval(autoChangeInterval);\r\n }\r\n \r\n switchColor(id);\r\n updateSelectedCircle(id);\r\n }\r\n \r\n \/\/ Starte den automatischen Wechsel beim Laden der Seite\r\n window.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Wähle den ersten Kreis zunächst aus\r\n updateSelectedCircle('1');\r\n startAutoChange();\r\n });\r\n<\/script>\r\n\r\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-61268c3 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=\"61268c3\" 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-6ee94da 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=\"6ee94da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6bda15 elementor-widget elementor-widget-heading\" data-id=\"a6bda15\" 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\">Gerenderte Szenarien<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be6b82e elementor-widget elementor-widget-text-editor\" data-id=\"be6b82e\" 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>Die Renderings zeigen <strong data-start=\"151\" data-end=\"161\">Modula<\/strong> in verschiedenen räumlichen Kontexten. Sie dienen dazu, Gestaltung, Materialität und Proportion im Entwurfsprozess realitätsnah zu prüfen und weiterzuentwickeln.<\/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-40d0b029 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=\"40d0b029\" 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-7aed25a3 lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"7aed25a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp\" class=\"attachment-full size-full wp-image-7587\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp 1920w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-18x10.webp 18w\" sizes=\"(max-width: 1920px) 100vw, 1920px\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ae7cd1d 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=\"ae7cd1d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-298c199a lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"298c199a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp\" class=\"attachment-full size-full wp-image-7639\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp 2560w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-2048x1152.webp 2048w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3965972f lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"3965972f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp\" class=\"attachment-full size-full wp-image-7638\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp 2560w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-2048x1152.webp 2048w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\">\t\t\t\t\t\t\t\t<\/a>\n\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<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f9c9c8d 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=\"6f9c9c8d\" 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-38c971b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"38c971b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ac9f292 elementor-widget elementor-widget-spacer\" data-id=\"4ac9f292\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38f449c5 elementor-widget elementor-widget-heading\" data-id=\"38f449c5\" 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\">Ähnliche Projekte<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11724684 elementor-widget elementor-widget-spacer\" data-id=\"11724684\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4184b8e5 wpr-grid-columns-3 wpr-grid-columns--widescreen3 wpr-item-styles-wrapper animated-fast wpr-grid-columns--laptop3 wpr-grid-columns--tablet_extra3 wpr-grid-columns--tablet2 wpr-grid-columns--mobile_extra2 wpr-grid-columns--mobile1 elementor-invisible elementor-widget elementor-widget-wpr-grid\" data-id=\"4184b8e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"_animation\":\"fadeInUp\"}' data-widget_type=\"wpr-grid.default\">\n\t\t\t\t\t<h2>No Posts Found!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t<\/body><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jetzt entdecken Modula RegalsystemModula ist ein flexibles Regalsystem für moderne Räume. Es schafft Struktur, ohne starr zu wirken, und bietet Raum für Dinge, die gesehen werden wollen. Ob im Wohnzimmer, Büro oder in der Küche – Modula passt sich an und wächst mit. Vom Entwurf zum SystemAm Anfang stand die Idee: ein Regalsystem zu entwickeln, das sich an unterschiedliche Räume und Bedürfnisse anpassen lässt – funktional, zeitlos und modular. Die Skizzen zeigen die ersten Schritte auf dem Weg zu Modula – vom Konzept über Proportionen bis hin zu konstruktiven Details.Modularität, die echten Freiraum schafftModula basiert auf einem einfachen, durchdachten Bauprinzip: Einzelne Module lassen sich beliebig kombinieren, erweitern und neu anordnen. So entsteht ein System, das mitwächst, sich verändert und immer wieder neu gedacht werden kann – ganz nach den Anforderungen des Raumes oder den eigenen Vorstellungen. Statt starrer Vorgaben bietet Modula maximale Gestaltungsfreiheit – für ein Regal, das so individuell ist wie sein Umfeld.https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250512-Mmf-Clip0001-0250.mp4 Farben, die Akzente setzenFür Modula wurden verschiedene Farbvarianten entwickelt, die sich sowohl dezent in unterschiedliche Räume einfügen als auch gezielt Akzente setzen können. Die Auswahl unterstützt das klare Design und bietet gestalterischen Spielraum in der Anwendung. Farbwechsel Widget Gerenderte Szenarien Die Renderings zeigen Modula in verschiedenen räumlichen Kontexten. Sie dienen dazu, Gestaltung, Materialität und Proportion im Entwurfsprozess realitätsnah zu prüfen und weiterzuentwickeln. Ähnliche Projekte No Posts Found!<\/p>","protected":false},"author":3,"featured_media":7646,"parent":9368,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[79,80],"class_list":["post-7080","page","type-page","status-publish","has-post-thumbnail","hentry","tag-medienproduktion","tag-produktentwicklung"],"_links":{"self":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080","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=7080"}],"version-history":[{"count":158,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080\/revisions"}],"predecessor-version":[{"id":11698,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080\/revisions\/11698"}],"up":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/9368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/media\/7646"}],"wp:attachment":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/media?parent=7080"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/tags?post=7080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tUnbegrenzt erweiterbar<\/strong>\n\t\t\t\t\t\t
Das System passt sich mühelos an und erlaubt dir, genau die Konfiguration einzustellen, die du heute brauchst, und sie morgen zu erweitern, wenn sich die Anforderungen ändern. Es ist auf Wachstum ausgelegt: Neue Module lassen sich einfach anschließen, die Struktur erweitern und zusätzliche Funktionen freischalten, ohne von vorn zu beginnen.<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div><\/model-viewer>\n\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<\/div><\/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
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Farben, die Akzente setzen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Für Modula wurden verschiedene Farbvarianten entwickelt, die sich sowohl dezent in unterschiedliche Räume einfügen als auch gezielt Akzente setzen können. Die Auswahl unterstützt das klare Design und bietet gestalterischen Spielraum in der Anwendung.<\/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
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n Farbwechsel Widget<\/title>\r\n <style>\r\n .product-widget {\r\n width: 100%;\r\n margin: auto;\r\n text-align: center;\r\n font-family: sans-serif;\r\n background: #f3f3f3;\r\n padding: 0em;\r\n border-radius: 20px;\r\n }\r\n\r\n .image-container {\r\n position: relative;\r\n width: 100%;\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n\r\n .product-image {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n opacity: 1;\r\n transition: opacity 0.5s ease;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n margin-top: -100px\r\n }\r\n\r\n .product-image.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .color-selector {\r\n margin-top: 0px;\r\n padding-top: 25px;\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .color-circle {\r\n width: 35px;\r\n height: 35px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: transform 0.2s, border-color 0.2s;\r\n border-color: #3c3c3c10;\r\n background-size: cover !important;\r\n }\r\n\r\n .color-circle:hover {\r\n transform: scale(1.1);\r\n border-color: #007396;\r\n }\r\n \r\n .color-circle.selected {\r\n transform: scale(1.2);\r\n border: 2px solid #007396;\r\n }\r\n \r\n @media only screen and (max-width:767px) {\r\n .product-widget {\r\n width: 100%;\r\n height: 340px;\r\n overflow: hidden;\r\n}\r\n\r\n.elementor img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.image-container {\r\n height: 100% !important;\r\n width: 100%\r\n}\r\n\r\n.product-image {\r\n height: 100%;\r\n width: 100%;\r\n margin-top: -60px\r\n}\r\n }\r\n <\/style>\r\n\r\n<body>\r\n<div class=\"product-widget\">\r\n <div class=\"color-selector\">\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Grau_swatch.png);\" onclick=\"selectColor('1', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Grau_White_swatch.png);\" onclick=\"selectColor('2', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_metallic-_blue_swatch.png);\" onclick=\"selectColor('3', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_metallic_swatch.png);\" onclick=\"selectColor('4', this)\"><\/div>\r\n <div class=\"color-circle\" style=\"background:url(\/wp-content\/uploads\/2025\/05\/Detail_Orange_swatch.png);\" onclick=\"selectColor('5', this)\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"image-container\" style=\"height: 600px;\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Grau.webp\" class=\"product-image\" id=\"image-1\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Grau_White.webp\" class=\"product-image hidden\" id=\"image-2\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_metallic-_blue.webp\" class=\"product-image hidden\" id=\"image-3\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_metallic.webp\" class=\"product-image hidden\" id=\"image-4\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/05\/Detail_Orange.webp\" class=\"product-image hidden\" id=\"image-5\">\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n let autoChangeInterval;\r\n let userSelected = false;\r\n const colors = ['1', '2', '3', '4', '5'];\r\n let currentIndex = 0;\r\n const colorCircles = document.querySelectorAll('.color-circle');\r\n \r\n \/\/ Automatischer Farbwechsel am Anfang\r\n function startAutoChange() {\r\n autoChangeInterval = setInterval(() => {\r\n if (!userSelected) {\r\n currentIndex = (currentIndex + 1) % colors.length;\r\n switchColor(colors[currentIndex]);\r\n updateSelectedCircle(colors[currentIndex]);\r\n }\r\n }, 2000); \/\/ Wechsel alle 2 Sekunden\r\n }\r\n \r\n \/\/ Farbwechsel Funktion\r\n function switchColor(id) {\r\n const images = document.querySelectorAll('.product-image');\r\n images.forEach(img => img.classList.add('hidden'));\r\n\r\n const selectedImage = document.getElementById('image-' + id);\r\n if (selectedImage) {\r\n selectedImage.classList.remove('hidden');\r\n }\r\n }\r\n \r\n \/\/ Ausgewählten Kreis aktualisieren\r\n function updateSelectedCircle(colorId) {\r\n colorCircles.forEach(circle => {\r\n circle.classList.remove('selected');\r\n });\r\n \r\n const selectedCircle = document.querySelector(`.color-circle[onclick*=\"'${colorId}'\"]`);\r\n if (selectedCircle) {\r\n selectedCircle.classList.add('selected');\r\n }\r\n }\r\n \r\n \/\/ Manuelle Auswahl durch Benutzer\r\n function selectColor(id, element) {\r\n if (!userSelected) {\r\n userSelected = true;\r\n clearInterval(autoChangeInterval);\r\n }\r\n \r\n switchColor(id);\r\n updateSelectedCircle(id);\r\n }\r\n \r\n \/\/ Starte den automatischen Wechsel beim Laden der Seite\r\n window.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Wähle den ersten Kreis zunächst aus\r\n updateSelectedCircle('1');\r\n startAutoChange();\r\n });\r\n<\/script>\r\n\r\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-61268c3 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=\"61268c3\" 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-6ee94da 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=\"6ee94da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6bda15 elementor-widget elementor-widget-heading\" data-id=\"a6bda15\" 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\">Gerenderte Szenarien<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be6b82e elementor-widget elementor-widget-text-editor\" data-id=\"be6b82e\" 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>Die Renderings zeigen <strong data-start=\"151\" data-end=\"161\">Modula<\/strong> in verschiedenen räumlichen Kontexten. Sie dienen dazu, Gestaltung, Materialität und Proportion im Entwurfsprozess realitätsnah zu prüfen und weiterzuentwickeln.<\/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-40d0b029 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=\"40d0b029\" 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-7aed25a3 lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"7aed25a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp\" class=\"attachment-full size-full wp-image-7587\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG.webp 1920w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/Modula_Hero_IMG-18x10.webp 18w\" sizes=\"(max-width: 1920px) 100vw, 1920px\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ae7cd1d 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=\"ae7cd1d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-298c199a lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"298c199a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp\" class=\"attachment-full size-full wp-image-7639\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-scaled.webp 2560w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-2048x1152.webp 2048w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_2-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3965972f lst-img-hover modula-1 elementor-widget elementor-widget-image\" data-id=\"3965972f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp\" class=\"attachment-full size-full wp-image-7638\" alt=\"\" srcset=\"https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-scaled.webp 2560w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-300x169.webp 300w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-1024x576.webp 1024w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-768x432.webp 768w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-1536x864.webp 1536w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-2048x1152.webp 2048w, https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250514_MMF_High_1-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\">\t\t\t\t\t\t\t\t<\/a>\n\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<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f9c9c8d 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=\"6f9c9c8d\" 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-38c971b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"38c971b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ac9f292 elementor-widget elementor-widget-spacer\" data-id=\"4ac9f292\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38f449c5 elementor-widget elementor-widget-heading\" data-id=\"38f449c5\" 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\">Ähnliche Projekte<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11724684 elementor-widget elementor-widget-spacer\" data-id=\"11724684\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4184b8e5 wpr-grid-columns-3 wpr-grid-columns--widescreen3 wpr-item-styles-wrapper animated-fast wpr-grid-columns--laptop3 wpr-grid-columns--tablet_extra3 wpr-grid-columns--tablet2 wpr-grid-columns--mobile_extra2 wpr-grid-columns--mobile1 elementor-invisible elementor-widget elementor-widget-wpr-grid\" data-id=\"4184b8e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"_animation\":\"fadeInUp\"}' data-widget_type=\"wpr-grid.default\">\n\t\t\t\t\t<h2>No Posts Found!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t<\/body><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jetzt entdecken Modula RegalsystemModula ist ein flexibles Regalsystem für moderne Räume. Es schafft Struktur, ohne starr zu wirken, und bietet Raum für Dinge, die gesehen werden wollen. Ob im Wohnzimmer, Büro oder in der Küche – Modula passt sich an und wächst mit. Vom Entwurf zum SystemAm Anfang stand die Idee: ein Regalsystem zu entwickeln, das sich an unterschiedliche Räume und Bedürfnisse anpassen lässt – funktional, zeitlos und modular. Die Skizzen zeigen die ersten Schritte auf dem Weg zu Modula – vom Konzept über Proportionen bis hin zu konstruktiven Details.Modularität, die echten Freiraum schafftModula basiert auf einem einfachen, durchdachten Bauprinzip: Einzelne Module lassen sich beliebig kombinieren, erweitern und neu anordnen. So entsteht ein System, das mitwächst, sich verändert und immer wieder neu gedacht werden kann – ganz nach den Anforderungen des Raumes oder den eigenen Vorstellungen. Statt starrer Vorgaben bietet Modula maximale Gestaltungsfreiheit – für ein Regal, das so individuell ist wie sein Umfeld.https:\/\/lippert-studios.com\/wp-content\/uploads\/2025\/05\/250512-Mmf-Clip0001-0250.mp4 Farben, die Akzente setzenFür Modula wurden verschiedene Farbvarianten entwickelt, die sich sowohl dezent in unterschiedliche Räume einfügen als auch gezielt Akzente setzen können. Die Auswahl unterstützt das klare Design und bietet gestalterischen Spielraum in der Anwendung. Farbwechsel Widget Gerenderte Szenarien Die Renderings zeigen Modula in verschiedenen räumlichen Kontexten. Sie dienen dazu, Gestaltung, Materialität und Proportion im Entwurfsprozess realitätsnah zu prüfen und weiterzuentwickeln. Ähnliche Projekte No Posts Found!<\/p>","protected":false},"author":3,"featured_media":7646,"parent":9368,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[79,80],"class_list":["post-7080","page","type-page","status-publish","has-post-thumbnail","hentry","tag-medienproduktion","tag-produktentwicklung"],"_links":{"self":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080","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=7080"}],"version-history":[{"count":158,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080\/revisions"}],"predecessor-version":[{"id":11698,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/7080\/revisions\/11698"}],"up":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/pages\/9368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/media\/7646"}],"wp:attachment":[{"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/media?parent=7080"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lippert-studios.com\/en\/wp-json\/wp\/v2\/tags?post=7080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}