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 & 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&query=53.07517314236527,8.768470197236727","address":{"@type":"PostalAddress","streetAddress":"Am Tabakquartier 50 Loft 6","addressLocality":"Bremen","addressRegion":"Bremen","postalCode":"28197","addressCountry":"Germany"}},{"@type":["LocalBusiness","Organization"],"@id":"https://graphek.de/#organization","name":"Graphek GmbH","url":"https://graphek.de","sameAs":["https://de.linkedin.com/company/graphek-digitalmanufaktur","https://www.instagram.com/digitalmanufaktur/","https://www.google.com/maps/place/?q=place_id:ChIJQT9e4bIpsUcRCNSdyVeKpKM"],"email":"[email protected]","address":{"@type":"PostalAddress","streetAddress":"Am Tabakquartier 50 Loft 6","addressLocality":"Bremen","addressRegion":"Bremen","postalCode":"28197","addressCountry":"Germany"},"logo":{"@type":"ImageObject","@id":"https://graphek.de/#logo","url":"https://graphek.de/wp-content/uploads/2023/10/logo.png","contentUrl":"https://graphek.de/wp-content/uploads/2023/10/logo.png","caption":"Graphek GmbH |\u00a0Webdesign & Entwicklung aus Bremen","inLanguage":"de","width":"1757","height":"1729"},"priceRange":"$$","openingHours":["Mo,Tu,We,Th,Fr 09:00-17:00"],"description":"Graphek ist eine Werbeagentur aus Bremen, spezialisiert auf Webdesign, UI/UX Design und WordPress-Entwicklung. Seit 2013 entwickeln wir individuelle Websites, Online-Shops und Corporate Designs f\u00fcr Unternehmen aller Gr\u00f6\u00dfen \u2014 von der Konzeption bis zum Launch. Unser Fokus liegt auf ma\u00dfgeschneiderten L\u00f6sungen statt Baukasten-Templates.","foundingDate":"2013","location":{"@id":"https://graphek.de/#place"},"image":{"@type":"ImageObject","url":"https://graphek.de/wp-content/uploads/2026/03/DSCF2092-scaled.webp","width":"2560","height":"1707"},"telephone":"+4942169698983"},{"@type":"WebSite","@id":"https://graphek.de/#website","url":"https://graphek.de","name":"Graphek GmbH |\u00a0Webdesign & Entwicklung aus Bremen","alternateName":"Graphek GmbH","publisher":{"@id":"https://graphek.de/#organization"},"inLanguage":"de"},{"@type":"ImageObject","@id":"https://graphek.de/wp-content/uploads/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&d=mm&r=g","url":"https://secure.gravatar.com/avatar/599a59bc23124d11bb63c3f4c9965e7ab67e71b9e0ae4ec9f5fba14379e0fb8e?s=96&d=mm&r=g","caption":"graphek","inLanguage":"de"},"sameAs":["https://graphek.de"],"worksFor":{"@id":"https://graphek.de/#organization"}},{"@type":"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&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 – 30.000 â¬</td><td>50.000 – 150.000 â¬</td></tr><tr><td>Hybrid (React Native)</td><td>15.000 – 40.000 â¬</td><td>60.000 – 200.000 â¬</td></tr><tr><td>Native (iOS + Android)</td><td>30.000 – 80.000 â¬</td><td>100.000 – 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 „Web-App oder Native App“. 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…</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 & wie es gelingt [2026]</h3><div class="related_post_excerpt">Deine Website sieht aus wie 2018? Die Absprungrate steigt, die Conversions sinken â und du…</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 & Planung</h3><div class="related_post_excerpt">Deine Website ist in die Jahre gekommen, die Technik veraltet, das Design nicht mehr zeitgemäÃ?…</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?&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.