Flexibles Layout<\/title><\/p>\n<style>\n .custom-row {\n display: grid;\n grid-template-columns: repeat(6, 216px);\n justify-content: space-between;\n gap: 2vw; \/* Flexibler Abstand abh\u00e4ngig von der Bildschirmbreite *\/\n }<\/p>\n<p> .custom-column {\n width: 216px;\n height: 264px;\n padding-left: 16px;\n padding-top: 0px;\n text-align: left;\n border-left: 3px solid rgba(72, 92, 199, 1); \/* Linker Streifen *\/\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> \/* Der Y-Versatz ist in die Zeile einzeln eingef\u00fcgt:\n .custom-column:nth-child(even) {\n transform: translateY(-100px) <\/p>\n<p> } *\/<\/p>\n<p> .category {\n font-size: 14px;\n color: black;\n display: block;\n }<\/p>\n<p> h5 {\n font-size: 24px;\n color: rgba(72, 92, 199, 1); \/* chilli blue *\/\n margin: 10px 0 0 0;\n }<\/p>\n<p> @media (max-width: 1300px) {\n .custom-row {\n grid-template-columns: repeat(3, 216px);\n }\n .custom-column {\n margin-bottom: 200px;\n }\n }<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"custom-row\">\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Graphic Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Innovation<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>User Interface<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Service Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Architecture<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>User Experience<\/h5>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<\/div>\n<h1>2008<\/h1>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n \/* Video-Overlay *\/\n .video-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n z-index: 9999;\n }<\/p>\n<p> .video-overlay.active {\n opacity: 1;\n visibility: visible;\n }<\/p>\n<p> .video-wrapper {\n width: 80%;\n max-width: 1200px;\n position: relative;\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .video-wrapper video {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 5px;\n }<\/p>\n<p> .play-button {\n width: 120px;\n height: 120px;\n cursor: pointer;\n }<\/p>\n<p> .close-button {\n position: absolute;\n top: 10px;\n right: 15px;\n background: transparent;\n text-decoration: none;\n font-size: 30px;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }<\/p>\n<p> .video-container {\n display: flex;\n justify-content: center;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p> <\/p>\n<div class=\"video-container\">\n <svg class=\"play-button\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"\/>\n <polygon points=\"40,30 70,50 40,70\" fill=\"white\"\/>\n <\/svg>\n <\/div>\n<div class=\"video-overlay\">\n<div class=\"video-wrapper\">\n <video controls playsinline><source class=\"video-source\" type=\"video\/mp4\">Dein Browser unterst\u00fctzt kein HTML5-Video.<\/video><br \/>\n <span class=\"close-button\">×<\/span>\n <\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const playButtons = document.querySelectorAll(\".play-button\"); \/\/ Alle Buttons erfassen\n const videoOverlays = document.querySelectorAll(\".video-overlay\"); \/\/ Alle Overlays erfassen<\/p>\n<p> playButtons.forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n console.log(\"Play Button wurde geklickt!\");<\/p>\n<p> \/\/ Entsprechendes Overlay aktivieren\n if (videoOverlays[index]) {\n videoOverlays[index].classList.add(\"active\");<\/p>\n<p> \/\/ Richtige Videoquelle setzen\n let video = videoOverlays[index].querySelector(\"video\");\n let videoSource = video.querySelector(\".video-source\");<\/p>\n<p> if (window.innerWidth <= 767) {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240716_MASTER_v10_Insta_Reel_web.mp4\";\n } else {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240718_MASTER_v20_small.mp4\";\n }\n\n \/\/ Video neu laden und starten\n video.load();\n video.currentTime = 0;\n video.muted = false;\n video.play();\n }\n });\n });\n\n \/\/ Schlie\u00dfen des Overlays\n document.querySelectorAll(\".close-button\").forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n if (videoOverlays[index]) {\n videoOverlays[index].classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = videoOverlays[index].querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });<\/p>\n<p> \/\/ Schlie\u00dfen durch Klick au\u00dferhalb des Videos\n videoOverlays.forEach((overlay, index) => {\n overlay.addEventListener(\"click\", function(event) {\n let videoWrapper = overlay.querySelector(\".video-wrapper\");\n if (!videoWrapper.contains(event.target)) { \n overlay.classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = overlay.querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<h1>Ongoing<\/h1>\n<h1>2008<\/h1>\n<hr>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n \/* Video-Overlay *\/\n .video-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n z-index: 9999;\n }<\/p>\n<p> .video-overlay.active {\n opacity: 1;\n visibility: visible;\n }<\/p>\n<p> .video-wrapper {\n width: 80%;\n max-width: 1200px;\n position: relative;\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .video-wrapper video {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 5px;\n }<\/p>\n<p> .play-button {\n width: 120px;\n height: 120px;\n cursor: pointer;\n }<\/p>\n<p> .close-button {\n position: absolute;\n top: 10px;\n right: 15px;\n background: transparent;\n text-decoration: none;\n font-size: 30px;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }<\/p>\n<p> .video-container {\n display: flex;\n justify-content: center;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p> <\/p>\n<div class=\"video-container\">\n <svg class=\"play-button\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"\/>\n <polygon points=\"40,30 70,50 40,70\" fill=\"white\"\/>\n <\/svg>\n <\/div>\n<div class=\"video-overlay\">\n<div class=\"video-wrapper\">\n <video controls playsinline><source class=\"video-source\" type=\"video\/mp4\">Dein Browser unterst\u00fctzt kein HTML5-Video.<\/video><br \/>\n <span class=\"close-button\">×<\/span>\n <\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const playButtons = document.querySelectorAll(\".play-button\"); \/\/ Alle Buttons erfassen\n const videoOverlays = document.querySelectorAll(\".video-overlay\"); \/\/ Alle Overlays erfassen<\/p>\n<p> playButtons.forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n console.log(\"Play Button wurde geklickt!\");<\/p>\n<p> \/\/ Entsprechendes Overlay aktivieren\n if (videoOverlays[index]) {\n videoOverlays[index].classList.add(\"active\");<\/p>\n<p> \/\/ Richtige Videoquelle setzen\n let video = videoOverlays[index].querySelector(\"video\");\n let videoSource = video.querySelector(\".video-source\");<\/p>\n<p> if (window.innerWidth <= 767) {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240716_MASTER_v10_Insta_Reel_web.mp4\";\n } else {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240718_MASTER_v20_small.mp4\";\n }\n\n \/\/ Video neu laden und starten\n video.load();\n video.currentTime = 0;\n video.muted = false;\n video.play();\n }\n });\n });\n\n \/\/ Schlie\u00dfen des Overlays\n document.querySelectorAll(\".close-button\").forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n if (videoOverlays[index]) {\n videoOverlays[index].classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = videoOverlays[index].querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });<\/p>\n<p> \/\/ Schlie\u00dfen durch Klick au\u00dferhalb des Videos\n videoOverlays.forEach((overlay, index) => {\n overlay.addEventListener(\"click\", function(event) {\n let videoWrapper = overlay.querySelector(\".video-wrapper\");\n if (!videoWrapper.contains(event.target)) { \n overlay.classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = overlay.querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<h1>Ongoing<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Packaging<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Interaction Design<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Professional Concept<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Green Product<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Brand & Communication Design<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Web & HMI<\/h1>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Flexibles Layout<\/title><\/p>\n<style>\n .custom-row {\n display: grid;\n grid-template-columns: repeat(6, 216px);\n justify-content: space-between;\n gap: 2vw; \/* Flexibler Abstand abh\u00e4ngig von der Bildschirmbreite *\/\n }<\/p>\n<p> .custom-column {\n width: 216px;\n height: 264px;\n padding-left: 16px;\n padding-top: 0px;\n text-align: left;\n border-left: 3px solid rgba(72, 92, 199, 1); \/* Linker Streifen *\/\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> .category {\n font-size: 14px;\n color: black;\n display: block;\n }<\/p>\n<p> h5 {\n font-size: 24px;\n color: rgba(72, 92, 199, 1); \/* chilli blue *\/\n margin: 10px 0 0 0;\n }<\/p>\n<p> @media (max-width: 1300px) {\n .custom-row {\n grid-template-columns: repeat(3, 216px);\n }\n .custom-column {\n margin-bottom: 200px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"custom-row\">\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Packaging<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Interaction Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Professional Concept<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Green Product<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Brand & Communication<br \/>Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Web & HMI<\/h5>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<\/div>\n<div>\n<div class=\"marquee-award-container\">\n<div class=\"marquee-award\">\n<div class=\"marquee-award-content\">\n<p> <br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_iF.png\" alt=\"Placeholder 1\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_reddot.png\" alt=\"Placeholder 2\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_ADC.png\" alt=\"Placeholder 3\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis-Deutschland.png\" alt=\"Placeholder 4\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_SAP-HANA.png\" alt=\"Placeholder 5\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_UX-Design-Awards.png\" alt=\"Placeholder 6\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_A-Design-Award.png\" alt=\"Placeholder 7\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis.png\" alt=\"Placeholder 8\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Good-Design.png\" alt=\"Placeholder 9\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_LICC.png\" alt=\"Placeholder 10\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Deutscher-Digitalaward.png\" alt=\"Placeholder 11\"> <\/p>\n<p> <br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_iF.png\" alt=\"Placeholder 1\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_reddot.png\" alt=\"Placeholder 2\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_ADC.png\" alt=\"Placeholder 3\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis-Deutschland.png\" alt=\"Placeholder 4\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_SAP-HANA.png\" alt=\"Placeholder 5\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_UX-Design-Awards.png\" alt=\"Placeholder 6\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_A-Design-Award.png\" alt=\"Placeholder 7\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis.png\" alt=\"Placeholder 8\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Good-Design.png\" alt=\"Placeholder 9\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_LICC.png\" alt=\"Placeholder 10\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Deutscher-Digitalaward.png\" alt=\"Placeholder 11\"><\/p><\/div>\n<\/p><\/div>\n<\/div>\n<style>\n .marquee-award-container {\n overflow: hidden;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n }<\/p>\n<p> .marquee-award {\n width: 100%;\n overflow: hidden;\n position: relative;\n }<\/p>\n<p> .marquee-award-content {\n display: flex;\n gap: 20px;\n padding: 10px;\n user-select: none;\n will-change: transform;\n animation: marquee-loop 50s linear infinite;\n min-width: max-content; \/* Wichtig f\u00fcr nahtlose Animation *\/\n }<\/p>\n<p> .marquee-award-content img {\n width: 278px;\n height: auto;\n object-fit: cover;\n border-radius: 10px;\n }<\/p>\n<p> \/* Keyframes f\u00fcr nahtloses, automatisches Scrollen *\/\n @keyframes marquee-loop {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n }\n <\/style>\n<\/div>\n<h3>Work & insights<\/h3>\n<h1>We want to share<\/h1>\n<ul>\n<li>\n<\/li>\n<li>\n<\/li>\n<li>\n<\/li>\n<\/ul>\n<p><br \/>\n\\n <\/p>\n<div class=\\\"video-container\\\">\\n <svg class=\\\"play-button\\\" xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 100 100\\\">\\n <circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"red\\\"\\\/>\\n <polygon points=\\\"40,30 70,50 40,70\\\" fill=\\\"white\\\"\\\/>\\n <\\\/svg>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"video-overlay\\\">\\n <\/p>\n<div class=\\\"video-wrapper\\\">\\n <video controls playsinline>\\n \\n<source class=\\\"video-source\\\" type=\\\"video\\\/mp4\\\">\\n Dein Browser unterst\\u00fctzt kein HTML5-Video.\\n <\\\/video>\\n <span class=\\\"close-button\\\">×<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n\\n <script>\\n document.addEventListener(\\\"DOMContentLoaded\\\", function() {\\n const playButtons = document.querySelectorAll(\\\".play-button\\\"); \\\/\\\/ Alle Buttons erfassen\\n const videoOverlays = document.querySelectorAll(\\\".video-overlay\\\"); \\\/\\\/ Alle Overlays erfassen\\n\\n playButtons.forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n console.log(\\\"Play Button wurde geklickt!\\\");\\n\\n \\\/\\\/ Entsprechendes Overlay aktivieren\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.add(\\\"active\\\");\\n\\n \\\/\\\/ Richtige Videoquelle setzen\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n let videoSource = video.querySelector(\\\".video-source\\\");\\n\\n if (window.innerWidth <= 767) {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240716_MASTER_v10_Insta_Reel_web.mp4\\\";\\n } else {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240718_MASTER_v20_small.mp4\\\";\\n }\\n\\n \\\/\\\/ Video neu laden und starten\\n video.load();\\n video.currentTime = 0;\\n video.muted = false;\\n video.play();\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen des Overlays\\n document.querySelectorAll(\\\".close-button\\\").forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen durch Klick au\\u00dferhalb des Videos\\n videoOverlays.forEach((overlay, index) => {\\n overlay.addEventListener(\\\"click\\\", function(event) {\\n let videoWrapper = overlay.querySelector(\\\".video-wrapper\\\");\\n if (!videoWrapper.contains(event.target)) { \\n overlay.classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = overlay.querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n });\\n <\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\",\"divider_element\":\"div\",\"divider_style\":\"vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Ongoing\",\"text_align\":\"center\",\"title_element\":\"h1\"}}]}]}],\"name\":\"2008 \\u2013 ongoing \\\/\\\/ MOBILE\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"animation_delay\":\"80\",\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"alignment\":\"center\",\"column_gap\":\"collapse\",\"layout\":\"1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"2008\",\"text_align\":\"center\",\"title_element\":\"h1\",\"title_style\":\"h1\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\",\"divider_element\":\"hr\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"de\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <\/p>\n<style>\\n \\\/* Video-Overlay *\\\/\\n .video-overlay {\\n position: fixed;\\n top: 0;\\n left: 0;\\n width: 100vw;\\n height: 100vh;\\n background: rgba(0, 0, 0, 0.8);\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n opacity: 0;\\n visibility: hidden;\\n transition: opacity 0.3s ease, visibility 0.3s ease;\\n z-index: 9999;\\n }\\n\\n .video-overlay.active {\\n opacity: 1;\\n visibility: visible;\\n }\\n\\n .video-wrapper {\\n width: 80%;\\n max-width: 1200px;\\n position: relative;\\n border-radius: 5px;\\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\\n }\\n\\n .video-wrapper video {\\n width: 100%;\\n height: auto;\\n display: block;\\n border-radius: 5px;\\n }\\n\\n .play-button {\\n width: 120px;\\n height: 120px;\\n cursor: pointer;\\n }\\n\\n .close-button {\\n position: absolute;\\n top: 10px;\\n right: 15px;\\n background: transparent;\\n text-decoration: none;\\n font-size: 30px;\\n color: white;\\n font-weight: bold;\\n cursor: pointer;\\n }\\n\\n .video-container {\\n display: flex;\\n justify-content: center;\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n\\n \\n <\/p>\n<div class=\\\"video-container\\\">\\n <svg class=\\\"play-button\\\" xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 100 100\\\">\\n <circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"red\\\"\\\/>\\n <polygon points=\\\"40,30 70,50 40,70\\\" fill=\\\"white\\\"\\\/>\\n <\\\/svg>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"video-overlay\\\">\\n <\/p>\n<div class=\\\"video-wrapper\\\">\\n <video controls playsinline>\\n \\n<source class=\\\"video-source\\\" type=\\\"video\\\/mp4\\\">\\n Dein Browser unterst\\u00fctzt kein HTML5-Video.\\n <\\\/video>\\n <span class=\\\"close-button\\\">×<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n\\n <script>\\n document.addEventListener(\\\"DOMContentLoaded\\\", function() {\\n const playButtons = document.querySelectorAll(\\\".play-button\\\"); \\\/\\\/ Alle Buttons erfassen\\n const videoOverlays = document.querySelectorAll(\\\".video-overlay\\\"); \\\/\\\/ Alle Overlays erfassen\\n\\n playButtons.forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n console.log(\\\"Play Button wurde geklickt!\\\");\\n\\n \\\/\\\/ Entsprechendes Overlay aktivieren\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.add(\\\"active\\\");\\n\\n \\\/\\\/ Richtige Videoquelle setzen\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n let videoSource = video.querySelector(\\\".video-source\\\");\\n\\n if (window.innerWidth <= 767) {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240716_MASTER_v10_Insta_Reel_web.mp4\\\";\\n } else {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240718_MASTER_v20_small.mp4\\\";\\n }\\n\\n \\\/\\\/ Video neu laden und starten\\n video.load();\\n video.currentTime = 0;\\n video.muted = false;\\n video.play();\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen des Overlays\\n document.querySelectorAll(\\\".close-button\\\").forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen durch Klick au\\u00dferhalb des Videos\\n videoOverlays.forEach((overlay, index) => {\\n overlay.addEventListener(\\\"click\\\", function(event) {\\n let videoWrapper = overlay.querySelector(\\\".video-wrapper\\\");\\n if (!videoWrapper.contains(event.target)) { \\n overlay.classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = overlay.querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n });\\n <\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\\n\\n.el-element::after {\\n content: \\\"\\\";\\n position: absolute;\\n right: -1%;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 20px; \\\/* Adjust arrow size *\\\/\\n height: 25px;\\n background: url('data:image\\\/svg+xml;utf8,<svg xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"%23485CC7\\\" stroke-width=\\\"4\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><polyline points=\\\"6 4 18 12 6 20\\\"\\\/><\\\/svg>') no-repeat center;\\n background-size: contain;\\n}\",\"divider_element\":\"div\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Ongoing\",\"text_align\":\"center\",\"title_element\":\"h1\"}}]}]}],\"name\":\"2008 \\u2013 ongoing \\\/\\\/ DESKTOP\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-hidden@m\",\"image_position\":\"center-center\",\"padding\":\"large\",\"padding_remove_horizontal\":true,\"padding_remove_top\":false,\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin\":\"default\",\"visibility\":\"hidden-m\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Packaging\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Interaction Design\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Professional Concept\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Green Product\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Brand & Communication Design\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Web & HMI\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]}],\"name\":\"Kategorien Zeile Unten \\\/\\\/ Mobile\"}]}],\"props\":{\"css\":\"hr {\\n overflow: visible;\\n text-align: inherit;\\n margin: 0 0 20px 0;\\n border: 0;\\n border-top: 2px solid #485CC7;\\n}\\n.uk-h2 {\\n color: #485CC7;\\n}\"}}],\"name\":\"Kategorien Zeile Unten \\\/\\\/ Mobile\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"animation_delay\":\"80\",\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"padding\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"xlarge\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"de\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Flexibles Layout<\\\/title>\\n <\/p>\n<style>\\n .custom-row {\\n display: grid;\\n grid-template-columns: repeat(6, 216px);\\n justify-content: space-between;\\n gap: 2vw; \\\/* Flexibler Abstand abh\\u00e4ngig von der Bildschirmbreite *\\\/\\n }\\n\\n .custom-column {\\n width: 216px;\\n height: 264px;\\n padding-left: 16px;\\n padding-top: 0px;\\n text-align: left;\\n border-left: 3px solid rgba(72, 92, 199, 1); \\\/* Linker Streifen *\\\/\\n display: flex;\\n flex-direction: column;\\n }\\n\\n .category {\\n font-size: 14px;\\n color: black;\\n display: block;\\n }\\n\\n h5 {\\n font-size: 24px;\\n color: rgba(72, 92, 199, 1); \\\/* chilli blue *\\\/\\n margin: 10px 0 0 0;\\n }\\n\\n @media (max-width: 1300px) {\\n .custom-row {\\n grid-template-columns: repeat(3, 216px);\\n }\\n .custom-column {\\n margin-bottom: 200px;\\n }\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <\/p>\n<div class=\\\"custom-row\\\">\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Packaging<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Interaction Design<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Professional Concept<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Green Product<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Brand & Communication<br \/>Design<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Web & HMI<\\\/h5>\\n <\\\/div>\\n <\\\/div>\\n<\\\/body>\\n<\\\/html>\\n\"}}]}],\"props\":{\"css\":\".custom-column:nth-child(even) {\\n transform:translatey(-100px)\\n}\"}}],\"name\":\"Kategorien Zeile unten \\\/\\\/ Desktop\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"marquee-award-container\\\">\\n <\/p>\n<div class=\\\"marquee-award\\\">\\n <\/p>\n<div class=\\\"marquee-award-content\\\">\\n \\n \\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_iF.png\\\" alt=\\\"Placeholder 1\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_reddot.png\\\" alt=\\\"Placeholder 2\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_ADC.png\\\" alt=\\\"Placeholder 3\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis-Deutschland.png\\\" alt=\\\"Placeholder 4\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_SAP-HANA.png\\\" alt=\\\"Placeholder 5\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_UX-Design-Awards.png\\\" alt=\\\"Placeholder 6\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_A-Design-Award.png\\\" alt=\\\"Placeholder 7\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis.png\\\" alt=\\\"Placeholder 8\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Good-Design.png\\\" alt=\\\"Placeholder 9\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_LICC.png\\\" alt=\\\"Placeholder 10\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Deutscher-Digitalaward.png\\\" alt=\\\"Placeholder 11\\\"> \\n \\n \\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_iF.png\\\" alt=\\\"Placeholder 1\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_reddot.png\\\" alt=\\\"Placeholder 2\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_ADC.png\\\" alt=\\\"Placeholder 3\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis-Deutschland.png\\\" alt=\\\"Placeholder 4\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_SAP-HANA.png\\\" alt=\\\"Placeholder 5\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_UX-Design-Awards.png\\\" alt=\\\"Placeholder 6\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_A-Design-Award.png\\\" alt=\\\"Placeholder 7\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis.png\\\" alt=\\\"Placeholder 8\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Good-Design.png\\\" alt=\\\"Placeholder 9\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_LICC.png\\\" alt=\\\"Placeholder 10\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Deutscher-Digitalaward.png\\\" alt=\\\"Placeholder 11\\\">\\n\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n\\n<\/p>\n<style>\\n .marquee-award-container {\\n overflow: hidden;\\n width: 100vw;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n }\\n \\n .marquee-award {\\n width: 100%;\\n overflow: hidden;\\n position: relative;\\n }\\n \\n .marquee-award-content {\\n display: flex;\\n gap: 20px;\\n padding: 10px;\\n user-select: none;\\n will-change: transform;\\n animation: marquee-loop 50s linear infinite;\\n min-width: max-content; \\\/* Wichtig f\\u00fcr nahtlose Animation *\\\/\\n }\\n \\n .marquee-award-content img {\\n width: 278px;\\n height: auto;\\n object-fit: cover;\\n border-radius: 10px;\\n }\\n \\n \\\/* Keyframes f\\u00fcr nahtloses, automatisches Scrollen *\\\/\\n @keyframes marquee-loop {\\n from {\\n transform: translateX(0);\\n }\\n to {\\n transform: translateX(-50%);\\n }\\n }\\n <\\\/style>\\n \"},\"name\":\"Einfaches_Marquee\"}]}]}],\"name\":\"Awards_Marquee\"},{\"type\":\"section\",\"props\":{\"animation\":\"slide-left-medium\",\"animation_delay\":\"80\",\"image_position\":\"center-center\",\"style\":\"secondary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"xlarge\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Work & insights\",\"margin_remove_bottom\":true,\"title_element\":\"h3\",\"title_style\":\"h3\"},\"name\":\"eyebrow\"},{\"type\":\"headline\",\"props\":{\"content\":\"We want to share\",\"margin\":\"small\",\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"h1\"}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_default\":\"1\",\"grid_medium\":\"3\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"image_transition\":\"scale-up\",\"item_animation\":true,\"lightbox_bg_close\":true,\"link_style\":\"default\",\"link_text\":\"\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_margin\":\"small\",\"meta_style\":\"\",\"panel_link\":true,\"show_content\":true,\"show_hover_image\":true,\"show_hover_video\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"show_video\":true,\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h4\"},\"children\":[{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":5426}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}},{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":5422}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}},{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":2661}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}}]}]}]}],\"name\":\"Work & insights We Want to Share\"}],\"version\":\"4.5.19\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>60+ Awards in the categories Category Graphic Design Category Innovation Category User Interface Category Service Design Category Architecture Category User Experience Flexibles Layout Category Graphic Design Category Innovation Category User Interface Category Service Design Category Architecture Category User Experience 2008 Dein Browser unterst\u00fctzt kein HTML5-Video. × Ongoing 2008 Dein Browser unterst\u00fctzt kein HTML5-Video. × Ongoing […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7593","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/comments?post=7593"}],"version-history":[{"count":238,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593\/revisions"}],"predecessor-version":[{"id":13545,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593\/revisions\/13545"}],"wp:attachment":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/media?parent=7593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\n Flexibles Layout<\/title><\/p>\n<style>\n .custom-row {\n display: grid;\n grid-template-columns: repeat(6, 216px);\n justify-content: space-between;\n gap: 2vw; \/* Flexibler Abstand abh\u00e4ngig von der Bildschirmbreite *\/\n }<\/p>\n<p> .custom-column {\n width: 216px;\n height: 264px;\n padding-left: 16px;\n padding-top: 0px;\n text-align: left;\n border-left: 3px solid rgba(72, 92, 199, 1); \/* Linker Streifen *\/\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> \/* Der Y-Versatz ist in die Zeile einzeln eingef\u00fcgt:\n .custom-column:nth-child(even) {\n transform: translateY(-100px) <\/p>\n<p> } *\/<\/p>\n<p> .category {\n font-size: 14px;\n color: black;\n display: block;\n }<\/p>\n<p> h5 {\n font-size: 24px;\n color: rgba(72, 92, 199, 1); \/* chilli blue *\/\n margin: 10px 0 0 0;\n }<\/p>\n<p> @media (max-width: 1300px) {\n .custom-row {\n grid-template-columns: repeat(3, 216px);\n }\n .custom-column {\n margin-bottom: 200px;\n }\n }<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"custom-row\">\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Graphic Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Innovation<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>User Interface<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Service Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Architecture<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>User Experience<\/h5>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<\/div>\n<h1>2008<\/h1>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n \/* Video-Overlay *\/\n .video-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n z-index: 9999;\n }<\/p>\n<p> .video-overlay.active {\n opacity: 1;\n visibility: visible;\n }<\/p>\n<p> .video-wrapper {\n width: 80%;\n max-width: 1200px;\n position: relative;\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .video-wrapper video {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 5px;\n }<\/p>\n<p> .play-button {\n width: 120px;\n height: 120px;\n cursor: pointer;\n }<\/p>\n<p> .close-button {\n position: absolute;\n top: 10px;\n right: 15px;\n background: transparent;\n text-decoration: none;\n font-size: 30px;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }<\/p>\n<p> .video-container {\n display: flex;\n justify-content: center;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p> <\/p>\n<div class=\"video-container\">\n <svg class=\"play-button\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"\/>\n <polygon points=\"40,30 70,50 40,70\" fill=\"white\"\/>\n <\/svg>\n <\/div>\n<div class=\"video-overlay\">\n<div class=\"video-wrapper\">\n <video controls playsinline><source class=\"video-source\" type=\"video\/mp4\">Dein Browser unterst\u00fctzt kein HTML5-Video.<\/video><br \/>\n <span class=\"close-button\">×<\/span>\n <\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const playButtons = document.querySelectorAll(\".play-button\"); \/\/ Alle Buttons erfassen\n const videoOverlays = document.querySelectorAll(\".video-overlay\"); \/\/ Alle Overlays erfassen<\/p>\n<p> playButtons.forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n console.log(\"Play Button wurde geklickt!\");<\/p>\n<p> \/\/ Entsprechendes Overlay aktivieren\n if (videoOverlays[index]) {\n videoOverlays[index].classList.add(\"active\");<\/p>\n<p> \/\/ Richtige Videoquelle setzen\n let video = videoOverlays[index].querySelector(\"video\");\n let videoSource = video.querySelector(\".video-source\");<\/p>\n<p> if (window.innerWidth <= 767) {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240716_MASTER_v10_Insta_Reel_web.mp4\";\n } else {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240718_MASTER_v20_small.mp4\";\n }\n\n \/\/ Video neu laden und starten\n video.load();\n video.currentTime = 0;\n video.muted = false;\n video.play();\n }\n });\n });\n\n \/\/ Schlie\u00dfen des Overlays\n document.querySelectorAll(\".close-button\").forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n if (videoOverlays[index]) {\n videoOverlays[index].classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = videoOverlays[index].querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });<\/p>\n<p> \/\/ Schlie\u00dfen durch Klick au\u00dferhalb des Videos\n videoOverlays.forEach((overlay, index) => {\n overlay.addEventListener(\"click\", function(event) {\n let videoWrapper = overlay.querySelector(\".video-wrapper\");\n if (!videoWrapper.contains(event.target)) { \n overlay.classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = overlay.querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<h1>Ongoing<\/h1>\n<h1>2008<\/h1>\n<hr>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n \/* Video-Overlay *\/\n .video-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n z-index: 9999;\n }<\/p>\n<p> .video-overlay.active {\n opacity: 1;\n visibility: visible;\n }<\/p>\n<p> .video-wrapper {\n width: 80%;\n max-width: 1200px;\n position: relative;\n border-radius: 5px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .video-wrapper video {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 5px;\n }<\/p>\n<p> .play-button {\n width: 120px;\n height: 120px;\n cursor: pointer;\n }<\/p>\n<p> .close-button {\n position: absolute;\n top: 10px;\n right: 15px;\n background: transparent;\n text-decoration: none;\n font-size: 30px;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }<\/p>\n<p> .video-container {\n display: flex;\n justify-content: center;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p> <\/p>\n<div class=\"video-container\">\n <svg class=\"play-button\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"\/>\n <polygon points=\"40,30 70,50 40,70\" fill=\"white\"\/>\n <\/svg>\n <\/div>\n<div class=\"video-overlay\">\n<div class=\"video-wrapper\">\n <video controls playsinline><source class=\"video-source\" type=\"video\/mp4\">Dein Browser unterst\u00fctzt kein HTML5-Video.<\/video><br \/>\n <span class=\"close-button\">×<\/span>\n <\/div>\n<\/p><\/div>\n<p> <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const playButtons = document.querySelectorAll(\".play-button\"); \/\/ Alle Buttons erfassen\n const videoOverlays = document.querySelectorAll(\".video-overlay\"); \/\/ Alle Overlays erfassen<\/p>\n<p> playButtons.forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n console.log(\"Play Button wurde geklickt!\");<\/p>\n<p> \/\/ Entsprechendes Overlay aktivieren\n if (videoOverlays[index]) {\n videoOverlays[index].classList.add(\"active\");<\/p>\n<p> \/\/ Richtige Videoquelle setzen\n let video = videoOverlays[index].querySelector(\"video\");\n let videoSource = video.querySelector(\".video-source\");<\/p>\n<p> if (window.innerWidth <= 767) {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240716_MASTER_v10_Insta_Reel_web.mp4\";\n } else {\n videoSource.src = \"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/02\/240718_MASTER_v20_small.mp4\";\n }\n\n \/\/ Video neu laden und starten\n video.load();\n video.currentTime = 0;\n video.muted = false;\n video.play();\n }\n });\n });\n\n \/\/ Schlie\u00dfen des Overlays\n document.querySelectorAll(\".close-button\").forEach((button, index) => {\n button.addEventListener(\"click\", function() {\n if (videoOverlays[index]) {\n videoOverlays[index].classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = videoOverlays[index].querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });<\/p>\n<p> \/\/ Schlie\u00dfen durch Klick au\u00dferhalb des Videos\n videoOverlays.forEach((overlay, index) => {\n overlay.addEventListener(\"click\", function(event) {\n let videoWrapper = overlay.querySelector(\".video-wrapper\");\n if (!videoWrapper.contains(event.target)) { \n overlay.classList.remove(\"active\");<\/p>\n<p> \/\/ Video pausieren\n let video = overlay.querySelector(\"video\");\n if (video) {\n video.pause();\n }\n }\n });\n });\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<h1>Ongoing<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Packaging<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Interaction Design<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Professional Concept<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Green Product<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Brand & Communication Design<\/h1>\n<hr>\n<h1>Category<\/h1>\n<h1>Web & HMI<\/h1>\n<div>\n<p> <!DOCTYPE html><br \/>\n<html lang=\"de\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Flexibles Layout<\/title><\/p>\n<style>\n .custom-row {\n display: grid;\n grid-template-columns: repeat(6, 216px);\n justify-content: space-between;\n gap: 2vw; \/* Flexibler Abstand abh\u00e4ngig von der Bildschirmbreite *\/\n }<\/p>\n<p> .custom-column {\n width: 216px;\n height: 264px;\n padding-left: 16px;\n padding-top: 0px;\n text-align: left;\n border-left: 3px solid rgba(72, 92, 199, 1); \/* Linker Streifen *\/\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> .category {\n font-size: 14px;\n color: black;\n display: block;\n }<\/p>\n<p> h5 {\n font-size: 24px;\n color: rgba(72, 92, 199, 1); \/* chilli blue *\/\n margin: 10px 0 0 0;\n }<\/p>\n<p> @media (max-width: 1300px) {\n .custom-row {\n grid-template-columns: repeat(3, 216px);\n }\n .custom-column {\n margin-bottom: 200px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"custom-row\">\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Packaging<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Interaction Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Professional Concept<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Green Product<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Brand & Communication<br \/>Design<\/h5>\n<\/p><\/div>\n<div class=\"custom-column\">\n <span class=\"category\">Category<\/span><\/p>\n<h5>Web & HMI<\/h5>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<\/div>\n<div>\n<div class=\"marquee-award-container\">\n<div class=\"marquee-award\">\n<div class=\"marquee-award-content\">\n<p> <br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_iF.png\" alt=\"Placeholder 1\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_reddot.png\" alt=\"Placeholder 2\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_ADC.png\" alt=\"Placeholder 3\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis-Deutschland.png\" alt=\"Placeholder 4\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_SAP-HANA.png\" alt=\"Placeholder 5\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_UX-Design-Awards.png\" alt=\"Placeholder 6\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_A-Design-Award.png\" alt=\"Placeholder 7\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis.png\" alt=\"Placeholder 8\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Good-Design.png\" alt=\"Placeholder 9\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_LICC.png\" alt=\"Placeholder 10\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Deutscher-Digitalaward.png\" alt=\"Placeholder 11\"> <\/p>\n<p> <br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_iF.png\" alt=\"Placeholder 1\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_reddot.png\" alt=\"Placeholder 2\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_ADC.png\" alt=\"Placeholder 3\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis-Deutschland.png\" alt=\"Placeholder 4\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_SAP-HANA.png\" alt=\"Placeholder 5\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_UX-Design-Awards.png\" alt=\"Placeholder 6\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_A-Design-Award.png\" alt=\"Placeholder 7\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Designpreis.png\" alt=\"Placeholder 8\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Good-Design.png\" alt=\"Placeholder 9\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_LICC.png\" alt=\"Placeholder 10\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/chilli-mind.com\/wp-content\/uploads\/2025\/03\/Award_Logo_Deutscher-Digitalaward.png\" alt=\"Placeholder 11\"><\/p><\/div>\n<\/p><\/div>\n<\/div>\n<style>\n .marquee-award-container {\n overflow: hidden;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n }<\/p>\n<p> .marquee-award {\n width: 100%;\n overflow: hidden;\n position: relative;\n }<\/p>\n<p> .marquee-award-content {\n display: flex;\n gap: 20px;\n padding: 10px;\n user-select: none;\n will-change: transform;\n animation: marquee-loop 50s linear infinite;\n min-width: max-content; \/* Wichtig f\u00fcr nahtlose Animation *\/\n }<\/p>\n<p> .marquee-award-content img {\n width: 278px;\n height: auto;\n object-fit: cover;\n border-radius: 10px;\n }<\/p>\n<p> \/* Keyframes f\u00fcr nahtloses, automatisches Scrollen *\/\n @keyframes marquee-loop {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n }\n <\/style>\n<\/div>\n<h3>Work & insights<\/h3>\n<h1>We want to share<\/h1>\n<ul>\n<li>\n<\/li>\n<li>\n<\/li>\n<li>\n<\/li>\n<\/ul>\n<p><br \/>\n\\n <\/p>\n<div class=\\\"video-container\\\">\\n <svg class=\\\"play-button\\\" xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 100 100\\\">\\n <circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"red\\\"\\\/>\\n <polygon points=\\\"40,30 70,50 40,70\\\" fill=\\\"white\\\"\\\/>\\n <\\\/svg>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"video-overlay\\\">\\n <\/p>\n<div class=\\\"video-wrapper\\\">\\n <video controls playsinline>\\n \\n<source class=\\\"video-source\\\" type=\\\"video\\\/mp4\\\">\\n Dein Browser unterst\\u00fctzt kein HTML5-Video.\\n <\\\/video>\\n <span class=\\\"close-button\\\">×<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n\\n <script>\\n document.addEventListener(\\\"DOMContentLoaded\\\", function() {\\n const playButtons = document.querySelectorAll(\\\".play-button\\\"); \\\/\\\/ Alle Buttons erfassen\\n const videoOverlays = document.querySelectorAll(\\\".video-overlay\\\"); \\\/\\\/ Alle Overlays erfassen\\n\\n playButtons.forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n console.log(\\\"Play Button wurde geklickt!\\\");\\n\\n \\\/\\\/ Entsprechendes Overlay aktivieren\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.add(\\\"active\\\");\\n\\n \\\/\\\/ Richtige Videoquelle setzen\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n let videoSource = video.querySelector(\\\".video-source\\\");\\n\\n if (window.innerWidth <= 767) {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240716_MASTER_v10_Insta_Reel_web.mp4\\\";\\n } else {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240718_MASTER_v20_small.mp4\\\";\\n }\\n\\n \\\/\\\/ Video neu laden und starten\\n video.load();\\n video.currentTime = 0;\\n video.muted = false;\\n video.play();\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen des Overlays\\n document.querySelectorAll(\\\".close-button\\\").forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen durch Klick au\\u00dferhalb des Videos\\n videoOverlays.forEach((overlay, index) => {\\n overlay.addEventListener(\\\"click\\\", function(event) {\\n let videoWrapper = overlay.querySelector(\\\".video-wrapper\\\");\\n if (!videoWrapper.contains(event.target)) { \\n overlay.classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = overlay.querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n });\\n <\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}},{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\",\"divider_element\":\"div\",\"divider_style\":\"vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Ongoing\",\"text_align\":\"center\",\"title_element\":\"h1\"}}]}]}],\"name\":\"2008 \\u2013 ongoing \\\/\\\/ MOBILE\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"animation_delay\":\"80\",\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"alignment\":\"center\",\"column_gap\":\"collapse\",\"layout\":\"1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"2008\",\"text_align\":\"center\",\"title_element\":\"h1\",\"title_style\":\"h1\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\",\"divider_element\":\"hr\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"de\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <\/p>\n<style>\\n \\\/* Video-Overlay *\\\/\\n .video-overlay {\\n position: fixed;\\n top: 0;\\n left: 0;\\n width: 100vw;\\n height: 100vh;\\n background: rgba(0, 0, 0, 0.8);\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n opacity: 0;\\n visibility: hidden;\\n transition: opacity 0.3s ease, visibility 0.3s ease;\\n z-index: 9999;\\n }\\n\\n .video-overlay.active {\\n opacity: 1;\\n visibility: visible;\\n }\\n\\n .video-wrapper {\\n width: 80%;\\n max-width: 1200px;\\n position: relative;\\n border-radius: 5px;\\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\\n }\\n\\n .video-wrapper video {\\n width: 100%;\\n height: auto;\\n display: block;\\n border-radius: 5px;\\n }\\n\\n .play-button {\\n width: 120px;\\n height: 120px;\\n cursor: pointer;\\n }\\n\\n .close-button {\\n position: absolute;\\n top: 10px;\\n right: 15px;\\n background: transparent;\\n text-decoration: none;\\n font-size: 30px;\\n color: white;\\n font-weight: bold;\\n cursor: pointer;\\n }\\n\\n .video-container {\\n display: flex;\\n justify-content: center;\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n\\n \\n <\/p>\n<div class=\\\"video-container\\\">\\n <svg class=\\\"play-button\\\" xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 100 100\\\">\\n <circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"40\\\" fill=\\\"red\\\"\\\/>\\n <polygon points=\\\"40,30 70,50 40,70\\\" fill=\\\"white\\\"\\\/>\\n <\\\/svg>\\n <\\\/div>\\n\\n <\/p>\n<div class=\\\"video-overlay\\\">\\n <\/p>\n<div class=\\\"video-wrapper\\\">\\n <video controls playsinline>\\n \\n<source class=\\\"video-source\\\" type=\\\"video\\\/mp4\\\">\\n Dein Browser unterst\\u00fctzt kein HTML5-Video.\\n <\\\/video>\\n <span class=\\\"close-button\\\">×<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n\\n <script>\\n document.addEventListener(\\\"DOMContentLoaded\\\", function() {\\n const playButtons = document.querySelectorAll(\\\".play-button\\\"); \\\/\\\/ Alle Buttons erfassen\\n const videoOverlays = document.querySelectorAll(\\\".video-overlay\\\"); \\\/\\\/ Alle Overlays erfassen\\n\\n playButtons.forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n console.log(\\\"Play Button wurde geklickt!\\\");\\n\\n \\\/\\\/ Entsprechendes Overlay aktivieren\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.add(\\\"active\\\");\\n\\n \\\/\\\/ Richtige Videoquelle setzen\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n let videoSource = video.querySelector(\\\".video-source\\\");\\n\\n if (window.innerWidth <= 767) {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240716_MASTER_v10_Insta_Reel_web.mp4\\\";\\n } else {\\n videoSource.src = \\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/240718_MASTER_v20_small.mp4\\\";\\n }\\n\\n \\\/\\\/ Video neu laden und starten\\n video.load();\\n video.currentTime = 0;\\n video.muted = false;\\n video.play();\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen des Overlays\\n document.querySelectorAll(\\\".close-button\\\").forEach((button, index) => {\\n button.addEventListener(\\\"click\\\", function() {\\n if (videoOverlays[index]) {\\n videoOverlays[index].classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = videoOverlays[index].querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n\\n \\\/\\\/ Schlie\\u00dfen durch Klick au\\u00dferhalb des Videos\\n videoOverlays.forEach((overlay, index) => {\\n overlay.addEventListener(\\\"click\\\", function(event) {\\n let videoWrapper = overlay.querySelector(\\\".video-wrapper\\\");\\n if (!videoWrapper.contains(event.target)) { \\n overlay.classList.remove(\\\"active\\\");\\n\\n \\\/\\\/ Video pausieren\\n let video = overlay.querySelector(\\\"video\\\");\\n if (video) {\\n video.pause();\\n }\\n }\\n });\\n });\\n });\\n <\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"divider\",\"props\":{\"css\":\".el-element {\\n border-top: 3px solid #485CC7;\\n}\\n\\n.el-element::after {\\n content: \\\"\\\";\\n position: absolute;\\n right: -1%;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 20px; \\\/* Adjust arrow size *\\\/\\n height: 25px;\\n background: url('data:image\\\/svg+xml;utf8,<svg xmlns=\\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"%23485CC7\\\" stroke-width=\\\"4\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><polyline points=\\\"6 4 18 12 6 20\\\"\\\/><\\\/svg>') no-repeat center;\\n background-size: contain;\\n}\",\"divider_element\":\"div\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-5\",\"width_small\":\"1-3\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Ongoing\",\"text_align\":\"center\",\"title_element\":\"h1\"}}]}]}],\"name\":\"2008 \\u2013 ongoing \\\/\\\/ DESKTOP\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-hidden@m\",\"image_position\":\"center-center\",\"padding\":\"large\",\"padding_remove_horizontal\":true,\"padding_remove_top\":false,\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin\":\"default\",\"visibility\":\"hidden-m\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Packaging\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Interaction Design\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Professional Concept\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Green Product\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Brand & Communication Design\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"margin\":\"large\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"row_gap\":\"collapse\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"divider\",\"props\":{\"divider_element\":\"hr\",\"margin\":\"remove-vertical\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Category\",\"margin\":\"small\",\"margin_remove_bottom\":false,\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"text-meta\"},\"name\":\"Category\"},{\"type\":\"headline\",\"props\":{\"content\":\"Web & HMI\",\"margin\":\"remove-vertical\",\"title_element\":\"h1\",\"title_style\":\"h2\"}}]}]}],\"name\":\"Kategorien Zeile Unten \\\/\\\/ Mobile\"}]}],\"props\":{\"css\":\"hr {\\n overflow: visible;\\n text-align: inherit;\\n margin: 0 0 20px 0;\\n border: 0;\\n border-top: 2px solid #485CC7;\\n}\\n.uk-h2 {\\n color: #485CC7;\\n}\"}}],\"name\":\"Kategorien Zeile Unten \\\/\\\/ Mobile\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"animation_delay\":\"80\",\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"padding\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"xlarge\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!DOCTYPE html>\\n<html lang=\\\"de\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Flexibles Layout<\\\/title>\\n <\/p>\n<style>\\n .custom-row {\\n display: grid;\\n grid-template-columns: repeat(6, 216px);\\n justify-content: space-between;\\n gap: 2vw; \\\/* Flexibler Abstand abh\\u00e4ngig von der Bildschirmbreite *\\\/\\n }\\n\\n .custom-column {\\n width: 216px;\\n height: 264px;\\n padding-left: 16px;\\n padding-top: 0px;\\n text-align: left;\\n border-left: 3px solid rgba(72, 92, 199, 1); \\\/* Linker Streifen *\\\/\\n display: flex;\\n flex-direction: column;\\n }\\n\\n .category {\\n font-size: 14px;\\n color: black;\\n display: block;\\n }\\n\\n h5 {\\n font-size: 24px;\\n color: rgba(72, 92, 199, 1); \\\/* chilli blue *\\\/\\n margin: 10px 0 0 0;\\n }\\n\\n @media (max-width: 1300px) {\\n .custom-row {\\n grid-template-columns: repeat(3, 216px);\\n }\\n .custom-column {\\n margin-bottom: 200px;\\n }\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <\/p>\n<div class=\\\"custom-row\\\">\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Packaging<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Interaction Design<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Professional Concept<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Green Product<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Brand & Communication<br \/>Design<\\\/h5>\\n <\\\/div>\\n <\/p>\n<div class=\\\"custom-column\\\">\\n <span class=\\\"category\\\">Category<\\\/span>\\n <\/p>\n<h5>Web & HMI<\\\/h5>\\n <\\\/div>\\n <\\\/div>\\n<\\\/body>\\n<\\\/html>\\n\"}}]}],\"props\":{\"css\":\".custom-column:nth-child(even) {\\n transform:translatey(-100px)\\n}\"}}],\"name\":\"Kategorien Zeile unten \\\/\\\/ Desktop\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"marquee-award-container\\\">\\n <\/p>\n<div class=\\\"marquee-award\\\">\\n <\/p>\n<div class=\\\"marquee-award-content\\\">\\n \\n \\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_iF.png\\\" alt=\\\"Placeholder 1\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_reddot.png\\\" alt=\\\"Placeholder 2\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_ADC.png\\\" alt=\\\"Placeholder 3\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis-Deutschland.png\\\" alt=\\\"Placeholder 4\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_SAP-HANA.png\\\" alt=\\\"Placeholder 5\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_UX-Design-Awards.png\\\" alt=\\\"Placeholder 6\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_A-Design-Award.png\\\" alt=\\\"Placeholder 7\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis.png\\\" alt=\\\"Placeholder 8\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Good-Design.png\\\" alt=\\\"Placeholder 9\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_LICC.png\\\" alt=\\\"Placeholder 10\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Deutscher-Digitalaward.png\\\" alt=\\\"Placeholder 11\\\"> \\n \\n \\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_iF.png\\\" alt=\\\"Placeholder 1\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_reddot.png\\\" alt=\\\"Placeholder 2\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_ADC.png\\\" alt=\\\"Placeholder 3\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis-Deutschland.png\\\" alt=\\\"Placeholder 4\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_SAP-HANA.png\\\" alt=\\\"Placeholder 5\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_UX-Design-Awards.png\\\" alt=\\\"Placeholder 6\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_A-Design-Award.png\\\" alt=\\\"Placeholder 7\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Designpreis.png\\\" alt=\\\"Placeholder 8\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Good-Design.png\\\" alt=\\\"Placeholder 9\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_LICC.png\\\" alt=\\\"Placeholder 10\\\">\\n <img src=\\\"https:\\\/\\\/chilli-mind.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Award_Logo_Deutscher-Digitalaward.png\\\" alt=\\\"Placeholder 11\\\">\\n\\n <\\\/div>\\n <\\\/div>\\n<\\\/div>\\n\\n\\n<\/p>\n<style>\\n .marquee-award-container {\\n overflow: hidden;\\n width: 100vw;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n }\\n \\n .marquee-award {\\n width: 100%;\\n overflow: hidden;\\n position: relative;\\n }\\n \\n .marquee-award-content {\\n display: flex;\\n gap: 20px;\\n padding: 10px;\\n user-select: none;\\n will-change: transform;\\n animation: marquee-loop 50s linear infinite;\\n min-width: max-content; \\\/* Wichtig f\\u00fcr nahtlose Animation *\\\/\\n }\\n \\n .marquee-award-content img {\\n width: 278px;\\n height: auto;\\n object-fit: cover;\\n border-radius: 10px;\\n }\\n \\n \\\/* Keyframes f\\u00fcr nahtloses, automatisches Scrollen *\\\/\\n @keyframes marquee-loop {\\n from {\\n transform: translateX(0);\\n }\\n to {\\n transform: translateX(-50%);\\n }\\n }\\n <\\\/style>\\n \"},\"name\":\"Einfaches_Marquee\"}]}]}],\"name\":\"Awards_Marquee\"},{\"type\":\"section\",\"props\":{\"animation\":\"slide-left-medium\",\"animation_delay\":\"80\",\"image_position\":\"center-center\",\"style\":\"secondary\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"xlarge\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Work & insights\",\"margin_remove_bottom\":true,\"title_element\":\"h3\",\"title_style\":\"h3\"},\"name\":\"eyebrow\"},{\"type\":\"headline\",\"props\":{\"content\":\"We want to share\",\"margin\":\"small\",\"margin_remove_top\":false,\"title_element\":\"h1\",\"title_style\":\"h1\"}},{\"type\":\"grid\",\"props\":{\"content_column_breakpoint\":\"m\",\"filter_align\":\"left\",\"filter_all\":true,\"filter_grid_breakpoint\":\"m\",\"filter_grid_width\":\"auto\",\"filter_position\":\"top\",\"filter_style\":\"tab\",\"grid_default\":\"1\",\"grid_medium\":\"3\",\"icon_width\":80,\"image_align\":\"top\",\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_svg_color\":\"emphasis\",\"image_transition\":\"scale-up\",\"item_animation\":true,\"lightbox_bg_close\":true,\"link_style\":\"default\",\"link_text\":\"\",\"margin\":\"default\",\"meta_align\":\"below-title\",\"meta_element\":\"div\",\"meta_margin\":\"small\",\"meta_style\":\"\",\"panel_link\":true,\"show_content\":true,\"show_hover_image\":true,\"show_hover_video\":true,\"show_image\":true,\"show_link\":true,\"show_meta\":true,\"show_title\":true,\"show_video\":true,\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h4\"},\"children\":[{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":5426}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}},{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":5422}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}},{\"type\":\"grid_item\",\"source\":{\"query\":{\"name\":\"referenzens.customReferenzen\",\"arguments\":{\"terms\":[],\"referenzkategorie_operator\":\"IN\",\"users\":[],\"users_operator\":\"IN\",\"offset\":0,\"order\":\"date\",\"order_direction\":\"DESC\",\"id\":2661}},\"props\":{\"title\":{\"name\":\"field.client\"},\"image\":{\"name\":\"featuredImage.url\"},\"meta\":{\"name\":\"field.case_titel\"},\"link\":{\"name\":\"link\"}}}}]}]}]}],\"name\":\"Work & insights We Want to Share\"}],\"version\":\"4.5.19\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>60+ Awards in the categories Category Graphic Design Category Innovation Category User Interface Category Service Design Category Architecture Category User Experience Flexibles Layout Category Graphic Design Category Innovation Category User Interface Category Service Design Category Architecture Category User Experience 2008 Dein Browser unterst\u00fctzt kein HTML5-Video. × Ongoing 2008 Dein Browser unterst\u00fctzt kein HTML5-Video. × Ongoing […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7593","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/comments?post=7593"}],"version-history":[{"count":238,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593\/revisions"}],"predecessor-version":[{"id":13545,"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/pages\/7593\/revisions\/13545"}],"wp:attachment":[{"href":"https:\/\/chilli-mind.com\/en\/wp-json\/wp\/v2\/media?parent=7593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
60+ Awards in the categories<\/p>\n<\/p>\n<\/h1>\n
\n

Category<\/h1>\n

Graphic Design<\/h1>\n
\n

Category<\/h1>\n

Innovation<\/h1>\n
\n

Category<\/h1>\n

User Interface<\/h1>\n
\n

Category<\/h1>\n

Service Design<\/h1>\n
\n

Category<\/h1>\n

Architecture<\/h1>\n
\n

Category<\/h1>\n

\n60+ Awards in the categories<\/p>\n<\/p>\n<\/h1>\n\n

Category<\/h1>\n

Graphic Design<\/h1>\n\n

Category<\/h1>\n

Innovation<\/h1>\n\n

Category<\/h1>\n

User Interface<\/h1>\n\n

Category<\/h1>\n

Service Design<\/h1>\n\n

Category<\/h1>\n

Architecture<\/h1>\n\n

Category<\/h1>\n

\n
60+ Awards in the categories<\/p>\n<\/p>\n<\/h1>\n
\n

Graphic Design<\/h1>\n
\n

Innovation<\/h1>\n
\n

User Interface<\/h1>\n
\n

Service Design<\/h1>\n
\n

Architecture<\/h1>\n
\n