PageSourceSearch

https://graphek.de/referenzen/ui-ux-dashboard/

html graphek.de collected 2026-10-07 01:52:17 UTC 90,885 bytes, 1,221 lines download raw bytes

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 &amp; 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&amp;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 &amp; 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 &amp; 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&amp;d=mm&amp;r=g","url":"https://secure.gravatar.com/avatar/599a59bc23124d11bb63c3f4c9965e7ab67e71b9e0ae4ec9f5fba14379e0fb8e?s=96&amp;d=mm&amp;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&#038;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> &amp; <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?&#038;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.