{"id":514,"date":"2026-03-20T14:43:19","date_gmt":"2026-03-20T13:43:19","guid":{"rendered":"http:\/\/27digital.local\/?page_id=17"},"modified":"2026-04-04T14:52:57","modified_gmt":"2026-04-04T13:52:57","slug":"webseiten-aus-bonn","status":"publish","type":"page","link":"https:\/\/27-digital.de\/","title":{"rendered":"Webseiten aus Bonn"},"content":{"rendered":"<section id=\"aurora-bg\" class=\"bde-section-514-1024 bde-section\">\n              \n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-514-1025 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-1026 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-pulse-dot-514-1027 bde-pulse-dot\"><div class=\"bde-pulse-dot__ping\"><\/div>\r\n<div class=\"bde-pulse-dot__core\"><\/div><\/div><div class=\"bde-text-514-1028 bde-text\">\nWebdesign aus Bonn\u00a0\n<\/div>\n<\/div><h1 class=\"bde-dual-heading-514-1029 bde-dual-heading\">\n\n\n            <span data-style=\"primary\" class=\"dual-heading--primary  \">Individuelle Webseiten <\/span>\n\n            <span data-style=\"secondary\" class=\"dual-heading--secondary  \">f\u00fcr deine Brand<\/span>\n\n\n\n<\/h1><div class=\"bde-text-514-1030 bde-text\">\nIch baue keien webseiten von der stange, ich baue deine Individuelle webseite die deine Unternehmen optimal Wiederspiegelt\n<\/div>\n<\/div><div class=\"bde-code-block-514-1031 bde-code-block\">\n\n  <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/simplex-noise\/2.4.0\/simplex-noise.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<style>\n    \/* --- VARIABLEN (Nutzen die globalen Schriften der Website) --- *\/\n    :root {\n        --base-blue: #0052FF;\n        --base-lime: #D2FF00;\n        --base-dark: #0A0A0A;\n        --minimal-bg: #F8F9FA;\n        --minimal-text: #111111;\n        --neon-bg: #050510;\n        \n        \/* Schriften - erben automatisch die Breakdance-Styles *\/\n        --font-primary: inherit;\n        --font-heading: inherit;\n        --font-accent: inherit;\n    }\n\n    \/* --- STICKY SCROLL TRACK --- *\/\n    #laptop-scroll-wrapper {\n        position: relative;\n        width: 100%;\n        height: 200vh; \/* Sorgt daf\u00fcr, dass genug Scroll-Weg da ist *\/\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n    }\n\n    \/* --- DER CONTAINER F\u00dcR DEN BLUR-EFFEKT & STICKY --- *\/\n    #laptop-sticky-inner {\n        position: sticky;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100vh;\n        overflow: hidden;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: #000000;\n        --x: -10px;\n        --y: 50%;\n    }\n    \n    \/* Die Wellen SVG (Hintergrund) *\/\n    #laptop-sticky-inner svg.js-svg {\n        position: absolute;\n        top: 0; left: 0;\n        display: block;\n        width: 100%; height: 100%;\n        z-index: 1 !important; \n        pointer-events: none;\n    }\n\n    \/* Der leuchtende Maus-Punkt *\/\n    #laptop-sticky-inner .pointer-dot {\n        position: absolute;\n        top: 0; left: 0;\n        width: 0.5rem; height: 0.5rem;\n        background: #ffffff;\n        border-radius: 50%;\n        transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);\n        will-change: transform;\n        pointer-events: none;\n        z-index: 10000 !important;\n    }\n\n    \/* --- WIDGET STYLING --- *\/\n    #style-mirror-widget {\n        position: relative;\n        z-index: 10; \n        font-family: var(--font-primary);\n        margin: 0;\n        background-color: transparent;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 2rem;\n\n        \/* EXTREM STARKER BLUR & OPACITY NUR F\u00dcR DEN LAPTOP (Startwerte) *\/\n        opacity: 0 !important;\n        filter: blur(50px) !important;\n        transform: translateY(100px) scale(0.85) !important;\n        will-change: opacity, filter, transform;\n        \n        \/* Transition f\u00fcr den weichen \u00dcbergang ab 150px Scroll *\/\n        transition: opacity 0.6s ease-out, filter 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;\n    }\n\n    \/* MOCKUP & VIEWS *\/\n    .mockup-container { width: 100%; max-width: 1200px; position: relative; isolation: isolate; }\n    .mockup-image { width: 100%; height: auto; display: block; position: relative; z-index: 1; pointer-events: none; user-select: none; }\n    .mockup-screen { position: absolute; top: 4.8%; left: 11.4%; width: 77.2%; height: 79%; background-color: var(--base-blue); border-radius: 4px; overflow-y: auto; overflow-x: hidden; z-index: 2; transition: background-color 0.5s ease; box-shadow: inset 0 0 15px rgba(0,0,0,0.3); }\n    .mockup-screen::-webkit-scrollbar { width: 6px; }\n    .mockup-screen::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }\n    .mockup-screen::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }\n\n    \/* STIL-W\u00c4HLER *\/\n    .style-selector-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; pointer-events: none; }\n    .style-selector-title { color: white; font-family: var(--font-heading); font-weight: 900; letter-spacing: 4px; font-size: 20px; text-shadow: 0 4px 20px rgba(0,0,0,0.8); background: rgba(0, 0, 0, 0.6); padding: 10px 30px; border-radius: 50px; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); text-transform: uppercase; pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }\n    .master-switch { position: relative; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(15px); padding: 10px; border-radius: 50px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 15px 40px rgba(0,0,0,0.5); pointer-events: auto; animation: pulse-switch 2s infinite; }\n    @keyframes pulse-switch { 0% { transform: scale(1); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.3); } 50% { transform: scale(1.02); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 15px rgba(255,255,255,0); } 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0); } }\n\n    \/* KLICK HINWEIS *\/\n    .click-hint { position: absolute; right: -70px; bottom: -60px; display: flex; flex-direction: column; align-items: center; animation: float-hint 2s infinite ease-in-out; pointer-events: none; z-index: 1000; }\n    .click-text { font-family: var(--font-primary); color: var(--base-lime); font-weight: 900; font-size: 15px; text-transform: uppercase; transform: rotate(-12deg); text-shadow: 0 4px 12px rgba(0,0,0,0.8); margin-bottom: -5px; }\n    .click-arrow { width: 45px; transform: rotate(-5deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); }\n    @keyframes float-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\n\n    .switch-btn { padding: 12px 28px; border-radius: 40px; font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.3s ease; color: rgba(255,255,255,0.6); border: none; background: transparent; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-primary); }\n    .switch-btn:hover { color: white; }\n    .switch-btn.active { background: white; color: black; box-shadow: 0 4px 15px rgba(255,255,255,0.3); }\n\n    \/* VIEWS *\/\n    .page-container { position: relative; width: 100%; min-height: 100%; overflow: hidden; }\n    .view { display: none; width: 100%; min-height: 100%; animation: fadeIn 0.4s ease-out forwards; }\n    .view.active { display: block; }\n    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n    \/* WEB3 STYLE *\/\n    .web3-view { background-color: var(--base-blue); background-image: linear-gradient(rgba(255,255,255,0.1) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255,255,255,0.1) 1.5px, transparent 1.5px); background-size: 60px 60px; color: white; padding-bottom: 0; min-height: 100%; font-family: var(--font-primary); }\n    .web3-logo-group { display: flex; gap: 4px; font-family: var(--font-heading); }\n    .logo-base { background: white; color: black; padding: 4px 12px; font-weight: 900; border-radius: 12px 2px 2px 12px; font-size: 18px; letter-spacing: -0.5px; }\n    .logo-club { background: var(--base-lime); color: black; padding: 4px 12px; font-weight: 900; border-radius: 2px 12px 12px 2px; font-size: 18px; }\n    .nav-pill { border: 1.5px solid rgba(255,255,255,0.3); border-radius: 50px; padding: 6px 16px; font-size: 14px; transition: 0.2s; color: white; text-decoration: none;}\n    .nav-pill:hover { background: rgba(255,255,255,0.1); }\n    .outline-text { font-family: var(--font-heading); color: transparent; -webkit-text-stroke: 2px white; font-weight: 900; text-transform: uppercase; font-size: clamp(4rem, 10vw, 8rem); line-height: 0.9; letter-spacing: -2px; margin: 0; }\n    .lime-text { color: var(--base-lime); text-shadow: 10px 10px 0px rgba(0,0,0,0.2); -webkit-text-stroke: 0; }\n    .glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; padding: 30px; width: 260px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: absolute; }\n    .card-eth-1 { top: 35%; left: 15%; transform: rotate(-12deg); }\n    .card-eth-2 { top: 25%; right: 15%; transform: rotate(8deg); }\n    .avatar-circle { width: 80px; height: 80px; border-radius: 50%; background: #D9D9D9; margin: 0 auto 15px; border: 4px solid rgba(255,255,255,0.2); overflow: hidden; }\n    .drawing-arrow { position: absolute; width: 120px; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2)); }\n    .rotating-badge { position: absolute; right: 10%; bottom: 15%; width: 140px; height: 140px; background: var(--base-lime); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: rotate 10s linear infinite; }\n    @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .bottom-shelf { background: white; border-radius: 60px 60px 0 0; padding: 40px; margin-top: 150px; }\n    .shelf-item { background: #F4F4F4; border-radius: 24px; padding: 40px; text-align: center; font-weight: 800; font-size: 20px; color: black; height: 160px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-family: var(--font-heading); }\n\n    \/* ECO STYLE *\/\n    .eco-view { background: url('https:\/\/images.unsplash.com\/photo-1466611653911-95282fc365d5?q=80&w=2070&auto=format&fit=crop') no-repeat center center; background-size: cover; position: relative; min-height: 100%; font-family: var(--font-primary); }\n    .eco-overlay { background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.7)); min-height: 100%; height: 100%; width: 100%; display: flex; flex-direction: column; padding: 40px 6%; }\n    .eco-h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; line-height: 1.1; color: white; max-width: 800px; margin-top: auto; margin-bottom: 20px; }\n    .eco-subtext { color: rgba(255,255,255,0.8); font-size: 18px; max-width: 600px; margin-bottom: 40px; line-height: 1.5; }\n    .eco-cta-group { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }\n    .eco-btn { background: #E1FF8D; color: black; padding: 16px 30px; border-radius: 50px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; transition: transform 0.2s; border: none; cursor: pointer;}\n    .eco-btn:hover { transform: scale(1.05); }\n    .arrow-box { background: #E1FF8D; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n    .carousel-btn { background: rgba(0,0,0,0.5); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;}\n    .avatar-stack { display: flex; align-items: center; }\n    .stack-img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid white; margin-left: -15px; object-fit: cover; }\n    .stack-img:first-child { margin-left: 0; }\n    .team-count { margin-left: 15px; color: white; font-size: 15px; }\n\n    \/* MINIMAL STYLE *\/\n    .minimal-view { background-color: var(--minimal-bg); color: var(--minimal-text); min-height: 100%; font-family: var(--font-primary); }\n    .minimal-nav a { position: relative; color: var(--minimal-text); text-decoration: none;}\n    .minimal-nav a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 0; background-color: var(--minimal-text); transition: width 0.3s; }\n    .minimal-nav a:hover::after { width: 100%; }\n    .minimal-h1 { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -1px; margin: 0; }\n    \n    \/* NEON STYLE *\/\n    .neon-view { background-color: var(--neon-bg); background-image: radial-gradient(circle at 15% 50%, rgba(120, 0, 255, 0.15) 0%, transparent 40%), radial-gradient(circle at 85% 30%, rgba(255, 0, 128, 0.15) 0%, transparent 40%); color: white; position: relative; min-height: 100%; font-family: var(--font-primary); }\n    .neon-font { font-family: var(--font-accent); }\n    .neon-h1 { font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; text-shadow: 0 0 30px rgba(255, 0, 128, 0.4); line-height: 1.1; margin: 0; }\n    .neon-btn { background: linear-gradient(90deg, #FF0080, #7800FF); box-shadow: 0 0 20px rgba(255, 0, 128, 0.4); transition: all 0.3s; border: none; cursor: pointer; color: white;}\n    .neon-btn:hover { box-shadow: 0 0 30px rgba(255, 0, 128, 0.7); transform: translateY(-2px); }\n    .grid-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; }\n\n    \/* MOBILE RESPONSIVE *\/\n    @media (max-width: 850px) {\n        #style-mirror-widget { padding: 1rem 0; }\n        .mockup-screen { border-radius: 2px; }\n        .style-selector-wrapper { transform: translate(-50%, -50%) scale(0.65); }\n        .click-hint { right: -20px; bottom: -70px; }\n        .bottom-shelf { padding: 20px 15px; margin-top: 30px; border-radius: 30px 30px 0 0; }\n        .shelf-item { height: auto; padding: 15px; font-size: 14px; }\n        .eco-overlay { padding: 20px 5%; }\n        .eco-h1 { margin-top: 20px; }\n        .outline-text { font-size: clamp(3rem, 12vw, 8rem); }\n    }\n<\/style>\n\n<div id=\"laptop-scroll-wrapper\">\n    <div id=\"laptop-sticky-inner\">\n        \n        <div id=\"style-mirror-widget\">\n            <div class=\"mockup-container\">\n                \n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/screen.svg\" alt=\"Laptop Frame\" class=\"mockup-image\">\n                \n                <div class=\"style-selector-wrapper\">\n                    <div class=\"style-selector-title\">W\u00e4hle deinen Stil<\/div>\n                    <div class=\"master-switch\">\n                        <button class=\"switch-btn active\" onclick=\"switchStyle('web3', this)\">KREATIV<\/button>\n                        <button class=\"switch-btn\" onclick=\"switchStyle('eco', this)\">ECO<\/button>\n                        <button class=\"switch-btn\" onclick=\"switchStyle('minimal', this)\">MINIMAL<\/button>\n                        <button class=\"switch-btn\" onclick=\"switchStyle('neon', this)\">NEON<\/button>\n                        \n                        <div class=\"click-hint\">\n                            <span class=\"click-text\">Klick hier!<\/span>\n                            <svg width=\"40\" height=\"40\" viewBox=\"0 0 100 100\" fill=\"none\" class=\"click-arrow\">\n                                <path d=\"M 80,90 Q 60,30 20,20\" stroke=\"#D2FF00\" stroke-width=\"6\" stroke-linecap=\"round\"\/>\n                                <path d=\"M 40,20 L 20,20 L 20,40\" stroke=\"#D2FF00\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mockup-screen\" id=\"main-screen\">\n                    <div class=\"page-container\">\n                        \n                        <div id=\"web3\" class=\"view web3-view active\">\n                            <nav class=\"flex justify-between items-center p-4 md:p-8\">\n                                <div class=\"web3-logo-group\"><div class=\"logo-base\">BASE<\/div><div class=\"logo-club\">CLUB<\/div><\/div>\n                                <div class=\"hidden lg:flex gap-4\">\n                                    <div class=\"nav-pill\">\u00dcber den Club<\/div>\n                                    <div class=\"nav-pill\">Meine Stats<\/div>\n                                    <div class=\"nav-pill\">Tokenomics<\/div>\n                                <\/div>\n                                <button class=\"nav-pill px-8 border-white hidden md:block border bg-transparent\">Logo Club<\/button>\n                            <\/nav>\n\n                            <div class=\"relative min-h-[300px] md:min-h-[500px] flex flex-col items-center justify-center overflow-hidden mt-4 md:mt-10\">\n                                <svg class=\"drawing-arrow top-1\/4 left-[10%]\" viewBox=\"0 0 100 100\" fill=\"none\"><path d=\"M20 80 Q 50 10 90 40\" stroke=\"#D2FF00\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M80 30 L 92 40 L 80 50\" stroke=\"#D2FF00\" stroke-width=\"4\" stroke-linecap=\"round\"\/><\/svg>\n                                <svg class=\"drawing-arrow bottom-[10%] left-[10%] scale-x-[-1]\" viewBox=\"0 0 100 100\" fill=\"none\"><path d=\"M20 80 Q 50 10 90 40\" stroke=\"#D2FF00\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M80 30 L 92 40 L 80 50\" stroke=\"#D2FF00\" stroke-width=\"4\" stroke-linecap=\"round\"\/><\/svg>\n\n                                <div class=\"glass-card card-eth-1 hidden md:block\"><div class=\"avatar-circle\"><img decoding=\"async\" src=\"https:\/\/api.dicebear.com\/7.x\/pixel-art\/svg?seed=Base\" alt=\"Avatar\"><\/div><div class=\"text-center\"><div class=\"font-bold text-xl\">baseclub.eth<\/div><div class=\"text-sm opacity-70\">23.422 Punkte<\/div><\/div><\/div>\n                                <div class=\"glass-card card-eth-2 hidden md:block\"><div class=\"avatar-circle\"><img decoding=\"async\" src=\"https:\/\/api.dicebear.com\/7.x\/pixel-art\/svg?seed=Pearl\" alt=\"Avatar\"><\/div><div class=\"text-center\"><div class=\"font-bold text-xl\">pearl.eth<\/div><div class=\"text-sm opacity-70\">293.582 Punkte<\/div><\/div><\/div>\n\n                                <div class=\"relative z-0 text-center\">\n                                    <div class=\"outline-text lime-text\">#CLUB<\/div><div class=\"outline-text\">SOCIAL FI<\/div><div class=\"outline-text\">LEUTE<\/div>\n                                <\/div>\n\n                                <div class=\"rotating-badge\">\n                                    <svg viewBox=\"0 0 100 100\" class=\"w-full h-full p-2\">\n                                        <path id=\"circlePath\" d=\"M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0\" fill=\"none\" \/>\n                                        <text font-size=\"11.5\" font-weight=\"900\" fill=\"black\"><textPath href=\"#circlePath\">KOSTENLOS STARTEN \u2022 KOSTENLOS STARTEN \u2022 <\/textPath><\/text>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                            <div class=\"bottom-shelf\"><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 max-w-6xl mx-auto\"><div class=\"shelf-item\">Abonnieren<\/div><div class=\"shelf-item\">Level W\u00e4hlen<\/div><div class=\"shelf-item\">$Club Staken<\/div><\/div><\/div>\n                        <\/div>\n\n                        <div id=\"eco\" class=\"view eco-view\">\n                            <div class=\"eco-overlay\">\n                                <nav class=\"flex justify-between items-center mb-4 md:mb-10 pt-4 md:pt-8\">\n                                    <div class=\"text-2xl font-bold text-white tracking-tight\">Eco<span class=\"font-normal opacity-70\">L\u00f6sungen<\/span><\/div>\n                                <\/nav>\n                                <div class=\"eco-h1\">Nachhaltige L\u00f6sungen f\u00fcr eine bessere Zukunft<\/div>\n                                <p class=\"eco-subtext\">Wir unterst\u00fctzen Unternehmen und Gemeinden dabei, in einer kohlenstoffarmen Welt mit ma\u00dfgeschneiderten, sauberen Energiel\u00f6sungen erfolgreich zu sein.<\/p>\n                                <div class=\"flex flex-wrap items-center gap-4 md:gap-8 pb-4 md:pb-10\">\n                                    <div class=\"eco-cta-group !mb-0\"><button class=\"eco-btn\">Projekt starten<\/button><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"minimal\" class=\"view minimal-view\">\n                            <nav class=\"flex justify-between items-center p-4 md:p-8 max-w-6xl mx-auto w-full minimal-nav\">\n                                <div class=\"text-3xl font-serif tracking-widest font-bold\" style=\"font-family: var(--font-heading);\">AURA<\/div>\n                            <\/nav>\n                            <div class=\"flex flex-col md:flex-row max-w-6xl mx-auto px-4 md:px-8 py-6 md:py-10 items-center gap-6 lg:gap-24 min-h-[350px] md:min-h-[600px] h-auto\">\n                                <div class=\"flex-1 space-y-4 md:space-y-8 z-10\">\n                                    <p class=\"text-xs font-bold uppercase tracking-[0.3em] text-gray-500 m-0\">Neue Ankunft<\/p>\n                                    <div class=\"minimal-h1 leading-tight text-gray-900\">Zeitlose<br>Eleganz.<\/div>\n                                    <p class=\"text-base md:text-lg text-gray-600 max-w-md leading-relaxed\">Entdecke die neue Herbstkollektion. Minimalistisches Design trifft auf nachhaltige Materialien f\u00fcr deinen bewussten Alltag.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"neon\" class=\"view neon-view\">\n                            <div class=\"grid-overlay\"><\/div>\n                            <nav class=\"flex justify-between items-center p-4 md:p-8 border-b border-white\/10 relative z-10\">\n                                <div class=\"text-3xl font-bold neon-font text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500 tracking-wider\">NEXUS<\/div>\n                            <\/nav>\n                            <div class=\"flex flex-col items-center justify-center min-h-[400px] md:min-h-[600px] py-8 md:py-16 text-center px-4 relative\">\n                                <span class=\"text-pink-500 font-bold tracking-[0.5em] uppercase mb-4 md:mb-6 text-sm z-10 block\">Saison 4 ist live<\/span>\n                                <div class=\"neon-h1 neon-font z-10 mb-4 md:mb-8\">Betrete die<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500\">virtuelle Arena<\/span><\/div>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ --- 1. GLOBALE FUNKTION F\u00dcR DEN WIDGET-SWITCHER ---\n    window.switchStyle = function(styleId, btn) {\n        document.querySelectorAll('.switch-btn').forEach(function(b) { b.classList.remove('active'); });\n        btn.classList.add('active');\n\n        document.querySelectorAll('.view').forEach(function(v) { v.classList.remove('active'); });\n        document.getElementById(styleId).classList.add('active');\n\n        var bgColors = {\n            'web3': '#0052FF',\n            'eco': '#0A0A0A',\n            'minimal': '#F8F9FA',\n            'neon': '#050510'\n        };\n        document.getElementById('main-screen').style.backgroundColor = bgColors[styleId] || '#1a1a1a';\n    };\n\n    \/\/ --- 2. DIE HAUPT-INITIALISIERUNG ---\n    function initEverything() {\n        \n        \/\/ A) BULLETPROOF SCROLL-ANIMATION (Blendet erst nach 150px Scroll ein)\n        function runScrollAnimation() {\n            var wrapper = document.getElementById('laptop-scroll-wrapper');\n            var widget = document.getElementById('style-mirror-widget'); \n            \n            if (wrapper && widget) {\n                var rect = wrapper.getBoundingClientRect();\n                \n                if (rect.top > -150) {\n                    \/\/ Versteckt: Solange noch keine 150px im Container gescrollt wurden\n                    widget.style.setProperty('opacity', '0', 'important');\n                    widget.style.setProperty('filter', 'blur(50px)', 'important');\n                    widget.style.setProperty('transform', 'translateY(100px) scale(0.85)', 'important');\n                } else {\n                    \/\/ Sichtbar: Nach 150px Scrollweg im Container\n                    widget.style.setProperty('opacity', '1', 'important');\n                    widget.style.setProperty('filter', 'blur(0px)', 'important');\n                    widget.style.setProperty('transform', 'translateY(0px) scale(1)', 'important');\n                }\n            }\n\n            requestAnimationFrame(runScrollAnimation);\n        }\n        \n        runScrollAnimation();\n\n\n        \/\/ B) WELLEN INITIALISIEREN\n        var waveContainer = document.getElementById('laptop-sticky-inner');\n        if (!waveContainer) return;\n\n        function startWaves() {\n            if (typeof SimplexNoise === 'undefined') {\n                setTimeout(startWaves, 50);\n                return;\n            }\n\n            var svg = waveContainer.querySelector('svg.js-svg');\n            if (!svg) {\n                svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\n                svg.classList.add('js-svg');\n                waveContainer.insertBefore(svg, waveContainer.firstChild); \n            }\n            var pointer = waveContainer.querySelector('.pointer-dot');\n            if (!pointer) {\n                pointer = document.createElement('div');\n                pointer.classList.add('pointer-dot');\n                waveContainer.appendChild(pointer);\n            }\n\n            var simplex = new SimplexNoise();\n            var noise2D = simplex.noise2D.bind(simplex);\n            var strokeColor = \"#3D5AFE22\"; \n            \n            var mouse = { x: -10, y: 0, lx: 0, ly: 0, sx: 0, sy: 0, v: 0, vs: 0, a: 0, set: false };\n            var paths = []; var lines = []; var raf; var bounding;\n\n            function setSize() {\n                bounding = waveContainer.getBoundingClientRect();\n                svg.style.width = bounding.width + 'px';\n                svg.style.height = bounding.height + 'px';\n            }\n\n            function setLines() {\n                if (!bounding) return;\n                var width = bounding.width; var height = bounding.height;\n                lines = [];\n                paths.forEach(function(path) { path.remove(); }); paths = [];\n                \n                var xGap = 8; var yGap = 8;\n                var oWidth = width + 200; var oHeight = height + 30;\n                var totalLines = Math.ceil(oWidth \/ xGap);\n                var totalPoints = Math.ceil(oHeight \/ yGap);\n                var xStart = (width - xGap * totalLines) \/ 2;\n                var yStart = (height - yGap * totalPoints) \/ 2;\n\n                for (var i = 0; i < totalLines; i++) {\n                    var points = [];\n                    for (var j = 0; j < totalPoints; j++) {\n                        points.push({ x: xStart + xGap * i, y: yStart + yGap * j, wave: { x: 0, y: 0 }, cursor: { x: 0, y: 0, vx: 0, vy: 0 } });\n                    }\n                    var path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n                    path.setAttribute('fill', 'none'); \n                    path.setAttribute('stroke', strokeColor); \n                    path.setAttribute('stroke-width', '1');\n                    svg.appendChild(path); paths.push(path); lines.push(points);\n                }\n            }\n\n            function updateMousePosition(clientX, clientY) {\n                if (!bounding) return;\n                mouse.x = clientX - bounding.left; mouse.y = clientY - bounding.top;\n                if (!mouse.set) { mouse.sx = mouse.x; mouse.sy = mouse.y; mouse.lx = mouse.x; mouse.ly = mouse.y; mouse.set = true; }\n            }\n\n            function movePoints(time) {\n                lines.forEach(function(points) {\n                    points.forEach(function(p) {\n                        var move = noise2D((p.x + time * 0.008) * 0.003, (p.y + time * 0.003) * 0.002) * 8;\n                        p.wave.x = Math.cos(move) * 12; p.wave.y = Math.sin(move) * 6;\n                        var dx = p.x - mouse.sx; var dy = p.y - mouse.sy;\n                        var d = Math.hypot(dx, dy); var l = Math.max(175, mouse.vs);\n                        if (d < l) {\n                            var s = 1 - d \/ l; var f = Math.cos(d * 0.001) * s;\n                            p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00035;\n                            p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00035;\n                        }\n                        p.cursor.vx += (0 - p.cursor.x) * 0.01; p.cursor.vy += (0 - p.cursor.y) * 0.01;\n                        p.cursor.vx *= 0.95; p.cursor.vy *= 0.95;\n                        p.cursor.x += p.cursor.vx; p.cursor.y += p.cursor.vy;\n                        p.cursor.x = Math.min(50, Math.max(-50, p.cursor.x)); p.cursor.y = Math.min(50, Math.max(-50, p.cursor.y));\n                    });\n                });\n            }\n\n            function moved(point, withCursorForce) {\n                if (withCursorForce === undefined) { withCursorForce = true; }\n                return { x: point.x + point.wave.x + (withCursorForce ? point.cursor.x : 0), y: point.y + point.wave.y + (withCursorForce ? point.cursor.y : 0) };\n            }\n\n            function drawLines() {\n                lines.forEach(function(points, lIndex) {\n                    if (points.length < 2 || !paths[lIndex]) return;\n                    var firstPoint = moved(points[0], false);\n                    var d = \"M \" + firstPoint.x + \" \" + firstPoint.y;\n                    for (var i = 1; i < points.length; i++) {\n                        var current = moved(points[i], true);\n                        d += \" L \" + current.x + \" \" + current.y;\n                    }\n                    paths[lIndex].setAttribute('d', d);\n                });\n            }\n\n            function tick(time) {\n                mouse.sx += (mouse.x - mouse.sx) * 0.1; mouse.sy += (mouse.y - mouse.sy) * 0.1;\n                var dx = mouse.x - mouse.lx; var dy = mouse.y - mouse.ly; var d = Math.hypot(dx, dy);\n                mouse.v = d; mouse.vs += (d - mouse.vs) * 0.1; mouse.vs = Math.min(100, mouse.vs);\n                mouse.lx = mouse.x; mouse.ly = mouse.y; mouse.a = Math.atan2(dy, dx);\n                \n                waveContainer.style.setProperty('--x', mouse.sx + 'px');\n                waveContainer.style.setProperty('--y', mouse.sy + 'px');\n                \n                movePoints(time); drawLines();\n                raf = requestAnimationFrame(tick);\n            }\n\n            setSize(); setLines();\n\n            if('ResizeObserver' in window) {\n                var ro = new ResizeObserver(function() { setSize(); setLines(); });\n                ro.observe(waveContainer);\n            } else {\n                window.addEventListener('resize', function() { setSize(); setLines(); });\n            }\n            \n            window.addEventListener('mousemove', function(e) { updateMousePosition(e.clientX, e.clientY); });\n            waveContainer.addEventListener('touchmove', function(e) {\n                if(e.touches.length > 0) updateMousePosition(e.touches[0].clientX, e.touches[0].clientY);\n            }, { passive: true });\n\n            raf = requestAnimationFrame(tick);\n        }\n        \n        startWaves();\n    }\n\n    \/\/ --- 3. ROBUSTER START ---\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initEverything);\n    } else {\n        setTimeout(initEverything, 50);\n    }\n})();\n<\/script>\n\n\n<\/div><div class=\"bde-lottie-animation-514-1035 bde-lottie-animation\"><\/div><\/div>\n<\/section><section class=\"bde-section-514-613 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-514-612 bde-code-block\">\n\n  <style>\n  .mq-wrap {\n    overflow: hidden;\n    padding: 20px 0;\n    border-top: 1px solid rgba(255,255,255,0.08);\n    border-bottom: 1px solid rgba(255,255,255,0.08);\n    width: 100%;\n  }\n\n  .mq-track {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    animation: mq-scroll 35s linear infinite;\n  }\n\n  .mq-wrap:hover .mq-track {\n    animation-play-state: paused;\n  }\n\n  .mq-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 24px;\n    padding: 0 24px;\n    font-size: 14px;\n    letter-spacing: 0.35em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.35);\n    font-family: sans-serif;\n    font-weight: 500;\n  }\n\n  .mq-dot {\n    display: inline-block;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: #3d5afe;\n    flex-shrink: 0;\n  }\n\n  @keyframes mq-scroll {\n    from { transform: translateX(0); }\n    to   { transform: translateX(-50%); }\n  }\n<\/style>\n\n<div class=\"mq-wrap\">\n  <div class=\"mq-track\">\n\n    <span class=\"mq-item\">Webdesign <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Branding <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">UI \/ UX <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Visual Identity <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">User Experience <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Conversion Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Motion Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Design Systems <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Interaction Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Typografie <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Brand Strategy <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Responsive Design <span class=\"mq-dot\"><\/span><\/span>\n\n    <!-- Duplikat f\u00fcr nahtlose Schleife -->\n    <span class=\"mq-item\">Webdesign <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Branding <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">UI \/ UX <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Visual Identity <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">User Experience <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Conversion Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Motion Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Design Systems <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Interaction Design <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Typografie <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Brand Strategy <span class=\"mq-dot\"><\/span><\/span>\n    <span class=\"mq-item\">Responsive Design <span class=\"mq-dot\"><\/span><\/span>\n\n  <\/div>\n<\/div>\n\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-610 bde-section\">\n              \n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-dual-heading-514-611 bde-dual-heading\">\n\n\n            <span data-style=\"primary\" class=\"dual-heading--primary  \">Digitales<\/span>\n\n            <span data-style=\"secondary\" class=\"dual-heading--secondary  \">Storytelling<\/span>\n\n\n\n<\/h2><div class=\"bde-code-block-514-616 bde-code-block\">\n\n  <div class=\"scroll-card-wrapper\">\n  <div class=\"scroll-card-inner\">\n    <div class=\"scroll-card\" id=\"scrollCard\">\n      <div class=\"scroll-card-content\">\n        <img decoding=\"async\" src=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test.webp\" alt=\"Website Vorschau\" id=\"scrollImg\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.scroll-card-wrapper {\n  \/* Full-Bleed: bricht aus dem Breakdance-Container aus \u2192 echte Zentrierung *\/\n  width: 100vw;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n\n  padding: clamp(3rem, 8vw, 10rem) 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n}\n\n.scroll-card-inner {\n  width: min(90vw, 1440px);\n  perspective: clamp(500px, 60vw, 900px);\n}\n\n.scroll-card {\n  background: #1a1a1a;\n  border: clamp(4px, 0.6vw, 10px) solid #333;\n  border-radius: clamp(12px, 2vw, 30px);\n  padding: clamp(0.3rem, 0.7vw, 1rem);\n  box-shadow: 0 30px 80px rgba(0,0,0,0.6);\n  transform: scale(1.5) rotateX(30deg);\n  transform-origin: center top;\n  will-change: transform;\n}\n\n.scroll-card-content {\n  width: 100%;\n  aspect-ratio: 16 \/ 10;\n  overflow: hidden;\n  border-radius: clamp(6px, 1.2vw, 16px);\n  background: #000;\n  position: relative;\n}\n\n#scrollImg {\n  width: 100%;\n  height: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  will-change: transform;\n  transform: translateY(0px);\n  display: block;\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const card = document.getElementById('scrollCard');\n  const img  = document.getElementById('scrollImg');\n  if (!card || !img) return;\n\n  \/\/ Responsiver Startwert f\u00fcr den Scale-Effekt\n  function getInitialScale() {\n    const w = window.innerWidth;\n    if (w >= 1200) return 1.5;\n    if (w >= 768)  return 1.3;\n    return 1.1;\n  }\n\n  let initialScale = getInitialScale();\n  let ticking = false;\n\n  function updateAnimation() {\n    const rect = card.getBoundingClientRect();\n    const winH = window.innerHeight;\n\n    \/\/ \u2500\u2500 1. TILT + SCALE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    const tiltStart    = winH;\n    const tiltEnd      = winH * 0.25;\n    const tiltProgress = Math.max(0, Math.min(1,\n      (tiltStart - rect.top) \/ (tiltStart - tiltEnd)\n    ));\n\n    const tilt  = 30 * (1 - tiltProgress);\n    const scale = initialScale - ((initialScale - 1) * tiltProgress); \/\/ z.B. 1.5 \u2192 1.0\n\n    card.style.transform = `scale(${scale.toFixed(3)}) rotateX(${tilt.toFixed(2)}deg)`;\n\n    \/\/ \u2500\u2500 2. BILD-PAN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    const panStart    = winH;\n    const panEnd      = -rect.height;\n    const panProgress = Math.max(0, Math.min(1,\n      (panStart - rect.top) \/ (panStart - panEnd)\n    ));\n\n    const contentEl = card.querySelector('.scroll-card-content');\n    const maxPan    = img.offsetHeight - contentEl.offsetHeight;\n    const pan       = -(panProgress * Math.max(0, maxPan));\n\n    img.style.transform = `translateY(${pan.toFixed(1)}px)`;\n    ticking = false;\n  }\n\n  function onScroll() {\n    if (!ticking) {\n      requestAnimationFrame(updateAnimation);\n      ticking = true;\n    }\n  }\n\n  \/\/ Bei Resize: initialScale neu berechnen\n  window.addEventListener('resize', () => {\n    initialScale = getInitialScale();\n    updateAnimation();\n  }, { passive: true });\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n\n  if (img.complete) {\n    updateAnimation();\n  } else {\n    img.addEventListener('load', updateAnimation);\n  }\n});\n<\/script>\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-622 bde-section\">\n              \n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-dual-heading-514-724 bde-dual-heading\">\n\n\n            <span data-style=\"primary\" class=\"dual-heading--primary  \">Abgeschlossene <\/span>\n\n            <span data-style=\"secondary\" class=\"dual-heading--secondary  \">Projekte<\/span>\n\n\n\n<\/h2><div class=\"bde-grid-514-872 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-873 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-874 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-875 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-876 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-877 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-878 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div>\n<\/div><div class=\"bde-div-514-879 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-880 bde-text\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"8LSdRNoKgN\"><a href=\"https:\/\/resintech.de\/\">Beton- &amp; Bausanierung Augsburg Bobingen<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8222;Beton- &amp; Bausanierung Augsburg Bobingen&#8220; &#8211; Resintech GmbH\" src=\"https:\/\/resintech.de\/embed\/#?secret=oNVAL6cVhN#?secret=8LSdRNoKgN\" data-secret=\"8LSdRNoKgN\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div>\n<\/div>\n<\/div><a class=\"bde-container-link-514-881 bde-container-link portfolio-wrapper breakdance-link\" href=\"#\" target=\"_self\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-882 bde-image2 portfolio-img\" src=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test.webp\" loading=\"lazy\" srcset=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test.webp 1000w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test-270x300.webp 270w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test-923x1024.webp 923w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/indi-site-scroll-test-768x852.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><div class=\"bde-div-514-883 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-884 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-885 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-886 bde-text\">\nB2B \u2022 Marketing \u2022 Filmproduktion\n<\/div><h3 class=\"bde-dual-heading-514-887 bde-dual-heading\">\n\n\n            <span data-style=\"primary\" class=\"dual-heading--primary  \">Indiana Jones <br><\/span>\n\n            <span data-style=\"secondary\" class=\"dual-heading--secondary  \">And The Shadows of Atlantis Fan Film <\/span>\n\n\n\n<\/h3><div class=\"bde-text-514-888 bde-text\">\nGestaltung und Entwicklung einer Webauftrits f\u00fcr\u00a0 den Fan Film \"Indiana Jones and the shadows of Atlantis\" mit Focus auf Customer-Jorney mit einem\u00a0 Typischen Indiana Jones vibe\n<\/div>\n<\/div><div class=\"bde-icon-514-889 bde-icon arrow-right2\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-arrow-up-right2\" viewBox=\"0 0 32 32\">\n<path d=\"M7.414 27.414l16.586-16.586v7.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-12c0-0.809-0.487-1.538-1.235-1.848-0.248-0.103-0.508-0.151-0.765-0.151v-0.001h-12c-1.105 0-2 0.895-2 2s0.895 2 2 2h7.172l-16.586 16.586c-0.391 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z\"\/>\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div>\n<\/div><div class=\"bde-div-514-890 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-891 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-892 bde-text\">\nWendesign\n<\/div>\n<\/div><div class=\"bde-div-514-893 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-894 bde-text\">\nSEO Optimierung\n<\/div>\n<\/div><div class=\"bde-div-514-895 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-896 bde-text\">\nTonality\n<\/div>\n<\/div><div class=\"bde-div-514-897 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-898 bde-text\">\nB2B\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/a>\n<\/div><div class=\"bde-div-514-899 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-900 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-901 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-902 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-903 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-904 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div>\n<\/div><div class=\"bde-div-514-905 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-906 bde-text\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"LAl91RTAOj\"><a href=\"https:\/\/shadows-of-atlantis.com\/\">Home<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Home&#8221; &#8212; Shadows of Atlantis\" src=\"https:\/\/shadows-of-atlantis.com\/embed\/#?secret=67McslYZu9#?secret=LAl91RTAOj\" data-secret=\"LAl91RTAOj\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div>\n<\/div>\n<\/div><a class=\"bde-container-link-514-907 bde-container-link portfolio-wrapper breakdance-link\" href=\"#\" target=\"_self\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-908 bde-image2 portfolio-img\" src=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1.webp\" loading=\"lazy\" srcset=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1.webp 746w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1-87x300.webp 87w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1-298x1024.webp 298w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1-448x1536.webp 448w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/resintech.webseite-scaled-1-597x2048.webp 597w\" sizes=\"(max-width: 746px) 100vw, 746px\"><div class=\"bde-div-514-909 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-910 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-911 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-912 bde-text\">\nB2B \u2022 Handwerk \u2022 Performance\n<\/div><h3 class=\"bde-heading-514-913 bde-heading\">\nResintech\n<\/h3><div class=\"bde-text-514-914 bde-text\">\nRelaunch des digitalen Auftritts f\u00fcr einen spezialisierten Bausanierungs-betrieb.\n<\/div>\n<\/div><div class=\"bde-icon-514-915 bde-icon arrow-right2\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-arrow-up-right2\" viewBox=\"0 0 32 32\">\n<path d=\"M7.414 27.414l16.586-16.586v7.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-12c0-0.809-0.487-1.538-1.235-1.848-0.248-0.103-0.508-0.151-0.765-0.151v-0.001h-12c-1.105 0-2 0.895-2 2s0.895 2 2 2h7.172l-16.586 16.586c-0.391 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z\"\/>\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div>\n<\/div><div class=\"bde-div-514-916 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-917 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-918 bde-text\">\nWendesign\n<\/div>\n<\/div><div class=\"bde-div-514-919 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-920 bde-text\">\nSEO Optimierung\n<\/div>\n<\/div><div class=\"bde-div-514-921 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-922 bde-text\">\nTonality\n<\/div>\n<\/div><div class=\"bde-div-514-923 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-924 bde-text\">\nB2B\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/a>\n<\/div><div class=\"bde-div-514-931 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-932 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-933 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-934 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-935 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-936 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div>\n<\/div><div class=\"bde-div-514-937 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-938 bde-text\">\nSonovum.de\n<\/div>\n<\/div>\n<\/div><a class=\"bde-container-link-514-939 bde-container-link portfolio-wrapper breakdance-link\" href=\"#\" target=\"_self\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-940 bde-image2 portfolio-img\" src=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/sonovum.de_-1.webp\" loading=\"lazy\" srcset=\"https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/sonovum.de_-1.webp 1440w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/sonovum.de_-1-300x200.webp 300w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/sonovum.de_-1-1024x682.webp 1024w, https:\/\/27-digital.de\/wp-content\/uploads\/2026\/04\/sonovum.de_-1-768x511.webp 768w\" sizes=\"(max-width: 1440px) 100vw, 1440px\"><div class=\"bde-div-514-941 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-942 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-943 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-944 bde-text\">\nB2B \u2022 Tech \u2022 Medfizinisches Produkt\n<\/div><h3 class=\"bde-heading-514-945 bde-heading\">\nSonovum\n<\/h3><div class=\"bde-text-514-946 bde-text\">\nWebpr\u00e4sens einer nicht invasiven Hirndruckbeurteilung um das Produkt vorzustellen und Investoren zu gewinnen\n<\/div>\n<\/div><div class=\"bde-icon-514-947 bde-icon arrow-right2\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-arrow-up-right2\" viewBox=\"0 0 32 32\">\n<path d=\"M7.414 27.414l16.586-16.586v7.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-12c0-0.809-0.487-1.538-1.235-1.848-0.248-0.103-0.508-0.151-0.765-0.151v-0.001h-12c-1.105 0-2 0.895-2 2s0.895 2 2 2h7.172l-16.586 16.586c-0.391 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z\"\/>\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div>\n<\/div><div class=\"bde-div-514-948 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-949 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-950 bde-text\">\nWendesign\n<\/div>\n<\/div><div class=\"bde-div-514-951 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-952 bde-text\">\nSEO Optimierung\n<\/div>\n<\/div><div class=\"bde-div-514-953 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-954 bde-text\">\nTonality\n<\/div>\n<\/div><div class=\"bde-div-514-955 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-956 bde-text\">\nB2B\n<\/div>\n<\/div><div class=\"bde-div-514-958 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-959 bde-text\">\nInvestoren\n<\/div>\n<\/div><div class=\"bde-div-514-960 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-961 bde-text\">\nOnline Pitch deck\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<\/a>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-562 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-514-723 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-dual-heading-514-708 bde-dual-heading\">\n\n\n            <span data-style=\"primary\" class=\"dual-heading--primary  \">Bereit f\u00fcr das<\/span>\n\n            <span data-style=\"secondary\" class=\"dual-heading--secondary  \">N\u00e4chste Level?<\/span>\n\n\n\n<\/h2><div class=\"bde-text-514-709 bde-text\">\nDirekte Zusammenarbeit. Keine Agentur Wasserkopf. Absolute Expertiese.\n<\/div><div class=\"bde-code-block-514-711 bde-code-block\">\n\n  <style>\n  .cta-btn {\n    display: inline-block;\n    background: #3d5afe;\n    color: #ffffff;\n    padding: 32px 64px;\n    font-family: 'Space Grotesk', sans-serif;\n    font-weight: 700;\n    font-size: 16px;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    text-decoration: none;\n    position: relative;\n    will-change: transform;\n  }\n\n  .cta-btn:hover {\n    box-shadow: 0 0 60px rgba(61, 90, 254, 0.55);\n    background: #1a3af0;\n  }\n<\/style>\n\n<a class=\"cta-btn\" id=\"ctaBtn\" href=\"#kontakt\">\n  Kontakt aufnehmen\n<\/a>\n\n<script>\n(function () {\n  var btn     = document.getElementById('ctaBtn');\n  var section = btn.closest('section') || btn.parentElement;\n\n  var restX = 0, restY = 0;\n  var btnHW = 0, btnHH = 0;\n\n  \/* Aktuelle Position des Buttons (interpoliert) *\/\n  var curX = 0, curY = 0;\n\n  \/* Ziel-Position (wo die Maus gerade ist) *\/\n  var tgtX = 0, tgtY = 0;\n\n  \/* 0.04 = sehr langsam, 0.15 = mittel, 0.4 = schnell *\/\n  var LERP = 0.05;\n\n  var active = false;\n\n  function cacheRest() {\n    btn.style.transform = 'none';\n    var r = btn.getBoundingClientRect();\n    restX = r.left   + r.width  \/ 2 + window.scrollX;\n    restY = r.top    + r.height \/ 2 + window.scrollY;\n    btnHW = r.width  \/ 2;\n    btnHH = r.height \/ 2;\n  }\n\n  window.addEventListener('load',   cacheRest);\n  window.addEventListener('resize', cacheRest);\n  window.addEventListener('scroll', cacheRest, { passive: true });\n  section.addEventListener('mouseenter', cacheRest);\n\n  section.addEventListener('mousemove', function (e) {\n    var mouseX = e.clientX + window.scrollX;\n    var mouseY = e.clientY + window.scrollY;\n\n    var sr  = section.getBoundingClientRect();\n    var pad = 24;\n    var minX = sr.left   + window.scrollX + btnHW + pad;\n    var maxX = sr.right  + window.scrollX - btnHW - pad;\n    var minY = sr.top    + window.scrollY + btnHH + pad;\n    var maxY = sr.bottom + window.scrollY - btnHH - pad;\n\n    tgtX = Math.max(minX, Math.min(maxX, mouseX)) - restX;\n    tgtY = Math.max(minY, Math.min(maxY, mouseY)) - restY;\n\n    if (!active) {\n      active = true;\n      loop();\n    }\n  });\n\n  section.addEventListener('mouseleave', function () {\n    tgtX = 0;\n    tgtY = 0;\n  });\n\n  function loop() {\n    curX += (tgtX - curX) * LERP;\n    curY += (tgtY - curY) * LERP;\n\n    btn.style.transform = 'translate(' + curX + 'px, ' + curY + 'px)';\n\n    \/* Loop stoppen wenn Button nah genug an Ziel *\/\n    if (Math.abs(tgtX - curX) < 0.05 && Math.abs(tgtY - curY) < 0.05) {\n      curX   = tgtX;\n      curY   = tgtY;\n      active = false;\n      return;\n    }\n\n    requestAnimationFrame(loop);\n  }\n})();\n<\/script>\n\n\n\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-141 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-162 bde-text\">\nLeistungen\n<\/div><h2 class=\"bde-heading-514-143 bde-heading\">\nWas ich f\u00fcr Ihr Unternehmen in Bonn tue.\n<\/h2><div class=\"bde-text-514-144 bde-text\">\nVon der ersten Idee bis zur fertigen Kampagne. Jede Leistung greift in die andere \u2013 weil ein konsistenter Auftritt mehr bewirkt als vier Einzelma\u00dfnahmen.\n<\/div><div class=\"bde-grid-514-145 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-146 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-147 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.3 19.3\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M16.65,19.3H2.65c-1.46,0-2.65-1.19-2.65-2.65V2.65C0,1.19,1.19,0,2.65,0h14c1.46,0,2.65,1.19,2.65,2.65v14c0,1.46-1.19,2.65-2.65,2.65ZM2.65,1.3c-.74,0-1.35.61-1.35,1.35v14c0,.74.61,1.35,1.35,1.35h14c.74,0,1.35-.61,1.35-1.35V2.65c0-.74-.61-1.35-1.35-1.35H2.65Z\"\/>\r\n    <polygon points=\"7.3 18.65 6 18.65 6 7.3 .65 7.3 .65 6 18.65 6 18.65 7.3 7.3 7.3 7.3 18.65\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><h3 class=\"bde-heading-514-148 bde-heading\">\nWebdesign & WordPress-Entwicklung\n<\/h3><div class=\"bde-text-514-149 bde-text\">\nIch gestalte und entwickle Ihre Website individuell \u2013 kein Template, kein Baukastensystem. Das Ergebnis: Eine schnelle, mobiloptimierte WordPress-Seite, die bei Google gefunden wird und Besucher in Bonn und Umgebung \u00fcberzeugt. Nach dem Launch k\u00f6nnen Sie Texte, Bilder und Inhalte selbst bearbeiten \u2013 ohne mich fragen zu m\u00fcssen.\n<\/div><div class=\"bde-div-514-165 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-166 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-164 bde-text\">\nWordPress\n<\/div>\n<\/div><div class=\"bde-div-514-167 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-168 bde-text\">\nBreakdance Builder\n<\/div>\n<\/div><div class=\"bde-div-514-169 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-170 bde-text\">\nSEO Bonn\n<\/div>\n<\/div><div class=\"bde-div-514-171 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-172 bde-text\">\nResponsive\n<\/div>\n<\/div><div class=\"bde-div-514-173 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-174 bde-text\">\nSchnelle Ladezeiten\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-175 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-220 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.5 19.5\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M9.75,19.5c-.41,0-.75-.34-.75-.75v-2.25c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75ZM16.11,16.86c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM3.39,16.86c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM9.75,14.25c-2.48,0-4.5-2.02-4.5-4.5s2.02-4.5,4.5-4.5,4.5,2.02,4.5,4.5-2.02,4.5-4.5,4.5ZM9.75,6.75c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3ZM18.75,10.5h-2.25c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM3,10.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM14.52,5.73c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM4.98,5.73c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM9.75,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><h3 class=\"bde-heading-514-177 bde-heading\">\nBranding & Corporate Design f\u00fcr Bonner Unternehmen\n<\/h3><div class=\"bde-text-514-178 bde-text\">\nIhr Logo, Ihre Farben, Ihre Schriften \u2013 als stimmiges System. Ich entwickle Markenidentit\u00e4ten, die auf jeder Fl\u00e4che funktionieren: auf der Website, auf Visitenkarten, in Social-Media-Posts und auf Gesch\u00e4ftsunterlagen. Damit Ihr Unternehmen in Bonn sofort wiedererkannt wird.\n<\/div><div class=\"bde-div-514-179 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-180 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-181 bde-text\">\nLogo Design\n<\/div>\n<\/div><div class=\"bde-div-514-182 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-183 bde-text\">\nMarkenidentit\u00e4t\n<\/div>\n<\/div><div class=\"bde-div-514-184 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-185 bde-text\">\nStyleguide\n<\/div>\n<\/div><div class=\"bde-div-514-186 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-187 bde-text\">\nGesch\u00e4ftsausstattung\n<\/div>\n<\/div><div class=\"bde-div-514-188 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-189 bde-text\">\nCorporate Design\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-190 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-221 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 21 19.5\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M15.75,19.5c-.31,0-.61-.2-.71-.51l-.33-.99H6.29l-.33.99c-.13.39-.56.6-.95.47-.39-.13-.6-.56-.47-.95l.49-1.48s0-.02.01-.03l.67-2h-1.21c-1.65,0-3-1.35-3-3V1.5h-.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h19.5c.41,0,.75.34.75.75s-.34.75-.75.75h-.75v10.5c0,1.65-1.35,3-3,3h-1.21l.67,2s0,.02.01.03l.5,1.48c.13.39-.08.82-.47.95-.08.03-.16.04-.24.04ZM6.79,16.5h7.42l-.5-1.5h-6.42l-.5,1.5ZM14.27,13.5h2.23c.83,0,1.5-.67,1.5-1.5V1.5H3v10.5c0,.83.67,1.5,1.5,1.5h9.77ZM6,10.5c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l3-3c.29-.29.77-.29,1.06,0l1.54,1.54c.99-1.22,2.2-2.27,3.56-3.05.36-.21.82-.08,1.03.27.21.36.08.82-.27,1.02-1.42.82-2.67,1.97-3.61,3.32-.13.18-.33.3-.55.32-.23.02-.44-.06-.6-.22l-1.62-1.62-2.47,2.47c-.15.15-.34.22-.53.22Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><h3 class=\"bde-heading-514-192 bde-heading\">\nOnline-Marketing & digitale Kampagnen\n<\/h3><div class=\"bde-text-514-193 bde-text\">\nEine gute Website allein reicht nicht \u2013 sie muss auch gefunden werden. Ich unterst\u00fctze Sie mit SEO-Optimierung f\u00fcr Bonn und die Region, Google Ads Kampagnen und Social-Media-Konzepten, die zu Ihrem Unternehmen passen. Strategie und Umsetzung aus einer Hand.\n<\/div><div class=\"bde-div-514-194 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-195 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-196 bde-text\">\nSEO lokal Bonn\n<\/div>\n<\/div><div class=\"bde-div-514-197 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-198 bde-text\">\nGoogle Ads\n<\/div>\n<\/div><div class=\"bde-div-514-199 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-200 bde-text\">\nSocial Media\n<\/div>\n<\/div><div class=\"bde-div-514-201 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-202 bde-text\">\nKampagnenstrategie\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-205 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-222 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 21 15\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M12,15H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h9c1.65,0,3,1.35,3,3v1.19l3.44-3.44c.28-.28.66-.44,1.06-.44h0c.4,0,.78.16,1.06.44.28.28.44.66.44,1.06v11.38c0,.83-.67,1.5-1.5,1.5-.4,0-.78-.16-1.06-.44l-3.44-3.44v1.19c0,1.65-1.35,3-3,3ZM3,1.5c-.83,0-1.5.67-1.5,1.5v9c0,.83.67,1.5,1.5,1.5h9c.83,0,1.5-.67,1.5-1.5v-6h0v-3c0-.83-.67-1.5-1.5-1.5H3ZM15,8.69l4.5,4.5V1.81l-4.5,4.5v2.38Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><h3 class=\"bde-heading-514-207 bde-heading\">\nProfessionelle Content-Produktion\n<\/h3><div class=\"bde-text-514-208 bde-text\">\n\u00dcber mein Netzwerk professioneller Filmproduzenten entstehen Imagefilme, Produktvideos und hochwertiges Bildmaterial, das zu Ihrer Marke passt. Kein Stock-Material, keine Kompromisse \u2013 Content, der Ihr Unternehmen so zeigt, wie es wirklich ist.\n<\/div><div class=\"bde-div-514-209 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-210 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-211 bde-text\">\nImagefilm\n<\/div>\n<\/div><div class=\"bde-div-514-212 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-213 bde-text\">\nProduktvideo\n<\/div>\n<\/div><div class=\"bde-div-514-214 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-215 bde-text\">\nFotografie\n<\/div>\n<\/div><div class=\"bde-div-514-216 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-217 bde-text\">\nSocial Content\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-grid-514-594 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-595 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-596 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free Copyright 2026 Fonticons, Inc.--><path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\"\/><\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-597 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-598 bde-text\">\nDirekter Anprechpartner\n<\/div><div class=\"bde-text-514-599 bde-text\">\nKein Projektmanager dazwischen \u2013 Sie sprechen immer mit dem Designer selbst.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-600 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-601 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 22.91 21.45\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M11.45,21.45L1.16,16.31l.58-1.16,9.71,4.85,9.71-4.85.58,1.16-10.29,5.15ZM11.45,16.45L1.16,11.31l.58-1.16,9.71,4.85,9.71-4.85.58,1.16-10.29,5.15ZM11.45,11.45L0,5.73,11.45,0l11.45,5.73-11.45,5.73ZM2.91,5.73l8.55,4.27,8.55-4.27L11.45,1.45,2.91,5.73Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-602 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-603 bde-text\">\nSelbst pflegbar\n<\/div><div class=\"bde-text-514-604 bde-text\">\nIhre Website k\u00f6nnen Sie nach \u00dcbergabe eigenst\u00e4ndig bearbeiten \u2013 ganz ohne Programmierkenntnisse.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-605 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-606 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.3 19.3\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.65,8.3H1.65c-.91,0-1.65-.74-1.65-1.65V1.65C0,.74.74,0,1.65,0h5c.91,0,1.65.74,1.65,1.65v5c0,.91-.74,1.65-1.65,1.65ZM1.65,1.3c-.19,0-.35.16-.35.35v5c0,.19.16.35.35.35h5c.19,0,.35-.16.35-.35V1.65c0-.19-.16-.35-.35-.35H1.65Z\"\/>\r\n    <path d=\"M17.65,8.3h-5c-.91,0-1.65-.74-1.65-1.65V1.65c0-.91.74-1.65,1.65-1.65h5c.91,0,1.65.74,1.65,1.65v5c0,.91-.74,1.65-1.65,1.65ZM12.65,1.3c-.19,0-.35.16-.35.35v5c0,.19.16.35.35.35h5c.19,0,.35-.16.35-.35V1.65c0-.19-.16-.35-.35-.35h-5Z\"\/>\r\n    <path d=\"M6.65,19.3H1.65c-.91,0-1.65-.74-1.65-1.65v-5c0-.91.74-1.65,1.65-1.65h5c.91,0,1.65.74,1.65,1.65v5c0,.91-.74,1.65-1.65,1.65ZM1.65,12.3c-.19,0-.35.16-.35.35v5c0,.19.16.35.35.35h5c.19,0,.35-.16.35-.35v-5c0-.19-.16-.35-.35-.35H1.65Z\"\/>\r\n    <path d=\"M17.65,19.3h-5c-.91,0-1.65-.74-1.65-1.65v-5c0-.91.74-1.65,1.65-1.65h5c.91,0,1.65.74,1.65,1.65v5c0,.91-.74,1.65-1.65,1.65ZM12.65,12.3c-.19,0-.35.16-.35.35v5c0,.19.16.35.35.35h5c.19,0,.35-.16.35-.35v-5c0-.19-.16-.35-.35-.35h-5Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-607 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-608 bde-text\">\nAlles aus einer Hand\n<\/div><div class=\"bde-text-514-609 bde-text\">\nWeb, Branding, Marketing und Content \u2013 aufeinander abgestimmt von Anfang an.\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-239 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-240 bde-text\">\nLeistungen\n<\/div><h2 class=\"bde-heading-514-241 bde-heading\">\nModerne Werkzeuge \u2013 f\u00fcr Sie als Kunde sp\u00fcrbar.\n<\/h2><div class=\"bde-text-514-242 bde-text\">\nIch setze bewusst auf Technologien, die Ihnen konkrete Vorteile bringen: Ihre Website ist schneller, Ihr Ranking besser und Ihre Pflege einfacher.\n<\/div><div class=\"bde-grid-514-243 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-244 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-245 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.3 19.3\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M16.65,19.3H2.65c-1.46,0-2.65-1.19-2.65-2.65V2.65C0,1.19,1.19,0,2.65,0h14c1.46,0,2.65,1.19,2.65,2.65v14c0,1.46-1.19,2.65-2.65,2.65ZM2.65,1.3c-.74,0-1.35.61-1.35,1.35v14c0,.74.61,1.35,1.35,1.35h14c.74,0,1.35-.61,1.35-1.35V2.65c0-.74-.61-1.35-1.35-1.35H2.65Z\"\/>\r\n    <polygon points=\"7.3 18.65 6 18.65 6 7.3 .65 7.3 .65 6 18.65 6 18.65 7.3 7.3 7.3 7.3 18.65\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-300 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-514-246 bde-heading\">\nWebdesign & WordPress-Entwicklung\n<\/h3><div class=\"bde-text-514-247 bde-text\">\nIch baue mit WordPress und dem modernen Breakdance Builder. Das Ergebnis: Seiten, die schnell laden, sauber im Code sind und bei Google bessere Karten haben als schwerf\u00e4llige Konkurrenten. Und das Wichtigste f\u00fcr Sie als Kunde: Nach der \u00dcbergabe k\u00f6nnen Sie Texte, Bilder und Seiteninhalte ganz einfach selbst bearbeiten \u2013 ohne Programmierkenntnisse, ohne mich anrufen zu m\u00fcssen.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-259 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-260 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.5 19.5\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M9.75,19.5c-.41,0-.75-.34-.75-.75v-2.25c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75ZM16.11,16.86c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM3.39,16.86c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM9.75,14.25c-2.48,0-4.5-2.02-4.5-4.5s2.02-4.5,4.5-4.5,4.5,2.02,4.5,4.5-2.02,4.5-4.5,4.5ZM9.75,6.75c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3ZM18.75,10.5h-2.25c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM3,10.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM14.52,5.73c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM4.98,5.73c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM9.75,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-301 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-514-261 bde-heading\">\nSEO von Anfang an eingebaut \u2013 nicht nachtr\u00e4glich\n<\/h3><div class=\"bde-text-514-262 bde-text\">\nViele Websites sehen gut aus, werden aber nicht gefunden. Bei mir ist Suchmaschinenoptimierung kein Add-on, sondern Teil des Prozesses von Anfang an. Lokale SEO-Optimierung f\u00fcr Bonn, Endenich, Beuel, Bad Godesberg und die gesamte Region ist dabei Standard.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-302 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-303 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.5 19.5\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M9.75,19.5c-.41,0-.75-.34-.75-.75v-2.25c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75ZM16.11,16.86c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM3.39,16.86c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM9.75,14.25c-2.48,0-4.5-2.02-4.5-4.5s2.02-4.5,4.5-4.5,4.5,2.02,4.5,4.5-2.02,4.5-4.5,4.5ZM9.75,6.75c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3ZM18.75,10.5h-2.25c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM3,10.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM14.52,5.73c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM4.98,5.73c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM9.75,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-304 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-514-305 bde-heading\">\nMobiloptimierung \u2013 weil 70% Ihrer Besucher vom Handy kommen\n<\/h3><div class=\"bde-text-514-306 bde-text\">\nJede Website, die ich baue ist 100% Responsiv und funktioniert auf Smartphone, Tablet und Desktop gleich gut. Nicht als Nachgedanke, sondern als Ausgangspunkt des Designs. Denn wer auf dem Handy eine schlechte Erfahrung macht, kommt nicht wieder.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-307 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-514-308 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 19.5 19.5\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M9.75,19.5c-.41,0-.75-.34-.75-.75v-2.25c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75ZM16.11,16.86c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM3.39,16.86c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM9.75,14.25c-2.48,0-4.5-2.02-4.5-4.5s2.02-4.5,4.5-4.5,4.5,2.02,4.5,4.5-2.02,4.5-4.5,4.5ZM9.75,6.75c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3ZM18.75,10.5h-2.25c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM3,10.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h2.25c.41,0,.75.34.75.75s-.34.75-.75.75ZM14.52,5.73c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l1.59-1.59c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-1.59,1.59c-.15.15-.34.22-.53.22ZM4.98,5.73c-.19,0-.38-.07-.53-.22l-1.59-1.59c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l1.59,1.59c.29.29.29.77,0,1.06-.15.15-.34.22-.53.22ZM9.75,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41.34-.75.75-.75s.75.34.75.75v2.25c0,.41-.34.75-.75.75Z\"\/>\r\n  <\/g>\r\n<\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-div-514-309 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-514-310 bde-heading\">\nIhre Website geh\u00f6rt Ihnen \u2013 kein Abo, kein Lock-in\n<\/h3><div class=\"bde-text-514-311 bde-text\">\nAnders als bei Wix, Squarespace oder \u00e4hnlichen Plattformen geh\u00f6rt Ihre WordPress-Website vollst\u00e4ndig Ihnen. Kein monatliches Abo, das Ihre Seite offline schaltet, wenn Sie k\u00fcndigen. Kein propriet\u00e4res System, aus dem Sie nicht raus k\u00f6nnen. Ihre Daten, Ihre Domain, Ihre Entscheidung, kein Knebelvertrag.\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-312 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-313 bde-text\">\nMein Ansatz<br>\n<\/div><h2 class=\"bde-heading-514-314 bde-heading\">\nVon der Idee bis zur Kampagne \u2013 alles aufeinander abgestimmt.\n<\/h2><div class=\"bde-text-514-315 bde-text\">\nWer vier verschiedene Dienstleister beauftragt, bezahlt viermal Briefing, viermal Abstimmung und bekommt viermal ein St\u00fcck, das nicht immer ganz zusammenpasst. Bei mir entsteht alles aus einem Guss.\n<\/div><div class=\"bde-grid-514-316 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-317 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-373 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-374 bde-text\">\n01\n<\/div>\n<\/div><h3 class=\"bde-heading-514-319 bde-heading\">\nKennenlernen & Strategie\n<\/h3><div class=\"bde-text-514-320 bde-text\">\nWir sprechen \u00fcber Ihr Unternehmen, Ihre Zielgruppe in Bonn und was Sie erreichen wollen.\n<\/div>\n<\/div><div class=\"bde-div-514-332 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-375 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-376 bde-text\">\n02\n<\/div>\n<\/div><h3 class=\"bde-heading-514-334 bde-heading\">\nMarke & Gestaltung\n<\/h3><div class=\"bde-text-514-335 bde-text\">\nDesign und Branding entstehen \u2013 als Fundament f\u00fcr alles, was danach kommt.\n<\/div>\n<\/div><div class=\"bde-div-514-347 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-377 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-378 bde-text\">\n03\n<\/div>\n<\/div><h3 class=\"bde-heading-514-349 bde-heading\">\nWebsite & Inhalte\n<\/h3><div class=\"bde-text-514-350 bde-text\">\nIhre neue Website geht online \u2013 mit Texten, Bildern und Videos, die wirklich passen.\n<\/div>\n<\/div><div class=\"bde-div-514-360 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-379 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-380 bde-text\">\n04\n<\/div>\n<\/div><h3 class=\"bde-heading-514-362 bde-heading\">\nSichtbarkeit & Kampagnen\n<\/h3><div class=\"bde-text-514-363 bde-text\">\nWir sorgen daf\u00fcr, dass Kunden in Bonn und Umgebung Sie auch finden.\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-381 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-382 bde-text\">\nWarum 27 Digital\n<\/div><h2 class=\"bde-heading-514-383 bde-heading\">\nWas Sie bei mir bekommen \u2013 was Agenturen oft nicht liefern.\n<\/h2><div class=\"bde-text-514-384 bde-text\">\nEine Bonner Agentur kostet schnell das Dreifache. Was Sie daf\u00fcr bekommen: einen Account-Manager, der Ihre W\u00fcnsche weitergibt. Bei mir bekommen Sie den Designer direkt.\n<\/div><div class=\"bde-grid-514-406 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-407 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-424 bde-text\">\nMartin Bruch\n<\/div><h3 class=\"bde-heading-514-423 bde-heading\">\n27 Digital\n<\/h3><div class=\"bde-checkmark-list-514-422 bde-checkmark-list\">\n<ul>\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Sie sprechen immer direkt mit mir \u2013 vom ersten Gespr\u00e4ch bis zur \u00dcbergabe\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Schnelle Reaktionszeiten \u2013 R\u00fcckmeldung meist am gleichen Tag\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Kein Overhead: Ihr Budget flie\u00dft in Design und Technik, nicht in Strukturen\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Ich kenne Bonn und die Region \u2013 lokale SEO aus erster Hand<br>\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Transparente Preise, klare Absprachen, keine versteckten Kosten<br>\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 15.32 17.38\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M6.81,17.1c-.64.3-1.62.47-2.16-.08C3.39,14.91,1.89,12.98.14,11.25c-.61-1.03.88-1.62,1.69-1.47.41.08,1.22,1.02,1.53,1.38.81.93,1.42,2.06,2.24,2.96,1.55-4.02,3.43-8.18,5.88-11.73.3-.44,1.03-1.57,1.39-1.85.78-.6,2.87-1.01,2.37.58-2.67,3.53-4.95,7.35-6.67,11.43-.63,1.5-1.14,3.05-1.76,4.55Z\"\/>\r\n  <\/g>\r\n<\/svg>\n              <\/span>\n      <div >\n        Pers\u00f6nliche Termine in Bonn jederzeit m\u00f6glich<br>\n      <\/div>\n\n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div><div class=\"bde-div-514-410 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-426 bde-text\">\nTypisches Muster\n<\/div><h3 class=\"bde-heading-514-425 bde-heading\">\nKlassische Agentur\n<\/h3><div class=\"bde-checkmark-list-514-427 bde-checkmark-list\">\n<ul>\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Account-Manager als Vermittler \u2013 Ihre W\u00fcnsche kommen gefiltert an\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Feedback-Schleifen dauern Tage bis Wochen\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Hohe Stundens\u00e4tze durch interne Strukturen und Overhead\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Wechselnde Ansprechpartner je nach Projektphase\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Leistungen werden oft subkontraktiert\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes '>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-cross\" viewBox=\"0 0 32 32\">\n<path d=\"M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z\"\/>\n<\/svg>\n              <\/span>\n      <div >\n        Pers\u00f6nlicher Kontakt ist die Ausnahme, nicht die Regel\n      <\/div>\n\n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-428 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-429 bde-text\">\nKundenstimmen\n<\/div><h2 class=\"bde-heading-514-430 bde-heading\">\nWeil zufriedene Kunden die besten Kunden sind\n<\/h2><div class=\"bde-text-514-431 bde-text\">\nNichts treibt mich mehr an als das positive Feedback meiner Kunden. Es ist diese ehrliche Begeisterung, die mich motiviert, immer das Maximum herauszuholen\n<\/div><div class=\"bde-grid-514-432 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-433 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-star-rating-514-453 bde-star-rating\">\n\n\n\n  <div class='bde-star-rating__wrapper'>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n  <\/div>\n\n\n\n<svg width=\"0\" height=\"0\">\n<linearGradient id=\"starhalf453\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\">\n        <stop offset=\"0%\" stop-color=\"var(--bde-palette-color-1-0697b1ec-b855-4451-a4b1-aaf8be431349)\"><\/stop>\n \t\t<stop offset=\"0%\" stop-color=\"lightgrey\"><\/stop>\n<\/linearGradient>\n<\/svg>\n\n<\/div><div class=\"bde-text-514-437 bde-text\">\nMartin hat unsere neue Website in Rekordzeit umgesetzt. Endlich jemand, der einfach zuh\u00f6rt und dann liefert \u2013 ohne wochenlange Abstimmungsrunden.\n<\/div><div class=\"bde-div-514-455 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-460 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-461 bde-text\">\nJB\n<\/div>\n<\/div><div class=\"bde-div-514-457 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-458 bde-text\">\nJugoslav Blagojevic\n<\/div><div class=\"bde-text-514-459 bde-text\">\nGesch\u00e4ftsf\u00fchrer \u00b7 Resintech GmbH\u00a0\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-462 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-star-rating-514-463 bde-star-rating\">\n\n\n\n  <div class='bde-star-rating__wrapper'>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n  <\/div>\n\n\n\n<svg width=\"0\" height=\"0\">\n<linearGradient id=\"starhalf463\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\">\n        <stop offset=\"0%\" stop-color=\"var(--bde-palette-color-1-0697b1ec-b855-4451-a4b1-aaf8be431349)\"><\/stop>\n \t\t<stop offset=\"0%\" stop-color=\"lightgrey\"><\/stop>\n<\/linearGradient>\n<\/svg>\n\n<\/div><div class=\"bde-text-514-464 bde-text\">\nMartin hat unsere neue Website in Rekordzeit umgesetzt. Endlich jemand, der einfach zuh\u00f6rt und dann liefert \u2013 ohne wochenlange Abstimmungsrunden.\n<\/div><div class=\"bde-div-514-465 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-466 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-467 bde-text\">\nJB\n<\/div>\n<\/div><div class=\"bde-div-514-468 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-469 bde-text\">\nJugoslav Blagojevic\n<\/div><div class=\"bde-text-514-470 bde-text\">\nGesch\u00e4ftsf\u00fchrer \u00b7 Resintech GmbH\u00a0\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-471 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-star-rating-514-472 bde-star-rating\">\n\n\n\n  <div class='bde-star-rating__wrapper'>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ifill=\"currentColor\" d=\"icon-star-full\" viewBox=\"0 0 32 32\"><path d=\"M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z\"><\/path><\/svg>\n  <\/div>\n\n\n\n<svg width=\"0\" height=\"0\">\n<linearGradient id=\"starhalf472\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\">\n        <stop offset=\"0%\" stop-color=\"var(--bde-palette-color-1-0697b1ec-b855-4451-a4b1-aaf8be431349)\"><\/stop>\n \t\t<stop offset=\"0%\" stop-color=\"lightgrey\"><\/stop>\n<\/linearGradient>\n<\/svg>\n\n<\/div><div class=\"bde-text-514-473 bde-text\">\nMartin hat unsere neue Website in Rekordzeit umgesetzt. Endlich jemand, der einfach zuh\u00f6rt und dann liefert \u2013 ohne wochenlange Abstimmungsrunden.\n<\/div><div class=\"bde-div-514-474 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-475 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-476 bde-text\">\nJB\n<\/div>\n<\/div><div class=\"bde-div-514-477 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-478 bde-text\">\nJugoslav Blagojevic\n<\/div><div class=\"bde-text-514-479 bde-text\">\nGesch\u00e4ftsf\u00fchrer \u00b7 Resintech GmbH\u00a0\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-480 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-text-514-481 bde-text\">\nReferenzen\n<\/div><h2 class=\"bde-heading-514-482 bde-heading\">\nProjekte, die f\u00fcr sich sprechen.\n<\/h2><div class=\"bde-text-514-483 bde-text\">\nHier entstehen bald ausgew\u00e4hlte Projekte aus Bonn und der Region. Jedes davon hat ein konkretes Problem gel\u00f6st \u2013 ob Neukundengewinnung, Rebranding oder mehr Sichtbarkeit bei Google.\n<\/div><div class=\"bde-grid-514-484 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-489 bde-div\">\n  \n  \n\t\n\n\n\n<a class=\"bde-container-link-514-551 bde-container-link breakdance-link\" href=\"#\" target=\"_self\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-514-538 bde-code-block\">\n\n  <div class=\"portfolio-item\">\n  <div class=\"scroll-window\">\n    <img decoding=\"async\" src=\"http:\/\/27digital.local\/wp-content\/uploads\/2026\/03\/Indiana_jones_Shadows_of_Atlantis_website_big.webp\" alt=\"Projekt Vorschau\" class=\"scroll-image\">\n  <\/div>\n  \n<\/div>\n\n\n<\/div><div class=\"bde-div-514-560 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-561 bde-text\">\nThis is a basic text element.\n<\/div>\n<\/div>\n\n<\/a><div class=\"bde-div-514-540 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-542 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-490 bde-text\">\nWebdesign & Entwicklung\n<\/div><h3 class=\"bde-heading-514-491 bde-heading\">\nShadows of Atlantis: Indiana Jones\u00a0\n<\/h3>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-514-493 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-514-546 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-514-543 bde-code-block\">\n\n  <div class=\"portfolio-item\">\n  <div class=\"scroll-window\">\n    <img decoding=\"async\" src=\"http:\/\/27digital.local\/wp-content\/uploads\/2026\/03\/resintech.webseite-scaled.webp\" alt=\"Resintech Webseite Referenz\" class=\"scroll-image\">\n  <\/div>\n  \n<\/div>\n\n\n<\/div><div class=\"bde-div-514-549 bde-div\">\n  \n  \n\t\n\n\n\n<a class=\"bde-text-link-514-550 bde-text-link breakdance-link\" href=\"https:\/\/resintech.de\/\" target=\"_blank\" data-type=\"url\">\n  Zur Webseite\n\n<\/a>\n<\/div>\n<\/div><div class=\"bde-text-514-494 bde-text\">\nRelaunch\n<\/div><h3 class=\"bde-heading-514-495 bde-heading\">\nResintech GmbH\n<\/h3>\n<\/div><div class=\"bde-div-514-514 bde-div\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-515 bde-image2\" src=\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns=&#039;http:\/\/www.w3.org\/2000\/svg&#039; width=&#039;540&#039; height=&#039;540&#039; viewBox=&#039;0 0 140 140&#039;%3e%3cpath d=&#039;M0 0h140v140H0z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M89.48 52.32H50.29a4.52 4.52 0 00-4.52 4.52V84a4.53 4.53 0 004.52 4.52h39.19A4.52 4.52 0 0094 84V56.84a4.52 4.52 0 00-4.52-4.52zm-33.16 5.27a5.28 5.28 0 11-5.27 5.28 5.27 5.27 0 015.27-5.28zM88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23d1d5db&#039;\/%3e%3c\/svg%3e\" loading=\"lazy\"><div class=\"bde-text-514-516 bde-text\">\nWebdesign & Branding\n<\/div><h3 class=\"bde-heading-514-517 bde-heading\">\nProjekt-Platzhalter 01\n<\/h3>\n<\/div><div class=\"bde-div-514-518 bde-div\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-519 bde-image2\" src=\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns=&#039;http:\/\/www.w3.org\/2000\/svg&#039; width=&#039;540&#039; height=&#039;540&#039; viewBox=&#039;0 0 140 140&#039;%3e%3cpath d=&#039;M0 0h140v140H0z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M89.48 52.32H50.29a4.52 4.52 0 00-4.52 4.52V84a4.53 4.53 0 004.52 4.52h39.19A4.52 4.52 0 0094 84V56.84a4.52 4.52 0 00-4.52-4.52zm-33.16 5.27a5.28 5.28 0 11-5.27 5.28 5.27 5.27 0 015.27-5.28zM88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23d1d5db&#039;\/%3e%3c\/svg%3e\" loading=\"lazy\"><div class=\"bde-text-514-520 bde-text\">\nWebdesign & Branding\n<\/div><h3 class=\"bde-heading-514-521 bde-heading\">\nProjekt-Platzhalter 01\n<\/h3>\n<\/div><div class=\"bde-div-514-522 bde-div\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-514-523 bde-image2\" src=\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns=&#039;http:\/\/www.w3.org\/2000\/svg&#039; width=&#039;540&#039; height=&#039;540&#039; viewBox=&#039;0 0 140 140&#039;%3e%3cpath d=&#039;M0 0h140v140H0z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23e5e7eb&#039;\/%3e%3cpath d=&#039;M89.48 52.32H50.29a4.52 4.52 0 00-4.52 4.52V84a4.53 4.53 0 004.52 4.52h39.19A4.52 4.52 0 0094 84V56.84a4.52 4.52 0 00-4.52-4.52zm-33.16 5.27a5.28 5.28 0 11-5.27 5.28 5.27 5.27 0 015.27-5.28zM88 82.46H51.8v-4.52l6.74-6.74a1.13 1.13 0 011.6 0l5.23 5.23 12.76-12.77a1.13 1.13 0 011.6 0L88 71.91z&#039; fill=&#039;%23d1d5db&#039;\/%3e%3c\/svg%3e\" loading=\"lazy\"><div class=\"bde-text-514-524 bde-text\">\nWebdesign & Branding\n<\/div><h3 class=\"bde-heading-514-525 bde-heading\">\nProjekt-Platzhalter 01\n<\/h3>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-514-526 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-514-527 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-528 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-514-529 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-514-530 bde-text\">\nKontakt\n<\/div><h2 class=\"bde-heading-514-531 bde-heading\">\nIhr n\u00e4chstes Projekt wartet \u2013 lassen Sie uns sprechen.<br>\n<\/h2><div class=\"bde-text-514-532 bde-text\">\nOb neue Website, Rebranding oder Online-Marketing in Bonn \u2013 ich freue mich auf Ihr Projekt. Rufen Sie einfach an oder schreiben Sie mir. Ich melde mich schnellstm\u00f6glich.\n<\/div><div class=\"bde-div-514-533 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-list-514-535 bde-icon-list\">\n<ul>\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"tel:+491709810420\" target=\"_self\" data-type=\"contact\"  >\n\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 20.8 20.8\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M17.9,20.8h-2.25C7.02,20.8,0,13.78,0,5.15v-2.25C0,1.3,1.3,0,2.9,0h1.37c.82,0,1.52.55,1.72,1.35l1.11,4.42c.17.7-.08,1.42-.66,1.85l-1.29.97c-.15.12-.22.3-.16.47,1.15,3.14,3.62,5.6,6.76,6.76.16.06.35,0,.47-.16l.97-1.29c.43-.58,1.16-.83,1.85-.66l4.42,1.11c.79.2,1.35.91,1.35,1.72v1.37c0,1.6-1.3,2.9-2.9,2.9ZM2.9,1.3c-.88,0-1.6.72-1.6,1.6v2.25c0,7.91,6.44,14.35,14.35,14.35h2.25c.88,0,1.6-.72,1.6-1.6v-1.37c0-.22-.15-.41-.36-.46l-4.42-1.11c-.19-.05-.38.02-.5.18l-.97,1.29c-.46.62-1.25.86-1.95.6-3.5-1.29-6.24-4.03-7.53-7.53-.26-.71-.02-1.49.6-1.95l1.29-.97c.15-.12.22-.31.18-.5l-1.11-4.42c-.05-.21-.24-.36-.46-.36h-1.37Z\"\/>\r\n  <\/g>\r\n<\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      0170 9810420\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"mailto:martin@27-digital.de?subject=&body=\" target=\"_self\" data-type=\"contact\"  >\n\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_2\" data-name=\"Ebene 2\" viewBox=\"0 0 21.3 17.3\">\r\n  <g id=\"Ebene_1-2\" data-name=\"Ebene 1\">\r\n    <path d=\"M18.65,0H2.65C1.19,0,0,1.19,0,2.65v12c0,1.46,1.19,2.65,2.65,2.65h16c1.46,0,2.65-1.19,2.65-2.65V2.65c0-1.46-1.19-2.65-2.65-2.65ZM2.65,1.3h16c.64,0,1.15.46,1.29,1.05l-9.29,6.5L1.36,2.35c.14-.6.65-1.05,1.29-1.05ZM18.65,16H2.65c-.74,0-1.35-.61-1.35-1.35V3.9l9.35,6.54,9.35-6.54v10.75c0,.74-.61,1.35-1.35,1.35Z\"\/>\r\n  <\/g>\r\n<\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      martin@27-digital.de\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div><div class=\"bde-button-514-536 bde-button\">\n    \n                        \n                        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--primary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Jetzt Projekt anfragen \u2192<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Webdesign aus Bonn\u00a0 Individuelle Webseiten f\u00fcr deine Brand Ich baue keien webseiten von der stange, ich baue deine Individuelle webseite die deine Unternehmen optimal Wiederspiegelt W\u00e4hle deinen Stil KREATIV ECO MINIMAL NEON Klick hier! BASECLUB \u00dcber den Club Meine Stats Tokenomics Logo Club baseclub.eth23.422 Punkte pearl.eth293.582 Punkte #CLUBSOCIAL FILEUTE KOSTENLOS STARTEN \u2022 KOSTENLOS STARTEN \u2022 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-514","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/pages\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/27-digital.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=514"}],"version-history":[{"count":5,"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/pages\/514\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/27-digital.de\/index.php?rest_route=\/wp\/v2\/pages\/514\/revisions\/533"}],"wp:attachment":[{"href":"https:\/\/27-digital.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}