{"id":1894,"date":"2026-03-13T22:07:04","date_gmt":"2026-03-13T22:07:04","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=1894"},"modified":"2026-07-24T12:04:21","modified_gmt":"2026-07-24T12:04:21","slug":"webdesign-expertise","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesign-expertise\/","title":{"rendered":"Web design expertise & strategy | Elias Schultze"},"content":{"rendered":"<!--\n  HEADER F\u00dcR EXPERTISE-SEITE \u2013 wie header-snippet, aber Expertise in der Nav unterstrichen\/markiert (active)\n  F\u00fcr WordPress: Als Custom-HTML-Block auf der Expertise-Seite einf\u00fcgen (oberhalb des Seiteninhalts).\n  Enth\u00e4lt: Skip-Link, Mobile Nav, Desktop-Header, Burger, Suche, DE\/EN, CSS + JS.\n-->\n\n<style>\n\/* ===================== VARIABLEN & BASIS (f\u00fcr Header) ===================== *\/\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; }\nhtml { scroll-behavior: smooth; }\nbody {\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}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n\/* ===================== HEADER ===================== *\/\nheader {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    padding: 20px 0;\n    z-index: 500;\n    background: var(--weiss);\n    border-bottom: 1px solid rgba(30,58,95,0.06);\n}\n.nav-inner {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n    min-height: 52px;\n}\n.nav-inner .logo { flex-shrink: 0; z-index: 700; }\n.nav-inner .nav-links {\n    position: absolute;\n    left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    list-style: none;\n}\n.nav-inner .nav-right-group { flex-shrink: 0; display: flex; align-items: center; gap: 0; z-index: 700; }\n\n.logo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--marineblau); display: flex; align-items: center; }\n.logo a { color: inherit; }\n.logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n.nav-links { font-size: 15px; font-weight: 400; }\n.nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n.nav-links a:hover,\n.nav-links a.active { color: var(--marineblau); text-decoration: underline; text-decoration-color: var(--koralle); text-underline-position: under; }\n\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; gap: 0; }\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.nav-search { display: flex; align-items: center; flex-direction: row-reverse; }\n.nav-search-trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; }\n.nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n.nav-search-trigger svg { width: 20px; height: 20px; }\n.nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s cubic-bezier(0.4,0,0.2,1), 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 { width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2); border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau); background: var(--weiss); box-sizing: border-box; }\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.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\na:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marineblau); outline-offset: 2px; }\n\n.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--marineblau); color: var(--weiss); font-size: 14px; font-weight: 500; border-radius: 8px; transition: top 0.2s ease; }\n.skip-link:focus { top: 16px; }\n\n\/* ===================== BURGER ===================== *\/\n.es-burger {\n    display: none;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 44px; height: 44px;\n    background: none; border: none;\n    cursor: pointer;\n    z-index: 700;\n    padding: 0; flex-shrink: 0;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-burger-box { position: relative; width: 24px; height: 16px; }\n.es-burger-box span {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 24px; height: 2px;\n    background: var(--marineblau);\n    border-radius: 2px;\n    transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, opacity 0.2s ease;\n}\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 {\n    background: var(--weiss);\n    transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, opacity 0.2s ease;\n}\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\/* ===================== FULLSCREEN OVERLAY ===================== *\/\n.es-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 600;\n    background: var(--marineblau);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 100px 10vw 60px;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-20px);\n    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;\n}\n.es-mobile-overlay.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n.es-mobile-overlay::before {\n    content: 'es.';\n    position: absolute;\n    right: 5vw; bottom: -0.05em;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(120px, 25vw, 220px);\n    font-weight: 700;\n    color: rgba(255,255,255,0.04);\n    line-height: 1;\n    pointer-events: none;\n    letter-spacing: -0.04em;\n    user-select: none;\n}\n.es-overlay-close {\n    position: absolute;\n    top: 24px; right: 5vw;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px; height: 44px;\n    background: rgba(255,255,255,0.12);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--weiss);\n    transition: background 0.25s ease, transform 0.25s ease;\n    -webkit-tap-highlight-color: transparent;\n}\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\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 {\n    display: block;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(36px, 8vw, 64px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.9);\n    letter-spacing: -0.03em;\n    padding: 20px 0; line-height: 1;\n    transform: translateY(40px); opacity: 0;\n    transition: color 0.25s ease, padding-left 0.3s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s ease;\n}\n.es-mobile-overlay.is-open .es-mobile-nav a { transform: translateY(0); opacity: 1; }\n.es-mobile-nav li:nth-child(1) a { transition-delay: 0.1s; }\n.es-mobile-nav li:nth-child(2) a { transition-delay: 0.18s; }\n.es-mobile-nav li:nth-child(3) a { transition-delay: 0.26s; }\n.es-mobile-nav li:nth-child(4) a { transition-delay: 0.34s; }\n.es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n.es-mobile-nav a.active { color: var(--koralle); }\n\n.es-mobile-cta { margin-top: 48px; transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out) 0.42s, opacity 0.5s ease 0.42s; }\n.es-mobile-overlay.is-open .es-mobile-cta { transform: translateY(0); opacity: 1; }\n.es-mobile-cta a { display: inline-block; background: var(--koralle); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 18px 44px; border-radius: 100px; transition: background 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(246,114,128,0.25); }\n.es-mobile-cta a:hover { background: var(--koralle-hover); transform: translateY(-2px); }\n\n.es-mobile-footer { position: absolute; bottom: 40px; left: 10vw; right: 10vw; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; }\n.es-mobile-overlay.is-open .es-mobile-footer { opacity: 1; transform: translateY(0); }\n.es-mobile-lang { display: flex; gap: 16px; }\n.es-mobile-lang a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s ease; }\n.es-mobile-lang a.active, .es-mobile-lang a:hover { color: rgba(255,255,255,0.9); }\n.es-mobile-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s ease; }\n.es-mobile-social a:hover { color: rgba(255,255,255,0.9); }\n\nbody.es-nav-open { overflow: hidden; }\n\n\/* ===================== RESPONSIVE (Header) ===================== *\/\n@media (max-width: 900px) {\n    .nav-inner .nav-links,\n    .nav-inner .nav-right { display: none !important; }\n    .es-burger { display: flex; }\n}\n<\/style>\n\n<a href=\"#main\" class=\"skip-link\">Skip to content<\/a>\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=\"Close menu\">\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\">Free intro call<\/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\/1894\" hreflang=\"de\" lang=\"de\" class=\"\">DE<\/a><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\" 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\"> (opens in a new 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\" data-trp-original-action=\"https:\/\/eliasschultze.de\/en\/\">\n                            <input type=\"search\" id=\"nav-search-input\" name=\"s\" placeholder=\"Search\u2026\" value=\"\" autocomplete=\"off\" aria-label=\"Search the site\">\n                        <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n                        <button type=\"button\" class=\"nav-search-trigger\" aria-label=\"Search\" 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\/1894\" hreflang=\"de\" lang=\"de\" class=\"\">DE<\/a><a href=\"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\" 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=\"Search\">\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=\"Open menu\" 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>\n(function() {\n    'use strict';\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\n    if (burger && overlay) {\n        var menuOpen = false;\n        function openNav() {\n            menuOpen = true;\n            burger.classList.add('is-open');\n            overlay.classList.add('is-open');\n            overlay.setAttribute('aria-hidden', 'false');\n            burger.setAttribute('aria-expanded', 'true');\n            burger.setAttribute('aria-label', 'Men\u00fc schlie\u00dfen');\n            document.body.classList.add('es-nav-open');\n        }\n        function closeNav() {\n            menuOpen = false;\n            burger.classList.remove('is-open');\n            overlay.classList.remove('is-open');\n            overlay.setAttribute('aria-hidden', 'true');\n            burger.setAttribute('aria-expanded', 'false');\n            burger.setAttribute('aria-label', 'Men\u00fc \u00f6ffnen');\n            document.body.classList.remove('es-nav-open');\n        }\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        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && menuOpen) closeNav(); });\n        window.addEventListener('resize', function() { if (window.innerWidth > 900 && menuOpen) closeNav(); });\n    }\n\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    if (searchWrap && searchTrigger && searchForm && searchInput) {\n        searchTrigger.addEventListener('click', function() {\n            searchWrap.classList.toggle('is-open');\n            if (searchWrap.classList.contains('is-open')) searchInput.focus();\n        });\n        searchInput.addEventListener('blur', function() {\n            setTimeout(function() { searchWrap.classList.remove('is-open'); }, 450);\n        });\n        searchForm.addEventListener('submit', function(e) { e.preventDefault(); });\n    }\n\n    function init() {\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n            return;\n        }\n    }\n    init();\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    --koralle-accessible: #c44d5b;\n    --text-muted: #5a6178;\n    --mint: #a8dadc;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\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}\nh1, h2, h3, h4 {\n    font-family: 'Outfit', sans-serif;\n    font-weight: 300;\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n.hero-services {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    min-height: 85vh;\n    padding-top: 93px;\n    overflow: hidden;\n}\n.hero-services-text {\n    background: var(--hellgrau);\n    padding: 80px 5vw 80px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.hero-services .eyebrow {\n    display: block;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: var(--koralle);\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 24px;\n}\n.hero-services h1 {\n    font-size: clamp(2.5rem, 4vw, 4.5rem);\n    margin-bottom: 28px;\n    color: var(--marineblau);\n    line-height: 1.1;\n    text-align: left;\n}\n.hero-services h1 span {\n    font-weight: 500;\n    display: inline;\n    padding-bottom: 2px;\n    background: linear-gradient(to top, rgba(168, 218, 220, 0.5) 0%, rgba(168, 218, 220, 0.5) 10px, transparent 10px);\n    background-size: 100% 14px;\n    background-position: 0 calc(100% - 15px);\n    background-repeat: no-repeat;\n    -webkit-box-decoration-break: clone;\n    box-decoration-break: clone;\n    border-radius: 3px;\n}\n.hero-services-text p {\n    font-size: clamp(16px, 1.4vw, 18px);\n    color: var(--text-muted);\n    max-width: 520px;\n    line-height: 1.7;\n    text-align: left;\n}\n.hero-services-image {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 400px;\n    overflow: hidden;\n}\n.hero-services-image img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n}\n\n.services-showcase { padding: 80px 0 150px; }\n.srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }\n.srv-card {\n    background: var(--hellgrau);\n    border: 1px solid rgba(30, 58, 95, 0.05);\n    border-radius: 32px;\n    padding: 64px 48px;\n    position: relative;\n    transition: all 0.5s var(--ease-out);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n.srv-card:hover {\n    background: var(--weiss);\n    transform: translateY(-8px);\n    box-shadow: 0 30px 60px rgba(30, 58, 95, 0.08);\n    border-color: rgba(30, 58, 95, 0.1);\n}\n.srv-num {\n    font-family: 'Outfit', sans-serif;\n    font-size: 80px;\n    font-weight: 200;\n    line-height: 1;\n    color: var(--mint);\n    opacity: 0.5;\n    margin-bottom: 32px;\n    transition: opacity 0.3s ease, color 0.3s ease;\n}\n.srv-card:hover .srv-num { opacity: 1; color: var(--koralle); }\n.srv-card h3 { font-size: 32px; font-weight: 500; margin-bottom: 24px; }\n.srv-card p { font-size: 18px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.7; flex-grow: 1; }\n.srv-list { list-style: none; border-top: 1px solid rgba(30, 58, 95, 0.1); padding-top: 32px; }\n.srv-list li {\n    position: relative;\n    padding-left: 32px;\n    margin-bottom: 16px;\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--marineblau);\n}\n.srv-list li:last-child { margin-bottom: 0; }\n.srv-list li::before {\n    content: '\u2192';\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--koralle);\n    font-family: 'Outfit', sans-serif;\n    font-size: 20px;\n    line-height: 1.5;\n    transition: transform 0.3s ease;\n}\n.srv-card:hover .srv-list li::before { transform: translateX(4px); }\n\n.why-us {\n    padding: 150px 0;\n    background-color: var(--marineblau);\n    color: var(--weiss);\n    border-radius: 40px;\n    margin: 0 2vw;\n}\n.why-us h2 {\n    font-size: clamp(2.5rem, 4vw, 4rem);\n    margin-bottom: 80px;\n    text-align: center;\n}\n.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 40px; }\n.why-card h3 { font-size: 24px; font-weight: 400; margin-bottom: 16px; margin-top: 24px; }\n.why-card p { font-size: 16px; color: rgba(255, 255, 255, 0.7); font-weight: 300; }\n.why-number { font-size: 64px; font-family: 'Outfit', sans-serif; font-weight: 200; color: var(--mint); line-height: 1; }\n\n.local-seo { padding: 150px 0 80px; text-align: center; }\n.local-seo h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 24px; }\n.local-seo p { font-size: 20px; color: var(--text-muted); max-width: 600px; margin: 0 auto; }\n\n.local-seo-grid {\n    display: grid; \n    grid-template-columns: 1fr 500px; \n    gap: 60px; \n    align-items: stretch; \n    margin-bottom: 80px;\n}\n.local-seo-text {\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.local-seo-text h2 {\n    font-size: clamp(2rem, 3.5vw, 3rem); \n    margin-bottom: 32px; \n    text-align: left;\n}\n.local-seo-text p {\n    font-size: 20px; \n    color: var(--text-muted); \n    line-height: 1.7; \n    margin-bottom: 24px;\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 100%;\n    text-align: left;\n}\n.local-seo-text p:last-child {\n    margin-bottom: 0;\n}\n.local-seo-image {\n    position: relative; \n    height: 100%; \n    border-radius: 24px; \n    overflow: hidden; \n    box-shadow: 0 20px 60px rgba(30,58,95,0.1);\n    background: linear-gradient(135deg, var(--hellgrau) 0%, var(--mint) 100%);\n}\n.local-seo-image img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%; \n    height: 100%; \n    object-fit: cover;\n}\n\n.cta-box {\n    background: var(--hellgrau);\n    border-radius: 32px;\n    padding: 80px 40px;\n    text-align: center;\n    border: 1px solid rgba(30, 58, 95, 0.05);\n}\n.cta-box h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 24px; }\n.cta-box p {\n    font-size: 18px;\n    color: var(--text-muted);\n    margin-bottom: 40px;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.btn-primary {\n    background-color: var(--koralle-accessible);\n    color: var(--weiss);\n    font-size: 16px;\n    font-weight: 500;\n    padding: 20px 48px;\n    border-radius: 100px;\n    display: inline-block;\n    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);\n    border: none;\n    cursor: pointer;\n    box-shadow: 0 10px 30px rgba(246, 114, 128, 0.2);\n}\n.btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 15px 40px rgba(246, 114, 128, 0.3);\n    background-color: var(--koralle-hover);\n}\n.contact-info { display: flex; justify-content: center; gap: 40px; margin-top: 48px; flex-wrap: wrap; }\n.contact-item {\n    font-size: 16px;\n    color: var(--marineblau);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.contact-item svg { width: 20px; height: 20px; color: var(--koralle); }\n\nfooter { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); margin-top: 80px; }\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.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@media (max-width: 900px) {\n    .srv-grid, .why-grid { grid-template-columns: 1fr; gap: 40px; }\n    .srv-card { padding: 40px 32px; }\n    .why-us { margin: 0; border-radius: 0; padding: 100px 5vw; }\n    .hero-services {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto auto;\n        min-height: auto;\n        padding-top: 72px;\n    }\n    .hero-services-text { order: 2; padding: 60px 5vw 80px; text-align: center; }\n    .hero-services h1 { text-align: center; }\n    .hero-services-text p { margin-left: auto; margin-right: auto; text-align: center; }\n    .hero-services-image { order: 1; min-height: 50vh; }\n    \n    .local-seo-grid {\n        grid-template-columns: 1fr;\n        gap: 40px;\n    }\n    .local-seo-text h2, .local-seo-text p {\n        text-align: center;\n    }\n    .local-seo-text p {\n        font-size: 16px;\n    }\n    .local-seo-image {\n        height: 300px;\n    }\n\n    .contact-info { flex-direction: column; gap: 16px; align-items: center; }\n    .cta-box { padding: 56px 24px; }\n    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\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-services\">\n        <div class=\"hero-services-text\">\n            <span class=\"eyebrow scroll-in\">Web design expertise &amp; strategy<\/span>\n            <h1 class=\"scroll-in delay-1\">We turn your digital vision into <span>measurable success<\/span><\/h1>\n            <p class=\"scroll-in delay-2\">Genuine <strong>web design expertise<\/strong> connects aesthetics with sales psychology. As a full-service partner for digital strategy in Mosbach and the Odenwald I develop websites that strengthen your brand and turn visitors into loyal customers. We focus on performance, design and measurable results.<\/p>\n        <\/div>\n        <div class=\"hero-services-image\">\n            <img sizes=\"(max-width: 900px) 100vw, 50vw\" srcset=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-768x512.jpg 768w, https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-1024x683.jpg 1024w, https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-1536x1024.jpg 1536w, https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-2048x1365.jpg 2048w, https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-scaled.jpg 2560w\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-scaled.jpg\" alt=\"Professionelle Webdesign Expertise von Elias Schultze\" width=\"1080\" height=\"720\" fetchpriority=\"high\" title=\"| Elias Schultze\">\n        <\/div>\n    <\/section>\n\n    <section id=\"leistungen\" class=\"services-showcase\">\n        <div class=\"es-container srv-grid\">\n            <div class=\"srv-card scroll-in\">\n                <div>\n                    <div class=\"srv-num\">01<\/div>\n                    <h3>Strategy &amp; consulting<\/h3>\n                    <p>A strong foundation is the basis of every web design expertise. We analyse competitors and user needs in the Odenwald and across Germany to develop a sustainable digital strategy that positions your brand clearly and optimises conversion paths.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Competitor analysis &amp; audit<\/li>\n                    <li>User guidance (UX concept)<\/li>\n                    <li>Brand positioning &amp; branding<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in delay-1\">\n                <div>\n                    <div class=\"srv-num\">02<\/div>\n                    <h3>High-end UI\/UX design<\/h3>\n                    <p>My <strong>UI\/UX design expertise<\/strong> guarantees digital experiences that delight intuitively. We create custom layouts with a mobile-first approach so every device gets a perfect user experience \u2014 technically brilliant and visually distinctive.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Custom layout design<\/li>\n                    <li>Mobile-first optimisation<\/li>\n                    <li>User interface (UI) design<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in\">\n                <div>\n                    <div class=\"srv-num\">03<\/div>\n                    <h3>E-commerce solutions<\/h3>\n                    <p>Scalable online commerce needs technical know-how. We develop high-performance e-commerce platforms with fast load times and an optimised checkout experience. That is how we sustainably increase your revenue through strategic web design.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Integration of modern payment systems<\/li>\n                    <li>Conversion rate optimisation<\/li>\n                    <li>Scalable shop architecture<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in delay-1\">\n                <div>\n                    <div class=\"srv-num\">04<\/div>\n                    <h3>Custom web apps<\/h3>\n                    <p>We digitise complex business processes with tailored applications. From progressive web apps (PWA) to custom API integrations, we have the expertise to make your internal workflows more efficient and future-proof.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Native &amp; cross-platform apps<\/li>\n                    <li>Progressive Web Apps (PWA)<\/li>\n                    <li>Custom interfaces (API)<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"why-us\">\n        <div class=\"es-container\">\n            <h2 class=\"scroll-in\">Why clients trust my expertise<\/h2>\n            <div class=\"why-grid\">\n                <div class=\"why-card scroll-in delay-1\">\n                    <div class=\"why-number\">01<\/div>\n                    <h3>Agility &amp; speed<\/h3>\n                    <p>Time is money. With agile project management we deliver high-quality web projects without unnecessary delays. Perfect craftsmanship meets efficient workflows.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in delay-2\">\n                    <div class=\"why-number\">02<\/div>\n                    <h3>Senior consulting<\/h3>\n                    <p>No anonymous ticket systems. You get direct communication at eye level and personal support that puts your business goals first.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in delay-3\">\n                    <div class=\"why-number\">03<\/div>\n                    <h3>Lasting quality<\/h3>\n                    <p>Every detail counts. We work with passion so your website not only convinces today, but remains technically and visually state of the art tomorrow.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"kontakt\" class=\"local-seo\">\n        <div class=\"es-container\">\n            <div class=\"scroll-in\" style=\"margin-bottom: 80px;\">\n                <div class=\"local-seo-grid\">\n                    <div class=\"local-seo-text\">\n                        <h2>Your partner for web design in Mosbach &amp; the Odenwald<\/h2>\n                        <p>\n                            Looking for an expert in <strong>Webdesign Mosbach<\/strong>? I help companies in Waldbrunn, Mosbach and the Rhine-Neckar metropolitan region become digitally visible. My <strong>web design expertise<\/strong> covers the planning and implementation of WordPress websites that convince both search engines and users.\n                        <\/p>\n                        <p>\n                            By combining local understanding with modern web technologies we create digital value that lasts. Whether e-commerce shops, corporate sites or web apps \u2014 we optimise your site for top Google rankings and fast load times. Let\u2019s start your digital success story in the Odenwald together.\n                        <\/p>\n                    <\/div>\n                    <div class=\"local-seo-image\">\n                        <img height=\"1707\" width=\"2560\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Schultze_Elias_2-scaled.webp\" alt=\"Elias Schultze - web design expert for Mosbach\" loading=\"lazy\" title=\"| Elias Schultze\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"cta-box scroll-in delay-1\">\n                <h2>Ready for a first-class web project?<\/h2>\n                <p>Use my web design expertise for your success. Let\u2019s talk about your goals and the right digital strategy in a free intro call.<\/p>\n                <iframe loading=\"lazy\" id=\"es-booking-frame\" src=\"https:\/\/es-booking.vercel.app\/book\/kostenloses-erstgesprach?embed=1\" width=\"100%\" height=\"640\" frameborder=\"0\" scrolling=\"no\" style=\"border: none; border-radius: 12px; max-width: 100%; display: block; overflow: hidden;\" title=\"Termin buchen\"><\/iframe>\n<script>\n(function(){\n  var MIN=320;\n  window.addEventListener(\"message\",function(e){\n    if(!e.data||e.data.type!==\"es-booking:resize\")return;\n    var f=document.getElementById(\"es-booking-frame\");\n    if(!f)return;\n    var h=Math.max(MIN,Number(e.data.height)||MIN);\n    f.style.height=h+\"px\";\n  });\n})();\n<\/script>\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\">Web design and development with passion from the Odenwald. Consulting, design, social media and more.<\/p>\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"me noopener noreferrer\" aria-label=\"Instagram (opens in a new 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>Contact<\/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 init() {\n        var scrollElements = document.querySelectorAll('.scroll-in');\n        if ('IntersectionObserver' in window) {\n            var observer = new IntersectionObserver(function(entries) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) entry.target.classList.add('scroll-in--visible');\n                });\n            }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n            scrollElements.forEach(function(el) { observer.observe(el); });\n        } else {\n            scrollElements.forEach(function(el) { el.classList.add('scroll-in--visible'); });\n        }\n    }\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', init);\n    } else {\n        init();\n    }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Zum Inhalt springen 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 [&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-1894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894","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=1894"}],"version-history":[{"count":51,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\/revisions"}],"predecessor-version":[{"id":2649,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\/revisions\/2649"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}