PageSourceSearch

https://graphek.de/web-app-vs-native-app/

html graphek.de collected 2026-10-07 01:52:16 UTC 75,881 bytes, 799 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>Web-App vs. Native App: Der ultimative Vergleich | Graphek</title><meta name="description" content="Web-App oder Native App? Wir vergleichen Kosten, Performance, Entwicklungszeit und zeigen, wann welche Lösung die richtige Wahl ist."/><meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/><link rel="canonical" href="https://graphek.de/web-app-vs-native-app/" /><meta property="og:locale" content="de_DE" /><meta property="og:type" content="article" /><meta property="og:title" content="Web-App vs. Native App: Der ultimative Vergleich | Graphek" /><meta property="og:description" content="Web-App oder Native App? Wir vergleichen Kosten, Performance, Entwicklungszeit und zeigen, wann welche Lösung die richtige Wahl ist." /><meta property="og:url" content="https://graphek.de/web-app-vs-native-app/" /><meta property="og:site_name" content="Graphek GmbH | Webdesign &amp; Entwicklung aus Bremen" /><meta property="article:section" content="Allgemein" /><meta property="og:updated_time" content="2026-03-06T11:23:10+01:00" /><meta property="og:image" content="https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp" /><meta property="og:image:secure_url" content="https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp" /><meta property="og:image:width" content="1408" /><meta property="og:image:height" content="768" /><meta property="og:image:alt" content="Web-App" /><meta property="og:image:type" content="image/webp" /><meta property="article:published_time" content="2026-03-06T11:21:03+01:00" /><meta property="article:modified_time" content="2026-03-06T11:23:10+01:00" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Web-App vs. Native App: Der ultimative Vergleich | Graphek" /><meta name="twitter:description" content="Web-App oder Native App? Wir vergleichen Kosten, Performance, Entwicklungszeit und zeigen, wann welche Lösung die richtige Wahl ist." /><meta name="twitter:image" content="https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp" /><meta name="twitter:label1" content="Verfasst von" /><meta name="twitter:data1" content="graphek" /><meta name="twitter:label2" content="Lesedauer" /><meta name="twitter:data2" content="3 Minuten" /> 
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/2026/03/web-app-vs-native-app.webp","url":"https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp","width":"1408","height":"768","inLanguage":"de"},{"@type":"BreadcrumbList","@id":"https://graphek.de/web-app-vs-native-app/#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://graphek.de","name":"Startseite"}},{"@type":"ListItem","position":"2","item":{"@id":"https://graphek.de/category/allgemein/","name":"Allgemein"}},{"@type":"ListItem","position":"3","item":{"@id":"https://graphek.de/web-app-vs-native-app/","name":"Web-App vs. Native App: Welche L\u00f6sung passt zu deinem Projekt?"}}]},{"@type":"WebPage","@id":"https://graphek.de/web-app-vs-native-app/#webpage","url":"https://graphek.de/web-app-vs-native-app/","name":"Web-App vs. Native App: Der ultimative Vergleich |\u00a0Graphek","datePublished":"2026-03-06T11:21:03+01:00","dateModified":"2026-03-06T11:23:10+01:00","isPartOf":{"@id":"https://graphek.de/#website"},"primaryImageOfPage":{"@id":"https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp"},"inLanguage":"de","breadcrumb":{"@id":"https://graphek.de/web-app-vs-native-app/#breadcrumb"}},{"@type":"Person","@id":"https://graphek.de/web-app-vs-native-app/#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":"BlogPosting","headline":"Web-App vs. Native App: Der ultimative Vergleich |\u00a0Graphek","keywords":"Web-App,Native App","datePublished":"2026-03-06T11:21:03+01:00","dateModified":"2026-03-06T11:23:10+01:00","articleSection":"Allgemein","author":{"@id":"https://graphek.de/web-app-vs-native-app/#author","name":"graphek"},"publisher":{"@id":"https://graphek.de/#organization"},"description":"Web-App oder Native App? Wir vergleichen Kosten, Performance, Entwicklungszeit und zeigen, wann welche L\u00f6sung die richtige Wahl ist.","name":"Web-App vs. Native App: Der ultimative Vergleich |\u00a0Graphek","@id":"https://graphek.de/web-app-vs-native-app/#richSnippet","isPartOf":{"@id":"https://graphek.de/web-app-vs-native-app/#webpage"},"image":{"@id":"https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp"},"inLanguage":"de","mainEntityOfPage":{"@id":"https://graphek.de/web-app-vs-native-app/#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/toggle_boxen.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%2Fweb-app-vs-native-app%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%2Fweb-app-vs-native-app%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":"3c44020198"};
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="alternate" title="JSON" type="application/json" href="https://graphek.de/wp-json/wp/v2/posts/7282" /><link rel='shortlink' href='https://graphek.de/?p=7282' /> 
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 post-template-default single single-post postid-7282 single-format-standard 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="light"><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="light"><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><section class="modul blog_single" data-theme="light"><div class="wrap"><aside class="blog_sidebar"><nav class="blog_toc"><h4>Inhalt</h4><ol></ol></nav>
33<a class="button" href="/kontakt">Kontaktiere uns</a></aside><div class="content_area"><div class="post_thumbnail"><img width="1408" height="768" src="https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp" class="attachment-large size-large wp-post-image" alt="" fetchpriority="high" decoding="sync" loading="eager" srcset="https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app.webp 1408w, https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app-900x491.webp 900w, https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app-500x273.webp 500w, https://graphek.de/wp-content/uploads/2026/03/web-app-vs-native-app-1400x764.webp 1400w" sizes="(max-width: 600px) 66vw, (max-width: 1408px) 100vw, 1408px" /></div><h1>Web-App vs. Native App: Welche Lösung passt zu deinem Projekt?</h1><p>Du planst eine App – aber soll es eine Web-App oder eine Native App werden? Diese Entscheidung beeinflusst Budget, Entwicklungszeit und die Nutzererfahrung grundlegend. In diesem Guide vergleichen wir beide Ansätze ehrlich und zeigen dir, wann welche Lösung Sinn macht.</p><p><span id="more-7282"></span></p><h2>Was ist eine Web-App?</h2><p>Eine Web-App ist eine Anwendung, die im Browser läuft – auf jedem Gerät mit Internetzugang. Keine Installation nötig, kein App Store, kein Update-Zwang. Du öffnest eine URL und nutzt die App sofort.</p><p>Technisch basieren moderne Web-Apps auf HTML, CSS und JavaScript. Dabei gibt es verschiedene Architektur- und Feature-Stufen:</p><ul><li><strong>Single Page Application (SPA):</strong> Ein Architekturmuster – die App lädt einmal und rendert Inhalte dynamisch ohne Seitenneuladen. Fühlt sich an wie eine Desktop-App. Beispiele: Gmail, Trello, Notion.</li><li><strong>Progressive Web App (PWA):</strong> Eine SPA mit zusätzlichen Features – installierbar auf dem Homescreen, offline-fähig, Push-Notifications. Die meisten modernen SPAs sind auch PWAs. Beispiele: Twitter, Starbucks, Pinterest.</li></ul><h2>Was ist eine Native App?</h2><p>Eine Native App wird speziell für ein Betriebssystem entwickelt – iOS (Swift/Objective-C) oder Android (Kotlin/Java). Sie wird über den App Store oder Google Play Store installiert und läuft direkt auf dem Gerät.</p><p>Native Apps haben vollen Zugriff auf die Hardware: Kamera, GPS, Sensoren, Bluetooth, Dateisystem. Das ermöglicht Funktionen, die im Browser (noch) nicht oder eingeschränkt möglich sind.</p><h2>Der direkte Vergleich</h2><table><thead><tr><th>
33Kriterium</th><th>Web-App</th><th>Native App</th></tr></thead><tbody><tr><td>Entwicklungskosten</td><td>Niedriger (eine Codebasis)</td><td>Höher (iOS + Android separat)</td></tr><tr><td>Time-to-Market</td><td>Schneller</td><td>Langsamer (+ App Store Review)</td></tr><tr><td>Performance</td><td>Gut bis sehr gut</td><td>Exzellent</td></tr><tr><td>Hardware-Zugriff</td><td>Eingeschränkt (wächst stetig)</td><td>Vollständig</td></tr><tr><td>Offline-Fähigkeit</td><td>Möglich (PWA/Service Worker)</td><td>Standard</td></tr><tr><td>Updates</td><td>Sofort (Server-seitig)</td><td>App Store Review (1-7 Tage)</td></tr><tr><td>Distribution</td><td>URL teilen, SEO-fähig</td><td>App Store Listing nötig</td></tr><tr><td>Wartungskosten</td><td>Niedriger</td><td>Höher (2 Plattformen)</td></tr></tbody></table><h2>Hybrid-Lösungen: Das Beste aus beiden Welten?</h2><p>Zwischen Web-App und Native App gibt es einen Mittelweg: Cross-Platform-Frameworks ermöglichen es, mit einer Codebasis Apps für mehrere Plattformen zu entwickeln.</p><ul><li><strong>React Native:</strong> JavaScript-basiert, kompiliert zu nativen Komponenten. Genutzt von Facebook, Instagram, Airbnb (früher), Discord.</li><li><strong>Flutter:</strong> Googles Framework mit Dart. Eigene Rendering-Engine für konsistentes Design. Genutzt von Google Pay, BMW, eBay.</li><li><strong>Capacitor/Ionic:</strong> Verpackt Web-Apps in native Container. Ideal, wenn du bereits eine Web-App hast und sie in die App Stores bringen willst.</li></ul><p>Die Realität: Hybrid-Lösungen sind ein Kompromiss. Sie erreichen 80-90% der nativen Performance, aber nicht 100%. Für die meisten Business-Apps ist das völlig ausreichend – für grafikintensive Spiele oder AR-Anwendungen eher nicht.</p><h2>Wann ist eine Web-App die richtige Wahl?</h2><p>Eine Web-App ist ideal, wenn:</p><ul><li>Schneller Launch wichtiger ist als maximale Features (<a href="https://graphek.de/minimum-viable-product/">MVP-Strategie</a>)</li><li>Das Budget begrenzt ist und du mit einer Codebasis starten willst</li><li>Nutzer die App über Google finden sollen (SEO-Relevanz)</li><li>Du häufige Updates planst und nicht auf App Store Reviews warten willst</li><li>B2B-Anwendungen: Dashboards, Adminbereiche, interne Tools</li><li>Keine spezielle Hardware-Integration nötig ist (Bluetooth, NFC, etc.)</li></ul><p><strong>Tipp:</strong> Starte mit einer <a href="https://graphek.de/minimum-viable-product/">Progressive Web App (PWA)</a>. Du kannst sie später immer noch mit Capacitor in eine App-Store-App umwandeln.</p><h2>Wann ist eine Native App die richtige Wahl?</h2><p>Eine Native App lohnt sich, wenn:</p><ul><li>Maximale Performance gefragt ist (Spiele, Video-Bearbeitung, AR/VR)</li><li>Du tiefe Hardware-Integration brauchst (Bluetooth LE, NFC, Sensoren)</li><li>Offline-Funktionalität kritisch ist (nicht nur Caching, sondern echte Offline-Arbeit)</li><li>App Store Präsenz wichtig für Marketing/Vertrauen ist</li><li>Komplexe Animationen und Gesten zur User Experience gehören</li><li>Du ein großes Budget und längere Entwicklungszeit einplanen kannst</li></ul><h2>Kostenvergleich: Was kostet die Entwicklung?</h2><p>Die Kosten variieren stark je nach Komplexität, aber hier eine grobe Orientierung:</p><table><thead><tr><th>App-Typ</th><th>Einfache App</th><th>Komplexe App</th></tr></thead><tbody><tr><td>Web-App (PWA)</td><td>10.000 &#8211; 30.000 €</td><td>50.000 &#8211; 150.000 €</td></tr><tr><td>Hybrid (React Native)</td><td>15.000 &#8211; 40.000 €</td><td>60.000 &#8211; 200.000 €</td></tr><tr><td>Native (iOS + Android)</td><td>30.000 &#8211; 80.000 €</td><td>100.000 &#8211; 500.000 €</td></tr></tbody></table><p>Dazu kommen laufende Kosten: Hosting, Wartung, Updates, App Store Gebühren (Apple: 99$/Jahr, Google: 25$ einmalig).</p><h2>Unsere Empfehlung: Der pragmatische Weg</h2><p>Nach hunderten von Projekten haben wir einen klaren Favoriten für die meisten Business-Anwendungen:</p><ol><li><strong>Starte mit einer Web-App/PWA</strong> – validiere deine Idee mit echten Nutzern, ohne riesiges Budget.</li><li><strong>Sammle Feedback</strong> – was brauchen die Nutzer wirklich? Oft weniger als gedacht.</li><li><strong>Skaliere bei Bedarf</strong> – wenn Hardware-Features oder App Store Präsenz nötig werden, kannst du mit Capacitor oder React Native erweitern.</li></ol><p>Dieser Ansatz spart nicht nur Geld, sondern auch Zeit – und du vermeidest, Features zu entwickeln, die niemand braucht.</p><h2>
33Fazit: Es kommt auf dein Projekt an</h2><p>Es gibt keine pauschale Antwort auf &#8222;Web-App oder Native App&#8220;. Die richtige Wahl hängt von deinen Anforderungen ab:</p><ul><li><strong>Budget knapp, schneller Launch?</strong> → Web-App (PWA)</li><li><strong>Beide Plattformen, gute Performance?</strong> → React Native oder Flutter</li><li><strong>Maximale Performance, tiefe Integration?</strong> → Native App</li></ul><p>Was am Ende zählt: Eine App, die deine Nutzer lieben – egal, welche Technologie dahinter steckt.</p><div class="cta_box">
34<span class="icon">🚀</span>
35Du hast eine Idee für eine Web-App oder bist unsicher, welche Technologie die richtige ist? Wir beraten dich ehrlich und entwickeln deine Anwendung – von der Konzeption bis zum Launch.</div><p></p><link rel='stylesheet' property='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_modules/toggle_boxen.min.css?t=1779794401' type='text/css' media='all' /><section data-theme="light" class="modul toggle_boxen  " id="mod_6ac05e8b57dcc"
36data-anchor=""
37><div class="wrap"><h3 class="subtitle text_size_small"></h3><h2 class="title">
38FAQ: Häufige Fragen zu Web-Apps und Native Apps</h2><div class="toggle_boxes"><link rel='stylesheet' href='https://graphek.de/wp-content/themes/graphek4/assets/css_parts/toggle_boxes.min.css?ver=1789037093' type='text/css' media='all' /><div class="partial_toggle_boxes" id="box_6ac05e8b58283"><div class="item reveal" data-delay="0"><div class="box_header cc_interactive"><div class="number">
3901</div><h3 class="title">
40Kann eine Web-App Push-Notifications senden?</h3><button class="plus" aria-label="Zeige Inhalte"></button></div><div class="content"><div class="inner"><p>Ja, über die Web Push API. Technisch sind das Browser-Notifications, die aber auf Android über den OS-Notification-Dienst geroutet werden und sich wie native Notifications anfühlen. Auf iOS ist die Unterstützung seit iOS 16.4 verfügbar, aber nur wenn die PWA auf dem Homescreen installiert ist – und mit einigen Einschränkungen gegenüber nativen Apps.</p></div></div></div><div class="item reveal" data-delay="150"><div class="box_header cc_interactive"><div class="number">
4102</div><h3 class="title">
42Funktionieren Web-Apps offline?</h3><button class="plus" aria-label="Zeige Inhalte"></button></div><div class="content"><div class="inner"><p>Mit Service Workern können PWAs offline funktionieren. Der Umfang hängt von der Implementierung ab – von einfachem Caching bis zur vollständigen Offline-Nutzung.</p></div></div></div><div class="item reveal" data-delay="300"><div class="box_header cc_interactive"><div class="number">
4303</div><h3 class="title">
44Kann ich meine Web-App später in die App Stores bringen?</h3><button class="plus" aria-label="Zeige Inhalte"></button></div><div class="content"><div class="inner"><p>Ja, mit Tools wie Capacitor oder PWA Builder kannst du eine bestehende Web-App in eine App-Store-App umwandeln. Das spart Entwicklungszeit, wenn du beide Welten bedienen willst.</p></div></div></div><div class="item reveal" data-delay="450"><div class="box_header cc_interactive"><div class="number">
4504</div><h3 class="title">
46Was ist der Unterschied zwischen PWA und SPA?</h3><button class="plus" aria-label="Zeige Inhalte"></button></div><div class="content"><div class="inner"><p>Eine SPA (Single Page Application) ist ein Architekturmuster – die App lädt einmal und rendert Inhalte dynamisch. Eine PWA ist eine SPA mit zusätzlichen Features: Offline-Fähigkeit, Installierbarkeit, Push-Notifications. Jede PWA ist eine SPA, aber nicht jede SPA ist eine PWA.</p></div></div></div></div> 
46<script>(() => {
47        // on click on toggle box header add toggle_boxen__item--active class to parent and remove it from all other siblings
48        document.querySelectorAll('#box_6ac05e8b58283 .box_header').forEach((item) => {
49            item.addEventListener('click', (e) => {
50                e.currentTarget.parentNode.classList.toggle('active');
51               //  e.currentTarget.parentNode.parentNode.querySelectorAll('.item').forEach((item) => {
52               //      if(item !== e.currentTarget.parentNode) {
53               //          item.classList.remove('active');
54               //      }
55               //  });
56            });
57        });
58    })();</script>
58 </div></div></section><h2 class="related_title">Ähnliche Beiträge</h2><div class="related_posts">
59<a class="related_post" href="https://graphek.de/minimum-viable-product/"><div class="related_post_thumbnail">
60<img width="900" height="502" src="https://graphek.de/wp-content/uploads/2026/02/minimum-viable-product-900x502.webp" class="attachment-medium size-medium wp-post-image" alt="Minimum Viable Product Hero" decoding="async" srcset="https://graphek.de/wp-content/uploads/2026/02/minimum-viable-product-900x502.webp 900w, https://graphek.de/wp-content/uploads/2026/02/minimum-viable-product-500x279.webp 500w, https://graphek.de/wp-content/uploads/2026/02/minimum-viable-product.webp 1376w" sizes="(max-width: 600px) 66vw, (max-width: 900px) 100vw, 900px" /></div><div class="post_content"><h3>MVP Entwicklung: Minimum Viable Product mit KI-Unterstützung</h3><div class="related_post_excerpt">Du hast eine Idee für ein digitales Produkt, aber weißt nicht, ob sie am Markt&hellip;</div></div>
61</a>
62<a class="related_post" href="https://graphek.de/website-redesign-wann-es-sinnvoll-ist-wie-es-gelingt-2026/"><div class="related_post_thumbnail">
63<img width="900" height="491" src="https://graphek.de/wp-content/uploads/2026/02/website-redesign-900x491.webp" class="attachment-medium size-medium wp-post-image" alt="Website Redesign Hero Image" decoding="async" srcset="https://graphek.de/wp-content/uploads/2026/02/website-redesign-900x491.webp 900w, https://graphek.de/wp-content/uploads/2026/02/website-redesign-500x273.webp 500w, https://graphek.de/wp-content/uploads/2026/02/website-redesign-1400x764.webp 1400w, https://graphek.de/wp-content/uploads/2026/02/website-redesign.webp 1408w" sizes="(max-width: 600px) 66vw, (max-width: 900px) 100vw, 900px" /></div><div class="post_content"><h3>Website Redesign: Wann es sinnvoll ist &#038; wie es gelingt [2026]</h3><div class="related_post_excerpt">Deine Website sieht aus wie 2018? Die Absprungrate steigt, die Conversions sinken – und du&hellip;</div></div>
64</a>
65<a class="related_post" href="https://graphek.de/website-relaunch-checkliste-planung/"><div class="related_post_thumbnail">
66<img width="900" height="502" src="https://graphek.de/wp-content/uploads/2026/02/website-relaunch-900x502.webp" class="attachment-medium size-medium wp-post-image" alt="Website Relaunch Checkliste" decoding="async" srcset="https://graphek.de/wp-content/uploads/2026/02/website-relaunch-900x502.webp 900w, https://graphek.de/wp-content/uploads/2026/02/website-relaunch-500x279.webp 500w, https://graphek.de/wp-content/uploads/2026/02/website-relaunch.webp 1376w" sizes="(max-width: 600px) 66vw, (max-width: 900px) 100vw, 900px" /></div><div class="post_content"><h3>Website Relaunch – Checkliste &#038; Planung</h3><div class="related_post_excerpt">Deine Website ist in die Jahre gekommen, die Technik veraltet, das Design nicht mehr zeitgemäß?&hellip;</div></div>
67</a></div></div></div></section> 
67<script>(function() {
68	const sidebar = document.querySelector('.blog_sidebar');
69	const tocList = document.querySelector('.blog_toc ol');
70	const contentArea = document.querySelector('.content_area');
71	if (!sidebar || !tocList || !contentArea) return;
72
73	function slugify(text) {
74		return text
75			.toLowerCase()
76			.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
77			.replace(/[^a-z0-9\s-]/g, '')
78			.replace(/\s+/g, '-')
79			.replace(/-+/g, '-')
80			.replace(/^-|-$/g, '');
81	}
82
83	// Sammle alle H2 innerhalb content_area, aber nicht .related_title
84	const headings = Array.from(contentArea.querySelectorAll('h2:not(.related_title)'));
85
86	if (headings.length === 0) {
87		sidebar.style.display = 'none';
88		return;
89	}
90
91	// Intro-Eintrag
92	contentArea.id = 'blog_intro';
93	const introLi = document.createElement('li');
94	introLi.innerHTML = '<a href="#blog_intro">Intro</a>';
95	tocList.appendChild(introLi);
96
97	// Slug-Duplikate vermeiden
98	const usedSlugs = {};
99	headings.forEach(function(h2) {
100		let slug = slugify(h2.textContent);
101		if (usedSlugs[slug]) {
102			usedSlugs[slug]++;
103			slug = slug + '-' + usedSlugs[slug];
104		} else {
105			usedSlugs[slug] = 1;
106		}
107		h2.id = slug;
108
109		const li = document.createElement('li');
110		li.innerHTML = '<a href="#' + slug + '">' + h2.textContent.trim() + '</a>';
111		tocList.appendChild(li);
112	});
113
114	// Mobile TOC Select
115	var tocSelect = document.createElement('select');
116	tocSelect.className = 'blog_toc_select';
117
118	var defaultOption = document.createElement('option');
119	defaultOption.value = '#blog_intro';
120	defaultOption.textContent = 'Intro';
121	tocSelect.appendChild(defaultOption);
122
123	headings.forEach(function(h2) {
124		var option = document.createElement('option');
125		option.value = '#' + h2.id;
126		option.textContent = h2.textContent.trim();
127		tocSelect.appendChild(option);
128	});
129
130	var mobileHeaderRight = document.querySelector('#mobile_header .mobile_header_right');
131	if (mobileHeaderRight) mobileHeaderRight.appendChild(tocSelect);
132
133	// Header-Höhe (wird für Klick-Offset und Sticky-Sidebar gebraucht)
134	var headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header_height_fixed'));
135
136	// Scroll-Spy
137	const tocLinks = tocList.querySelectorAll('a');
138
139	function updateActiveLink() {
140		var threshold = window.scrollY + window.innerHeight * 0.25;
141		var activeId = 'blog_intro';
142
143		for (var i = 0; i < headings.length; i++) {
144			if (headings[i].offsetTop <= threshold) {
145				activeId = headings[i].id;
146			} else {
147				break;
148			}
149		}
150
151		tocLinks.forEach(function(link) {
152			link.classList.toggle('active', link.getAttribute('href') === '#' + activeId);
153		});
154
155		tocSelect.value = '#' + activeId;
156	}
157
158	// Bi-directional Sticky Sidebar
159	var topOffset = headerHeight + 30;
160	var stickyTop = topOffset;
161	var lastScrollY = window.scrollY;
162
163	function updateSidebarSticky() {
164		var scrollY = window.scrollY;
165		var delta = scrollY - lastScrollY;
166		var sidebarHeight = sidebar.offsetHeight;
167		var viewportHeight = window.innerHeight;
168		var bottomOffset = viewportHeight - sidebarHeight - 30;
169
170		if (sidebarHeight + topOffset + 30 <= viewportHeight) {
171			sidebar.style.top = topOffset + 'px';
172			lastScrollY = scrollY;
173			return;
174		}
175
176		stickyTop -= delta;
177		stickyTop = Math.max(bottomOffset, Math.min(topOffset, stickyTop));
178		sidebar.style.top = stickyTop + 'px';
179		lastScrollY = scrollY;
180	}
181
182	window.addEventListener('scroll', function() {
183		updateActiveLink();
184		updateSidebarSticky();
185	}, { passive: true });
186	updateActiveLink();
187	updateSidebarSticky();
188
189	// Klick-Scroll mit Offset via Lenis
190	tocList.addEventListener('click', function(e) {
191		var link = e.target.closest('a');
192		if (!link) return;
193		e.preventDefault();
194		var target = document.getElementById(link.getAttribute('href').substring(1));
195		if (!target) return;
196		window.lenis.scrollTo(target, { offset: -(headerHeight + 32) });
197		history.pushState(null, '', link.getAttribute('href'));
198	});
199
200	// Mobile TOC Select: Scroll + Sync
201	tocSelect.addEventListener('change', function() {
202		var target = document.getElementById(tocSelect.value.substring(1));
203		if (!target) return;
204		window.lenis.scrollTo(target, { offset: -(headerHeight + 32) });
205		history.pushState(null, '', tocSelect.value);
206	});
207
208	// Tabellen in scroll-Wrapper packen
209	contentArea.querySelectorAll('table').forEach(function(table) {
210		var wrapper = document.createElement('div');
211		wrapper.className = 'table_scroll';
212		table.parentNode.insertBefore(wrapper, table);
213		wrapper.appendChild(table);
214	});
215})();</script>
215 </main><footer id="main_footer"><div class="footer_intro"><div class="wrap">
216<a href="https://graphek.de" class="footer_logo">
217<img src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_black.svg" width="25" height="38" alt="Graphek Logo Icon" />
218</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>
218<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>
219<span>28197</span> <span>Bremen</span></div></div><div class="contact">
220Tel: <a href="tel:+4942169698983">0421 69 69 89 83</a><br>
221E-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">
222<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" />
223<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">
224© 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">
225<button id="mobile_nav_trigger">
226<span class="show">
227Navigation
228<img width="13" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/menu.svg" alt="Open Menu">
229</span>
230<span class="hide">
231<img width="10" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/close.svg" alt="Close Menu">
232</span>
233</button><div id="mobile_nav"><div class="top_area"><div class="inner">
234<a class="logo" href="https://graphek.de">
235<img width="25" height="38" src="https://graphek.de/wp-content/themes/graphek4/images/logo_small_white.svg" alt="Graphek Logo White" />
236</a>
237<a class="stars_wrapper" target="_blank" href="https://maps.app.goo.gl/SD2jL6JeU14BwNnK6"><div class="partial_stars">
238<span>
2395.0	</span>
240<img class="stars" width="130" height="22" src="https://graphek.de/wp-content/themes/graphek4/images/stars_white.svg" alt="5 Sterne Bewertung" />
241<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">
242<a class="button has_arrow" href="https://graphek.de/kontakt/" id="projektanfrage">
243Kontakt			</a>
244<button class="button has_arrow" id="back_to_main">
245Hauptmenü
246</button></div></div></div> 
246<script>(() => {
247
248	const mobileNav = document.getElementById('mobile_nav');
249	const menuTrigger = document.getElementById('mobile_nav_trigger');
250
251	window.addEventListener('DOMContentLoaded', () => {
252		setTimeout(() => {
253			menuTrigger.classList.add('show');
254		}, 1000);
255	});
256
257	menuTrigger.addEventListener('click', function() {
258		if ( document.body.classList.contains('mobileNavShow') ) {
259			document.body.classList.remove('mobileNavShow');
260			mobileNav.classList.remove('show-expertise');
261			mobileNav.classList.remove('show-main');
262		} else {
263			document.body.classList.add('mobileNavShow');
264		}
265	});
266
267	const expertiseTrigger = document.querySelector('#main_mobile .mega_trigger');
268
269	expertiseTrigger.addEventListener("click", function(e) {
270		e.preventDefault();
271		e.stopPropagation();
272		mobileNav.classList.add('show-expertise');
273		mobileNav.classList.remove('show-main');
274	});
275
276	const backButton = document.querySelector('#back_to_main');
277
278	backButton.addEventListener("click", function(e) {
279		e.preventDefault();
280		e.stopPropagation();
281		mobileNav.classList.remove('show-expertise');
282		mobileNav.classList.add('show-main');
283	});
284
285
286	// Show Nav when page is scrolled down at least xxx of document 
287	// if ( document.body.scrollHeight < 1700 ) {
288	// 	menuTrigger.classList.add('show');
289	// } 
290	// else {
291	// 	window.addEventListener('scroll', () => {
292	// 		if (window.scrollY > 1500 ) {
293	// 			menuTrigger.classList.add('show');
294	// 		} else {
295	// 			menuTrigger.classList.remove('show');
296	// 		}
297	// 	});
298	// }
299
300})();</script>
300<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'" /> 
300<script>window.datenschutz_mail = "[email protected]";
301window.impressum_url = "https:\/\/graphek.de\/impressum\/";
302window.datenschutz_url = "https:\/\/graphek.de\/datenschutzerklaerung\/";
303
304(() => {
305	// DOMContentLoaded also fires when a deferred download failed. Wait for both
306	// actual load events and the DOM; synthetic DOM events must not re-run consent.
307	const domReady = document.readyState === 'loading'
308		? new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, { once: true }))
309		: Promise.resolve();
310
311	function loadConsentScript(url, retry = true) {
312		return new Promise((resolve, reject) => {
313			const script = document.createElement('script');
314			script.src = url;
315			script.onload = resolve;
316			script.onerror = () => {
317				script.remove();
318				// One fresh request recovers transient failures; a permanent failure is
319				// reported below and all consent-managed services remain blocked.
320				if (retry) resolve(loadConsentScript(url + '&retry=1', false));
321				else reject(new Error('Cookie Consent: Script konnte nicht geladen werden: ' + url));
322			};
323			document.head.appendChild(script);
324		});
325	}
326
327	Promise.all([
328		domReady,
329		loadConsentScript("https:\/\/graphek.de\/wp-content\/themes\/graphek4\/partials\/cookieconsent\/cookieconsent.js?ver=1774467326"),
330		loadConsentScript("https:\/\/graphek.de\/wp-content\/themes\/graphek4\/partials\/cookieconsent\/cookieconsent_de.js?ver=1789718939")
331	]).then(() => {
332		if (!window.CookieConsent || typeof window.CookieConsent.run !== 'function' || !window.cc_de) {
333			throw new Error('Cookie Consent: Geladene Scripts stellen Bibliothek oder Übersetzung nicht bereit.');
334		}
335
336	/**
337	 * All config. options available here:
338	 * https://cookieconsent.orestbida.com/reference/configuration-reference.html
339	 */
340	return CookieConsent.run({
341
342		// root: 'body',
343		// autoShow: true,
344		// disablePageInteraction: true,
345		// hideFromBots: true,
346		// mode: 'opt-in',
347			revision: 6,
348
349		cookie: {
350			name: 'cc_cookie',
351			// domain: location.hostname,
352			// path: '/',
353			// sameSite: "Lax",
354			// expiresAfterDays: 365,
355		},
356
357		// https://cookieconsent.orestbida.com/reference/configuration-reference.html#guioptions
358		guiOptions: {
359			consentModal: {
360				layout: 'cloud inline',
361				position: 'bottom center',
362				equalWeightButtons: true,
363				flipButtons: false
364			},
365			preferencesModal: {
366				layout: 'box',
367				equalWeightButtons: true,
368				flipButtons: false
369			}
370		},
371
372		categories: {
373			necessary: {
374				enabled: true,  // this category is enabled by default
375				readOnly: true  // this category cannot be disabled
376			},
377			// Analytics = Umami (self-hosted, analytics.graphek.de) und Google Tag Manager
378			// (sst.graphek.de, GTM-5LHJ5CX6; Google Analytics + Google-Ads-Conversion), wie vor der
379			// Umami-Integration. Umami setzt keine Cookies; die Regeln betreffen Google und Hotjar-Altbestand.
380			analytics: {
381				readOnly: false,
382				autoClear: {
383					cookies: [
384						{
385							name: /^(_hj)/      // regex
386						},
387						{
388							name: /^_ga/,       // regex: match all cookies starting with '_ga'
389						},
390						{
391							name: '_gid',       // string: exact cookie name
392						}
393					]
394				}
395			},
396			openai_ads: {
397				enabled: false,
398				readOnly: false,
399				autoClear: {
400					cookies: [
401						{
402							name: '__oppref'
403						},
404						{
405							name: 'graphek_openai_oppref'
406						}
407					]
408				}
409			},
410			campaign_attribution: {
411				enabled: false,
412				readOnly: false,
413				autoClear: {
414					cookies: [
415						{
416							name: 'graphek_campaign_source'
417						}
418					]
419				}
420			},
421			external: {
422								readOnly: false,
423            autoClear: {
424                cookies: [
425                    {
426                        name: 'calendar.google.com',   // string: exact cookie name
427                    }
428                ]
429            }
430			},
431		},
432
433		language: {
434			default: 'de',
435			translations: {
436				de: cc_de
437			}
438		}
439	});
440
441	}).then(() => {
442	// Cookie-Consent via .cookie_settings Klasse triggern (Für WP Menue)
443	const cookieSettingsButtons = document.querySelectorAll('.cookie_settings');
444   if ( cookieSettingsButtons ) {
445		cookieSettingsButtons.forEach(function(cookieSettingsButton) {
446			cookieSettingsButton.addEventListener('click', function(event) {
447				event.preventDefault();
448				CookieConsent.showPreferences();
449			});
450		});
451   }
452	}).catch(error => {
453		console.error('Cookie Consent konnte nicht initialisiert werden.', error);
454	});
455})();</script>
455 <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>
456<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">
457<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div>
458</button>
459<a class="sidenav_item kontakt" href="https://graphek.de/kontakt/"><div class="left"><div class="icon">
460<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">
461<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div>
462</a>
463<button class="sidenav_item back_to_top"><div class="left"><div class="icon">
464<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">
465<img width="10" height="17" src="https://graphek.de/wp-content/themes/graphek4/images/icon-arrow-chevron-right-black.svg" alt="Arrow" /></div>
466</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>
467<a class="kontakt video_link" href="https://graphek.de/kontakt/">Kontakt</a>
468<a class="referenzen video_link" href="https://graphek.de/referenzen-werbeagentur/">Referenzen</a>
469<a class="agentur video_link" href="https://graphek.de/digitalagentur-bremen/">Über uns</a></div><button id="close_welcome_video">
470<img width="10" height="10" src="https://graphek.de/wp-content/themes/graphek4/images/close.svg" alt="Video schließen">
471</button></div> 
471<script>(() => {
472
473	const  backToTop = document.querySelector('.back_to_top');
474
475	backToTop.addEventListener('click', () => {
476		window.scrollTo({
477			top: 0,
478			behavior: 'smooth'
479		});
480	});
481
482	const triggerWrapper = document.getElementById('sidenav');
483	const trigger = document.getElementById('trigger_welcome');
484	// const triggerClose = document.getElementById('hide_welcome_trigger');
485	const video = document.getElementById('welcome_video');
486	const videoWrapper = document.getElementById('welcome_video_full');
487	const closeButton = document.getElementById('close_welcome_video');
488
489	// Video Buttons & Tags
490	const buttonKontakt = videoWrapper.querySelector('.video_link.kontakt');
491	const buttonReferenzen = videoWrapper.querySelector('.video_link.referenzen');
492	const buttonAgentur = videoWrapper.querySelector('.video_link.agentur');
493	const videoLinks = videoWrapper.querySelectorAll('.video_link');
494
495	// Show Sidenav after scrolling past first viewport
496	let sidenavTicking = false
497	window.addEventListener('scroll', function () {
498		if (sidenavTicking) return
499		sidenavTicking = true
500		requestAnimationFrame(function () {
501			if (window.scrollY > window.innerHeight) {
502				triggerWrapper.classList.remove('hide');
503			} else {
504				triggerWrapper.classList.add('hide');
505			}
506			sidenavTicking = false
507		})
508	}, { passive: true });
509
510	trigger.addEventListener('click', () => {
511		triggerWrapper.classList.add('hide');
512		videoWrapper.classList.add('show');
513		videoLinks.forEach(link => link.classList.remove('active') );
514		video.src = video.dataset.src;
515		video.play();
516		video.addEventListener("timeupdate", (event) => {
517			if ( event.target.currentTime > 5.5 ) {
518				buttonAgentur.classList.add('active');
519			} 
520			if ( event.target.currentTime > 11.5 ) {
521				buttonReferenzen.classList.add('active');
522			} 
523			if ( event.target.currentTime > 18 ) {
524				buttonKontakt.classList.add('active');
525			} 
526		});
527
528	});
529
530	closeButton.addEventListener('click', () => {
531		triggerWrapper.classList.remove('hide');
532		videoWrapper.classList.remove('show');
533		video.pause();
534		video.currentTime = 0;
535	});
536
537})();</script>
537 <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();">
538<img src="https://graphek.de/wp-content/themes/graphek4/images/close_black.svg" alt="Schließen" />
539</button><h3>15-Minuten Speed-Dating mit Alex & Hannes</h3><div class="cookie_activation_notice">
540Bitte akzeptiere die Cookie-Einstellungen für die Gruppe "external", um den Kalender für die Terminbuchung anzuzeigen.<div class="button_wrapper">
541<button class="button cookie_settings">
542Cookie 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>
543</dialog> 
543<script>(() => {
544
545	const dialog = document.querySelector('#modal-speed-dating');
546
547	if ( ! dialog ) {
548		return;
549	}
550
551	function openModal() {
552		const iframe = dialog.querySelector('iframe[data-src]');
553		if (iframe) {
554			iframe.src = iframe.dataset.src;
555			iframe.removeAttribute('data-src');
556		}
557		dialog.showModal();
558	}
559
560	window.addEventListener('hashchange', () => {
561		if (location.hash !== '#modal-speed-dating') return;
562		openModal();
563	});
564
565	dialog.addEventListener('close', () => {
566		history.replaceState(null, '', ' ');
567	});
568
569	if (location.hash === '#modal-speed-dating') {
570		openModal();
571	}
572
573	// Close the dialog when clicking outside of it
574	dialog.addEventListener('click', (event) => {
575		if (event.target === dialog) {
576			dialog.close();
577		}
578	});
579
580	// Cookie-Button: Modal schließen, damit der Consent-Dialog nicht dahinter liegt
581	let reopenAfterConsent = false;
582	const cookieBtn = dialog.querySelector('.cookie_settings');
583	if ( cookieBtn ) {
584		cookieBtn.addEventListener('click', () => {
585			reopenAfterConsent = true;
586			dialog.close();
587		});
588	}
589
590	// Cookie Consent: dynamisch iframe nachladen
591	['cc:onConsent', 'cc:onChange'].forEach(event =>
592		window.addEventListener(event, ({detail}) => {
593
594			if ( detail.cookie.categories.indexOf('external') === -1 ) {
595				return;
596			}
597
598			const target = dialog.querySelector('.termin_modal_iframe_target');
599			if ( ! target ) return;
600
601			const src = target.dataset.src;
602			if ( ! src ) return;
603
604			const iframe = document.createElement('iframe');
605			iframe.src = src;
606			iframe.style.border = '0';
607			iframe.width = '100%';
608			iframe.height = '600';
609			iframe.frameBorder = '0';
610			target.replaceWith(iframe);
611
612			const notice = dialog.querySelector('.cookie_activation_notice');
613			if ( notice ) notice.remove();
614
615			if ( reopenAfterConsent ) {
616				reopenAfterConsent = false;
617				openModal();
618			}
619
620		})
621	);
622
623})();</script>
623 <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();">
624<img src="https://graphek.de/wp-content/themes/graphek4/images/close_black.svg" alt="Schließen" />
625</button><h3>Lass uns kurz über die Wartung deiner WordPress-Website sprechen.</h3><div class="cookie_activation_notice">
626Bitte akzeptiere die Cookie-Einstellungen für die Gruppe "external", um den Kalender für die Terminbuchung anzuzeigen.<div class="button_wrapper">
627<button class="button cookie_settings">
628Cookie 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>
629</dialog> 
629<script>(() => {
630
631	const dialog = document.querySelector('#modal-wp-wartung');
632
633	if ( ! dialog ) {
634		return;
635	}
636
637	function openModal() {
638		const iframe = dialog.querySelector('iframe[data-src]');
639		if (iframe) {
640			iframe.src = iframe.dataset.src;
641			iframe.removeAttribute('data-src');
642		}
643		dialog.showModal();
644	}
645
646	window.addEventListener('hashchange', () => {
647		if (location.hash !== '#modal-wp-wartung') return;
648		openModal();
649	});
650
651	dialog.addEventListener('close', () => {
652		history.replaceState(null, '', ' ');
653	});
654
655	if (location.hash === '#modal-wp-wartung') {
656		openModal();
657	}
658
659	// Close the dialog when clicking outside of it
660	dialog.addEventListener('click', (event) => {
661		if (event.target === dialog) {
662			dialog.close();
663		}
664	});
665
666	// Cookie-Button: Modal schließen, damit der Consent-Dialog nicht dahinter liegt
667	let reopenAfterConsent = false;
668	const cookieBtn = dialog.querySelector('.cookie_settings');
669	if ( cookieBtn ) {
670		cookieBtn.addEventListener('click', () => {
671			reopenAfterConsent = true;
672			dialog.close();
673		});
674	}
675
676	// Cookie Consent: dynamisch iframe nachladen
677	['cc:onConsent', 'cc:onChange'].forEach(event =>
678		window.addEventListener(event, ({detail}) => {
679
680			if ( detail.cookie.categories.indexOf('external') === -1 ) {
681				return;
682			}
683
684			const target = dialog.querySelector('.termin_modal_iframe_target');
685			if ( ! target ) return;
686
687			const src = target.dataset.src;
688			if ( ! src ) return;
689
690			const iframe = document.createElement('iframe');
691			iframe.src = src;
692			iframe.style.border = '0';
693			iframe.width = '100%';
694			iframe.height = '600';
695			iframe.frameBorder = '0';
696			target.replaceWith(iframe);
697
698			const notice = dialog.querySelector('.cookie_activation_notice');
699			if ( notice ) notice.remove();
700
701			if ( reopenAfterConsent ) {
702				reopenAfterConsent = false;
703				openModal();
704			}
705
706		})
707	);
708
709})();</script>
709 
709<script type="text/plain" data-category="analytics" defer
710        src="https://analytics.graphek.de/script.js"
711        data-website-id="2fc111a0-ee4e-4611-b345-9d49cf93ff7c"
712        data-domains="graphek.de,www.graphek.de"></script>
712 
712<script>// Wird die Analytics-Einwilligung widerrufen, nachdem der Tracker geladen wurde, wird die
713        // Seite neu geladen, damit kein initialisierter Tracker im Dokument zurueckbleibt. Umamis
714        // eigener Schalter (localStorage 'umami.disabled') wird bewusst nicht gesetzt: das waere
715        // ein Schreibzugriff ins Endgeraet genau bei jemandem, der gerade abgelehnt hat.
716        ['cc:onConsent', 'cc:onChange'].forEach(function(event) {
717            window.addEventListener(event, function() {
718                if (!window.CookieConsent) return;
719
720                if (CookieConsent.acceptedCategory('analytics')) {
721                    window._umamiConsented = true;
722                } else if (window._umamiConsented && !window._umamiReloadRequested) {
723                    window._umamiReloadRequested = true;
724                    window.location.reload();
725                }
726            });
727        });</script>
727 
727<script>function loadGTM() {
728            if (window._gtmLoaded) return;
729            window._gtmLoaded = true;
730            window.dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
731            var s = document.createElement('script');
732            s.async = true;
733            s.src = 'https://sst.graphek.de/gtm.js?id=GTM-5LHJ5CX6';
734            document.head.appendChild(s);
735        }
736
737        function syncGoogleConsent() {
738            if (typeof window.gtag !== 'function' || !window.CookieConsent) return;
739
740            var analyticsGranted = CookieConsent.acceptedCategory('analytics');
741            gtag('consent', 'update', {
742                analytics_storage: analyticsGranted ? 'granted' : 'denied',
743                ad_storage: 'denied',
744                ad_user_data: 'denied',
745                ad_personalization: 'denied'
746            });
747        }
748
749        ['cc:onConsent', 'cc:onChange'].forEach(function(event) {
750            window.addEventListener(event, function() {
751                syncGoogleConsent();
752                if (CookieConsent.acceptedCategory('analytics')) {
753                    loadGTM();
754                } else if (window._gtmLoaded && !window._gtmReloadRequested) {
755                    window._gtmReloadRequested = true;
756                    window.location.reload();
757                }
758            });
759        });</script>
759 
759<script type="text/plain" data-category="openai_ads" src="https://graphek.de/wp-content/themes/graphek4/partials/openai_ads/openai_ads.min.js"></script>
759 
759<script src="https://graphek.de/wp-content/themes/graphek4/partials/campaign_attribution/campaign_attribution.min.js"></script>
759 
759<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>
759 
759<script type="application/ld+json">{
760    "@context": "https://schema.org",
761    "@type": "FAQPage",
762    "mainEntity": [
763        {
764            "@type": "Question",
765            "name": "Kann eine Web-App Push-Notifications senden?",
766            "acceptedAnswer": {
767                "@type": "Answer",
768                "text": "Ja, über die Web Push API. Technisch sind das Browser-Notifications, die aber auf Android über den OS-Notification-Dienst geroutet werden und sich wie native Notifications anfühlen. Auf iOS ist die Unterstützung seit iOS 16.4 verfügbar, aber nur wenn die PWA auf dem Homescreen installiert ist – und mit einigen Einschränkungen gegenüber nativen Apps.\n"
769            }
770        },
771        {
772            "@type": "Question",
773            "name": "Funktionieren Web-Apps offline?",
774            "acceptedAnswer": {
775                "@type": "Answer",
776                "text": "Mit Service Workern können PWAs offline funktionieren. Der Umfang hängt von der Implementierung ab – von einfachem Caching bis zur vollständigen Offline-Nutzung.\n"
777            }
778        },
779        {
780            "@type": "Question",
781            "name": "Kann ich meine Web-App später in die App Stores bringen?",
782            "acceptedAnswer": {
783                "@type": "Answer",
784                "text": "Ja, mit Tools wie Capacitor oder PWA Builder kannst du eine bestehende Web-App in eine App-Store-App umwandeln. Das spart Entwicklungszeit, wenn du beide Welten bedienen willst.\n"
785            }
786        },
787        {
788            "@type": "Question",
789            "name": "Was ist der Unterschied zwischen PWA und SPA?",
790            "acceptedAnswer": {
791                "@type": "Answer",
792                "text": "Eine SPA (Single Page Application) ist ein Architekturmuster – die App lädt einmal und rendert Inhalte dynamisch. Eine PWA ist eine SPA mit zusätzlichen Features: Offline-Fähigkeit, Installierbarkeit, Push-Notifications. Jede PWA ist eine SPA, aber nicht jede SPA ist eine PWA.\n"
793            }
794        }
795    ]
796}</script>
796 
796<script type="text/javascript">var sbiajaxurl = "https://graphek.de/wp-admin/admin-ajax.php";</script>
796 
796<script id="plugins-js" defer src="https://graphek.de/wp-content/themes/graphek4/assets/js/dist/_plugins.min.js?ver=1779794404"></script>
796 
796<script id="boilerplate-js" defer src="https://graphek.de/wp-content/themes/graphek4/assets/js/dist/_build.min.js?&#038;ver=1779794403"></script>
796 
796<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>
796 </body></html>
797<!-- Page optimized by LiteSpeed Cache @2026-10-03 03:46:51 -->
798
799<!-- Page cached by LiteSpeed Cache 7.9.1 on 2026-10-03 03:46:51 -->

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.