{"id":1891,"date":"2026-03-13T22:03:35","date_gmt":"2026-03-13T22:03:35","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=1891"},"modified":"2026-09-14T21:34:02","modified_gmt":"2026-09-14T21:34:02","slug":"webdesign-mosbach","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesign-mosbach\/","title":{"rendered":"Web design in Mosbach \u2013 custom, not off the shelf"},"content":{"rendered":"\n<style>\n        \/* ===================== VARIABLEN & BASIS ===================== *\/\n        :root {\n            --marineblau: #1e3a5f;\n            --hellgrau: #f5f5f5;\n            --weiss: #ffffff;\n            --koralle: #f67280;\n            --koralle-hover: #e05e6b;\n            --mint: #a8dadc;\n            --text-muted: #66768f;\n            --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n        }\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n        html { scroll-behavior: smooth; }\n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: var(--weiss);\n            color: var(--marineblau);\n            line-height: 1.6;\n            -webkit-font-smoothing: antialiased;\n            overflow-x: hidden;\n        }\n        a { text-decoration: none; color: inherit; }\n        .es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n        \/* ===================== HEADER ===================== *\/\n        header {\n            position: fixed; top: 0; left: 0; right: 0; padding: 20px 0;\n            z-index: 500; background: var(--weiss); border-bottom: 1px solid rgba(30,58,95,0.06);\n        }\n        .nav-inner {\n            position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 52px;\n        }\n        .nav-inner .logo { flex-shrink: 0; z-index: 700; font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; color: var(--marineblau); display: flex; align-items: center; }\n        .nav-inner .logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n        .nav-links {\n            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);\n            display: flex; align-items: center; justify-content: center; gap: 28px; list-style: none; font-size: 15px; font-weight: 400;\n        }\n        .nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n        .nav-links a:hover { color: var(--marineblau); }\n\n        .nav-right-group { flex-shrink: 0; display: flex; align-items: center; z-index: 700; }\n        .btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n        .btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white; }\n\n        .nav-right { display: flex; align-items: center; }\n        .nav-utils { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(30,58,95,0.12); }\n\n        \/* ===================== SUCHE (ORIGINAL DESIGN) ===================== *\/\n        .nav-search { display: flex; align-items: center; flex-direction: row-reverse; position: relative; }\n        .nav-search-trigger {\n            display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;\n            flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer;\n            border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; z-index: 10; position: relative;\n        }\n        .nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n        .nav-search-trigger svg { width: 20px; height: 20px; pointer-events: none; }\n        \n        .nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s var(--ease-out), opacity 0.35s ease; }\n        .nav-search.is-open .nav-search-input-wrap { width: 200px; min-width: 200px; opacity: 1; }\n        .nav-search-input-wrap input {\n            width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2);\n            border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau);\n            background: var(--weiss); box-sizing: border-box;\n        }\n        .nav-search-input-wrap input:focus { outline: none; border-color: var(--marineblau); }\n        .nav-search-input-wrap input::placeholder { color: var(--text-muted); }\n\n        \/* LIVE SUCHE DROP-DOWN *\/\n        .search-results-dropdown {\n            position: absolute; top: calc(100% + 15px); right: 0; width: 250px;\n            background: var(--weiss); border-radius: 12px; box-shadow: 0 10px 30px rgba(30,58,95,0.12);\n            border: 1px solid rgba(30,58,95,0.08); display: none; z-index: 999; overflow: hidden;\n        }\n        .search-result-item {\n            display: block; padding: 12px 16px; font-size: 14px; color: var(--marineblau);\n            border-bottom: 1px solid rgba(30,58,95,0.05); transition: background 0.2s;\n        }\n        .search-result-item:hover { background: #f8f9fa; color: var(--koralle); }\n        .search-result-item:last-child { border-bottom: none; }\n        .search-no-results { padding: 12px 16px; font-size: 13px; color: var(--text-muted); }\n\n        \/* ===================== SPRACHE & BURGER ===================== *\/\n        .nav-lang { display: flex; align-items: center; background: rgba(30,58,95,0.06); border-radius: 100px; padding: 4px; gap: 2px; }\n        .nav-lang a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: 100px; transition: color 0.2s ease, background 0.2s ease; }\n        .nav-lang a:hover { color: var(--marineblau); }\n        .nav-lang a.active { color: var(--marineblau); background: var(--weiss); box-shadow: 0 1px 3px rgba(30,58,95,0.08); }\n\n.nav-links a.active {\n    color: var(--marineblau);\n    text-decoration: underline;\n    text-decoration-color: var(--koralle);\n    text-underline-position: under;\n}\n\n\n\n        .es-burger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 700; -webkit-tap-highlight-color: transparent; }\n        .es-burger-box { position: relative; width: 24px; height: 16px; }\n        .es-burger-box span { display: block; position: absolute; left: 0; width: 24px; height: 2px; background: var(--marineblau); border-radius: 2px; transition: all 0.3s ease; }\n        .es-burger-box span:nth-child(1) { top: 0; }\n        .es-burger-box span:nth-child(2) { top: 7px; }\n        .es-burger-box span:nth-child(3) { top: 14px; }\n        .es-burger.is-open .es-burger-box span { background: var(--weiss); }\n        .es-burger.is-open .es-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }\n        .es-burger.is-open .es-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n        .es-burger.is-open .es-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }\n\n        \/* ===================== MOBILE OVERLAY ===================== *\/\n        .es-mobile-overlay { position: fixed; inset: 0; z-index: 600; background: var(--marineblau); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 100px 10vw 60px; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.45s var(--ease-out); }\n        .es-mobile-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n        .es-overlay-close { position: absolute; top: 24px; right: 5vw; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.12); border: none; border-radius: 50%; cursor: pointer; color: var(--weiss); transition: all 0.25s ease; }\n        .es-overlay-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }\n        .es-overlay-close svg { width: 20px; height: 20px; }\n        .es-mobile-nav { list-style: none; width: 100%; }\n        .es-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }\n        .es-mobile-nav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n        .es-mobile-nav a { display: block; font-family: 'Outfit', sans-serif; font-size: clamp(36px, 8vw, 64px); font-weight: 300; color: rgba(255,255,255,0.9); padding: 20px 0; line-height: 1; transition: all 0.25s ease; }\n        .es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n        body.es-nav-open { overflow: hidden; }\n\n        @media (max-width: 900px) {\n            .nav-inner .nav-links, .nav-inner .nav-right { display: none !important; }\n            .es-burger { display: flex; }\n        }\n    <\/style>\n\n\n\n<div class=\"es-mobile-overlay\" id=\"es-mobile-overlay\" aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Navigation\">\n    <button type=\"button\" class=\"es-overlay-close\" id=\"es-overlay-close\" aria-label=\"Men\u00fc schlie\u00dfen\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n        <\/svg>\n    <\/button>\n    <nav aria-label=\"Mobile Navigation\">\n        <ul class=\"es-mobile-nav\">\n            <li class=\"es-mobile-group\">\n                <button type=\"button\" class=\"es-mobile-toggle\" aria-expanded=\"false\" aria-controls=\"es-mobile-sub-services\">\n                    <span>Services<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n                <\/button>\n                <div class=\"es-mobile-sub\" id=\"es-mobile-sub-services\" hidden>\n                    <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/\" class=\"es-mobile-link es-mobile-sub__all\">All services \u2192<\/a>\n                                            <div class=\"es-mobile-sub__group\">\n                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/webdesign\/\" class=\"es-mobile-link es-mobile-sub__title\">Web design<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/website-erstellen-lassen\/\" class=\"es-mobile-link\">Get a website built<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/wordpress-webdesign\/\" class=\"es-mobile-link\">WordPress web design<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/barrierefreies-webdesign\/\" class=\"es-mobile-link\">Accessible web design<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/website-relaunch\/\" class=\"es-mobile-link\">Website relaunch<\/a>\n                                                    <\/div>\n                                            <div class=\"es-mobile-sub__group\">\n                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/e-commerce\/\" class=\"es-mobile-link es-mobile-sub__title\">E-commerce &amp; development<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/shopify-online-shop\/\" class=\"es-mobile-link\">Shopify online shop<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/app-entwicklung\/\" class=\"es-mobile-link\">App development<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/pwa-entwicklung\/\" class=\"es-mobile-link\">PWA development<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/schnittstellen-api-entwicklung\/\" class=\"es-mobile-link\">Interfaces &amp; API development<\/a>\n                                                    <\/div>\n                                            <div class=\"es-mobile-sub__group\">\n                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/branding\/\" class=\"es-mobile-link es-mobile-sub__title\">Branding<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/logodesign\/\" class=\"es-mobile-link\">Logo design<\/a>\n                                                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/corporate-identity\/\" class=\"es-mobile-link\">Corporate identity<\/a>\n                                                    <\/div>\n                                            <div class=\"es-mobile-sub__group\">\n                            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/seo\/\" class=\"es-mobile-link es-mobile-sub__title\">SEO<\/a>\n                                                    <\/div>\n                                    <\/div>\n            <\/li>\n            <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-referenzen\/\" class=\"es-mobile-link\">Cases<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-expertise\/\" class=\"es-mobile-link\">Expertise<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/ueber-mich\/\" class=\"es-mobile-link\">About me<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/blog\/\" class=\"es-mobile-link\">Blog<\/a><\/li>        <\/ul>\n        <div class=\"es-mobile-extra\">\n                            <a href=\"https:\/\/eliasschultze.de\/en\/seo-check\/\" class=\"es-mobile-link\">Free SEO check<\/a>\n                            <a href=\"https:\/\/eliasschultze.de\/en\/preisberechnung\/\" class=\"es-mobile-link\">Price calculator<\/a>\n                            <a href=\"https:\/\/eliasschultze.de\/en\/webdesign-mosbach\/\" class=\"es-mobile-link\">Web design Mosbach<\/a>\n                            <a href=\"https:\/\/eliasschultze.de\/en\/webdesign-eberbach\/\" class=\"es-mobile-link\">Web design Eberbach<\/a>\n                            <a href=\"https:\/\/eliasschultze.de\/en\/webdesign-hirschhorn\/\" class=\"es-mobile-link\">Web design Hirschhorn<\/a>\n                    <\/div>\n        <div class=\"es-mobile-cta\">\n            <a href=\"https:\/\/eliasschultze.de\/en\/#kontakt\" class=\"es-mobile-link\">Kostenloses Erstgespr\u00e4ch<\/a>\n        <\/div>\n    <\/nav>\n    <div class=\"es-mobile-footer\">\n        <div class=\"es-mobile-lang\" data-no-translation role=\"group\" aria-label=\"Language\"><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\" hreflang=\"de\" lang=\"de\" class=\"\">DE<\/a><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\" hreflang=\"en\" lang=\"en\" class=\"active\" aria-current=\"true\">EN<\/a><\/div>        <div class=\"es-mobile-social\">\n            <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram \u2924<span class=\"sr-only\"> (\u00f6ffnet in neuem Tab)<\/span><\/a>\n        <\/div>\n    <\/div>\n<\/div>\n    <header id=\"header\" class=\"header\" role=\"banner\">\n    <div class=\"es-container nav-inner\">\n        <a href=\"https:\/\/eliasschultze.de\/en\/\" class=\"logo\">\n            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/07\/Logo_mit_Kontur_Wortbildmarke-ace124.svg\" alt=\"es.design | Home \u2013 Home\" width=\"180\" height=\"36\">\n        <\/a>\n        <nav class=\"nav-links\" aria-label=\"Main navigation\">\n            <a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/\" class=\"nav-mega-trigger\" id=\"nav-mega-trigger\" aria-expanded=\"false\" aria-controls=\"nav-mega-services\" aria-haspopup=\"true\">\n                Services                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"3\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n            <\/a>\n            <a href=\"https:\/\/eliasschultze.de\/en\/webdesign-referenzen\/\">Cases<\/a><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-expertise\/\">Expertise<\/a><a href=\"https:\/\/eliasschultze.de\/en\/ueber-mich\/\">About me<\/a><a href=\"https:\/\/eliasschultze.de\/en\/blog\/\">Blog<\/a>        <\/nav>\n        <div class=\"nav-right-group\">\n            <div class=\"nav-right\">\n                <div class=\"nav-utils\">\n                    <div class=\"nav-search\" id=\"nav-search-wrap\">\n                        <form class=\"nav-search-input-wrap\" role=\"search\" action=\"https:\/\/eliasschultze.de\/en\/\" method=\"get\" id=\"nav-search-form\">\n                            <input type=\"search\" id=\"nav-search-input\" name=\"s\" placeholder=\"Suchen\u2026\" value=\"\" autocomplete=\"off\" aria-label=\"Seite durchsuchen\">\n                        <\/form>\n                        <button type=\"button\" class=\"nav-search-trigger\" aria-label=\"Suchen\" id=\"nav-search-trigger\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"nav-lang\" data-no-translation role=\"group\" aria-label=\"Language\"><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\" hreflang=\"de\" lang=\"de\" class=\"\">DE<\/a><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\" hreflang=\"en\" lang=\"en\" class=\"active\" aria-current=\"true\">EN<\/a><\/div>                    <button type=\"button\" class=\"es-theme-toggle\" data-es-theme-toggle aria-pressed=\"false\" aria-label=\"Switch to dark mode\"><svg class=\"es-theme-toggle__moon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 14.5A8.5 8.5 0 1112.5 3 7 7 0 0021 14.5z\"\/><\/svg><svg class=\"es-theme-toggle__sun\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path stroke-linecap=\"round\" d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41\"\/><\/svg><\/button>                <\/div>\n                <a href=\"https:\/\/eliasschultze.de\/en\/#kontakt\" class=\"btn-outline\">Let's talk<\/a>\n            <\/div>\n            <button type=\"button\" class=\"es-theme-toggle es-theme-toggle--mobile\" data-es-theme-toggle aria-pressed=\"false\" aria-label=\"Switch to dark mode\"><svg class=\"es-theme-toggle__moon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 14.5A8.5 8.5 0 1112.5 3 7 7 0 0021 14.5z\"\/><\/svg><svg class=\"es-theme-toggle__sun\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path stroke-linecap=\"round\" d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41\"\/><\/svg><\/button>            <button type=\"button\" class=\"es-search-open\" id=\"es-search-open-mobile\" aria-label=\"Suchen\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/>\n                <\/svg>\n            <\/button>\n            <button type=\"button\" class=\"es-burger\" id=\"es-burger\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"es-mobile-overlay\">\n                <div class=\"es-burger-box\">\n                    <span><\/span>\n                    <span><\/span>\n                    <span><\/span>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n    <div class=\"nav-mega\" id=\"nav-mega-services\" role=\"region\" aria-label=\"Services menu\" hidden>\n    <div class=\"nav-mega__card\">\n        <div class=\"nav-mega__main\">\n            <div class=\"nav-mega__grid\">\n                                    <div class=\"nav-mega__tile\">\n                        <a class=\"nav-mega__title\" href=\"https:\/\/eliasschultze.de\/en\/leistungen\/webdesign\/\">\n                            <span class=\"nav-mega__num\">01<\/span>\n                            Web design                        <\/a>\n                        <p class=\"nav-mega__desc\">Websites that generate enquiries.<\/p>\n                                                                            <ul>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/website-erstellen-lassen\/\">Get a website built<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/wordpress-webdesign\/\">WordPress web design<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/barrierefreies-webdesign\/\">Accessible web design<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/website-relaunch\/\">Website relaunch<\/a><\/li>\n                                                            <\/ul>\n                                            <\/div>\n                                    <div class=\"nav-mega__tile\">\n                        <a class=\"nav-mega__title\" href=\"https:\/\/eliasschultze.de\/en\/leistungen\/e-commerce\/\">\n                            <span class=\"nav-mega__num\">02<\/span>\n                            E-commerce &amp; development                        <\/a>\n                        <p class=\"nav-mega__desc\">Shops, apps and interfaces.<\/p>\n                                                                            <ul>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/shopify-online-shop\/\">Shopify online shop<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/app-entwicklung\/\">App development<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/pwa-entwicklung\/\">PWA development<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/schnittstellen-api-entwicklung\/\">Interfaces &amp; API development<\/a><\/li>\n                                                            <\/ul>\n                                            <\/div>\n                                    <div class=\"nav-mega__tile\">\n                        <a class=\"nav-mega__title\" href=\"https:\/\/eliasschultze.de\/en\/leistungen\/branding\/\">\n                            <span class=\"nav-mega__num\">03<\/span>\n                            Branding                        <\/a>\n                        <p class=\"nav-mega__desc\">Logo and identity, cohesive.<\/p>\n                                                                            <ul>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/logodesign\/\">Logo design<\/a><\/li>\n                                                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/corporate-identity\/\">Corporate identity<\/a><\/li>\n                                                            <\/ul>\n                                            <\/div>\n                                    <div class=\"nav-mega__tile\">\n                        <a class=\"nav-mega__title\" href=\"https:\/\/eliasschultze.de\/en\/leistungen\/seo\/\">\n                            <span class=\"nav-mega__num\">04<\/span>\n                            SEO                        <\/a>\n                        <p class=\"nav-mega__desc\">Get found \u2013 locally and beyond.<\/p>\n                                                                    <\/div>\n                            <\/div>\n            <a class=\"nav-mega__all\" href=\"https:\/\/eliasschultze.de\/en\/leistungen\/\">All services <span aria-hidden=\"true\">\u2192<\/span><\/a>\n        <\/div>\n        <aside class=\"nav-mega__side\">\n            <p class=\"nav-mega__label\">On site<\/p>\n            <ul>\n                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-mosbach\/\">Web design Mosbach<\/a><\/li>\n                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-eberbach\/\">Web design Eberbach<\/a><\/li>\n                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-hirschhorn\/\">Web design Hirschhorn<\/a><\/li>\n                            <\/ul>\n            <p class=\"nav-mega__label\">Free tools<\/p>\n            <ul>\n                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/seo-check\/\">Free SEO check<\/a><\/li>\n                                    <li><a href=\"https:\/\/eliasschultze.de\/en\/preisberechnung\/\">Price calculator<\/a><\/li>\n                            <\/ul>\n            <a class=\"nav-mega__cta\" href=\"https:\/\/eliasschultze.de\/en\/#kontakt\">Free intro call<\/a>\n        <\/aside>\n    <\/div>\n<\/div>\n    <\/header>\n    \n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    'use strict';\n\n    \/\/ 1. Burger Men\u00fc\n    var burger = document.getElementById('es-burger');\n    var overlay = document.getElementById('es-mobile-overlay');\n    var closeBtn = document.getElementById('es-overlay-close');\n    var mobileLinks = document.querySelectorAll('.es-mobile-link');\n    var menuOpen = false;\n\n    function openNav() {\n        menuOpen = true; burger.classList.add('is-open'); overlay.classList.add('is-open'); document.body.classList.add('es-nav-open');\n    }\n    function closeNav() {\n        menuOpen = false; burger.classList.remove('is-open'); overlay.classList.remove('is-open'); document.body.classList.remove('es-nav-open');\n    }\n\n    if (burger && overlay) {\n        burger.addEventListener('click', function(e) { e.stopPropagation(); menuOpen ? closeNav() : openNav(); });\n        if (closeBtn) closeBtn.addEventListener('click', function(e) { e.stopPropagation(); closeNav(); });\n        mobileLinks.forEach(function(link) { link.addEventListener('click', closeNav); });\n    }\n\n    \/\/ 2. Suche\n    var searchWrap = document.getElementById('nav-search-wrap');\n    var searchTrigger = document.getElementById('nav-search-trigger');\n    var searchForm = document.getElementById('nav-search-form');\n    var searchInput = document.getElementById('nav-search-input');\n    var resultsDropdown = document.getElementById('search-results');\n\n    if (searchWrap && searchTrigger && searchInput && searchForm) {\n        \n        \/\/ Klick auf Lupe\n        searchTrigger.addEventListener('click', function(e) {\n            e.preventDefault();\n            e.stopPropagation(); \/\/ WICHTIG: Blockiert st\u00f6rende Events!\n\n            if (!searchWrap.classList.contains('is-open')) {\n                searchWrap.classList.add('is-open');\n                setTimeout(function() { searchInput.focus(); }, 100);\n            } else {\n                if (searchInput.value.trim() !== \"\") {\n                    searchForm.submit();\n                } else {\n                    searchWrap.classList.remove('is-open');\n                    if (resultsDropdown) resultsDropdown.style.display = 'none';\n                }\n            }\n        });\n\n        \/\/ Verhindert, dass Klicks ins Eingabefeld die Suche schlie\u00dfen\n        searchInput.addEventListener('click', function(e) {\n            e.stopPropagation();\n        });\n\n        \/\/ Enter-Taste absichern\n        searchForm.addEventListener('submit', function(e) {\n            if (searchInput.value.trim() === \"\") {\n                e.preventDefault();\n            }\n        });\n\n        \/\/ Live-Suche\n        let debounceTimer;\n        searchInput.addEventListener('input', function() {\n            const query = this.value.trim();\n            clearTimeout(debounceTimer);\n\n            if (query.length < 3) {\n                if(resultsDropdown) resultsDropdown.style.display = 'none';\n                return;\n            }\n\n            debounceTimer = setTimeout(() => {\n                fetch('\/wp-json\/wp\/v2\/search?search=' + encodeURIComponent(query) + '&per_page=5')\n                    .then(response => response.json())\n                    .then(data => {\n                        if (!resultsDropdown) return;\n                        resultsDropdown.innerHTML = '';\n                        if (data && data.length > 0) {\n                            data.forEach(item => {\n                                const link = document.createElement('a');\n                                link.href = item.url;\n                                link.className = 'search-result-item';\n                                link.innerHTML = item.title; \n                                resultsDropdown.appendChild(link);\n                            });\n                            resultsDropdown.style.display = 'block';\n                        } else {\n                            resultsDropdown.innerHTML = '<div class=\"search-no-results\">Keine Ergebnisse gefunden.<\/div>';\n                            resultsDropdown.style.display = 'block';\n                        }\n                    })\n                    .catch(error => console.error('Such-Fehler:', error));\n            }, 300);\n        });\n\n        \/\/ Klick au\u00dferhalb schlie\u00dft die Suche\n        document.addEventListener('click', function(e) {\n            if (searchWrap.classList.contains('is-open') && !searchWrap.contains(e.target)) {\n                searchWrap.classList.remove('is-open');\n                if (resultsDropdown) resultsDropdown.style.display = 'none';\n            }\n        });\n    }\n});\n<\/script>\n\n\n\n<style>\n    :root {\n        --marineblau: #1e3a5f;\n        --hellgrau: #f5f5f5;\n        --weiss: #ffffff;\n        --koralle: #f67280;\n        --koralle-hover: #e05e6b;\n        --mint: #a8dadc;\n        --text-muted: #66768f;\n        --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body {\n        font-family: 'Inter', sans-serif;\n        background-color: var(--weiss);\n        color: var(--marineblau);\n        line-height: 1.6;\n        -webkit-font-smoothing: antialiased;\n        overflow-x: hidden;\n    }\n    h1, h2, h3, h4 {\n        font-family: 'Outfit', sans-serif;\n        font-weight: 300;\n        line-height: 1.2;\n        letter-spacing: -0.02em;\n    }\n    a { text-decoration: none; color: inherit; }\n    .es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n    \n    \/* ===================== HERO ===================== *\/\n    .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding-top: 93px; }\n    .hero-text { background-color: var(--hellgrau); padding: 80px 5vw; display: flex; flex-direction: column; justify-content: center; }\n    .eyebrow { text-transform: uppercase; letter-spacing: 0.15em; color: var(--koralle); font-size: 14px; font-weight: 600; margin-bottom: 24px; display: block; }\n    .hero h1 { font-size: clamp(3rem, 4.5vw, 5rem); margin-bottom: 24px; color: var(--marineblau); }\n    .hero h1 span { font-weight: 500; background: linear-gradient(to top, rgba(168,218,220,0.5) 0%, rgba(168,218,220,0.5) 10px, transparent 10px); background-size: 100% 14px; background-position: 0 calc(100% - 15px); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 3px; }\n    .hero p { font-size: clamp(16px, 1.5vw, 18px); color: var(--text-muted); max-width: 550px; margin-bottom: 32px; }\n    .hero-bullets { list-style: none; margin-bottom: 48px; }\n    .hero-bullets li { position: relative; padding-left: 24px; margin-bottom: 12px; color: var(--marineblau); font-weight: 500; font-size: 16px; }\n    .hero-bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--koralle); border-radius: 50%; }\n    .hero-image-container { position: relative; width: 100%; height: 100%; background: #e8eef3; }\n    .hero-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; }\n    \n    \/* ===================== TIMELINE ===================== *\/\n    .timeline-section { padding: 150px 0; background: var(--weiss); text-align: center; }\n    .section-header { margin-bottom: 80px; }\n    .section-header h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 16px; font-weight: 500; }\n    .section-header p { font-size: 18px; color: var(--text-muted); }\n    .timeline-container { max-width: 800px; margin: 0 auto; position: relative; padding: 20px 0; }\n    .timeline-container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(30,58,95,0.08); transform: translateX(-50%); }\n    .timeline-item { position: relative; margin-bottom: 80px; }\n    .timeline-item:last-child { margin-bottom: 0; }\n    .timeline-date { display: inline-block; background: var(--marineblau); color: var(--weiss); padding: 8px 24px; border-radius: 100px; font-size: 14px; font-weight: 500; margin-bottom: 32px; position: relative; z-index: 2; }\n    .timeline-content { background: var(--hellgrau); padding: 40px; border-radius: 24px; position: relative; z-index: 2; max-width: 500px; margin: 0 auto; border: 1px solid rgba(30,58,95,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }\n    .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30,58,95,0.08); }\n    .timeline-content h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }\n    .timeline-content p { color: var(--text-muted); font-size: 16px; }\n    \n    \/* ===================== PHILOSOPHIE ===================== *\/\n    .philosophy { padding: 150px 0; background-color: var(--hellgrau); border-radius: 40px; margin: 0 2vw; }\n    .philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\n    .philosophy h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 24px; }\n    .philosophy p { font-size: 18px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.8; }\n    .quote-box { padding-left: 24px; border-left: 3px solid var(--koralle); font-style: italic; font-size: 20px; color: var(--marineblau); font-family: 'Outfit', sans-serif; }\n    .philosophy-image { width: 100%; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }\n    .philosophy-image img { width: 100%; height: auto; display: block; }\n    \n    \/* ===================== TECH ORBITS ===================== *\/\n    .skills-section {\n        padding: 150px 0;\n        background: var(--weiss);\n        overflow: visible;\n        position: relative;\n    }\n    .skills-section::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background:\n            radial-gradient(ellipse 80% 60% at 50% 45%, rgba(168, 218, 220, 0.18) 0%, transparent 65%),\n            radial-gradient(ellipse 40% 30% at 20% 60%, rgba(246, 114, 128, 0.06) 0%, transparent 70%);\n        opacity: 0;\n        transition: opacity 1.4s ease;\n        pointer-events: none;\n    }\n    .skills-section:has(.tech-constellation.scroll-in--visible)::before {\n        opacity: 1;\n    }\n    .tech-constellation {\n        --orbit-inner: 132px;\n        --orbit-outer: 214px;\n        position: relative;\n        width: min(560px, 92vw);\n        height: min(560px, 92vw);\n        margin: 8px auto 0;\n        user-select: none;\n    }\n    .tech-constellation__glow {\n        position: absolute;\n        inset: 18%;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(168, 218, 220, 0.32) 0%, transparent 70%);\n        pointer-events: none;\n        z-index: 0;\n    }\n    .tech-orbit-path {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        border-radius: 50%;\n        border: 1px dashed rgba(30, 58, 95, 0.14);\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        z-index: 1;\n    }\n    .tech-orbit-path--inner {\n        width: calc(var(--orbit-inner) * 2);\n        height: calc(var(--orbit-inner) * 2);\n    }\n    .tech-orbit-path--outer {\n        width: calc(var(--orbit-outer) * 2);\n        height: calc(var(--orbit-outer) * 2);\n        border-color: rgba(30, 58, 95, 0.1);\n    }\n    .tech-constellation__hub {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        z-index: 4;\n        width: 128px;\n        height: 128px;\n        transform: translate(-50%, -50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: #fff;\n        border-radius: 50%;\n        border: 1px solid rgba(30, 58, 95, 0.08);\n        box-shadow:\n            0 18px 48px rgba(30, 58, 95, 0.12),\n            0 0 0 12px rgba(168, 218, 220, 0.16);\n        pointer-events: none;\n    }\n    .tech-constellation__hub::before {\n        content: '';\n        position: absolute;\n        inset: -14px;\n        border-radius: 50%;\n        border: 1px solid rgba(168, 218, 220, 0.45);\n        animation: tech-hub-pulse 3.6s ease-in-out infinite;\n        pointer-events: none;\n    }\n    .tech-constellation__hub img {\n        width: 68%;\n        height: auto;\n        position: relative;\n        z-index: 1;\n    }\n    .tech-sat {\n        --angle: calc(var(--i) * 90deg + var(--phase, 0deg));\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        z-index: 2;\n        width: 64px;\n        height: 64px;\n        margin: -32px 0 0 -32px;\n        animation: tech-orbit-spin var(--orbit-dur, 36s) linear infinite;\n        animation-direction: var(--orbit-dir, normal);\n    }\n    .tech-sat--outer {\n        --orbit-r: var(--orbit-outer);\n        --orbit-dur: 38s;\n        --orbit-dir: normal;\n        --phase: 0deg;\n    }\n    .tech-sat--inner {\n        --orbit-r: var(--orbit-inner);\n        --orbit-dur: 26s;\n        --orbit-dir: reverse;\n        --phase: 45deg;\n    }\n    .tech-sat__face {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        border-radius: 20px;\n        background: #fff;\n        border: 1px solid rgba(30, 58, 95, 0.08);\n        box-shadow:\n            0 12px 28px rgba(30, 58, 95, 0.1),\n            0 0 0 5px rgba(168, 218, 220, 0.1);\n        transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;\n    }\n    .tech-sat__face img {\n        width: 34px;\n        height: 34px;\n        object-fit: contain;\n        pointer-events: none;\n    }\n    .tech-sat__face img.tech-sat__ga {\n        width: 42px;\n        height: 42px;\n    }\n    .tech-sat a.tech-sat__face {\n        text-decoration: none;\n        color: inherit;\n    }\n    .tech-sat__label {\n        position: absolute;\n        left: 50%;\n        bottom: -26px;\n        transform: translateX(-50%);\n        white-space: nowrap;\n        font-size: 11px;\n        font-weight: 500;\n        letter-spacing: 0.04em;\n        color: var(--text-muted);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.25s ease;\n    }\n    .tech-sat:hover,\n    .tech-sat:focus-within {\n        z-index: 5;\n    }\n    .tech-sat:hover .tech-sat__face,\n    .tech-sat:focus-within .tech-sat__face {\n        transform: scale(1.12);\n        box-shadow:\n            0 16px 36px rgba(30, 58, 95, 0.16),\n            0 0 0 7px rgba(246, 114, 128, 0.16);\n    }\n    .tech-sat:hover .tech-sat__label,\n    .tech-sat:focus-within .tech-sat__label {\n        opacity: 1;\n    }\n    .tech-constellation:has(.tech-sat:hover) .tech-sat,\n    .tech-constellation:has(.tech-sat:focus-within) .tech-sat,\n    .tech-constellation.is-offscreen .tech-sat {\n        animation-play-state: paused;\n    }\n    .tech-constellation-legend {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 8px;\n        margin-top: 12px;\n    }\n    .tech-constellation-legend span {\n        font-size: 12px;\n        color: var(--text-muted);\n        padding: 6px 12px;\n        border-radius: 999px;\n        background: rgba(30, 58, 95, 0.04);\n        border: 1px solid rgba(30, 58, 95, 0.06);\n    }\n    @keyframes tech-orbit-spin {\n        from {\n            transform: rotate(var(--angle)) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--angle) * -1));\n        }\n        to {\n            transform: rotate(calc(var(--angle) + 360deg)) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--angle) * -1 - 360deg));\n        }\n    }\n    @keyframes tech-hub-pulse {\n        0%, 100% { transform: scale(1); opacity: 0.55; }\n        50% { transform: scale(1.06); opacity: 1; }\n    }\n    html[data-theme=\"dark\"] .tech-orbit-path {\n        border-color: rgba(232, 238, 244, 0.12);\n    }\n    html[data-theme=\"dark\"] .tech-sat__face,\n    html[data-theme=\"dark\"] .tech-constellation__hub {\n        background: #1a2433;\n        border-color: rgba(232, 238, 244, 0.1);\n        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(168, 218, 220, 0.08);\n    }\n    html[data-theme=\"dark\"] .tech-constellation-legend span {\n        background: rgba(232, 238, 244, 0.05);\n        border-color: rgba(232, 238, 244, 0.08);\n        color: #9aa8b8;\n    }\n    @media (max-width: 640px) {\n        .tech-constellation {\n            --orbit-inner: 96px;\n            --orbit-outer: 152px;\n            width: min(360px, 92vw);\n            height: min(360px, 92vw);\n        }\n        .tech-constellation__hub {\n            width: 96px;\n            height: 96px;\n        }\n        .tech-sat {\n            width: 52px;\n            height: 52px;\n            margin: -26px 0 0 -26px;\n        }\n        .tech-sat__face img {\n            width: 28px;\n            height: 28px;\n        }\n        .tech-sat__label { display: none; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n        .tech-sat,\n        .tech-constellation__hub::before {\n            animation: none;\n        }\n        .tech-sat--outer {\n            transform: rotate(var(--angle)) translateY(calc(var(--orbit-outer) * -1)) rotate(calc(var(--angle) * -1));\n        }\n        .tech-sat--inner {\n            transform: rotate(var(--angle)) translateY(calc(var(--orbit-inner) * -1)) rotate(calc(var(--angle) * -1));\n        }\n    }\n    \n    \/* ===================== FAQ ===================== *\/\n    .faq { padding: 120px 0; background-color: var(--hellgrau); border-radius: 40px; margin: 0 2vw 100px; }\n    .faq-container { max-width: 800px; margin: 0 auto; }\n    .faq-item { border-bottom: 1px solid rgba(30,58,95,0.1); }\n    .faq-item:first-child { border-top: 1px solid rgba(30,58,95,0.1); }\n    .faq-question { width: 100%; text-align: left; padding: 32px 0; background: none; border: none; font-size: 20px; font-family: 'Outfit', sans-serif; color: var(--marineblau); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s ease; }\n    .faq-question:hover { color: var(--koralle); }\n    .faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }\n    .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background-color: var(--marineblau); transition: transform 0.4s var(--ease-out); }\n    .faq-icon::before { top: 9px; left: 0; width: 20px; height: 2px; }\n    .faq-icon::after { top: 0; left: 9px; width: 2px; height: 20px; }\n    .faq-item.active .faq-icon::after { transform: rotate(90deg); }\n    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }\n    .faq-answer p { padding-bottom: 32px; color: var(--text-muted); font-size: 16px; line-height: 1.8; margin: 0; }\n    \n    \/* ===================== ANIMATIONEN ===================== *\/\n    .scroll-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }\n    .scroll-in.scroll-in--visible { opacity: 1; transform: translateY(0); }\n    .delay-1 { transition-delay: 0.1s; }\n    .delay-2 { transition-delay: 0.2s; }\n    .delay-3 { transition-delay: 0.3s; }\n    \n    \/* ===================== FOOTER ===================== *\/\n    footer { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }\n    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 48px 32px; margin-bottom: 48px; }\n    .footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }\n    .footer-brand .footer-logo img { height: 44px; width: auto; display: block; }\n    .footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 280px; margin-bottom: 24px; }\n    .footer-search-form { display: flex; align-items: stretch; max-width: 280px; margin-bottom: 24px; }\n    .footer-search-form input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.25); border-right: none; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.95); font-size: 14px; font-family: inherit; color: var(--marineblau); }\n    .footer-search-form input::placeholder { color: var(--text-muted); }\n    .footer-search-form button { width: 44px; background: var(--mint); border: none; border-radius: 0 8px 8px 0; color: var(--marineblau); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n    .footer-search-form button:hover { background: #8fcacd; }\n    .footer-search-form button svg { width: 18px; height: 18px; }\n    .footer-social { display: flex; gap: 10px; }\n    .footer-social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n    .footer-social a:hover { background: rgba(255,255,255,0.2); }\n    .footer-social a svg { width: 18px; height: 18px; }\n    .footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }\n    .footer-col ul { list-style: none; }\n    .footer-col ul li { margin-bottom: 10px; }\n    .footer-col a { font-size: 15px; color: rgba(255,255,255,0.9); transition: color 0.2s ease; }\n    .footer-col a:hover { color: var(--weiss); }\n    .footer-col p { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }\n    .footer-col p a { color: inherit; }\n    .footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }\n    \n    @media (max-width: 900px) {\n        .hero { grid-template-columns: 1fr; padding-top: 70px; }\n        .hero-text { order: 2; padding: 60px 5vw; }\n        .hero-image-container { order: 1; height: 60vh; min-height: 400px; }\n        .philosophy-grid { grid-template-columns: 1fr; gap: 40px; }\n        .philosophy { margin: 0; border-radius: 0; padding: 100px 0; }\n        .faq { margin: 0; border-radius: 0; padding: 100px 0; }\n        .timeline-container::before { left: 24px; transform: none; }\n        .timeline-item { text-align: left; padding-left: 64px; }\n        .timeline-date { margin-bottom: 16px; }\n        .timeline-content { margin: 0; }\n        .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n        .ctc_s_7_icon_padding,\n        .ctc-analytics,\n        .cky-btn-revisit-wrapper.cky-revisit-bottom-left { display: none !important; }\n    }\n    @media (max-width: 768px) {\n        .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n    }\n    <\/style>\n    \n    <main id=\"main\" role=\"main\">\n        <section class=\"hero\">\n            <div class=\"hero-text\">\n                <span class=\"eyebrow scroll-in\">Webdesign Mosbach &amp; Odenwald<\/span>\n                <h1 class=\"scroll-in delay-1\">Web design Mosbach &amp; the Odenwald<\/h1>\n                <p class=\"scroll-in delay-2\"><strong>Webdesign Mosbach<\/strong> und Region: Hinter es.design stehe ich, Elias Schultze. Mein Studio im Odenwald ist der Ort, an dem aus Ideen funktionale Websites und Marken entstehen. Als Webdesigner in Mosbach biete ich Unternehmen aus dem Neckar-Odenwald-Kreis die pers\u00f6nliche Betreuung, die bei gro\u00dfen Agenturen oft fehlt.<\/p>\n                <p class=\"scroll-in delay-2\">Regionalit\u00e4t bedeutet kurze Wege, direktes Feedback und Verst\u00e4ndnis f\u00fcr den lokalen Markt. Ob Handwerksbetrieb aus Mosbach oder mittelst\u00e4ndisches Unternehmen in der Region \u2014 ich verbinde Webdesign-Expertise mit N\u00e4he vor Ort, damit dein Auftritt lokal gefunden wird und \u00fcberzeugt.<\/p>\n                <p class=\"scroll-in delay-3\">Ob Unternehmenswebsite, Online-Shop oder Relaunch: Als Ansprechpartner f\u00fcr <strong>Webdesign Mosbach<\/strong> begleite ich dich von der Strategie \u00fcber UI\/UX bis zur technischen Umsetzung \u2014 SEO-freundlich, responsive und auf deine Zielgruppe zugeschnitten.<\/p>\n                <ul class=\"hero-bullets scroll-in delay-3\">\n                    <li>Standort: Waldbrunn (Odenwald) \/ Remote<\/li>\n                    <li>Spezialisierung: Webdesign &amp; Grafikdesign<\/li>\n                    <li>Projekte abgeschlossen: 20+<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"hero-image-container\">\n                <img height=\"864\" width=\"1184\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Buisiness_Bild.webp\" alt=\"Elias Schultze \u2013 web design Mosbach and the Odenwald\" title=\"| Elias Schultze\">\n            <\/div>\n        <\/section>\n    \n        <section id=\"werdegang\" class=\"timeline-section\">\n            <div class=\"es-container\">\n                <div class=\"section-header scroll-in\">\n                    <h2>Mein Werdegang als Webentwickler<\/h2>\n                    <p>Von der Ausbildung bis zur Selbstst\u00e4ndigkeit \u2014 mit Fokus auf Webdesign Mosbach, den Odenwald und Unternehmen, die online wachsen wollen.<\/p>\n                <\/div>\n                <div class=\"timeline-container\">\n                    <div class=\"timeline-item scroll-in\">\n                        <div class=\"timeline-date\">2019 \u2013 2021<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Autodidaktisches Studium &amp; Design-Grundlagen<\/h3>\n                            <p>Zwei Jahre intensive autodidaktische Weiterbildung in HTML, CSS sowie Adobe Illustrator und InDesign. Die Grundsteinlegung meiner gestalterischen Laufbahn \u2014 heute die Basis f\u00fcr professionelles Webdesign Mosbach und im gesamten Odenwald.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item scroll-in delay-1\">\n                        <div class=\"timeline-date\" style=\"background: var(--koralle);\">2021 \u2013 2024<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Gestaltungs- &amp; Medientechnik in Mosbach<\/h3>\n                            <p>Erfolgreicher Abschluss mit dem Profilfach Gestaltung- und Medientechnik. Fokus auf Designtheorie, Typografie und moderne Medienproduktion.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item scroll-in delay-2\">\n                        <div class=\"timeline-date\" style=\"background: var(--mint); color: var(--marineblau);\">2024 \u2013 JETZT<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Studium Onlinemedien an der DHBW Mosbach<\/h3>\n                            <p>Aktuelles Studium an der DHBW Mosbach. Vertiefung in den Bereichen UX\/UI Design, fortschrittliches Webdesign &amp; strategisches Online-Marketing.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section class=\"philosophy\">\n            <div class=\"es-container philosophy-grid\">\n                <div class=\"philosophy-text\">\n                    <h2 class=\"scroll-in\">Meine Design-Philosophie f\u00fcr modernes UI\/UX Webdesign<\/h2>\n                    <p class=\"scroll-in delay-1\">Gutes Design ist f\u00fcr mich die perfekte Balance zwischen Form und Funktion. F\u00fcr <strong>Webdesign Mosbach<\/strong> und die Region setze ich auf minimalistische <a href=\"\/webdesign-referenzen\/\">Erlebnisse<\/a>, die nicht nur visuell beeindrucken, sondern Nutzer intuitiv ans Ziel f\u00fchren \u2014 und bei Google sichtbar sind.<\/p>\n                    <div class=\"quote-box scroll-in delay-2\">\n                        \u201eSimplicity is the ultimate sophistication.&#8220;<br>\n                        <span style=\"font-size: 14px; color: var(--text-muted); font-family: 'Inter', sans-serif; font-style: normal; display: block; margin-top: 8px;\">\u2013 Leonardo da Vinci<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"philosophy-image scroll-in delay-2\">\n                    <img height=\"1707\" width=\"2560\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/workplace-office-manager-with-small-desk-scaled-1.webp\" alt=\"Workspace Elias Schultze\" title=\"| Elias Schultze\">\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section id=\"faehigkeiten\" class=\"skills-section\">\n            <div class=\"es-container\">\n                <div class=\"section-header scroll-in\" style=\"text-align: center;\">\n                    <h2>Technologien &amp; Web-Expertise f\u00fcr Ihr Projekt<\/h2>\n                    <p>Technologien und Werkzeuge, die ich t\u00e4glich f\u00fcr Webdesign-Projekte in Mosbach, im Odenwald und deutschlandweit einsetze.<\/p>\n                <\/div>\n                <div class=\"tech-constellation scroll-in\" data-tech-constellation>\n                    <div class=\"tech-constellation__glow\"><\/div>\n                    <div class=\"tech-orbit-path tech-orbit-path--outer\" aria-hidden=\"true\"><\/div>\n                    <div class=\"tech-orbit-path tech-orbit-path--inner\" aria-hidden=\"true\"><\/div>\n                    <div class=\"tech-constellation__hub\">\n                        <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Logo_mit_Kontur_Wortbildmarke-scaled.webp\" alt=\"es.design\" width=\"140\" height=\"44\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--outer\" style=\"--i:0\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"JavaScript\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-javascript.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">JavaScript<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--outer\" style=\"--i:1\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"React\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-react.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">React<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--outer\" style=\"--i:2\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"HTML\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-html.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">HTML<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--outer\" style=\"--i:3\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"WordPress\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-wordpress.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">WordPress<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--inner\" style=\"--i:0\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"Storyblok\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-storyblok.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">Storyblok<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--inner\" style=\"--i:1\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"PayPal\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-paypal.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">PayPal<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--inner\" style=\"--i:2\">\n                        <a href=\"https:\/\/skillshop.credential.net\/54fad0d7-35da-47eb-8f8d-67ea7a5ed8b5#acc.uItF7W02\" class=\"tech-sat__face\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Analytics Zertifizierung \u2014 Nachweis ansehen\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Google_Analytics_2026_Badge.png\" alt=\"| es.design\" class=\"tech-sat__ga\" width=\"84\" height=\"84\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">Google Analytics<\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"tech-sat tech-sat--inner\" style=\"--i:3\">\n                        <div class=\"tech-sat__face\" tabindex=\"0\" aria-label=\"CSS\">\n                            <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-css.png\" alt=\"| es.design\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                            <span class=\"tech-sat__label\">CSS<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"tech-constellation-legend scroll-in delay-1\" aria-hidden=\"true\">\n                    <span>JavaScript<\/span>\n                    <span>React<\/span>\n                    <span>Storyblok<\/span>\n                    <span>PayPal<\/span>\n                    <span>Google Analytics<\/span>\n                    <span>HTML<\/span>\n                    <span>CSS<\/span>\n                    <span>WordPress<\/span>\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section id=\"faq\" class=\"faq\">\n            <div class=\"es-container faq-container\">\n                <div class=\"section-header\" style=\"text-align: center;\">\n                    <h2 class=\"scroll-in\">H\u00e4ufig gestellte Fragen<\/h2>\n                    <p class=\"scroll-in delay-1\">Alles, was Sie vor einem Projektstart wissen m\u00f6chten.<\/p>\n                <\/div>\n                <div class=\"faq-list scroll-in delay-2\">\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Warum Webdesign Mosbach mit es.design? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Wer nach <strong>Webdesign Mosbach<\/strong> sucht, will in der Regel einen Ansprechpartner vor Ort \u2014 nicht eine anonyme Agentur. Ich kombiniere Premium-Design mit pers\u00f6nlicher Betreuung aus dem Odenwald: von der Corporate Website \u00fcber E-Commerce bis zum Branding. Du sprichst immer direkt mit mir, erh\u00e4ltst transparente Abl\u00e4ufe und eine Website, die technisch sauber und suchmaschinenoptimiert umgesetzt ist.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Welche Art von Projekten nehme ich an? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Ich fokussiere mich auf Premium Webdesign, E-Commerce-L\u00f6sungen und die Entwicklung ganzheitlicher Corporate Identities f\u00fcr Unternehmen, die Wert auf Qualit\u00e4t und \u00c4sthetik legen.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Wie l\u00e4uft die Zusammenarbeit ab? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Wir starten mit einem lockeren Erstgespr\u00e4ch. Danach erstelle ich ein Strategiekonzept, worauf die Design-Phase folgt. Nach deiner Freigabe setze ich alles technisch perfekt um. Zu guter Letzt geht die Seite nach deiner Absegnung online.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Was kostet ein Projekt? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Jedes Projekt ist so individuell wie das Unternehmen dahinter. Premium-Qualit\u00e4t hat ihren Preis, aber keine versteckten Kosten. Nutze meinen <a href=\"\/preisberechnung\/\">Vorab-Rechner<\/a> f\u00fcr eine erste, schnelle Budget-Orientierung. In unserem Erstgespr\u00e4ch definieren wir den Rahmen und ich erstelle dir ein transparentes Angebot.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Wie lange dauert ein typisches Projekt? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Abh\u00e4ngig vom Umfang dauert eine professionelle Website-Entwicklung bei mir in der Regel zwischen 4 und 8 Wochen von der ersten Idee bis zum Live-Gang.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Biete ich auch Support nach Projektabschluss? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Selbstverst\u00e4ndlich. Eine Website muss gepflegt werden. Ich biete ma\u00dfgeschneiderte Wartungs- und Support-Pakete an, damit dein digitaler Auftritt langfristig sicher und performant bleibt.<\/p><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    \n    <footer class=\"site-footer\">\n    <div class=\"es-container\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-brand\">\n                <a href=\"https:\/\/eliasschultze.de\/en\/\" class=\"footer-logo\">\n                    <img height=\"375\" width=\"852\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\">\n                <\/a>\n                <p class=\"footer-tagline\">Webdesign und Entwicklung mit Leidenschaft aus dem sch\u00f6nen Odenwald. Beratung, Design, Social Media &amp; mehr.<\/p>\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"me noopener noreferrer\" aria-label=\"Instagram (\u00f6ffnet in neuem Tab)\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <h2>Navigation<\/h2>\n                <ul>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/\">Home<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/leistungen\/\">Services<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-referenzen\/\">Cases<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-expertise\/\">Expertise<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/ueber-mich\/\">About me<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/blog\/\">Blog<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/seo-check\/\">Free SEO check<\/a><\/li><li><a href=\"https:\/\/eliasschultze.de\/en\/#kontakt\">Contact<\/a><\/li>                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h2>Locally<\/h2>\n                <ul>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-mosbach\/\">Webdesign Mosbach<\/a><\/li>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-eberbach\/\">Webdesign Eberbach<\/a><\/li>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/webdesign-hirschhorn\/\">Webdesign Hirschhorn<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h2>Legal<\/h2>\n                <ul>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/impressum\/\">Legal notice<\/a><\/li>\n                    <li><a href=\"https:\/\/eliasschultze.de\/en\/datenschutzerklaerung\/\">Privacy policy<\/a><\/li>\n                    <li><button type=\"button\" data-es-cookie-settings style=\"border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:none\">Cookie settings<\/button><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h2>Kontakt<\/h2>\n                <p class=\"es-nap\">\n                    <strong>es.design \u2013 Elias Schultze<\/strong>\n                <\/p>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@eliasschultze.de\">info@eliasschultze.de<\/a><\/p>\n            <\/div>\n        <\/div>\n        <p class=\"footer-bottom\">\u00a9 2026 es.design | Elias Schultze. All rights reserved.<\/p>\n    <\/div>\n<\/footer>\n    \n    <script>\n    (function() {\n        'use strict';\n        function esInit() {\n            var footerForm  = document.getElementById('footer-search-form');\n            var footerInput = document.getElementById('footer-search-input');\n            if (footerForm && footerInput) {\n                footerForm.addEventListener('submit', function(e) {\n                    e.preventDefault();\n                    var q = (footerInput.value || '').trim().toLowerCase();\n                    if (!q) return;\n                    var candidates = document.querySelectorAll('main h1, main h2, main h3, main p');\n                    for (var i = 0; i < candidates.length; i++) {\n                        if (candidates[i].textContent.toLowerCase().indexOf(q) !== -1) {\n                            candidates[i].scrollIntoView({ behavior: 'smooth', block: 'center' });\n                            return;\n                        }\n                    }\n                });\n            }\n            var faqItems = document.querySelectorAll('.faq-item');\n            faqItems.forEach(function(item) {\n                var btn = item.querySelector('.faq-question');\n                if (!btn) return;\n                btn.addEventListener('click', function() {\n                    var ans = item.querySelector('.faq-answer');\n                    var active = item.classList.contains('active');\n                    \/* scrollHeight VOR dem Schlie\u00dfen lesen \u2013 sonst ist es 0, sobald max-height: 0 greift *\/\n                    var openHeight = ans ? ans.scrollHeight + 40 : 0;\n                    faqItems.forEach(function(el) {\n                        el.classList.remove('active');\n                        var a = el.querySelector('.faq-answer');\n                        if (a) a.style.maxHeight = '0px';\n                    });\n                    if (!active &#038;&#038; ans) {\n                        item.classList.add('active');\n                        ans.style.maxHeight = openHeight + 'px';\n                    }\n                });\n            });\n            var scrollEls = document.querySelectorAll('.scroll-in');\n            if ('IntersectionObserver' in window) {\n                var obs = new IntersectionObserver(function(entries) {\n                    entries.forEach(function(e) {\n                        if (e.isIntersecting) e.target.classList.add('scroll-in--visible');\n                    });\n                }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n                scrollEls.forEach(function(el) { obs.observe(el); });\n            } else {\n                scrollEls.forEach(function(el) { el.classList.add('scroll-in--visible'); });\n            }\n            var techCloud = document.querySelector('[data-tech-constellation]');\n            if (techCloud &#038;&#038; !window.matchMedia('(prefers-reduced-motion: reduce)').matches &#038;&#038; 'IntersectionObserver' in window) {\n                var visObs = new IntersectionObserver(function(entries) {\n                    techCloud.classList.toggle('is-offscreen', !entries[0].isIntersecting);\n                }, { threshold: 0.05 });\n                visObs.observe(techCloud);\n            }\n        }\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', esInit);\n        } else {\n            esInit();\n        }\n    })();\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Services All services \u2192 Web design Get a website built WordPress web design Accessible web design Website relaunch E-commerce &amp; development Shopify online shop App development PWA development Interfaces &amp; API development Branding Logo design Corporate identity SEO CasesExpertiseAbout meBlog Free SEO check Price calculator Web design Mosbach Web design Eberbach Web design Hirschhorn Kostenloses [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1891","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/comments?post=1891"}],"version-history":[{"count":86,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions"}],"predecessor-version":[{"id":2664,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions\/2664"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=1891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}