{"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-06-13T20:53:27","modified_gmt":"2026-06-13T20:53:27","slug":"webdesign-mosbach","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesign-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\n\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\"><\/path><\/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=\"\/Blog\/\" class=\"es-mobile-link\">Blog<\/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<a href=\"\/blog\/\">Blog<\/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\"><\/path><\/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<style>\n    :root {\n        --marineblau: #1e3a5f;\n        --hellgrau: #f5f5f5;\n        --weiss: #ffffff;\n        --koralle: #f67280;\n        --koralle-hover: #e05e6b;\n        --mint: #a8dadc;\n        --text-muted: #66768f;\n        --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body {\n        font-family: 'Inter', sans-serif;\n        background-color: var(--weiss);\n        color: var(--marineblau);\n        line-height: 1.6;\n        -webkit-font-smoothing: antialiased;\n        overflow-x: hidden;\n    }\n    h1, h2, h3, h4 {\n        font-family: 'Outfit', sans-serif;\n        font-weight: 300;\n        line-height: 1.2;\n        letter-spacing: -0.02em;\n    }\n    a { text-decoration: none; color: inherit; }\n    .es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n    \n    \/* ===================== HERO ===================== *\/\n    .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding-top: 93px; }\n    .hero-text { background-color: var(--hellgrau); padding: 80px 5vw; display: flex; flex-direction: column; justify-content: center; }\n    .eyebrow { text-transform: uppercase; letter-spacing: 0.15em; color: var(--koralle); font-size: 14px; font-weight: 600; margin-bottom: 24px; display: block; }\n    .hero h1 { font-size: clamp(3rem, 4.5vw, 5rem); margin-bottom: 24px; color: var(--marineblau); }\n    .hero h1 span { font-weight: 500; background: linear-gradient(to top, rgba(168,218,220,0.5) 0%, rgba(168,218,220,0.5) 10px, transparent 10px); background-size: 100% 14px; background-position: 0 calc(100% - 15px); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 3px; }\n    .hero p { font-size: clamp(16px, 1.5vw, 18px); color: var(--text-muted); max-width: 550px; margin-bottom: 32px; }\n    .hero-bullets { list-style: none; margin-bottom: 48px; }\n    .hero-bullets li { position: relative; padding-left: 24px; margin-bottom: 12px; color: var(--marineblau); font-weight: 500; font-size: 16px; }\n    .hero-bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--koralle); border-radius: 50%; }\n    .hero-image-container { position: relative; width: 100%; height: 100%; background: #e8eef3; }\n    .hero-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; }\n    \n    \/* ===================== TIMELINE ===================== *\/\n    .timeline-section { padding: 150px 0; background: var(--weiss); text-align: center; }\n    .section-header { margin-bottom: 80px; }\n    .section-header h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 16px; font-weight: 500; }\n    .section-header p { font-size: 18px; color: var(--text-muted); }\n    .timeline-container { max-width: 800px; margin: 0 auto; position: relative; padding: 20px 0; }\n    .timeline-container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(30,58,95,0.08); transform: translateX(-50%); }\n    .timeline-item { position: relative; margin-bottom: 80px; }\n    .timeline-item:last-child { margin-bottom: 0; }\n    .timeline-date { display: inline-block; background: var(--marineblau); color: var(--weiss); padding: 8px 24px; border-radius: 100px; font-size: 14px; font-weight: 500; margin-bottom: 32px; position: relative; z-index: 2; }\n    .timeline-content { background: var(--hellgrau); padding: 40px; border-radius: 24px; position: relative; z-index: 2; max-width: 500px; margin: 0 auto; border: 1px solid rgba(30,58,95,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }\n    .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30,58,95,0.08); }\n    .timeline-content h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }\n    .timeline-content p { color: var(--text-muted); font-size: 16px; }\n    \n    \/* ===================== PHILOSOPHIE ===================== *\/\n    .philosophy { padding: 150px 0; background-color: var(--hellgrau); border-radius: 40px; margin: 0 2vw; }\n    .philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\n    .philosophy h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 24px; }\n    .philosophy p { font-size: 18px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.8; }\n    .quote-box { padding-left: 24px; border-left: 3px solid var(--koralle); font-style: italic; font-size: 20px; color: var(--marineblau); font-family: 'Outfit', sans-serif; }\n    .philosophy-image { width: 100%; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }\n    .philosophy-image img { width: 100%; height: auto; display: block; }\n    \n    \/* ===================== TECH ORBIT ===================== *\/\n    .skills-section {\n        padding: 150px 0;\n        background: var(--weiss);\n        overflow: hidden;\n        position: relative;\n    }\n    .skills-section::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background:\n            radial-gradient(ellipse 80% 60% at 50% 45%, rgba(168, 218, 220, 0.18) 0%, transparent 65%),\n            radial-gradient(ellipse 40% 30% at 20% 60%, rgba(246, 114, 128, 0.06) 0%, transparent 70%);\n        opacity: 0;\n        transition: opacity 1.4s ease;\n        pointer-events: none;\n    }\n    .skills-section:has(.tech-orbit.scroll-in--visible)::before {\n        opacity: 1;\n    }\n    .tech-orbit {\n        position: relative;\n        width: min(680px, 92vw);\n        aspect-ratio: 1;\n        min-height: min(680px, 92vw);\n        margin: 0 auto;\n        --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);\n    }\n    .tech-orbit::after {\n        content: '';\n        position: absolute;\n        inset: 8%;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(168, 218, 220, 0.22) 0%, transparent 68%);\n        opacity: 0;\n        transform: scale(0.6);\n        pointer-events: none;\n        z-index: 0;\n    }\n    .tech-orbit.scroll-in--visible::after {\n        animation: tech-glow-in 1.1s var(--ease-out) 0.05s forwards, tech-glow-breathe 5s ease-in-out 1.2s infinite;\n    }\n    .tech-orbit-lines {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: 1;\n        transform-origin: 50% 50%;\n    }\n    .tech-orbit-line {\n        fill: none;\n        stroke: url(#techLineGrad);\n        stroke-width: 0.35;\n        stroke-linecap: round;\n        stroke-dasharray: 32;\n        stroke-dashoffset: 32;\n        opacity: 0;\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--0 { animation: tech-line-draw 0.65s var(--ease-out) 0.18s forwards, tech-flow 4s linear 0.9s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--1 { animation: tech-line-draw 0.65s var(--ease-out) 0.26s forwards, tech-flow 4s linear 0.98s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--2 { animation: tech-line-draw 0.65s var(--ease-out) 0.34s forwards, tech-flow 4s linear 1.06s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--3 { animation: tech-line-draw 0.65s var(--ease-out) 0.42s forwards, tech-flow 4s linear 1.14s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--4 { animation: tech-line-draw 0.65s var(--ease-out) 0.50s forwards, tech-flow 4s linear 1.22s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--5 { animation: tech-line-draw 0.65s var(--ease-out) 0.58s forwards, tech-flow 4s linear 1.30s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--6 { animation: tech-line-draw 0.65s var(--ease-out) 0.66s forwards, tech-flow 4s linear 1.38s infinite; }\n    .tech-orbit.scroll-in--visible .tech-orbit-line--7 { animation: tech-line-draw 0.65s var(--ease-out) 0.74s forwards, tech-flow 4s linear 1.46s infinite; }\n    .tech-orbit-ring {\n        fill: none;\n        stroke: rgba(30, 58, 95, 0.06);\n        stroke-width: 0.25;\n        transform-origin: 50% 50%;\n        opacity: 0;\n        transform: scale(0.82);\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-ring--outer {\n        animation: tech-ring-in 1s var(--ease-out) 0.08s forwards, tech-ring-spin 52s linear 1.1s infinite;\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-ring--inner {\n        animation: tech-ring-in 1s var(--ease-out) 0.16s forwards, tech-ring-spin 38s linear 1.1s infinite reverse;\n    }\n    .tech-orbit-hub {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 3;\n        width: clamp(108px, 18vw, 140px);\n        height: clamp(108px, 18vw, 140px);\n        transform: translate(-50%, -50%) scale(0.45);\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--weiss);\n        border-radius: 50%;\n        border: 1px solid rgba(30, 58, 95, 0.08);\n        box-shadow:\n            0 20px 50px rgba(30, 58, 95, 0.1),\n            0 0 0 12px rgba(168, 218, 220, 0.12);\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-hub {\n        animation: tech-hub-in 0.95s var(--ease-spring) 0.05s forwards;\n    }\n    .tech-orbit-hub::before,\n    .tech-orbit-hub::after {\n        content: '';\n        position: absolute;\n        inset: -18px;\n        border-radius: 50%;\n        border: 1px solid rgba(168, 218, 220, 0.35);\n        pointer-events: none;\n        opacity: 0;\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-hub::before {\n        animation: tech-pulse 3.5s ease-in-out 0.9s infinite;\n    }\n    .tech-orbit-hub::after {\n        inset: -34px;\n        border-color: rgba(30, 58, 95, 0.06);\n    }\n    .tech-orbit.scroll-in--visible .tech-orbit-hub::after {\n        animation: tech-pulse 3.5s ease-in-out 1.5s infinite;\n    }\n    .tech-orbit-hub img {\n        width: 72%;\n        height: auto;\n        object-fit: contain;\n        position: relative;\n        z-index: 1;\n    }\n    .tech-orbit-nodes {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        transform-origin: 50% 50%;\n        will-change: transform;\n    }\n    .tech-node {\n        position: absolute;\n        width: clamp(58px, 10vw, 76px);\n        height: clamp(58px, 10vw, 76px);\n        transform: translate(-50%, -50%);\n        left: 50%;\n        top: 50%;\n        opacity: 0;\n    }\n    .tech-orbit.scroll-in--visible .tech-node--0 { animation: tech-node-in-0 0.88s var(--ease-spring) 0.42s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--1 { animation: tech-node-in-1 0.88s var(--ease-spring) 0.50s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--2 { animation: tech-node-in-2 0.88s var(--ease-spring) 0.58s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--3 { animation: tech-node-in-3 0.88s var(--ease-spring) 0.66s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--4 { animation: tech-node-in-4 0.88s var(--ease-spring) 0.74s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--5 { animation: tech-node-in-5 0.88s var(--ease-spring) 0.82s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--6 { animation: tech-node-in-6 0.88s var(--ease-spring) 0.90s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--7 { animation: tech-node-in-7 0.88s var(--ease-spring) 0.98s forwards; }\n    .tech-orbit.scroll-in--visible .tech-node--0 .tech-node-btn { animation: tech-node-float 3.4s ease-in-out 1.35s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--1 .tech-node-btn { animation: tech-node-float 3.8s ease-in-out 1.45s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--2 .tech-node-btn { animation: tech-node-float 3.2s ease-in-out 1.55s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--3 .tech-node-btn { animation: tech-node-float 3.6s ease-in-out 1.65s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--4 .tech-node-btn { animation: tech-node-float 3.5s ease-in-out 1.75s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--5 .tech-node-btn { animation: tech-node-float 3.9s ease-in-out 1.85s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--6 .tech-node-btn { animation: tech-node-float 3.3s ease-in-out 1.95s infinite; }\n    .tech-orbit.scroll-in--visible .tech-node--7 .tech-node-btn { animation: tech-node-float 3.7s ease-in-out 2.05s infinite; }\n    .tech-node--0 { left: 50%; top: 8%; }\n    .tech-node--1 { left: 79.7%; top: 20.3%; }\n    .tech-node--2 { left: 92%; top: 50%; }\n    .tech-node--3 { left: 79.7%; top: 79.7%; }\n    .tech-node--4 { left: 50%; top: 92%; }\n    .tech-node--5 { left: 20.3%; top: 79.7%; }\n    .tech-node--6 { left: 8%; top: 50%; }\n    .tech-node--7 { left: 20.3%; top: 20.3%; }\n    .tech-node-btn {\n        width: 100%;\n        height: 100%;\n        background: rgba(255, 255, 255, 0.92);\n        backdrop-filter: blur(8px);\n        -webkit-backdrop-filter: blur(8px);\n        border-radius: 22px;\n        box-shadow:\n            0 8px 28px rgba(30, 58, 95, 0.08),\n            0 1px 3px rgba(30, 58, 95, 0.04),\n            inset 0 1px 0 rgba(255, 255, 255, 0.9);\n        border: 1px solid rgba(168, 218, 220, 0.35);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: default;\n        transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);\n        position: relative;\n        text-decoration: none;\n        color: inherit;\n    }\n    .tech-node-btn .tech-node-icon {\n        width: clamp(34px, 6vw, 42px);\n        height: clamp(34px, 6vw, 42px);\n        flex-shrink: 0;\n        display: block;\n        object-fit: contain;\n        transition: transform 0.45s var(--ease-out);\n    }\n    .tech-node-icon--ga {\n        width: clamp(38px, 6.5vw, 46px);\n        height: clamp(38px, 6.5vw, 46px);\n    }\n    .tech-node-btn--link { cursor: pointer; }\n    .tech-node-btn:hover,\n    .tech-node-btn:focus-visible {\n        transform: scale(1.12);\n        box-shadow: 0 16px 40px rgba(30, 58, 95, 0.14);\n        outline: none;\n    }\n    .tech-node-btn:hover .tech-node-icon,\n    .tech-node-btn:focus-visible .tech-node-icon {\n        transform: scale(1.06);\n    }\n    .tech-node-label {\n        position: absolute;\n        bottom: calc(100% + 8px);\n        left: 50%;\n        transform: translateX(-50%) translateY(6px);\n        padding: 5px 10px;\n        background: var(--marineblau);\n        color: var(--weiss);\n        font-size: 11px;\n        font-weight: 500;\n        letter-spacing: 0.04em;\n        border-radius: 100px;\n        white-space: nowrap;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.3s ease, transform 0.3s var(--ease-out);\n    }\n    .tech-node-btn:hover .tech-node-label,\n    .tech-node-btn:focus-visible .tech-node-label {\n        opacity: 1;\n        transform: translateX(-50%) translateY(0);\n    }\n    .tech-orbit-legend {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 10px 16px;\n        max-width: 640px;\n        margin: 48px auto 0;\n        padding: 0 5vw;\n    }\n    .tech-orbit-legend span {\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--text-muted);\n        padding: 6px 14px;\n        background: var(--hellgrau);\n        border-radius: 100px;\n        border: 1px solid rgba(30, 58, 95, 0.06);\n        opacity: 0;\n        transform: translateY(14px) scale(0.92);\n    }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(1) { animation: tech-legend-in 0.55s var(--ease-out) 0.55s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(2) { animation: tech-legend-in 0.55s var(--ease-out) 0.62s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(3) { animation: tech-legend-in 0.55s var(--ease-out) 0.69s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(4) { animation: tech-legend-in 0.55s var(--ease-out) 0.76s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(5) { animation: tech-legend-in 0.55s var(--ease-out) 0.83s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(6) { animation: tech-legend-in 0.55s var(--ease-out) 0.90s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(7) { animation: tech-legend-in 0.55s var(--ease-out) 0.97s forwards; }\n    .tech-orbit-legend.scroll-in--visible span:nth-child(8) { animation: tech-legend-in 0.55s var(--ease-out) 1.04s forwards; }\n    @keyframes tech-line-draw {\n        to { stroke-dashoffset: 0; opacity: 0.45; }\n    }\n    @keyframes tech-flow {\n        0% { stroke-dasharray: 1.2 3.6; stroke-dashoffset: 0; }\n        100% { stroke-dashoffset: -4.8; }\n    }\n    @keyframes tech-ring-in {\n        to { opacity: 1; transform: scale(1); }\n    }\n    @keyframes tech-ring-spin {\n        to { transform: rotate(360deg); }\n    }\n    @keyframes tech-hub-in {\n        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }\n        70% { transform: translate(-50%, -50%) scale(1.06); }\n        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-glow-in {\n        to { opacity: 1; transform: scale(1); }\n    }\n    @keyframes tech-glow-breathe {\n        0%, 100% { opacity: 0.75; transform: scale(1); }\n        50% { opacity: 1; transform: scale(1.04); }\n    }\n    @keyframes tech-pulse {\n        0% { transform: scale(1); opacity: 0; }\n        30% { opacity: 0.75; }\n        50% { transform: scale(1.07); opacity: 1; }\n        100% { transform: scale(1); opacity: 0.55; }\n    }\n    @keyframes tech-node-float {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-5px); }\n    }\n    @keyframes tech-legend-in {\n        to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    @keyframes tech-node-in-0 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 50%; top: 8%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-1 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 79.7%; top: 20.3%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-2 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 92%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-3 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 79.7%; top: 79.7%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-4 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 50%; top: 92%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-5 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 20.3%; top: 79.7%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-6 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 8%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @keyframes tech-node-in-7 {\n        0% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }\n        65% { transform: translate(-50%, -50%) scale(1.1); }\n        100% { left: 20.3%; top: 20.3%; opacity: 1; transform: translate(-50%, -50%) scale(1); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n        .tech-orbit-line,\n        .tech-orbit-ring--outer,\n        .tech-orbit-ring--inner,\n        .tech-orbit-hub,\n        .tech-orbit-hub::before,\n        .tech-orbit-hub::after,\n        .tech-node,\n        .tech-node-btn,\n        .tech-orbit-legend span,\n        .tech-orbit::after { animation: none !important; }\n        .tech-orbit-ring { opacity: 1; transform: none; }\n        .tech-orbit-line { stroke-dasharray: 1.2 3.6; stroke-dashoffset: 0; opacity: 0.35; }\n        .tech-orbit-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n        .tech-node { opacity: 1; }\n        .tech-node--0 { left: 50%; top: 8%; }\n        .tech-node--1 { left: 79.7%; top: 20.3%; }\n        .tech-node--2 { left: 92%; top: 50%; }\n        .tech-node--3 { left: 79.7%; top: 79.7%; }\n        .tech-node--4 { left: 50%; top: 92%; }\n        .tech-node--5 { left: 20.3%; top: 79.7%; }\n        .tech-node--6 { left: 8%; top: 50%; }\n        .tech-node--7 { left: 20.3%; top: 20.3%; }\n        .tech-orbit-legend span { opacity: 1; transform: none; }\n        .tech-orbit-nodes { transform: none !important; }\n    }\n    @media (max-width: 600px) {\n        .tech-orbit { width: min(320px, 88vw); }\n        .tech-node-btn { border-radius: 16px; }\n        .tech-orbit-hub { box-shadow: 0 12px 32px rgba(30, 58, 95, 0.1), 0 0 0 8px rgba(168, 218, 220, 0.12); }\n        .tech-node-label { display: none; }\n    }\n    \n    \/* ===================== FAQ ===================== *\/\n    .faq { padding: 120px 0; background-color: var(--hellgrau); border-radius: 40px; margin: 0 2vw 100px; }\n    .faq-container { max-width: 800px; margin: 0 auto; }\n    .faq-item { border-bottom: 1px solid rgba(30,58,95,0.1); }\n    .faq-item:first-child { border-top: 1px solid rgba(30,58,95,0.1); }\n    .faq-question { width: 100%; text-align: left; padding: 32px 0; background: none; border: none; font-size: 20px; font-family: 'Outfit', sans-serif; color: var(--marineblau); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s ease; }\n    .faq-question:hover { color: var(--koralle); }\n    .faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }\n    .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background-color: var(--marineblau); transition: transform 0.4s var(--ease-out); }\n    .faq-icon::before { top: 9px; left: 0; width: 20px; height: 2px; }\n    .faq-icon::after { top: 0; left: 9px; width: 2px; height: 20px; }\n    .faq-item.active .faq-icon::after { transform: rotate(90deg); }\n    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }\n    .faq-answer p { padding-bottom: 32px; color: var(--text-muted); font-size: 16px; line-height: 1.8; margin: 0; }\n    \n    \/* ===================== ANIMATIONEN ===================== *\/\n    .scroll-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }\n    .scroll-in.scroll-in--visible { opacity: 1; transform: translateY(0); }\n    .delay-1 { transition-delay: 0.1s; }\n    .delay-2 { transition-delay: 0.2s; }\n    .delay-3 { transition-delay: 0.3s; }\n    \n    \/* ===================== FOOTER ===================== *\/\n    footer { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }\n    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px 32px; margin-bottom: 48px; }\n    .footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }\n    .footer-brand .footer-logo img { height: 44px; width: auto; display: block; }\n    .footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 280px; margin-bottom: 24px; }\n    .footer-search-form { display: flex; align-items: stretch; max-width: 280px; margin-bottom: 24px; }\n    .footer-search-form input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.25); border-right: none; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.95); font-size: 14px; font-family: inherit; color: var(--marineblau); }\n    .footer-search-form input::placeholder { color: var(--text-muted); }\n    .footer-search-form button { width: 44px; background: var(--mint); border: none; border-radius: 0 8px 8px 0; color: var(--marineblau); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n    .footer-search-form button:hover { background: #8fcacd; }\n    .footer-search-form button svg { width: 18px; height: 18px; }\n    .footer-social { display: flex; gap: 10px; }\n    .footer-social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n    .footer-social a:hover { background: rgba(255,255,255,0.2); }\n    .footer-social a svg { width: 18px; height: 18px; }\n    .footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }\n    .footer-col ul { list-style: none; }\n    .footer-col ul li { margin-bottom: 10px; }\n    .footer-col a { font-size: 15px; color: rgba(255,255,255,0.9); transition: color 0.2s ease; }\n    .footer-col a:hover { color: var(--weiss); }\n    .footer-col p { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }\n    .footer-col p a { color: inherit; }\n    .footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }\n    \n    @media (max-width: 900px) {\n        .hero { grid-template-columns: 1fr; padding-top: 70px; }\n        .hero-text { order: 2; padding: 60px 5vw; }\n        .hero-image-container { order: 1; height: 60vh; min-height: 400px; }\n        .philosophy-grid { grid-template-columns: 1fr; gap: 40px; }\n        .philosophy { margin: 0; border-radius: 0; padding: 100px 0; }\n        .faq { margin: 0; border-radius: 0; padding: 100px 0; }\n        .timeline-container::before { left: 24px; transform: none; }\n        .timeline-item { text-align: left; padding-left: 64px; }\n        .timeline-date { margin-bottom: 16px; }\n        .timeline-content { margin: 0; }\n        .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n        .ctc_s_7_icon_padding,\n        .ctc-analytics,\n        .cky-btn-revisit-wrapper.cky-revisit-bottom-left { display: none !important; }\n    }\n    @media (max-width: 768px) {\n        .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n    }\n    <\/style>\n    \n    <main id=\"main\" role=\"main\">\n        <section class=\"hero\">\n            <div class=\"hero-text\">\n                <span class=\"eyebrow scroll-in\">Webdesign Mosbach &amp; Odenwald<\/span>\n                <h1 class=\"scroll-in delay-1\">Webdesign Mosbach &amp;<br><span>dem Odenwald<\/span><\/h1>\n                <p class=\"scroll-in delay-2\"><strong>Webdesign Mosbach<\/strong> und Region: Hinter es.design stehe ich, Elias Schultze. Mein Studio im Odenwald ist der Ort, an dem aus Ideen funktionale Websites und Marken entstehen. Als Webdesigner in Mosbach biete ich Unternehmen aus dem Neckar-Odenwald-Kreis die pers\u00f6nliche Betreuung, die bei gro\u00dfen Agenturen oft fehlt.<\/p>\n                <p class=\"scroll-in delay-2\">Regionalit\u00e4t bedeutet kurze Wege, direktes Feedback und Verst\u00e4ndnis f\u00fcr den lokalen Markt. Ob Handwerksbetrieb aus Mosbach oder mittelst\u00e4ndisches Unternehmen in der Region \u2014 ich verbinde Webdesign-Expertise mit N\u00e4he vor Ort, damit dein Auftritt lokal gefunden wird und \u00fcberzeugt.<\/p>\n                <p class=\"scroll-in delay-3\">Ob Unternehmenswebsite, Online-Shop oder Relaunch: Als Ansprechpartner f\u00fcr <strong>Webdesign Mosbach<\/strong> begleite ich dich von der Strategie \u00fcber UI\/UX bis zur technischen Umsetzung \u2014 SEO-freundlich, responsive und auf deine Zielgruppe zugeschnitten.<\/p>\n                <ul class=\"hero-bullets scroll-in delay-3\">\n                    <li>Standort: Waldbrunn (Odenwald) \/ Remote<\/li>\n                    <li>Spezialisierung: Webdesign &amp; Grafikdesign<\/li>\n                    <li>Projekte abgeschlossen: 20+<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"hero-image-container\">\n                <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Buisiness_Bild.webp\" alt=\"Elias Schultze \u2013 Webdesign Mosbach und Odenwald\" title=\"| Elias Schultze\">\n            <\/div>\n        <\/section>\n    \n        <section id=\"werdegang\" class=\"timeline-section\">\n            <div class=\"es-container\">\n                <div class=\"section-header scroll-in\">\n                    <h2>Mein Werdegang als Webentwickler<\/h2>\n                    <p>Von der Ausbildung bis zur Selbstst\u00e4ndigkeit \u2014 mit Fokus auf Webdesign Mosbach, den Odenwald und Unternehmen, die online wachsen wollen.<\/p>\n                <\/div>\n                <div class=\"timeline-container\">\n                    <div class=\"timeline-item scroll-in\">\n                        <div class=\"timeline-date\">2019 \u2013 2021<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Autodidaktisches Studium &amp; Design-Grundlagen<\/h3>\n                            <p>Zwei Jahre intensive autodidaktische Weiterbildung in HTML, CSS sowie Adobe Illustrator und InDesign. Die Grundsteinlegung meiner gestalterischen Laufbahn \u2014 heute die Basis f\u00fcr professionelles Webdesign Mosbach und im gesamten Odenwald.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item scroll-in delay-1\">\n                        <div class=\"timeline-date\" style=\"background: var(--koralle);\">2021 \u2013 2024<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Gestaltungs- &amp; Medientechnik in Mosbach<\/h3>\n                            <p>Erfolgreicher Abschluss mit dem Profilfach Gestaltung- und Medientechnik. Fokus auf Designtheorie, Typografie und moderne Medienproduktion.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timeline-item scroll-in delay-2\">\n                        <div class=\"timeline-date\" style=\"background: var(--mint); color: var(--marineblau);\">2024 \u2013 JETZT<\/div>\n                        <div class=\"timeline-content\">\n                            <h3>Studium Onlinemedien an der DHBW Mosbach<\/h3>\n                            <p>Aktuelles Studium an der DHBW Mosbach. Vertiefung in den Bereichen UX\/UI Design, fortschrittliches Webdesign &amp; strategisches Online-Marketing.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section class=\"philosophy\">\n            <div class=\"es-container philosophy-grid\">\n                <div class=\"philosophy-text\">\n                    <h2 class=\"scroll-in\">Meine Design-Philosophie f\u00fcr modernes UI\/UX Webdesign<\/h2>\n                    <p class=\"scroll-in delay-1\">Gutes Design ist f\u00fcr mich die perfekte Balance zwischen Form und Funktion. F\u00fcr <strong>Webdesign Mosbach<\/strong> und die Region setze ich auf minimalistische <a href=\"\/webdesign-referenzen\/\">Erlebnisse<\/a>, die nicht nur visuell beeindrucken, sondern Nutzer intuitiv ans Ziel f\u00fchren \u2014 und bei Google sichtbar sind.<\/p>\n                    <div class=\"quote-box scroll-in delay-2\">\n                        \u201eSimplicity is the ultimate sophistication.&#8220;<br>\n                        <span style=\"font-size: 14px; color: var(--text-muted); font-family: 'Inter', sans-serif; font-style: normal; display: block; margin-top: 8px;\">\u2013 Leonardo da Vinci<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"philosophy-image scroll-in delay-2\">\n                    <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/workplace-office-manager-with-small-desk-scaled-1.webp\" alt=\"Workspace Elias Schultze\" title=\"| Elias Schultze\">\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section id=\"faehigkeiten\" class=\"skills-section\">\n            <div class=\"es-container\">\n                <div class=\"section-header scroll-in\" style=\"text-align: center;\">\n                    <h2>Technologien &amp; Web-Expertise f\u00fcr Ihr Projekt<\/h2>\n                    <p>Technologien und Werkzeuge, die ich t\u00e4glich f\u00fcr Webdesign-Projekte in Mosbach, im Odenwald und deutschlandweit einsetze.<\/p>\n                <\/div>\n                <div class=\"tech-orbit scroll-in\">\n                    <svg class=\"tech-orbit-lines\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                        <defs>\n                            <linearGradient id=\"techLineGrad\" gradientUnits=\"userSpaceOnUse\" x1=\"8\" y1=\"8\" x2=\"92\" y2=\"92\">\n                                <stop offset=\"0%\" stop-color=\"#a8dadc\" stop-opacity=\"0.35\"><\/stop>\n                                <stop offset=\"50%\" stop-color=\"#1e3a5f\" stop-opacity=\"0.55\"><\/stop>\n                                <stop offset=\"100%\" stop-color=\"#f67280\" stop-opacity=\"0.4\"><\/stop>\n                            <\/linearGradient>\n                        <\/defs>\n                        <circle class=\"tech-orbit-ring tech-orbit-ring--outer\" cx=\"50\" cy=\"50\" r=\"44\"><\/circle>\n                        <circle class=\"tech-orbit-ring tech-orbit-ring--inner\" cx=\"50\" cy=\"50\" r=\"34\"><\/circle>\n                        <line class=\"tech-orbit-line tech-orbit-line--0\" pathLength=\"32\" x1=\"50\" y1=\"39.7\" x2=\"50\" y2=\"8\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--1\" pathLength=\"32\" x1=\"57.3\" y1=\"42.7\" x2=\"79.7\" y2=\"20.3\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--2\" pathLength=\"32\" x1=\"60.3\" y1=\"50\" x2=\"92\" y2=\"50\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--3\" pathLength=\"32\" x1=\"57.3\" y1=\"57.3\" x2=\"79.7\" y2=\"79.7\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--4\" pathLength=\"32\" x1=\"50\" y1=\"60.3\" x2=\"50\" y2=\"92\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--5\" pathLength=\"32\" x1=\"42.7\" y1=\"57.3\" x2=\"20.3\" y2=\"79.7\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--6\" pathLength=\"32\" x1=\"39.7\" y1=\"50\" x2=\"8\" y2=\"50\"><\/line>\n                        <line class=\"tech-orbit-line tech-orbit-line--7\" pathLength=\"32\" x1=\"42.7\" y1=\"42.7\" x2=\"20.3\" y2=\"20.3\"><\/line>\n                    <\/svg>\n                    <div class=\"tech-orbit-hub\">\n                        <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Logo_mit_Kontur_Wortbildmarke-scaled.webp\" alt=\"es.design\" width=\"140\" height=\"44\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                    <\/div>\n                    <div class=\"tech-orbit-nodes\">\n                        <div class=\"tech-node tech-node--0\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"JavaScript\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-javascript.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">JavaScript<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--1\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"React\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-react.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">React<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--2\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"Storyblok\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-storyblok.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">Storyblok<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--3\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"PayPal\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-paypal.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">PayPal<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--4\">\n                            <a href=\"https:\/\/skillshop.credential.net\/54fad0d7-35da-47eb-8f8d-67ea7a5ed8b5#acc.uItF7W02\" class=\"tech-node-btn tech-node-btn--link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Analytics Zertifizierung \u2014 Nachweis ansehen\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Google_Analytics_2026_Badge.png\" alt=\"| es.design\" class=\"tech-node-icon tech-node-icon--ga\" width=\"84\" height=\"84\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">Google Analytics<\/span>\n                            <\/a>\n                        <\/div>\n                        <div class=\"tech-node tech-node--5\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"HTML\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-html.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">HTML<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--6\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"CSS\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-css.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">CSS<\/span>\n                            <\/div>\n                        <\/div>\n                        <div class=\"tech-node tech-node--7\">\n                            <div class=\"tech-node-btn\" tabindex=\"0\" aria-label=\"WordPress\">\n                                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/tech-wordpress.png\" alt=\"| es.design\" class=\"tech-node-icon\" width=\"64\" height=\"64\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                                <span class=\"tech-node-label\">WordPress<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"tech-orbit-legend scroll-in delay-1\" aria-hidden=\"true\">\n                    <span>JavaScript<\/span>\n                    <span>React<\/span>\n                    <span>Storyblok<\/span>\n                    <span>PayPal<\/span>\n                    <span>Google Analytics<\/span>\n                    <span>HTML<\/span>\n                    <span>CSS<\/span>\n                    <span>WordPress<\/span>\n                <\/div>\n            <\/div>\n        <\/section>\n    \n        <section id=\"faq\" class=\"faq\">\n            <div class=\"es-container faq-container\">\n                <div class=\"section-header\" style=\"text-align: center;\">\n                    <h2 class=\"scroll-in\">H\u00e4ufig gestellte Fragen<\/h2>\n                    <p class=\"scroll-in delay-1\">Alles, was Sie vor einem Projektstart wissen m\u00f6chten.<\/p>\n                <\/div>\n                <div class=\"faq-list scroll-in delay-2\">\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Warum Webdesign Mosbach mit es.design? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Wer nach <strong>Webdesign Mosbach<\/strong> sucht, will in der Regel einen Ansprechpartner vor Ort \u2014 nicht eine anonyme Agentur. Ich kombiniere Premium-Design mit pers\u00f6nlicher Betreuung aus dem Odenwald: von der Corporate Website \u00fcber E-Commerce bis zum Branding. Du sprichst immer direkt mit mir, erh\u00e4ltst transparente Abl\u00e4ufe und eine Website, die technisch sauber und suchmaschinenoptimiert umgesetzt ist.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Welche Art von Projekten nehme ich an? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Ich fokussiere mich auf Premium Webdesign, E-Commerce-L\u00f6sungen und die Entwicklung ganzheitlicher Corporate Identities f\u00fcr Unternehmen, die Wert auf Qualit\u00e4t und \u00c4sthetik legen.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Wie l\u00e4uft die Zusammenarbeit ab? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Wir starten mit einem lockeren Erstgespr\u00e4ch. Danach erstelle ich ein Strategiekonzept, worauf die Design-Phase folgt. Nach deiner Freigabe setze ich alles technisch perfekt um. Zu guter Letzt geht die Seite nach deiner Absegnung online.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Was kostet ein Projekt? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Jedes Projekt ist so individuell wie das Unternehmen dahinter. Premium-Qualit\u00e4t hat ihren Preis, aber keine versteckten Kosten. Nutze meinen <a href=\"\/preisberechnung\/\">Vorab-Rechner<\/a> f\u00fcr eine erste, schnelle Budget-Orientierung. In unserem Erstgespr\u00e4ch definieren wir den Rahmen und ich erstelle dir ein transparentes Angebot.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Wie lange dauert ein typisches Projekt? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Abh\u00e4ngig vom Umfang dauert eine professionelle Website-Entwicklung bei mir in der Regel zwischen 4 und 8 Wochen von der ersten Idee bis zum Live-Gang.<\/p><\/div>\n                    <\/div>\n                    <div class=\"faq-item\">\n                        <button class=\"faq-question\" type=\"button\">Biete ich auch Support nach Projektabschluss? <span class=\"faq-icon\"><\/span><\/button>\n                        <div class=\"faq-answer\"><p>Selbstverst\u00e4ndlich. Eine Website muss gepflegt werden. Ich biete ma\u00dfgeschneiderte Wartungs- und Support-Pakete an, damit dein digitaler Auftritt langfristig sicher und performant bleibt.<\/p><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    \n    <footer>\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 &amp; 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\"><\/path><\/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\"><\/path><\/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            var techOrbit = document.querySelector('.tech-orbit');\n            if (techOrbit &#038;&#038; !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n                var orbitNodes = techOrbit.querySelector('.tech-orbit-nodes');\n                var orbitLines = techOrbit.querySelector('.tech-orbit-lines');\n                var orbitActive = false;\n                var orbitObserver = new IntersectionObserver(function(entries) {\n                    orbitActive = entries[0].isIntersecting;\n                    if (!orbitActive &#038;&#038; orbitNodes) {\n                        orbitNodes.style.transform = '';\n                        if (orbitLines) orbitLines.style.transform = '';\n                    }\n                }, { threshold: 0, rootMargin: '80px 0px' });\n                orbitObserver.observe(techOrbit);\n                window.addEventListener('scroll', function() {\n                    if (!orbitActive || !orbitNodes) return;\n                    var rect = techOrbit.getBoundingClientRect();\n                    var center = rect.top + rect.height * 0.5;\n                    var progress = (window.innerHeight * 0.5 - center) \/ (window.innerHeight * 0.45 + rect.height * 0.5);\n                    progress = Math.max(-1, Math.min(1, progress));\n                    var rotate = progress * 7;\n                    var scale = 1 + (1 - Math.abs(progress)) * 0.04;\n                    orbitNodes.style.transform = 'rotate(' + rotate + 'deg) scale(' + scale + ')';\n                    if (orbitLines) orbitLines.style.transform = 'rotate(' + (rotate * -0.35) + 'deg) scale(' + (1 + Math.abs(progress) * 0.02) + ')';\n                }, { passive: true });\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 Blog Kontakt Studio Expertise Cases Blog DE EN Let&#8217;s talk Webdesign Mosbach &amp; Odenwald Webdesign Mosbach &amp;dem Odenwald Webdesign Mosbach und Region: Hinter es.design stehe ich, Elias Schultze. Mein Studio im Odenwald ist der Ort, an dem aus Ideen funktionale Websites und Marken entstehen. Als Webdesigner in Mosbach biete ich Unternehmen aus [&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":85,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions"}],"predecessor-version":[{"id":2624,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1891\/revisions\/2624"}],"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}]}}