{"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-04-15T20:31:56","modified_gmt":"2026-04-15T20:31:56","slug":"webdesigner-mosbach","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesigner-mosbach\/","title":{"rendered":"Webdesigner Odenwald"},"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<\/head>\n<body>\n\n<div class=\"es-mobile-overlay\" id=\"es-mobile-overlay\" aria-hidden=\"true\">\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\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"\/><\/svg>\n    <\/button>\n    <nav>\n        <ul class=\"es-mobile-nav\">\n            <li><a href=\"\/webdesigner-mosbach\/\" class=\"es-mobile-link\">Studio<\/a><\/li>\n            <li><a href=\"\/webdesign-expertise\/\" class=\"es-mobile-link\">Expertise<\/a><\/li>\n            <li><a href=\"\/webdesign-referenzen\/\" class=\"es-mobile-link\">Cases<\/a><\/li>\n            <li><a href=\"#kontakt\" class=\"es-mobile-link\">Kontakt<\/a><\/li>\n        <\/ul>\n    <\/nav>\n<\/div>\n\n<header id=\"header\" class=\"header\" role=\"banner\">\n    <div class=\"es-container nav-inner\">\n        <a href=\"\/\" class=\"logo\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Logo_mit_Kontur_Wortbildmarke-scaled.webp\" alt=\"es.design\" title=\"| Elias Schultze\">\n        <\/a>\n        \n        <nav class=\"nav-links\">\n            <a href=\"\/webdesigner-mosbach\/\" class=\"active\">Studio<\/a>\n            <a href=\"\/webdesign-expertise\/\">Expertise<\/a>\n            <a href=\"\/webdesign-referenzen\/\">Cases<\/a>\n        <\/nav>\n\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=\"\/\" method=\"get\" id=\"nav-search-form\">\n                            <input type=\"search\" id=\"nav-search-input\" name=\"s\" placeholder=\"Suchen\u2026\" autocomplete=\"off\">\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 id=\"search-results\" class=\"search-results-dropdown\"><\/div>\n                    <\/div>\n\n                    <div class=\"nav-lang\">\n                        <a href=\"\/\" class=\"active\">DE<\/a>\n                        <a href=\"en\/index.html\">EN<\/a>\n                    <\/div>\n                <\/div>\n                <a href=\"#kontakt\" class=\"btn-outline\">Let&#8217;s talk<\/a>\n            <\/div>\n\n            <button type=\"button\" class=\"es-burger\" id=\"es-burger\" aria-label=\"Men\u00fc \u00f6ffnen\">\n                <div class=\"es-burger-box\">\n                    <span><\/span><span><\/span><span><\/span>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/header>\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<!--\n  Studio-Seite f\u00fcr WordPress \u2013 OHNE Header\n  Als Custom-HTML-Block einf\u00fcgen. Header separat (z.B. header-snippet.html) nutzen.\n\n  SEO (in WordPress\/Yoast eintragen):\n  Seitentitel: \"Webdesigner Odenwald \u2013 Elias Schultze | es.design\"\n  Meta-Beschreibung: \"Elias Schultze \u2013 Webdesigner im Odenwald. \u00dcber 7 Jahre Erfahrung in Webdesign, E-Commerce und Branding. Standort Waldbrunn, Projekte in der Region und deutschlandweit.\"\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; }\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.2;\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 ===================== *\/\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\/* ===================== SKILLS ===================== *\/\n.skills-section { padding: 150px 0; background: var(--weiss); }\n.skills-grid { max-width: 800px; margin: 0 auto; }\n.skill-item { margin-bottom: 40px; }\n.skill-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: 500; font-size: 18px; color: var(--marineblau); }\n.skill-header span:last-child { color: var(--text-muted); font-weight: 400; }\n.skill-bar-bg { width: 100%; height: 8px; background: rgba(30,58,95,0.06); border-radius: 100px; overflow: hidden; }\n.skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--marineblau), var(--mint)); border-radius: 100px; transform-origin: left; transform: scaleX(0); transition: transform 1.5s var(--ease-out); }\n.scroll-in--visible .skill-bar-fill { transform: scaleX(1); }\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 ===================== *\/\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); }\n.footer-grid { display: grid; grid-template-columns: 1.4fr 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\">\u00dcber mich<\/span>\n            <h1 class=\"scroll-in delay-1\">Ihr Webdesigner in<br><span>Mosbach &#038; dem Odenwald<\/span><\/h1>\n            <p class=\"scroll-in delay-2\">Hinter es.design stehe ich, Elias Schultze. Mein Studio im Herzen des Odenwalds ist der Ort, an dem aus abstrakten Ideen funktionale digitale Produkte entstehen. Als Webdesigner in Mosbach biete ich Unternehmen aus der Region die pers\u00f6nliche Betreuung, die bei gro\u00dfen anonymen Agenturen oft verloren geht.\n\nRegionalit\u00e4t bedeutet f\u00fcr mich kurze Wege, direktes Feedback und ein tiefes Verst\u00e4ndnis f\u00fcr den lokalen Markt. Ob Handwerksbetrieb aus dem Neckar-Odenwald-Kreis oder mittelst\u00e4ndisches Unternehmen in Mannheim \u2013 ich kombiniere meine Webdesign Expertise mit regionaler Verbundenheit, um Webseiten zu schaffen, die lokal gefunden werden und global \u00fcberzeugen.<\/p>\n            <ul class=\"hero-bullets scroll-in delay-3\">\n                <li>Standort: Waldbrunn (Odenwald) \/ Remote<\/li>\n                <li>Spezialisierung: Webdesign &#038; Grafikdesign<\/li>\n                <li>Projekte abgeschlossen: 20+<\/li>\n            <\/ul>\n        <\/div>\n        <div class=\"hero-image-container\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Buisiness_Bild.webp\" alt=\"Elias Schultze - Webdesigner\" 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<\/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 &#038; Design-Grundlagen<\/h3>\n                        <p>Zwei Jahre intensive autodidaktische Weiterbildung in HTML, CSS sowie Adobe Illustrator und InDesign. Die Grundsteinlegung meiner gestalterischen Laufbahn.<\/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- &#038; 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 &#038; 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. Ich glaube an minimalistische <a href=\"\/webdesign-referenzen\/\">Erlebnisse<\/a>, die nicht nur visuell beeindrucken, sondern Nutzer intuitiv ans Ziel f\u00fchren.<\/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 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 &#038; Web-Expertise f\u00fcr Ihr Projekt<\/h2>\n                <p>Technologien und Werkzeuge, die ich t\u00e4glich nutze.<\/p>\n            <\/div>\n            <div class=\"skills-grid\">\n                <div class=\"skill-item scroll-in\">\n                    <div class=\"skill-header\"><span>Adobe Programme<\/span><span>95%<\/span><\/div>\n                    <div class=\"skill-bar-bg\"><div class=\"skill-bar-fill\" style=\"width: 95%;\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-item scroll-in delay-1\">\n                    <div class=\"skill-header\"><span>Webentwicklung<\/span><span>90%<\/span><\/div>\n                    <div class=\"skill-bar-bg\"><div class=\"skill-bar-fill\" style=\"width: 90%;\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-item scroll-in delay-2\">\n                    <div class=\"skill-header\"><span>HTML &#038; CSS<\/span><span>92%<\/span><\/div>\n                    <div class=\"skill-bar-bg\"><div class=\"skill-bar-fill\" style=\"width: 92%;\"><\/div><\/div>\n                <\/div>\n                <div class=\"skill-item scroll-in delay-3\">\n                    <div class=\"skill-header\"><span>JavaScript<\/span><span>85%<\/span><\/div>\n                    <div class=\"skill-bar-bg\"><div class=\"skill-bar-fill\" style=\"width: 85%;\"><\/div><\/div>\n                <\/div>\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\">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.<\/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. 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>\n    <div class=\"es-container\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-brand\">\n                <a href=\"\/\" class=\"footer-logo\"><img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\" title=\"| Elias Schultze\"><\/a>\n                <p class=\"footer-tagline\">Webdesign und Entwicklung mit Leidenschaft aus dem sch\u00f6nen Odenwald. Beratung, Design, Social Media &#038; mehr.<\/p>\n\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\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                    <a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Navigation<\/h4>\n                <ul>\n                    <li><a href=\"\/\">Home<\/a><\/li>\n                    <li><a href=\"\/webdesigner-mosbach\/\">Studio<\/a><\/li>\n                    <li><a href=\"\/webdesign-expertise\/\">Expertise<\/a><\/li>\n                    <li><a href=\"\/webdesign-referenzen\/\">Cases<\/a><\/li>\n                    <li><a href=\"\/#kontakt\">Kontakt<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Rechtliches<\/h4>\n                <ul>\n                    <li><a href=\"\/impressum\/\">Impressum<\/a><\/li>\n                    <li><a href=\"\/datenschutz\/\">Datenschutz<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Kontakt<\/h4>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@es.design.de\">info@es.design.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    }\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', esInit);\n    } else {\n        esInit();\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Studio Expertise Cases Kontakt Studio Expertise Cases DE EN Let&#8217;s talk \u00dcber mich Ihr Webdesigner inMosbach &#038; dem Odenwald Hinter es.design stehe ich, Elias Schultze. Mein Studio im Herzen des Odenwalds ist der Ort, an dem aus abstrakten Ideen funktionale digitale Produkte entstehen. Als Webdesigner in Mosbach biete ich Unternehmen aus der Region die pers\u00f6nliche [&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":68,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions"}],"predecessor-version":[{"id":2483,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions\/2483"}],"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}]}}