1<!DOCTYPE html><html class="no-js" lang="de"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width"><meta name="web_author" content="Graphek GmbH, [email protected]" /><link rel="profile" href="http://gmpg.org/xfn/11" /><link rel="pingback" href="https://graphek.de/xmlrpc.php" /><link rel="icon" href="https://graphek.de/wp-content/themes/graphek4/images/favicon.ico?t=2"><link rel="icon" href="https://graphek.de/wp-content/themes/graphek4/images/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="https://graphek.de/wp-content/themes/graphek4/images/apple-touch-icon.png"><meta name="theme-color" content="#000000"><link rel="dns-prefetch" href="https://sst.graphek.de"><title>WebApp mit Designsystem und Dark Mode. - Referenz - Graphek GmbH</title><meta name="description" content="WebApp mit Dark Mode â funktional, konsistent und zukunftssicher."/><meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/><link rel="canonical" href="https://graphek.de/referenzen/ui-ux-dashboard/" /><meta property="og:locale" content="de_DE" /><meta property="og:type" content="article" /><meta property="og:title" content="Klick. Boom. Ãberblick. Dashboards, die denken, bevor du klickst." /><meta property="og:description" content="Ein skalierbares Designsystem mit Dark Mode â funktional, konsistent und zukunftssicher." /><meta property="og:url" content="https://graphek.de/referenzen/ui-ux-dashboard/" /><meta property="og:site_name" content="Graphek GmbH |Â Webdesign & Entwicklung aus Bremen" /><meta property="og:updated_time" content="2026-03-25T14:18:26+01:00" /><meta property="og:image" content="https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp" /><meta property="og:image:secure_url" content="https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="630" /><meta property="og:image:alt" content="skalierbares Designsystem" /><meta property="og:image:type" content="image/webp" /><meta property="article:published_time" content="2025-03-28T18:38:35+01:00" /><meta property="article:modified_time" content="2026-03-25T14:18:26+01:00" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Klick. Boom. Ãberblick. Dashboards, die denken, bevor du klickst." /><meta name="twitter:description" content="Ein skalierbares Designsystem mit Dark Mode â funktional, konsistent und zukunftssicher." /><meta name="twitter:image" content="https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp" />
1<script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":"Place","@id":"https://graphek.de/#place","geo":{"@type":"GeoCoordinates","latitude":"53.07517314236527","longitude":"8.768470197236727"},"hasMap":"https://www.google.com/maps/search/?api=1&query=53.07517314236527,8.768470197236727","address":{"@type":"PostalAddress","streetAddress":"Am Tabakquartier 50 Loft 6","addressLocality":"Bremen","addressRegion":"Bremen","postalCode":"28197","addressCountry":"Germany"}},{"@type":["LocalBusiness","Organization"],"@id":"https://graphek.de/#organization","name":"Graphek GmbH","url":"https://graphek.de","sameAs":["https://de.linkedin.com/company/graphek-digitalmanufaktur","https://www.instagram.com/digitalmanufaktur/","https://www.google.com/maps/place/?q=place_id:ChIJQT9e4bIpsUcRCNSdyVeKpKM"],"email":"[email protected]","address":{"@type":"PostalAddress","streetAddress":"Am Tabakquartier 50 Loft 6","addressLocality":"Bremen","addressRegion":"Bremen","postalCode":"28197","addressCountry":"Germany"},"logo":{"@type":"ImageObject","@id":"https://graphek.de/#logo","url":"https://graphek.de/wp-content/uploads/2023/10/logo.png","contentUrl":"https://graphek.de/wp-content/uploads/2023/10/logo.png","caption":"Graphek GmbH |\u00a0Webdesign & Entwicklung aus Bremen","inLanguage":"de","width":"1757","height":"1729"},"priceRange":"$$","openingHours":["Mo,Tu,We,Th,Fr 09:00-17:00"],"description":"Graphek ist eine Werbeagentur aus Bremen, spezialisiert auf Webdesign, UI/UX Design und WordPress-Entwicklung. Seit 2013 entwickeln wir individuelle Websites, Online-Shops und Corporate Designs f\u00fcr Unternehmen aller Gr\u00f6\u00dfen \u2014 von der Konzeption bis zum Launch. Unser Fokus liegt auf ma\u00dfgeschneiderten L\u00f6sungen statt Baukasten-Templates.","foundingDate":"2013","location":{"@id":"https://graphek.de/#place"},"image":{"@type":"ImageObject","url":"https://graphek.de/wp-content/uploads/2026/03/DSCF2092-scaled.webp","width":"2560","height":"1707"},"telephone":"+4942169698983"},{"@type":"WebSite","@id":"https://graphek.de/#website","url":"https://graphek.de","name":"Graphek GmbH |\u00a0Webdesign & Entwicklung aus Bremen","alternateName":"Graphek GmbH","publisher":{"@id":"https://graphek.de/#organization"},"inLanguage":"de"},{"@type":"ImageObject","@id":"https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp","url":"https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp","width":"1200","height":"630","caption":"skalierbares Designsystem","inLanguage":"de"},{"@type":"BreadcrumbList","@id":"https://graphek.de/referenzen/ui-ux-dashboard/#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://graphek.de","name":"Startseite"}},{"@type":"ListItem","position":"2","item":{"@id":"https://graphek.de/referenzen/","name":"Projekt"}},{"@type":"ListItem","position":"3","item":{"@id":"https://graphek.de/referenzen/ui-ux-dashboard/","name":"WebApp mit Designsystem und Dark Mode."}}]},{"@type":"WebPage","@id":"https://graphek.de/referenzen/ui-ux-dashboard/#webpage","url":"https://graphek.de/referenzen/ui-ux-dashboard/","name":"WebApp mit Designsystem und Dark Mode. - Referenz - Graphek GmbH","datePublished":"2025-03-28T18:38:35+01:00","dateModified":"2026-03-25T14:18:26+01:00","isPartOf":{"@id":"https://graphek.de/#website"},"primaryImageOfPage":{"@id":"https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp"},"inLanguage":"de","breadcrumb":{"@id":"https://graphek.de/referenzen/ui-ux-dashboard/#breadcrumb"}},{"@type":"Person","@id":"https://graphek.de/referenzen/ui-ux-dashboard/#author","name":"graphek","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/599a59bc23124d11bb63c3f4c9965e7ab67e71b9e0ae4ec9f5fba14379e0fb8e?s=96&d=mm&r=g","url":"https://secure.gravatar.com/avatar/599a59bc23124d11bb63c3f4c9965e7ab67e71b9e0ae4ec9f5fba14379e0fb8e?s=96&d=mm&r=g","caption":"graphek","inLanguage":"de"},"sameAs":["https://graphek.de"],"worksFor":{"@id":"https://graphek.de/#organization"}},{"@type":"Article","headline":"WebApp mit Designsystem und Dark Mode. - Referenz - Graphek GmbH","keywords":"Designsystem","datePublished":"2025-03-28T18:38:35+01:00","dateModified":"2026-03-25T14:18:26+01:00","author":{"@id":"https://graphek.de/referenzen/ui-ux-dashboard/#author","name":"graphek"},"publisher":{"@id":"https://graphek.de/#organization"},"description":"WebApp mit Dark Mode \u2013 funktional, konsistent und zukunftssicher.","name":"WebApp mit Designsystem und Dark Mode. - Referenz - Graphek GmbH","@id":"https://graphek.de/referenzen/ui-ux-dashboard/#richSnippet","isPartOf":{"@id":"https://graphek.de/referenzen/ui-ux-dashboard/#webpage"},"image":{"@id":"https://graphek.de/wp-content/uploads/2025/03/Frame-427319311.webp"},"inLanguage":"de","mainEntityOfPage":{"@id":"https://graphek.de/referenzen/ui-ux-dashboard/#webpage"}}]}</script>
1 <link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/fonts/Outfit-Regular.woff2' as='font' type='font/woff2' crossorigin /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/fonts/Outfit-SemiBold.woff2' as='font' type='font/woff2' crossorigin /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/fonts/Outfit-Bold.woff2' as='font' type='font/woff2' crossorigin /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/hero_projekt.min.css?t=1779794399' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/projekt_intro.min.css?t=1779794400' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/fullwidth_media.min.css?t=1779794399' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/gallery_pinned.min.css?t=1779794399' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/steps_columns.min.css?t=1779794400' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/mockup_scale.min.css?t=1779794400' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/text_cta.min.css?t=1779794400' as='style' /><link rel='preload' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/textblock.min.css?t=1779794401' as='style' /><link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://graphek.de/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fgraphek.de%2Freferenzen%2Fui-ux-dashboard%2F" /><link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://graphek.de/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fgraphek.de%2Freferenzen%2Fui-ux-dashboard%2F&format=xml" /><style id="wp-img-auto-sizes-contain-inline-css">img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} 2/*# sourceURL=wp-img-auto-sizes-contain-inline-css */</style><style id="global-styles-inline-css">:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
2--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
2.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} 3/*# sourceURL=global-styles-inline-css */</style><link rel='stylesheet' id='plugins-css' href='https://graphek.de/wp-content/themes/graphek4/assets/css/_plugins.css?ver=1789037090' media='all' /><link rel='stylesheet' id='style-css' href='https://graphek.de/wp-content/themes/graphek4/style.css?ver=1789037090' media='all' />
3<script id="graphek-monitor-browser-errors-js-before">window.GraphekMonitorErrors={"endpoint":"https:\/\/graphek.de\/wp-json\/graphek-monitor\/v1\/js-errors","nonce":"18ce3311b9"}; 4//# sourceURL=graphek-monitor-browser-errors-js-before</script>
4
4<script id="graphek-monitor-browser-errors-js" src="https://graphek.de/wp-content/plugins/graphek-monitor/assets/browser-errors.js?ver=0.7.4"></script>
4 <link rel="https://api.w.org/" href="https://graphek.de/wp-json/" /><link rel='shortlink' href='https://graphek.de/?p=5608' />
4<script>theme_dir = "https://graphek.de/wp-content/themes/graphek4"; 5 function isLoaded(classname, method) { 6 if ( typeof classname == 'object' ) { 7 var loaded = true; 8 classname.forEach(function (item) { 9 if (typeof window[item] === 'undefined') loaded = false; 10 }); 11 if (loaded) return method(); 12 } 13 if (typeof window[classname] !== 'undefined') return method(); 14 setTimeout(function () { isLoaded(classname, method) }, 150); 15 }</script>
15
15<script>// GTAG Stub 16 window.dataLayer = window.dataLayer || []; 17 function gtag(){ dataLayer.push(arguments); } 18 19 gtag('consent', 'default', { 20 analytics_storage: 'denied', 21 ad_storage: 'denied', 22 ad_user_data: 'denied', 23 ad_personalization: 'denied' 24 });</script>
24 </head><body class="wp-singular projekt-template-default single single-projekt postid-5608 wp-theme-graphek4 initNav"><div id="custom_cursor"></div><div id="pagewrapper"><div id="nav_toggle_scrolled" class="is-magnetic"></div><header id="main_header" data-theme="dark"><div class="wrap"><a class="logo" href="https://graphek.de"> 25<img fetchpriority="high" class="light desktop" width="294" height="80" src="https://graphek.de/wp-content/themes/graphek4/images/logo.svg" alt="Graphek Logo" /> 26<img fetchpriority="high" class="dark desktop" width="294" height="80" src="https://graphek.de/wp-content/themes/graphek4/images/logo_white.svg" alt="Graphek Logo White" /> 27</a><nav id="nav_main"><div class="menu-header-container"><ul id="menu-header" class="menu"><li id="menu-item-1195" class="hide_desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1195"><a href="https://graphek.de/">Moin</a></li><li id="menu-item-649" class="has_bubble menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a href="https://graphek.de/referenzen-werbeagentur/">Referenzen</a></li><li id="menu-item-651" class="mega_trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-651"><a href="https://graphek.de/expertise/">Expertise</a><ul class="sub-menu"><li id="menu-item-7181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7181"><a href="https://graphek.de/expertise/ui-ux-design-agentur/">UI / UX Design</a></li><li id="menu-item-7177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7177"><a href="https://graphek.de/expertise/webdesign-agentur-bremen/">Webdesign</a></li><li id="menu-item-7178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7178"><a href="https://graphek.de/expertise/corporate-design-agentur/">Corporate Design</a></li><li id="menu-item-7179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7179"><a href="https://graphek.de/expertise/wordpress-agentur-bremen/">WordPress</a></li><li id="menu-item-7175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7175"><a href="https://graphek.de/expertise/wordpress-wartungsvertrag/">WordPress Wartung</a></li><li id="menu-item-7180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7180"><a href="https://graphek.de/expertise/webentwicklung-agentur/">Webentwicklung</a></li><li id="menu-item-7176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7176"><a href="https://graphek.de/expertise/onlineshop-agentur/">E-Commerce</a></li></ul></li><li id="menu-item-656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-656"><a href="https://graphek.de/digitalagentur-bremen/">Agentur</a></li><li id="menu-item-6862" class="hide_on_desktop_nav menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-6862"><a href="https://graphek.de/blog/">Blog</a></li><li id="menu-item-969" class="header_cta hide_mobile menu-item menu-item-type-post_type menu-item-object-page menu-item-969"><a href="https://graphek.de/kontakt/">Kontakt</a></li></ul></div></nav></div></header><header id="mobile_header" data-theme="dark"><div class="wrap"> 28<a class="logo" href="https://graphek.de"> 29<img fetchpriority="high" class="logo light" width="523" height="794" src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_black.svg" alt="Graphek Logo Icon Black" /> 30<img fetchpriority="high" class="logo dark" width="523" height="794" src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_white.svg" alt="Graphek Logo Icon White" /> 31</a><div class="mobile_header_right"> 32<img fetchpriority="high" width="227" height="72" class="award" src="https://graphek.de/wp-content/themes/graphek4/images/GWA_Siegel3_Weiss.svg" alt="German Web Awards Winner 2024" /></div></div></header><main><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/hero_projekt.min.css?t=1779794399' type='text/css' media='all' /><section data-theme="dark" class="modul hero_projekt " id="mod_6ac11749f3689" 33data-anchor="" 34><div class="background_wrapper"> 35<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-27-2500x1875.jpg.webp" class="attachment-large size-large" alt="" style="object-position: 50% 50%;" decoding="async" fetchpriority="high" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-27-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-27-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-27-500x37
355.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-27-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /></div><div class="wrap"></div>
35<script>(() => { 36 37})();</script>
37 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/projekt_intro.min.css?t=1779794400' type='text/css' media='all' /><section data-theme="dark" class="modul projekt_intro " id="mod_6ac11749f4076" 38data-anchor="" 39><div class="wrap"><div class="facts"><div class="item"><div class="title">Jahr</div><div class="value">2025</div></div><div class="item"><div class="title">Kunde</div><div class="value">thyssenkrupp</div></div></div><div class="text"><h1>WebApp mit Designsystem und Dark Mode â funktional, konsistent und zukunftssicher.</h1></div><div class="project_tags tag_wrapper "> 40<a class="tag" href="https://graphek.de/referenzen-werbeagentur/?tag=din-en-iso-9241-210"> 41DIN EN ISO 9241-210 </a> 42<a class="tag" href="https://graphek.de/referenzen-werbeagentur/?tag=user-centered-design"> 43User-Centered Design </a> 44<a class="tag" href="https://graphek.de/referenzen-werbeagentur/?tag=figma"> 45Figma </a> 46<a class="tag" href="https://graphek.de/referenzen/designsystem/"> 47Designsystem </a> 48<a class="tag" href="https://graphek.de/referenzen-werbeagentur/?tag=prototyping"> 49Prototyping </a> 50<a class="tag" href="https://graphek.de/expertise/ui-ux-design-agentur/"> 51UI/UX </a></div></div>
51<script>(() => { 52 53})();</script>
53 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/fullwidth_media.min.css?t=1779794399' type='text/css' media='all' /><section data-theme="dark" class="modul fullwidth_media padding_top_25 padding_bottom_25 " id="mod_6ac1174a00875" 54data-anchor="" 55><style>#mod_6ac1174a00875:after { 56 background: #ffffff; 57 }</style><style>#mod_6ac1174a00875 .wrap { 58 max-width: 1300px; 59 }</style><div class="wrap"><div class="img_wrap"><video 60class="img check_mobile" 61autoplay 62muted 63loop playsinline 64src="https://graphek.de/wp-content/uploads/2025/03/Screen-2025-03-31-1041271.mp4" 65data-src-mobile="" 66type="video/mp4" 67></video></div></div>
67<script>(() => { 68 69 const muteButton = document.querySelector('#mod_6ac1174a00875 .video_sound'); 70 71 if ( muteButton ) 72 { 73 const video = document.querySelector('#mod_6ac1174a00875 video'); 74 75 video.addEventListener('play', function (e) { 76 muteButton.style.display = 'block'; 77 }); 78 79 muteButton.addEventListener('click', function (e) { 80 // Get Video Selector from data-attribute 81 if (video.muted) { 82 video.muted = false; 83 muteButton.classList.remove('muted'); 84 } else { 85 video.muted = true; 86 muteButton.classList.add('muted'); 87 } 88 }); 89 90 // Mute Video when scrolled past it 91 const videoOffset = video.offsetTop; 92 const videoHeight = video.offsetHeight; 93 let muteTicking = false 94 95 window.addEventListener('scroll', function () { 96 if (muteTicking) return 97 muteTicking = true 98 requestAnimationFrame(function () { 99 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 100 video.muted = true; 101 muteButton.classList.add('muted'); 102 } 103 muteTicking = false 104 }) 105 }, { passive: true }); 106 } 107 108})();</script>
108 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/gallery_pinned.min.css?t=1779794399' type='text/css' media='all' /><section data-theme="light" class="modul gallery_pinned padding_top_50 padding_bottom_25 " id="mod_6ac1174a00b7a" 109data-anchor="" 110><style>#mod_6ac1174a00b7a {}</style><style></style><div class="wrap"><div class="gallery"> 111<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-1-2500x1875.jpg.webp" class="attachment-large size-large" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-1-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-1-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-1-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-1-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100v
111w, 2500px" /> 112<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2-2500x1875.jpg.webp" class="attachment-large size-large" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> 113<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-21-2500x1875.jpg.webp" class="attachment-large size-large" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-21-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-21-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-21-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-21-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100v
113w, 2500px" /></div></div>
113<script>(() => { 114 document.addEventListener('DOMContentLoaded', function(){ 115 116 var gallery = document.querySelector('#mod_6ac1174a00b7a .gallery') 117 118 const modul = document.querySelector('#mod_6ac1174a00b7a'); 119 const bgColor = getComputedStyle(modul).getPropertyValue('--color_bg_main'); // #999999 120 121 var tl = gsap.timeline({ 122 scrollTrigger: { 123 trigger: '#mod_6ac1174a00b7a', 124 // pinnedContainer: '#mod_6ac1174a00b7a', 125 start: 'center center', 126 // end: '+=120%', 127 end: () => Math.abs(ggWidth()) + 'px', 128 scrub: true, 129 pin: true, 130 invalidateOnRefresh: true, 131 ignoreMobileResize: true, 132 limitCallbacks: true, 133 invalidateOnRefresh: true, 134 // pinSpacing: false, 135 // pinType: 'transform', 136 // markers: true, 137 // onEnter: () => , 138 } 139 }) 140 141 tl.scrollTrigger.spacer.style.backgroundColor = bgColor 142 143 ScrollTrigger.config({ ignoreMobileResize: true }); 144 145 tl.fromTo(gallery, { 146 // scale: .85, 147 left: 0, 148 translateX: '0', 149 }, 150 { 151 // scale: 1, 152 translateX: () => ggWidth() + 'px', 153 duration: 1 154 }, 'pinnedGallery') 155 156 function ggWidth() { 157 var wrap = document.querySelector('#mod_6ac1174a00b7a .wrap'); 158 var galleryWidth = document.querySelector('#mod_6ac1174a00b7a .gallery').offsetWidth; 159 var wrapPadding = window.getComputedStyle(wrap, null).getPropertyValue('padding-left'); 160 var result = galleryWidth - wrap.scrollWidth + parseInt(wrapPadding); 161 if ( (result + parseInt(wrapPadding)) > -40 ) return 0; // Zu geringe Offsets nicht animieren 162 return result; 163 } 164 165 }) 166 })();</script>
166 </section><section data-theme="light" class="modul fullwidth_media padding_bottom_0 " id="mod_6ac1174a021ac" 167data-anchor="" 168><style>#mod_6ac1174a021ac .wrap { 169 max-width: 1300px; 170 }</style><div class="img_wrap"><picture style="aspect-ratio: 2500/1667;"> 171<img width="2500" height="1667" src="https://graphek.de/wp-content/uploads/2025/03/mockup-2500x1667.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/mockup-2500x1667.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/mockup-900x600.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/mockup-500x333.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/mockup-1400x933.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div>
171<script>(() => { 172 173 const muteButton = document.querySelector('#mod_6ac1174a021ac .video_sound'); 174 175 if ( muteButton ) 176 { 177 const video = document.querySelector('#mod_6ac1174a021ac video'); 178 179 video.addEventListener('play', function (e) { 180 muteButton.style.display = 'block'; 181 }); 182 183 muteButton.addEventListener('click', function (e) { 184 // Get Video Selector from data-attribute 185 if (video.muted) { 186 video.muted = false; 187 muteButton.classList.remove('muted'); 188 } else { 189 video.muted = true; 190 muteButton.classList.add('muted'); 191 } 192 }); 193 194 // Mute Video when scrolled past it 195 const videoOffset = video.offsetTop; 196 const videoHeight = video.offsetHeight; 197 let muteTicking = false 198 199 window.addEventListener('scroll', function () { 200 if (muteTicking) return 201 muteTicking = true 202 requestAnimationFrame(function () { 203 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 204 video.muted = true; 205 muteButton.classList.add('muted'); 206 } 207 muteTicking = false 208 }) 209 }, { passive: true }); 210 } 211 212})();</script>
212 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/steps_columns.min.css?t=1779794400' type='text/css' media='all' /><section data-theme="dark" class="modul steps_columns padding_top_200 " id="mod_6ac1174a02d3a" 213data-anchor="" 214><div class="wrap"><div class="step"><div class="title"><h3 class="h2"> 215<sup>01</sup> 216Der Kunde</h3></div><div class="text"><p>thyssenkrupp ist ein weltweit agierendes Industrieunternehmen mit einem breiten Portfolio in den Bereichen Stahlverarbeitung, Anlagenbau und innovativer Industriekonzepte. Der Fokus liegt auf technologischen Lösungen für die Zukunft der Industrie.</p></div></div><div class="step"><div class="title"><h3 class="h2"> 217<sup>02</sup> 218Die Aufgabe</h3></div><div class="text"><p>Ziel war die Entwicklung eines skalierbaren und konsistenten Designsystems, das unternehmensweit für digitale Produkte eingesetzt werden kann. Besonderes Augenmerk lag auf der Implementierung eines Dark Modes sowie der Nutzung eines systematischen Token-Ansatzes in Figma. Das System sollte sowohl die visuelle Kohärenz stärken als auch die Effizienz in der Produktentwicklung erhöhen.</p><div class="tag_wrapper"> 219<a class="tag" href="https://graphek.de/expertise/ui-ux-design-agentur/" target=""> 220UI/UX Design </a> 221<a class="tag" href="https://graphek.de/referenzen/designsystem/" target=""> 222Design Systeme </a></div></div></div><div class="step"><div class="title"><h3 class="h2"> 223<sup>03</sup> 224Die Lösung</h3></div><div class="text"><p>In enger Abstimmung mit dem Team von thyssenkrupp wurde ein umfassendes Designsystem entwickelt, das alle UI-Komponenten, Typografie-, Farb- und Interaktionsrichtlinien abdeckt â sowohl für den Light- als auch für den Dark Mode. Die Verwendung eines Token-basierten Ansatzes ermöglichte eine flexible und wartbare Skalierung des Designs. Das Ergebnis ist eine moderne, modulare Designgrundlage, die zukünftige digitale Lösungen von thyssenkrupp visuell und funktional vereint.</p><div class="button_wrapper"> 225<a class="button outline" href="https://graphek.de/kontakt/" target=""> 226Jetzt anfragen </a></div></div></div></div></section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/mockup_scale.min.css?t=1779794400' type='text/css' media='all' /><section data-theme="dark" class="modul mockup_scale " id="mod_6ac1174a0310b" 227data-anchor="" 228><picture class="mockup"> 229<img 230width="2560" 231height="1280" 232src="https://graphek.de/wp-content/uploads/2025/03/Zoombildkundeblack-scaled.webp" 233srcset="https://graphek.de/wp-content/uploads/2025/03/Zoombildkundeblack-scaled.webp 1400w, https://graphek.de/wp-content/uploads/2025/03/Zoombildkundeblack-2500x1250.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/Zoombildkundeblack-scaled.webp 2560w, " 234sizes="200vw" 235alt="" 236/> 237</picture><div class="text"><p class="h1" style="text-align: center;">So wird aus Daten Design!</p></div>
237<script>(() => { 238 239 document.addEventListener('DOMContentLoaded', function(){ 240 241 var mockup = document.querySelector('#mod_6ac1174a0310b .mockup') 242 var text = document.querySelector('#mod_6ac1174a0310b .text') 243 244 ScrollTrigger.config({ ignoreMobileResize: true }); 245 246 var tl = gsap.timeline({ 247 scrollTrigger: { 248 trigger: '#mod_6ac1174a0310b', 249 start: 'center center', 250 end: '+=160%', 251 scrub: 0.5, 252 pin: true, 253 pinSpacing: true, 254 pinType: ('ontouchstart' in window) ? 'fixed' : 'transform', 255 } 256 }) 257 258 tl.fromTo(mockup, { 259 scale: 5, 260 }, 261 { 262 scale: 1, 263 duration: 1 264 }, 'mocky') 265 266 tl.fromTo(text, { 267 scale: 1, 268 }, 269 { 270 scale: .2, 271 duration: 1 272 }, 'mocky') 273 274 275 }) 276})();</script>
276 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/text_cta.min.css?t=1779794400' type='text/css' media='all' /><section data-theme="light" class="modul text_cta padding_top_200 padding_bottom_25 " id="mod_6ac1174a03653" 277data-anchor="" 278><div class="wrap"><div class="logo"><svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg"> 279<path d="M24.5028 13.1692C24.5639 11.0513 24.0598 9.0476 23.1357 7.28774L23.2655 2.73952L18.8127 2.61762V2.67095C17.0636 1.58913 15.032 0.933946 12.8475 0.865379C6.23321 0.682537 0.703438 5.90118 0.512493 12.4911C0.329185 19.0887 5.55344 24.6045 12.1678 24.7873C18.7821 24.9702 24.3119 19.7592 24.4952 13.1616L24.5028 13.1692ZM5.56872 12.6359C5.67565 8.81905 8.87589 5.80214 12.7101 5.9088C16.5366 6.01546 19.5612 9.20759 19.4542 13.0321C19.3473 16.8489 16.1471 19.8658 12.3129 19.7592C8.48636 19.6525 5.46179 16.4604 5.56872 12.6359Z" fill="white"/> 280<path d="M20.6153 26.7224L6.36316 32.482C5.08001 33 4.46135 34.4628 4.98072 35.7427C5.37788 36.7179 6.31733 37.3045 7.31025 37.3045C7.6234 37.3045 7.94418 37.2435 8.2497 37.1216L22.5018 31.3621C23.785 30.844 24.4037 29.3813 23.8843 28.1014C23.3649 26.8215 21.9061 26.2044 20.6153 26.7224Z" fill="white"/> 281</svg></div><div class="text"><h3 style="text-align: center;">Klick. Boom. Ãberblick. Dashboards, die denken, bevor du klickst.</h3></div></div>
281<script defer src='https://graphek.de/wp-content/themes/graphek4/assets/js/include/splitType.min.js?t=1779794404'></script>
281
281<script>isLoaded(['SplitType', 'gsap'], () => { 282 283 gsap.registerPlugin(ScrollTrigger) 284 285 const splitTypes = document.querySelectorAll('#mod_6ac1174a03653 .text'); 286 287 splitTypes.forEach((char, i) => { 288 const text = new SplitType(char, { types: 'words' }) 289 290 let start_top = 'top 90%'; 291 let end_top = 'top 30%'; 292 293 // Get window outer widh 294 if ( window.innerWidth < 1000 ) { 295 start_top = 'top 60%'; 296 end_top = 'top 10%'; 297 } 298 299 gsap.from(text.words, { 300 scrollTrigger: { 301 trigger: char, 302 start: start_top, 303 end: end_top, 304 scrub: true, 305 }, 306 // filter: 'blur(2px)', 307 opacity: 0.1, 308 stagger: 0.1, 309 }) 310 }); 311 312});</script>
312 </section><section data-theme="light" class="modul fullwidth_media padding_top_0 padding_bottom_0 " id="mod_6ac1174a03aa6" 313data-anchor="" 314><style>#mod_6ac1174a03aa6 .wrap { 315 max-width: 1300px; 316 }</style><div class="img_wrap"><picture style="aspect-ratio: 2500/2655;"> 317<img width="2500" height="2655" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2x-2500x2655.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2x-2500x2655.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2x-900x956.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2x-500x531.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-2x-1400x1487.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div>
317<script>(() => { 318 319 const muteButton = document.querySelector('#mod_6ac1174a03aa6 .video_sound'); 320 321 if ( muteButton ) 322 { 323 const video = document.querySelector('#mod_6ac1174a03aa6 video'); 324 325 video.addEventListener('play', function (e) { 326 muteButton.style.display = 'block'; 327 }); 328 329 muteButton.addEventListener('click', function (e) { 330 // Get Video Selector from data-attribute 331 if (video.muted) { 332 video.muted = false; 333 muteButton.classList.remove('muted'); 334 } else { 335 video.muted = true; 336 muteButton.classList.add('muted'); 337 } 338 }); 339 340 // Mute Video when scrolled past it 341 const videoOffset = video.offsetTop; 342 const videoHeight = video.offsetHeight; 343 let muteTicking = false 344 345 window.addEventListener('scroll', function () { 346 if (muteTicking) return 347 muteTicking = true 348 requestAnimationFrame(function () { 349 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 350 video.muted = true; 351 muteButton.classList.add('muted'); 352 } 353 muteTicking = false 354 }) 355 }, { passive: true }); 356 } 357 358})();</script>
358 </section><section data-theme="light" class="modul fullwidth_media padding_top_0 padding_bottom_0 " id="mod_6ac1174a0466a" 359data-anchor="" 360><style>#mod_6ac1174a0466a .wrap { 361 max-width: 1300px; 362 }</style><div class="wrap"><div class="img_wrap"><picture style="aspect-ratio: 2500/1875;"> 363<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/referenz-2500x1875.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/referenz-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/referenz-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/referenz-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/referenz-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div></div>
363<script>(() => { 364 365 const muteButton = document.querySelector('#mod_6ac1174a0466a .video_sound'); 366 367 if ( muteButton ) 368 { 369 const video = document.querySelector('#mod_6ac1174a0466a video'); 370 371 video.addEventListener('play', function (e) { 372 muteButton.style.display = 'block'; 373 }); 374 375 muteButton.addEventListener('click', function (e) { 376 // Get Video Selector from data-attribute 377 if (video.muted) { 378 video.muted = false; 379 muteButton.classList.remove('muted'); 380 } else { 381 video.muted = true; 382 muteButton.classList.add('muted'); 383 } 384 }); 385 386 // Mute Video when scrolled past it 387 const videoOffset = video.offsetTop; 388 const videoHeight = video.offsetHeight; 389 let muteTicking = false 390 391 window.addEventListener('scroll', function () { 392 if (muteTicking) return 393 muteTicking = true 394 requestAnimationFrame(function () { 395 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 396 video.muted = true; 397 muteButton.classList.add('muted'); 398 } 399 muteTicking = false 400 }) 401 }, { passive: true }); 402 } 403 404})();</script>
404 </section><section data-theme="light" class="modul fullwidth_media padding_top_0 padding_bottom_0 " id="mod_6ac1174a051e4" 405data-anchor="" 406><style>#mod_6ac1174a051e4 .wrap { 407 max-width: 1300px; 408 }</style><div class="wrap"><div class="img_wrap"><picture style="aspect-ratio: 2500/1875;"> 409<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-24-2500x1875.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-24-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-24-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-24-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-24-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div></div>
409<script>(() => { 410 411 const muteButton = document.querySelector('#mod_6ac1174a051e4 .video_sound'); 412 413 if ( muteButton ) 414 { 415 const video = document.querySelector('#mod_6ac1174a051e4 video'); 416 417 video.addEventListener('play', function (e) { 418 muteButton.style.display = 'block'; 419 }); 420 421 muteButton.addEventListener('click', function (e) { 422 // Get Video Selector from data-attribute 423 if (video.muted) { 424 video.muted = false; 425 muteButton.classList.remove('muted'); 426 } else { 427 video.muted = true; 428 muteButton.classList.add('muted'); 429 } 430 }); 431 432 // Mute Video when scrolled past it 433 const videoOffset = video.offsetTop; 434 const videoHeight = video.offsetHeight; 435 let muteTicking = false 436 437 window.addEventListener('scroll', function () { 438 if (muteTicking) return 439 muteTicking = true 440 requestAnimationFrame(function () { 441 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 442 video.muted = true; 443 muteButton.classList.add('muted'); 444 } 445 muteTicking = false 446 }) 447 }, { passive: true }); 448 } 449 450})();</script>
450 </section><section data-theme="dark" class="modul fullwidth_media padding_top_0 padding_bottom_0 " id="mod_6ac1174a05f04" 451data-anchor="" 452><style>#mod_6ac1174a05f04 .wrap { 453 max-width: 1300px; 454 }</style><div class="img_wrap"><picture style="aspect-ratio: 2114/2560;"> 455<img width="2114" height="2560" src="https://graphek.de/wp-content/uploads/2025/03/neuneu-scaled.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" /> </picture></div>
455<script>(() => { 456 457 const muteButton = document.querySelector('#mod_6ac1174a05f04 .video_sound'); 458 459 if ( muteButton ) 460 { 461 const video = document.querySelector('#mod_6ac1174a05f04 video'); 462 463 video.addEventListener('play', function (e) { 464 muteButton.style.display = 'block'; 465 }); 466 467 muteButton.addEventListener('click', function (e) { 468 // Get Video Selector from data-attribute 469 if (video.muted) { 470 video.muted = false; 471 muteButton.classList.remove('muted'); 472 } else { 473 video.muted = true; 474 muteButton.classList.add('muted'); 475 } 476 }); 477 478 // Mute Video when scrolled past it 479 const videoOffset = video.offsetTop; 480 const videoHeight = video.offsetHeight; 481 let muteTicking = false 482 483 window.addEventListener('scroll', function () { 484 if (muteTicking) return 485 muteTicking = true 486 requestAnimationFrame(function () { 487 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 488 video.muted = true; 489 muteButton.classList.add('muted'); 490 } 491 muteTicking = false 492 }) 493 }, { passive: true }); 494 } 495 496})();</script>
496 </section><section data-theme="dark" class="modul fullwidth_media " id="mod_6ac1174a06392" 497data-anchor="" 498><style>#mod_6ac1174a06392 .wrap { 499 max-width: 1300px; 500 }</style><div class="img_wrap"><picture style="aspect-ratio: 2500/1875;"> 501<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/neu-2500x1875.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/neu-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/neu-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/neu-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/neu-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div>
501<script>(() => { 502 503 const muteButton = document.querySelector('#mod_6ac1174a06392 .video_sound'); 504 505 if ( muteButton ) 506 { 507 const video = document.querySelector('#mod_6ac1174a06392 video'); 508 509 video.addEventListener('play', function (e) { 510 muteButton.style.display = 'block'; 511 }); 512 513 muteButton.addEventListener('click', function (e) { 514 // Get Video Selector from data-attribute 515 if (video.muted) { 516 video.muted = false; 517 muteButton.classList.remove('muted'); 518 } else { 519 video.muted = true; 520 muteButton.classList.add('muted'); 521 } 522 }); 523 524 // Mute Video when scrolled past it 525 const videoOffset = video.offsetTop; 526 const videoHeight = video.offsetHeight; 527 let muteTicking = false 528 529 window.addEventListener('scroll', function () { 530 if (muteTicking) return 531 muteTicking = true 532 requestAnimationFrame(function () { 533 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 534 video.muted = true; 535 muteButton.classList.add('muted'); 536 } 537 muteTicking = false 538 }) 539 }, { passive: true }); 540 } 541 542})();</script>
542 </section><section data-theme="dark" class="modul fullwidth_media " id="mod_6ac1174a06f6e" 543data-anchor="" 544><style>#mod_6ac1174a06f6e .wrap { 545 max-width: 1300px; 546 }</style><div class="img_wrap"><picture style="aspect-ratio: 2500/1875;"> 547<img width="2500" height="1875" src="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-xtypo-1-2500x1875.jpg.webp" class="img" alt="" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-xtypo-1-2500x1875.jpg.webp 2500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-xtypo-1-900x675.jpg.webp 900w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-xtypo-1-500x375.jpg.webp 500w, https://graphek.de/wp-content/uploads/2025/03/graphekreferenz-xtypo-1-1400x1050.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /> </picture></div>
547<script>(() => { 548 549 const muteButton = document.querySelector('#mod_6ac1174a06f6e .video_sound'); 550 551 if ( muteButton ) 552 { 553 const video = document.querySelector('#mod_6ac1174a06f6e video'); 554 555 video.addEventListener('play', function (e) { 556 muteButton.style.display = 'block'; 557 }); 558 559 muteButton.addEventListener('click', function (e) { 560 // Get Video Selector from data-attribute 561 if (video.muted) { 562 video.muted = false; 563 muteButton.classList.remove('muted'); 564 } else { 565 video.muted = true; 566 muteButton.classList.add('muted'); 567 } 568 }); 569 570 // Mute Video when scrolled past it 571 const videoOffset = video.offsetTop; 572 const videoHeight = video.offsetHeight; 573 let muteTicking = false 574 575 window.addEventListener('scroll', function () { 576 if (muteTicking) return 577 muteTicking = true 578 requestAnimationFrame(function () { 579 if (window.pageYOffset >= videoOffset + videoHeight + 250) { 580 video.muted = true; 581 muteButton.classList.add('muted'); 582 } 583 muteTicking = false 584 }) 585 }, { passive: true }); 586 } 587 588})();</script>
588 </section><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/textblock.min.css?t=1779794401' type='text/css' media='all' /><section data-theme="dark" class="modul textblock padding_bottom_25 " id="mod_6ac1174a07a47" 589data-anchor="" 590><div class="wrap is_centered"><div class="text"><p style="text-align: center;"><h2 style="text-align: center;">Lass` mal schnacken!</h2><p style="text-align: center;">Als <strong><a href="https://graphek.de/expertise/webdesign-agentur-bremen/"><u>Webdesign Agentur</u></a> </strong>in Bremen und Oldenburg gestalten wir digitale Erlebnisse in den Bereichen, <strong><a href="https://graphek.de/expertise/ui-ux-design-agentur/"><u>UI / UX Design</u></a></strong>, <strong><a href="https://graphek.de/expertise/webentwicklung-agentur/"><u>Webentwicklung</u></a></strong> & <strong><a href="https://graphek.de/expertise/corporate-design-agentur/"><u>Corporate Design</u></a></strong>. Melde dich einfach mit deinem Projekt bei uns.</p><p style="text-align: center;"><a 591class="button cc_interactive " 592href="/kontakt" 593> 594<span> 595Kontakt aufnehmen </span></a><a 596class="button cc_interactive outline" 597href="tel:+42169698983" 598> 599<span> 6000421 69 69 89 83 </span></a></p></p></div></div><style>#mod_6ac1174a07a47 .text { 601 max-width: 1000px; 602 }</style></section><section data-theme="dark" class="modul gallery_pinned " id="mod_6ac1174a07cbb" 603data-anchor="" 604><style>#mod_6ac1174a07cbb { 605 padding: 15vh 0; 606 } 607 #mod_6ac1174a07cbb .gallery { 608 height: 50vh; 609 }</style><h4>Weitere Projekte</h4><div class="wrap"><div class="gallery"> 610<a class="referenz" data-text="Projekt anzeigen" href="https://graphek.de/referenzen/plantura/"> 611<img width="2500" height="1705" src="https://graphek.de/wp-content/uploads/2023/09/PLANTURAHEROANIMATION2-1-scaled.jpg.webp" class="attachment-large size-large" alt="UI/UX Design Plantura Screen" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2023/09/PLANTURAHEROANIMATION2-1-scaled.jpg.webp 6000w, https://graphek.de/wp-content/uploads/2023/09/PLANTURAHEROANIMATION2-1-900x614.jpg.webp 900w, https://graphek.de/wp-content/uploads/2023/09/PLANTURAHEROANIMATION2-1-1400x955.jpg.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100v
611w, 2500px" /><div class="hoverlay"> 612<span>Unser grüner Daumen im UI / UX Design</span></div> 613</a> 614<a class="referenz" data-text="Projekt anzeigen" href="https://graphek.de/referenzen/designsystem/"> 615<img width="2500" height="1324" src="https://graphek.de/wp-content/uploads/2023/09/figma-designsystem-graphek-bremen-2500x1324.webp" class="attachment-large size-large" alt="figma-designsystem-graphek-bremen" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2023/09/figma-designsystem-graphek-bremen-2500x1324.webp 2500w, https://graphek.de/wp-content/uploads/2023/09/figma-designsystem-graphek-bremen-900x477.webp 900w, https://graphek.de/wp-content/uploads/2023/09/figma-designsystem-graphek-bremen-500x265.webp 500w, https://graphek.de/wp-content/uploads/2023/09/figma-designsystem-graphek-bremen-1400x742.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100vw, 2500px" /><div class="hoverlay"> 616<span>Designsysteme für komplexe Projekte</span></div> 617</a> 618<a class="referenz" data-text="Projekt anzeigen" href="https://graphek.de/referenzen/platido/"> 619<img width="2500" height="1406" src="https://graphek.de/wp-content/uploads/2023/09/PLATIDOTHUMBNAIL-2500x1406.webp" class="attachment-large size-large" alt="Plaques24 Webdesign" style="object-position: 50% 50%;" decoding="async" srcset="https://graphek.de/wp-content/uploads/2023/09/PLATIDOTHUMBNAIL-2500x1406.webp 2500w, https://graphek.de/wp-content/uploads/2023/09/PLATIDOTHUMBNAIL-900x506.webp 900w, https://graphek.de/wp-content/uploads/2023/09/PLATIDOTHUMBNAIL-500x281.webp 500w, https://graphek.de/wp-content/uploads/2023/09/PLATIDOTHUMBNAIL-1400x788.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 2500px) 100v
619w, 2500px" /><div class="hoverlay"> 620<span>Auch international eine groÃe Nummer</span></div> 621</a></div></div>
621<script>(() => { 622 document.addEventListener('DOMContentLoaded', function(){ 623 624 var gallery = document.querySelector('#mod_6ac1174a07cbb .gallery') 625 626 const modul = document.querySelector('#mod_6ac1174a07cbb'); 627 const bgColor = getComputedStyle(modul).getPropertyValue('--color_bg_main'); // #999999 628 629 var tl = gsap.timeline({ 630 scrollTrigger: { 631 trigger: '#mod_6ac1174a07cbb', 632 // pinnedContainer: '#mod_6ac1174a07cbb', 633 start: 'center center', 634 // end: '+=120%', 635 end: () => Math.abs(ggWidth()) + 'px', 636 scrub: true, 637 pin: true, 638 invalidateOnRefresh: true, 639 ignoreMobileResize: true, 640 limitCallbacks: true, 641 invalidateOnRefresh: true, 642 // pinSpacing: false, 643 // pinType: 'transform', 644 // markers: true, 645 // onEnter: () => , 646 } 647 }) 648 649 tl.scrollTrigger.spacer.style.backgroundColor = bgColor 650 651 ScrollTrigger.config({ ignoreMobileResize: true }); 652 653 tl.fromTo(gallery, { 654 // scale: .85, 655 left: 0, 656 translateX: '0', 657 }, 658 { 659 // scale: 1, 660 translateX: () => ggWidth() + 'px', 661 duration: 1 662 }, 'pinnedGallery') 663 664 function ggWidth() { 665 var wrap = document.querySelector('#mod_6ac1174a07cbb .wrap'); 666 var galleryWidth = document.querySelector('#mod_6ac1174a07cbb .gallery').offsetWidth; 667 var wrapPadding = window.getComputedStyle(wrap, null).getPropertyValue('padding-left'); 668 var result = galleryWidth - wrap.scrollWidth + parseInt(wrapPadding); 669 if ( (result + parseInt(wrapPadding)) > -40 ) return 0; // Zu geringe Offsets nicht animieren 670 return result; 671 } 672 673 }) 674 })();</script>
674 </section></main><footer id="main_footer"><div class="footer_intro"><div class="wrap"> 675<a href="https://graphek.de" class="footer_logo"> 676<img src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_black.svg" width="25" height="38" alt="Graphek Logo Icon" /> 677</a></div></div><div class="wrap menu_area"><nav class="footer_menu"><ul id="menu-footer-nav" class="menu"><li id="menu-item-3256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3256"><a href="https://graphek.de/referenzen-werbeagentur/">Referenzen</a><ul class="sub-menu"><li id="menu-item-3257" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3257"><a href="https://graphek.de/referenzen/mein-fruehstueck/">MeinFrühstück24</a></li><li id="menu-item-3260" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3260"><a href="https://graphek.de/referenzen/kevin-gideon/">Kevin Gideon</a></li><li id="menu-item-3258" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3258"><a href="https://graphek.de/referenzen/platido/">Plaques24</a></li><li id="menu-item-3261" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3261"><a href="https://graphek.de/referenzen/brigg-jugendhilfe/">BRIGG</a></li><li id="menu-item-3262" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3262"><a href="https://graphek.de/referenzen/plantura/">Plantura</a></li><li id="menu-item-3259" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3259"><a href="https://graphek.de/referenzen/vierhaus/">Vierhaus Group</a></li><li id="menu-item-3638" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3638"><a href="https://graphek.de/referenzen/nina-kastens/">Nina Kastens</a></li></ul></li><li id="menu-item-407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-407"><a href="https://graphek.de/expertise/">Expertise</a><ul class="sub-menu"><li id="menu-item-3255" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3255"><a href="https://graphek.de/expertise/ui-ux-design-agentur/">UI / UX Design</a></li><li id="menu-item-6765" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-6765"><a href="https://graphek.de/referenzen/designsystem/">Design Systeme</a></li><li id="menu-item-6726" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6726"><a href="https://graphek.de/expertise/webdesign-agentur-bremen/">Webdesign</a></li>
677<li id="menu-item-3254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3254"><a href="https://graphek.de/expertise/webentwicklung-agentur/">Webentwicklung</a></li><li id="menu-item-3253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3253"><a href="https://graphek.de/expertise/wordpress-agentur-bremen/">WordPress</a></li><li id="menu-item-3250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3250"><a href="https://graphek.de/expertise/onlineshop-agentur/">Onlineshop</a></li><li id="menu-item-3249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3249"><a href="https://graphek.de/expertise/wordpress-wartungsvertrag/">WordPress Wartung</a></li><li id="menu-item-3252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3252"><a href="https://graphek.de/expertise/corporate-design-agentur/">Corporate Design</a></li><li id="menu-item-3637" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-3637"><a href="https://graphek.de/referenzen/logoentwicklung/">Logoentwicklung</a></li></ul></li><li id="menu-item-4335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4335"><a href="https://graphek.de/digitalagentur-bremen/">Agentur</a><ul class="sub-menu"><li id="menu-item-3789" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3789"><a href="https://graphek.de/digitalagentur-bremen/">Ãber uns</a></li><li id="menu-item-3749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3749"><a href="https://graphek.de/digitalagentur-bremen#graphektivities">Graphektivities</a></li><li id="menu-item-3747" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3747"><a href="https://graphek.de/digitalagentur-bremen#die-gruender">Die Gründer</a></li><li id="menu-item-3750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3750"><a href="https://graphek.de/digitalagentur-bremen#10-jahre-graphek">10 Jahre Graphek</a></li><li id="menu-item-3247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3247"><a href="https://graphek.de/kontakt/">Kontakt</a></li><li id="menu-item-5585" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-5585"><a href="https://graphek.de/blog/">Blog</a></li></ul></li></ul></nav><aside class="adresse"><div><strong>Graphek GmbH</strong></div><div><div>Am Tabakquartier 50<br/>Loft 6</div><div> 678<span>28197</span> <span>Bremen</span></div></div><div class="contact"> 679Tel: <a href="tel:+4942169698983">0421 69 69 89 83</a><br> 680E-Mail: <a href="mailto:[email protected]">[email protected]</a></div></aside></div><div class="footer_bottom"><div class="wrap"><div class="bottom_content"><div class="left"> 681<img class="award" width="227" height="72" src="https://graphek.de/wp-content/themes/graphek4/images/GWA_Siegel3_Schwarz.svg" alt="German Web Awards Winner 2024" /> 682<img class="award csswinner" width="300" height="60" src="https://graphek.de/wp-content/themes/graphek4/images/CSSWinnerStar.svg" alt="CSSWinner Star 2024" /><div class="copyright"> 683© 2026 Graphek GmbH | Werbeagentur in Bremen & Oldenburg</div></div><div class="right"><ul id="menu-footer-nav-bottom" class="menu"><li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-860"><a rel="privacy-policy" href="https://graphek.de/datenschutzerklaerung/">Datenschutzerklärung</a></li><li id="menu-item-4521" class="cookie_settings menu-item menu-item-type-custom menu-item-object-custom menu-item-4521"><a href="#!">Cookie Einstellungen</a></li><li id="menu-item-861" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-861"><a href="https://graphek.de/impressum/">Impressum</a></li></ul></div></div></div></div></footer></div><div id="mobile_nav_container"> 684<button id="mobile_nav_trigger"> 685<span class="show"> 686Navigation 687<img width="13" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/menu.svg" alt="Open Menu"> 688</span> 689<span class="hide"> 690<img width="10" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/close.svg" alt="Close Menu"> 691</span> 692</button><div id="mobile_nav"><div class="top_area"><div class="inner"> 693<a class="logo" href="https://graphek.de"> 694<img width="25" height="38" src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_white.svg" alt="Graphek Logo White" /> 695</a> 696<a class="stars_wrapper" target="_blank" href="https://maps.app.goo.gl/SD2jL6JeU14BwNnK6"><div class="partial_stars"> 697<span>
6985.0 </span> 699<img class="stars" width="130" height="22" src="https://graphek.de/wp-content/themes/graphek4/images/stars_white.svg" alt="5 Sterne Bewertung" /> 700<img class="external_link" width="9" height="9" src="https://graphek.de/wp-content/themes/graphek4/images/arrow_open_external.svg" alt="Bewertungen öffnen" /></div> </a></div></div><nav id="main_mobile"><div class="menu-header-container"><ul id="menu-header-1" class="menu"><li class="hide_desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1195"><a href="https://graphek.de/">Moin</a></li><li class="has_bubble menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a href="https://graphek.de/referenzen-werbeagentur/">Referenzen</a></li><li class="mega_trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a href="https://graphek.de/expertise/">Expertise</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-656"><a href="https://graphek.de/digitalagentur-bremen/">Agentur</a></li><li class="hide_on_desktop_nav menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-6862"><a href="https://graphek.de/blog/">Blog</a></li><li class="header_cta hide_mobile menu-item menu-item-type-post_type menu-item-object-page menu-item-969"><a href="https://graphek.de/kontakt/">Kontakt</a></li></ul></div></nav><nav id="expertise"><div class="menu-expertise-container"><ul id="menu-expertise" class="menu"><li id="menu-item-6727" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6727"><a href="https://graphek.de/expertise/webdesign-agentur-bremen/">Webdesign</a></li><li id="menu-item-3839" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3839"><a href="https://graphek.de/expertise/ui-ux-design-agentur/">UI / UX Design</a></li><li id="menu-item-6766" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-6766"><a href="https://graphek.de/referenzen/designsystem/">Design Systeme</a></li><li id="menu-item-3837" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3837"><a href="https://graphek.de/expertise/corporate-design-agentur/">Corporate Design</a></li><li id="menu-item-6767" class="menu-item menu-item-type-post_type menu-item-object-projekt menu-item-6767"><a href="https://graphek.de/referenzen/logoentwicklung/">Logoentwicklung</a></li><li id="menu-item-3841" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3841"><a href="https://graphek.de/expertise/webentwicklung-agentur/">Webentwicklung</a></li><li id="menu-item-3842" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3842"><a href="https://graphek.de/expertise/wordpress-agentur-bremen/">WordPress</a></li><li id="menu-item-3843" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3843"><a href="https://graphek.de/expertise/wordpress-wartungsvertrag/">WordPress Wartung</a></li><li id="menu-item-3838" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3838"><a href="https://graphek.de/expertise/onlineshop-agentur/">Onlineshop</a></li></ul></div></nav><div class="anfrage"> 701<a class="button has_arrow" href="https://graphek.de/kontakt/" id="projektanfrage"> 702Kontakt </a> 703<button class="button has_arrow" id="back_to_main"> 704Hauptmenü 705</button></div></div></div>
705<script>(() => { 706 707 const mobileNav = document.getElementById('mobile_nav'); 708 const menuTrigger = document.getElementById('mobile_nav_trigger'); 709 710 window.addEventListener('DOMContentLoaded', () => { 711 setTimeout(() => { 712 menuTrigger.classList.add('show'); 713 }, 1000); 714 }); 715 716 menuTrigger.addEventListener('click', function() { 717 if ( document.body.classList.contains('mobileNavShow') ) { 718 document.body.classList.remove('mobileNavShow'); 719 mobileNav.classList.remove('show-expertise'); 720 mobileNav.classList.remove('show-main'); 721 } else { 722 document.body.classList.add('mobileNavShow'); 723 } 724 }); 725 726 const expertiseTrigger = document.querySelector('#main_mobile .mega_trigger'); 727 728 expertiseTrigger.addEventListener("click", function(e) { 729 e.preventDefault(); 730 e.stopPropagation(); 731 mobileNav.classList.add('show-expertise'); 732 mobileNav.classList.remove('show-main'); 733 }); 734 735 const backButton = document.querySelector('#back_to_main'); 736 737 backButton.addEventListener("click", function(e) { 738 e.preventDefault(); 739 e.stopPropagation(); 740 mobileNav.classList.remove('show-expertise'); 741 mobileNav.classList.add('show-main'); 742 }); 743 744 745 // Show Nav when page is scrolled down at least xxx of document 746 // if ( document.body.scrollHeight < 1700 ) { 747 // menuTrigger.classList.add('show'); 748 // } 749 // else { 750 // window.addEventListener('scroll', () => { 751 // if (window.scrollY > 1500 ) { 752 // menuTrigger.classList.add('show'); 753 // } else { 754 // menuTrigger.classList.remove('show'); 755 // } 756 // }); 757 // } 758 759})();</script>
759<link rel='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_parts/cookieconsent.min.css?ver=1789037096' media='print' onload="this.media='all'" />
759<script>window.datenschutz_mail = "[email protected]"; 760window.impressum_url = "https:\/\/graphek.de\/impressum\/"; 761window.datenschutz_url = "https:\/\/graphek.de\/datenschutzerklaerung\/"; 762 763(() => { 764 // DOMContentLoaded also fires when a deferred download failed. Wait for both 765 // actual load events and the DOM; synthetic DOM events must not re-run consent. 766 const domReady = document.readyState === 'loading' 767 ? new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, { once: true })) 768 : Promise.resolve(); 769 770 function loadConsentScript(url, retry = true) { 771 return new Promise((resolve, reject) => { 772 const script = document.createElement('script'); 773 script.src = url; 774 script.onload = resolve; 775 script.onerror = () => { 776 script.remove(); 777 // One fresh request recovers transient failures; a permanent failure is 778 // reported below and all consent-managed services remain blocked. 779 if (retry) resolve(loadConsentScript(url + '&retry=1', false)); 780 else reject(new Error('Cookie Consent: Script konnte nicht geladen werden: ' + url)); 781 }; 782 document.head.appendChild(script); 783 }); 784 } 785 786 Promise.all([ 787 domReady, 788 loadConsentScript("https:\/\/graphek.de\/wp-content\/themes\/graphek4\/partials\/cookieconsent\/cookieconsent.js?ver=1774467326"), 789 loadConsentScript("https:\/\/graphek.de\/wp-content\/themes\/graphek4\/partials\/cookieconsent\/cookieconsent_de.js?ver=1789718939") 790 ]).then(() => { 791 if (!window.CookieConsent || typeof window.CookieConsent.run !== 'function' || !window.cc_de) { 792 throw new Error('Cookie Consent: Geladene Scripts stellen Bibliothek oder Ãbersetzung nicht bereit.'); 793 } 794 795 /** 796 * All config. options available here: 797 * https://cookieconsent.orestbida.com/reference/configuration-reference.html 798 */ 799 return CookieConsent.run({ 800 801 // root: 'body', 802 // autoShow: true, 803 // disablePageInteraction: true, 804 // hideFromBots: true, 805 // mode: 'opt-in', 806 revision: 6, 807 808 cookie: { 809 name: 'cc_cookie', 810 // domain: location.hostname, 811 // path: '/', 812 // sameSite: "Lax", 813 // expiresAfterDays: 365, 814 }, 815 816 // https://cookieconsent.orestbida.com/reference/configuration-reference.html#guioptions 817 guiOptions: { 818 consentModal: { 819 layout: 'cloud inline', 820 position: 'bottom center', 821 equalWeightButtons: true, 822 flipButtons: false 823 }, 824 preferencesModal: { 825 layout: 'box', 826 equalWeightButtons: true, 827 flipButtons: false 828 } 829 }, 830 831 categories: { 832 necessary: { 833 enabled: true, // this category is enabled by default 834 readOnly: true // this category cannot be disabled 835 }, 836 // Analytics = Umami (self-hosted, analytics.graphek.de) und Google Tag Manager 837 // (sst.graphek.de, GTM-5LHJ5CX6; Google Analytics + Google-Ads-Conversion), wie vor der 838 // Umami-Integration. Umami setzt keine Cookies; die Regeln betreffen Google und Hotjar-Altbestand. 839 analytics: { 840 readOnly: false, 841 autoClear: { 842 cookies: [ 843 { 844 name: /^(_hj)/ // regex 845 }, 846 { 847 name: /^_ga/, // regex: match all cookies starting with '_ga' 848 }, 849 { 850 name: '_gid', // string: exact cookie name 851 } 852 ] 853 } 854 }, 855 openai_ads: { 856 enabled: false, 857 readOnly: false, 858 autoClear: { 859 cookies: [ 860 { 861 name: '__oppref' 862 }, 863 { 864 name: 'graphek_openai_oppref' 865 } 866 ] 867 } 868 }, 869 campaign_attribution: { 870 enabled: false, 871 readOnly: false, 872 autoClear: { 873 cookies: [ 874 { 875 name: 'graphek_campaign_source' 876 } 877 ] 878 } 879 }, 880 external: { 881 readOnly: false, 882 autoClear: { 883 cookies: [ 884 { 885 name: 'calendar.google.com', // string: exact cookie name 886 } 887 ] 888 } 889 }, 890 }, 891 892 language: { 893 default: 'de', 894 translations: { 895 de: cc_de 896 } 897 } 898 }); 899 900 }).then(() => { 901 // Cookie-Consent via .cookie_settings Klasse triggern (Für WP Menue) 902 const cookieSettingsButtons = document.querySelectorAll('.cookie_settings'); 903 if ( cookieSettingsButtons ) { 904 cookieSettingsButtons.forEach(function(cookieSettingsButton) { 905 cookieSettingsButton.addEventListener('click', function(event) { 906 event.preventDefault(); 907 CookieConsent.showPreferences(); 908 }); 909 }); 910 } 911 }).catch(error => { 912 console.error('Cookie Consent konnte nicht initialisiert werden.', error); 913 }); 914})();</script>
914 <div class="sidenav_container hide" id="sidenav"><button class="sidenav_item" id="trigger_welcome" aria-label="Welcome Video"><div class="left"><div class="icon warm_welcome"><video loop muted autoplay playsinline> 915<source src="https://graphek.de/wp-content/themes/graphek4/partials/sidenav/bubble.mp4?t=2" type="video/mp4"></video></div><div class="title">Herzlich Willkommen!</div></div><div class="right"> 916<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div> 917</button> 918<a class="sidenav_item kontakt" href="https://graphek.de/kontakt/"><div class="left"><div class="icon"> 919<img height="512" width="512" src="https://graphek.de/wp-content/themes/graphek4/images/contact.svg" alt="Kontakt" /></div><div class="title">Kontakt</div></div><div class="right"> 920<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div> 921</a> 922<button class="sidenav_item back_to_top"><div class="left"><div class="icon"> 923<img width="30" height="30" src="https://graphek.de/wp-content/themes/graphek4/images/icon_back_to_top.svg" alt="Zum Seitenanfang" ></div><div class="title">Zum Seitenanfang</div></div><div class="right"> 924<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div> 925</button></div><div class="welcome_video" id="welcome_video_full"><div class="video_container"><video id="welcome_video" data-src="https://graphek.de/wp-content/themes/graphek4/partials/sidenav/welcome.mp4?t=2" playsinline controls></video> 926<a class="kontakt video_link" href="https://graphek.de/kontakt/">Kontakt</a> 927<a class="referenzen video_link" href="https://graphek.de/referenzen-werbeagentur/">Referenzen</a> 928<a class="agentur video_link" href="https://graphek.de/digitalagentur-bremen/">Ãber uns</a></div><button id="close_welcome_video"> 929<img width="10" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/close.svg" alt="Video schlieÃen"> 930</button></div>
930<script>(() => { 931 932 const backToTop = document.querySelector('.back_to_top'); 933 934 backToTop.addEventListener('click', () => { 935 window.scrollTo({ 936 top: 0, 937 behavior: 'smooth' 938 }); 939 }); 940 941 const triggerWrapper = document.getElementById('sidenav'); 942 const trigger = document.getElementById('trigger_welcome'); 943 // const triggerClose = document.getElementById('hide_welcome_trigger'); 944 const video = document.getElementById('welcome_video'); 945 const videoWrapper = document.getElementById('welcome_video_full'); 946 const closeButton = document.getElementById('close_welcome_video'); 947 948 // Video Buttons & Tags 949 const buttonKontakt = videoWrapper.querySelector('.video_link.kontakt'); 950 const buttonReferenzen = videoWrapper.querySelector('.video_link.referenzen'); 951 const buttonAgentur = videoWrapper.querySelector('.video_link.agentur'); 952 const videoLinks = videoWrapper.querySelectorAll('.video_link'); 953 954 // Show Sidenav after scrolling past first viewport 955 let sidenavTicking = false 956 window.addEventListener('scroll', function () { 957 if (sidenavTicking) return 958 sidenavTicking = true 959 requestAnimationFrame(function () { 960 if (window.scrollY > window.innerHeight) { 961 triggerWrapper.classList.remove('hide'); 962 } else { 963 triggerWrapper.classList.add('hide'); 964 } 965 sidenavTicking = false 966 }) 967 }, { passive: true }); 968 969 trigger.addEventListener('click', () => { 970 triggerWrapper.classList.add('hide'); 971 videoWrapper.classList.add('show'); 972 videoLinks.forEach(link => link.classList.remove('active') ); 973 video.src = video.dataset.src; 974 video.play(); 975 video.addEventListener("timeupdate", (event) => { 976 if ( event.target.currentTime > 5.5 ) { 977 buttonAgentur.classList.add('active'); 978 } 979 if ( event.target.currentTime > 11.5 ) { 980 buttonReferenzen.classList.add('active'); 981 } 982 if ( event.target.currentTime > 18 ) { 983 buttonKontakt.classList.add('active'); 984 } 985 }); 986 987 }); 988 989 closeButton.addEventListener('click', () => { 990 triggerWrapper.classList.remove('hide'); 991 videoWrapper.classList.remove('show'); 992 video.pause(); 993 video.currentTime = 0; 994 }); 995 996})();</script>
996 <dialog id="modal-speed-dating" class="termin-modal" aria-labelledby="Speed Dating mit Alex & Hannes"><button class="termin-modal-close" aria-label="SchlieÃen" title="SchlieÃen" onclick="this.closest('dialog').close();"> 997<img src="https://graphek.de/wp-content/themes/graphek4/images/close_black.svg" alt="SchlieÃen" /> 998</button><h3>15-Minuten Speed-Dating mit Alex & Hannes</h3><div class="cookie_activation_notice"> 999Bitte akzeptiere die Cookie-Einstellungen für die Gruppe "external", um den Kalender für die Terminbuchung anzuzeigen.<div class="button_wrapper"> 1000<button class="button cookie_settings"> 1001Cookie Einstellungen öffnen </button></div></div><div class="termin_modal_iframe_target" data-src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ0iOoerQy-6xXzpz6VrOyVCRbn0DDJZv8W3NuGINyfh-x_r9iuP1zYDcqKXWyK1WW7AkFId-uqQ?gv=true"></div> 1002</dialog>
1002<script>(() => { 1003 1004 const dialog = document.querySelector('#modal-speed-dating'); 1005 1006 if ( ! dialog ) { 1007 return; 1008 } 1009 1010 function openModal() { 1011 const iframe = dialog.querySelector('iframe[data-src]'); 1012 if (iframe) { 1013 iframe.src = iframe.dataset.src; 1014 iframe.removeAttribute('data-src'); 1015 } 1016 dialog.showModal(); 1017 } 1018 1019 window.addEventListener('hashchange', () => { 1020 if (location.hash !== '#modal-speed-dating') return; 1021 openModal(); 1022 }); 1023 1024 dialog.addEventListener('close', () => { 1025 history.replaceState(null, '', ' '); 1026 }); 1027 1028 if (location.hash === '#modal-speed-dating') { 1029 openModal(); 1030 } 1031 1032 // Close the dialog when clicking outside of it 1033 dialog.addEventListener('click', (event) => { 1034 if (event.target === dialog) { 1035 dialog.close(); 1036 } 1037 }); 1038 1039 // Cookie-Button: Modal schlieÃen, damit der Consent-Dialog nicht dahinter liegt 1040 let reopenAfterConsent = false; 1041 const cookieBtn = dialog.querySelector('.cookie_settings'); 1042 if ( cookieBtn ) { 1043 cookieBtn.addEventListener('click', () => { 1044 reopenAfterConsent = true; 1045 dialog.close(); 1046 }); 1047 } 1048 1049 // Cookie Consent: dynamisch iframe nachladen 1050 ['cc:onConsent', 'cc:onChange'].forEach(event => 1051 window.addEventListener(event, ({detail}) => { 1052 1053 if ( detail.cookie.categories.indexOf('external') === -1 ) { 1054 return; 1055 } 1056 1057 const target = dialog.querySelector('.termin_modal_iframe_target'); 1058 if ( ! target ) return; 1059 1060 const src = target.dataset.src; 1061 if ( ! src ) return; 1062 1063 const iframe = document.createElement('iframe'); 1064 iframe.src = src; 1065 iframe.style.border = '0'; 1066 iframe.width = '100%'; 1067 iframe.height = '600'; 1068 iframe.frameBorder = '0'; 1069 target.replaceWith(iframe); 1070 1071 const notice = dialog.querySelector('.cookie_activation_notice'); 1072 if ( notice ) notice.remove(); 1073 1074 if ( reopenAfterConsent ) { 1075 reopenAfterConsent = false; 1076 openModal(); 1077 } 1078 1079 }) 1080 ); 1081 1082})();</script>
1082 <dialog id="modal-wp-wartung" class="termin-modal" aria-labelledby="WordPress Wartung buchen"><button class="termin-modal-close" aria-label="SchlieÃen" title="SchlieÃen" onclick="this.closest('dialog').close();"> 1083<img src="https://graphek.de/wp-content/themes/graphek4/images/close_black.svg" alt="SchlieÃen" /> 1084</button><h3>Lass uns kurz über die Wartung deiner WordPress-Website sprechen.</h3><div class="cookie_activation_notice"> 1085Bitte akzeptiere die Cookie-Einstellungen für die Gruppe "external", um den Kalender für die Terminbuchung anzuzeigen.<div class="button_wrapper"> 1086<button class="button cookie_settings"> 1087Cookie Einstellungen öffnen </button></div></div><div class="termin_modal_iframe_target" data-src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ0axT_Chfd_aqCBmyXULuLCDbPcxiXw3YRfupuWEAEm02KrIkXJn2cHYz8gT94nfL94d1LK8SXu?gv=true"></div> 1088</dialog>
1088<script>(() => { 1089 1090 const dialog = document.querySelector('#modal-wp-wartung'); 1091 1092 if ( ! dialog ) { 1093 return; 1094 } 1095 1096 function openModal() { 1097 const iframe = dialog.querySelector('iframe[data-src]'); 1098 if (iframe) { 1099 iframe.src = iframe.dataset.src; 1100 iframe.removeAttribute('data-src'); 1101 } 1102 dialog.showModal(); 1103 } 1104 1105 window.addEventListener('hashchange', () => { 1106 if (location.hash !== '#modal-wp-wartung') return; 1107 openModal(); 1108 }); 1109 1110 dialog.addEventListener('close', () => { 1111 history.replaceState(null, '', ' '); 1112 }); 1113 1114 if (location.hash === '#modal-wp-wartung') { 1115 openModal(); 1116 } 1117 1118 // Close the dialog when clicking outside of it 1119 dialog.addEventListener('click', (event) => { 1120 if (event.target === dialog) { 1121 dialog.close(); 1122 } 1123 }); 1124 1125 // Cookie-Button: Modal schlieÃen, damit der Consent-Dialog nicht dahinter liegt 1126 let reopenAfterConsent = false; 1127 const cookieBtn = dialog.querySelector('.cookie_settings'); 1128 if ( cookieBtn ) { 1129 cookieBtn.addEventListener('click', () => { 1130 reopenAfterConsent = true; 1131 dialog.close(); 1132 }); 1133 } 1134 1135 // Cookie Consent: dynamisch iframe nachladen 1136 ['cc:onConsent', 'cc:onChange'].forEach(event => 1137 window.addEventListener(event, ({detail}) => { 1138 1139 if ( detail.cookie.categories.indexOf('external') === -1 ) { 1140 return; 1141 } 1142 1143 const target = dialog.querySelector('.termin_modal_iframe_target'); 1144 if ( ! target ) return; 1145 1146 const src = target.dataset.src; 1147 if ( ! src ) return; 1148 1149 const iframe = document.createElement('iframe'); 1150 iframe.src = src; 1151 iframe.style.border = '0'; 1152 iframe.width = '100%'; 1153 iframe.height = '600'; 1154 iframe.frameBorder = '0'; 1155 target.replaceWith(iframe); 1156 1157 const notice = dialog.querySelector('.cookie_activation_notice'); 1158 if ( notice ) notice.remove(); 1159 1160 if ( reopenAfterConsent ) { 1161 reopenAfterConsent = false; 1162 openModal(); 1163 } 1164 1165 }) 1166 ); 1167 1168})();</script>
1168
1168<script type="text/plain" data-category="analytics" defer 1169 src="https://analytics.graphek.de/script.js" 1170 data-website-id="2fc111a0-ee4e-4611-b345-9d49cf93ff7c" 1171 data-domains="graphek.de,www.graphek.de"></script>
1171
1171<script>// Wird die Analytics-Einwilligung widerrufen, nachdem der Tracker geladen wurde, wird die 1172 // Seite neu geladen, damit kein initialisierter Tracker im Dokument zurueckbleibt. Umamis 1173 // eigener Schalter (localStorage 'umami.disabled') wird bewusst nicht gesetzt: das waere 1174 // ein Schreibzugriff ins Endgeraet genau bei jemandem, der gerade abgelehnt hat. 1175 ['cc:onConsent', 'cc:onChange'].forEach(function(event) { 1176 window.addEventListener(event, function() { 1177 if (!window.CookieConsent) return; 1178 1179 if (CookieConsent.acceptedCategory('analytics')) { 1180 window._umamiConsented = true; 1181 } else if (window._umamiConsented && !window._umamiReloadRequested) { 1182 window._umamiReloadRequested = true; 1183 window.location.reload(); 1184 } 1185 }); 1186 });</script>
1186
1186<script>function loadGTM() { 1187 if (window._gtmLoaded) return; 1188 window._gtmLoaded = true; 1189 window.dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'}); 1190 var s = document.createElement('script'); 1191 s.async = true; 1192 s.src = 'https://sst.graphek.de/gtm.js?id=GTM-5LHJ5CX6'; 1193 document.head.appendChild(s); 1194 } 1195 1196 function syncGoogleConsent() { 1197 if (typeof window.gtag !== 'function' || !window.CookieConsent) return; 1198 1199 var analyticsGranted = CookieConsent.acceptedCategory('analytics'); 1200 gtag('consent', 'update', { 1201 analytics_storage: analyticsGranted ? 'granted' : 'denied', 1202 ad_storage: 'denied', 1203 ad_user_data: 'denied', 1204 ad_personalization: 'denied' 1205 }); 1206 } 1207 1208 ['cc:onConsent', 'cc:onChange'].forEach(function(event) { 1209 window.addEventListener(event, function() { 1210 syncGoogleConsent(); 1211 if (CookieConsent.acceptedCategory('analytics')) { 1212 loadGTM(); 1213 } else if (window._gtmLoaded && !window._gtmReloadRequested) { 1214 window._gtmReloadRequested = true; 1215 window.location.reload(); 1216 } 1217 }); 1218 });</script>
1218
1218<script type="text/plain" data-category="openai_ads" src="https://graphek.de/wp-content/themes/graphek4/partials/openai_ads/openai_ads.min.js"></script>
1218
1218<script src="https://graphek.de/wp-content/themes/graphek4/partials/campaign_attribution/campaign_attribution.min.js"></script>
1218
1218<script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/graphek4/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script>
1218
1218<script type="text/javascript">var sbiajaxurl = "https://graphek.de/wp-admin/admin-ajax.php";</script>
1218
1218<script id="plugins-js" defer src="https://graphek.de/wp-content/themes/graphek4/assets/js/dist/_plugins.min.js?ver=1779794404"></script>
1218
1218<script id="boilerplate-js" defer src="https://graphek.de/wp-content/themes/graphek4/assets/js/dist/_build.min.js?&ver=1779794403"></script>
1218
1218<script data-wp-strategy="defer" defer id="litespeed-cache-js" src="https://graphek.de/wp-content/plugins/litespeed-cache/assets/js/instant_click.min.js?ver=7.9.1"></script>
1218 </body></html> 1219<!-- Page optimized by LiteSpeed Cache @2026-10-03 16:55:06 --> 1220 1221<!-- Page cached by LiteSpeed Cache 7.9.1 on 2026-10-03 16:55:06 -->
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.