{"id":1889,"date":"2026-03-13T22:03:12","date_gmt":"2026-03-13T22:03:12","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=1889"},"modified":"2026-07-04T12:57:01","modified_gmt":"2026-07-04T12:57:01","slug":"home","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/","title":{"rendered":"Webdesign Odenwald"},"content":{"rendered":"\n<style>\n\/* ===================== VARIABLEN & BASIS (f\u00fcr Header) ===================== *\/\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --mint: #a8dadc;\n    --text-muted: #66768f;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n\/* ===================== HEADER ===================== *\/\nheader {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    padding: 20px 0;\n    z-index: 500;\n    background: var(--weiss);\n    border-bottom: 1px solid rgba(30,58,95,0.06);\n}\n.nav-inner {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n    min-height: 52px;\n}\n.nav-inner .logo { flex-shrink: 0; z-index: 700; }\n.nav-inner .nav-links {\n    position: absolute;\n    left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    list-style: none;\n}\n.nav-inner .nav-right-group { flex-shrink: 0; display: flex; align-items: center; gap: 0; z-index: 700; }\n\n.logo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--marineblau); display: flex; align-items: center; }\n.logo a { color: inherit; }\n.logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n.nav-links { font-size: 15px; font-weight: 400; }\n.nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n.nav-links a:hover { color: var(--marineblau); }\n\n.btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n.btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white !important; }\n\n.nav-right { display: flex; align-items: center; gap: 0; }\n.nav-utils { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(30,58,95,0.12); }\n\n.nav-search { display: flex; align-items: center; flex-direction: row-reverse; }\n.nav-search-trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; }\n.nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n.nav-search-trigger svg { width: 20px; height: 20px; }\n.nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; }\n.nav-search.is-open .nav-search-input-wrap { width: 200px; min-width: 200px; opacity: 1; }\n.nav-search-input-wrap input { width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2); border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau); background: var(--weiss); box-sizing: border-box; }\n.nav-search-input-wrap input:focus { outline: none; border-color: var(--marineblau); }\n.nav-search-input-wrap input::placeholder { color: var(--text-muted); }\n\n.nav-lang { display: flex; align-items: center; background: rgba(30,58,95,0.06); border-radius: 100px; padding: 4px; gap: 2px; }\n.nav-lang a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: 100px; transition: color 0.2s ease, background 0.2s ease; }\n.nav-lang a:hover { color: var(--marineblau); }\n.nav-lang a.active { color: var(--marineblau); background: var(--weiss); box-shadow: 0 1px 3px rgba(30,58,95,0.08); }\n\na:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marineblau); outline-offset: 2px; }\n\n.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--marineblau); color: var(--weiss); font-size: 14px; font-weight: 500; border-radius: 8px; transition: top 0.2s ease; }\n.skip-link:focus { top: 16px; }\n\n\/* ===================== BURGER ===================== *\/\n.es-burger {\n    display: none;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 44px; height: 44px;\n    background: none; border: none;\n    cursor: pointer;\n    z-index: 700;\n    padding: 0; flex-shrink: 0;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-burger-box { position: relative; width: 24px; height: 16px; }\n.es-burger-box span {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 24px; height: 2px;\n    background: var(--marineblau);\n    border-radius: 2px;\n    transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, opacity 0.2s ease;\n}\n.es-burger-box span:nth-child(1) { top: 0; }\n.es-burger-box span:nth-child(2) { top: 7px; }\n.es-burger-box span:nth-child(3) { top: 14px; }\n.es-burger.is-open .es-burger-box span {\n    background: var(--weiss);\n    transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, opacity 0.2s ease;\n}\n.es-burger.is-open .es-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }\n.es-burger.is-open .es-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.es-burger.is-open .es-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }\n\n\/* ===================== FULLSCREEN OVERLAY ===================== *\/\n.es-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 600;\n    background: var(--marineblau);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 100px 10vw 60px;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-20px);\n    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;\n}\n.es-mobile-overlay.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n.es-mobile-overlay::before {\n    content: 'es.';\n    position: absolute;\n    right: 5vw; bottom: -0.05em;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(120px, 25vw, 220px);\n    font-weight: 700;\n    color: rgba(255,255,255,0.04);\n    line-height: 1;\n    pointer-events: none;\n    letter-spacing: -0.04em;\n    user-select: none;\n}\n.es-overlay-close {\n    position: absolute;\n    top: 24px; right: 5vw;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px; height: 44px;\n    background: rgba(255,255,255,0.12);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--weiss);\n    transition: background 0.25s ease, transform 0.25s ease;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-overlay-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }\n.es-overlay-close svg { width: 20px; height: 20px; }\n\n.es-mobile-nav { list-style: none; width: 100%; }\n.es-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav a {\n    display: block;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(36px, 8vw, 64px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.9);\n    letter-spacing: -0.03em;\n    padding: 20px 0; line-height: 1;\n    transform: translateY(40px); opacity: 0;\n    transition: color 0.25s ease, padding-left 0.3s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s ease;\n}\n.es-mobile-overlay.is-open .es-mobile-nav a { transform: translateY(0); opacity: 1; }\n.es-mobile-nav li:nth-child(1) a { transition-delay: 0.1s; }\n.es-mobile-nav li:nth-child(2) a { transition-delay: 0.18s; }\n.es-mobile-nav li:nth-child(3) a { transition-delay: 0.26s; }\n.es-mobile-nav li:nth-child(4) a { transition-delay: 0.34s; }\n.es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n\n.es-mobile-cta { margin-top: 48px; transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out) 0.42s, opacity 0.5s ease 0.42s; }\n.es-mobile-overlay.is-open .es-mobile-cta { transform: translateY(0); opacity: 1; }\n.es-mobile-cta a { display: inline-block; background: var(--koralle); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 18px 44px; border-radius: 100px; transition: background 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(246,114,128,0.25); }\n.es-mobile-cta a:hover { background: var(--koralle-hover); transform: translateY(-2px); }\n\n.es-mobile-footer { position: absolute; bottom: 40px; left: 10vw; right: 10vw; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; }\n.es-mobile-overlay.is-open .es-mobile-footer { opacity: 1; transform: translateY(0); }\n.es-mobile-lang { display: flex; gap: 16px; }\n.es-mobile-lang a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s ease; }\n.es-mobile-lang a.active, .es-mobile-lang a:hover { color: rgba(255,255,255,0.9); }\n.es-mobile-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s ease; }\n.es-mobile-social a:hover { color: rgba(255,255,255,0.9); }\n\nbody.es-nav-open { overflow: hidden; }\n\n\/* ===================== RESPONSIVE (Header) ===================== *\/\n@media (max-width: 900px) {\n    .nav-inner .nav-links,\n    .nav-inner .nav-right { display: none !important; }\n    .es-burger { display: flex; }\n}\n<\/style>\n\n\n<link rel=\"shortcut icon\" href=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/08\/Logo_mit_Kontur_Bildmarke-8c52ee.svg\">\n\n<!-- ========== MOBILE NAV (Fullscreen-Overlay: Burger \u00f6ffnet, X\/Link\/Escape schlie\u00dfen) ========== -->\n<div class=\"es-mobile-overlay\" id=\"es-mobile-overlay\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Navigation\">\n    <button type=\"button\" class=\"es-overlay-close\" id=\"es-overlay-close\" aria-label=\"Men\u00fc schlie\u00dfen\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n        <\/svg>\n    <\/button>\n    <nav aria-label=\"Mobile Navigation\">\n        <ul class=\"es-mobile-nav\">\n            <li><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        <div class=\"es-mobile-cta\">\n            <a href=\"#kontakt\" class=\"es-mobile-link\">Kostenloses Erstgespr\u00e4ch<\/a>\n        <\/div>\n    <\/nav>\n    <div class=\"es-mobile-footer\">\n        <div class=\"es-mobile-lang\">\n            <a href=\"\/\" class=\"active\" hreflang=\"de\">DE<\/a>\n            <a href=\"en\/index.html\" hreflang=\"en\">EN<\/a>\n        <\/div>\n        <div class=\"es-mobile-social\">\n            <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram \u2924<\/a>\n        <\/div>\n    <\/div>\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 loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Logo_mit_Kontur_Wortbildmarke.webp\" alt=\"es.design \u2013 Startseite\" width=\"180\" height=\"36\" title=\"| Elias Schultze\">\n        <\/a>\n        <nav class=\"nav-links\" aria-label=\"Hauptnavigation\">\n            <a href=\"\/webdesigner-mosbach\/\">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        <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=\"q\" placeholder=\"Suchen\u2026\" autocomplete=\"off\" aria-label=\"Seite durchsuchen\">\n                        <\/form>\n                        <button type=\"button\" class=\"nav-search-trigger\" aria-label=\"Suchen\" id=\"nav-search-trigger\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"nav-lang\">\n                        <a href=\"\/\" class=\"active\" hreflang=\"de\" lang=\"de\">DE<\/a>\n                        <a href=\"en\/index\" hreflang=\"en\" lang=\"en\">EN<\/a>\n                    <\/div>\n                <\/div>\n                <a href=\"#kontakt\" class=\"btn-outline\">Let&#8217;s talk<\/a>\n            <\/div>\n            <button type=\"button\" class=\"es-burger\" id=\"es-burger\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"es-mobile-overlay\">\n                <div class=\"es-burger-box\">\n                    <span><\/span>\n                    <span><\/span>\n                    <span><\/span>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/header>\n\n<script>\n(function() {\n    'use strict';\n    var burger   = document.getElementById('es-burger');\n    var overlay  = document.getElementById('es-mobile-overlay');\n    var closeBtn = document.getElementById('es-overlay-close');\n    var mobileLinks = document.querySelectorAll('.es-mobile-link');\n\n    if (burger && overlay) {\n        var menuOpen = false;\n        function openNav() {\n            menuOpen = true;\n            burger.classList.add('is-open');\n            overlay.classList.add('is-open');\n            overlay.setAttribute('aria-hidden', 'false');\n            burger.setAttribute('aria-expanded', 'true');\n            burger.setAttribute('aria-label', 'Men\u00fc schlie\u00dfen');\n            document.body.classList.add('es-nav-open');\n        }\n        function closeNav() {\n            menuOpen = false;\n            burger.classList.remove('is-open');\n            overlay.classList.remove('is-open');\n            overlay.setAttribute('aria-hidden', 'true');\n            burger.setAttribute('aria-expanded', 'false');\n            burger.setAttribute('aria-label', 'Men\u00fc \u00f6ffnen');\n            document.body.classList.remove('es-nav-open');\n        }\n        burger.addEventListener('click', function(e) { e.stopPropagation(); menuOpen ? closeNav() : openNav(); });\n        if (closeBtn) closeBtn.addEventListener('click', function(e) { e.stopPropagation(); closeNav(); });\n        mobileLinks.forEach(function(link) { link.addEventListener('click', closeNav); });\n        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && menuOpen) closeNav(); });\n        window.addEventListener('resize', function() { if (window.innerWidth > 900 && menuOpen) closeNav(); });\n    }\n\n    var searchWrap = document.getElementById('nav-search-wrap');\n    var searchTrigger = document.getElementById('nav-search-trigger');\n    var searchForm = document.getElementById('nav-search-form');\n    var searchInput = document.getElementById('nav-search-input');\n    if (searchWrap && searchTrigger && searchForm && searchInput) {\n        searchTrigger.addEventListener('click', function() {\n            searchWrap.classList.toggle('is-open');\n            if (searchWrap.classList.contains('is-open')) searchInput.focus();\n        });\n        searchInput.addEventListener('blur', function() {\n            setTimeout(function() { searchWrap.classList.remove('is-open'); }, 450);\n        });\n        searchForm.addEventListener('submit', function(e) { e.preventDefault(); });\n    }\n\n    function init() {\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', arguments.callee);\n            return;\n        }\n    }\n    init();\n})();\n<\/script>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500&amp;family=Outfit:wght@200;300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --apple-bg: #fbfbfd;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --koralle-accessible: #c44d5b;\n    --text-muted: #5a6178;\n    --mint: #a8dadc;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n    --apple-ease: cubic-bezier(0.16, 1, 0.3, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\nh1, h2, h3, h4 {\n    font-family: 'Outfit', sans-serif;\n    font-weight: 300;\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n.brand-inline { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--marineblau); letter-spacing: -0.02em; }\n\n\/* ===================== HERO ===================== *\/\n.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; overflow: hidden; padding-top: 93px; }\n.hero-text { background-color: var(--hellgrau); padding: 48px 5vw 80px; display: flex; flex-direction: column; justify-content: center; }\n.hero-text .btn-primary { align-self: flex-start; width: auto; max-width: 85%; }\n.hero-actions {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    gap: 16px;\n    align-items: stretch;\n    width: 100%;\n    max-width: 640px;\n}\n.hero-actions .btn-primary,\n.hero-actions .btn-outline {\n    flex: 1 1 auto;\n    min-width: 0;\n    text-align: center;\n    white-space: normal;\n    line-height: 1.35;\n}\n.hero-actions .btn-outline {\n    border: 1px solid var(--marineblau);\n    color: var(--marineblau);\n    padding: 20px 28px;\n    font-size: 16px;\n}\n.hero h1 { font-size: clamp(3rem, 5vw, 5.5rem); margin-bottom: 32px; 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, 20px); color: var(--text-muted); font-weight: 300; max-width: 600px; margin-bottom: 48px; line-height: 1.7; }\n.hero-image-container { position: relative; overflow: hidden; }\n.hero-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n\n.hero-award {\n    position: absolute;\n    left: 28px;\n    bottom: 28px;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 12px 18px 12px 12px;\n    background: rgba(255, 255, 255, 0.82);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    border: 1px solid rgba(255, 255, 255, 0.65);\n    border-radius: 18px;\n    box-shadow:\n        0 4px 24px rgba(30, 58, 95, 0.08),\n        0 1px 3px rgba(30, 58, 95, 0.04);\n    text-decoration: none;\n    color: var(--marineblau);\n    animation: hero-award-float 5s ease-in-out infinite;\n    transition: transform 0.45s var(--apple-ease), box-shadow 0.45s var(--apple-ease);\n}\n\n.hero-award:hover {\n    animation-play-state: paused;\n    transform: translateY(-4px) scale(1.02);\n    box-shadow:\n        0 12px 40px rgba(30, 58, 95, 0.14),\n        0 2px 8px rgba(30, 58, 95, 0.06);\n}\n\n.hero-award-glow {\n    position: absolute;\n    left: 8px;\n    top: 50%;\n    width: 72px;\n    height: 72px;\n    transform: translateY(-50%);\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(168, 218, 220, 0.45) 0%, transparent 70%);\n    pointer-events: none;\n    animation: hero-award-glow 4s ease-in-out infinite;\n}\n\n.hero-award-img {\n    position: relative;\n    z-index: 1;\n    width: auto;\n    height: 64px;\n    object-fit: contain;\n    filter: drop-shadow(0 4px 12px rgba(30, 58, 95, 0.12));\n    transition: transform 0.5s var(--apple-ease);\n}\n\n.hero-award:hover .hero-award-img {\n    transform: scale(1.06) rotate(-2deg);\n}\n\n.hero-award-text {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.hero-award-label {\n    font-family: 'Outfit', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    line-height: 1.2;\n    color: var(--marineblau);\n}\n\n.hero-award-year {\n    font-family: 'Outfit', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: var(--text-muted);\n}\n\n@keyframes hero-award-float {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-6px); }\n}\n\n@keyframes hero-award-glow {\n    0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }\n    50% { opacity: 1; transform: translateY(-50%) scale(1.12); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .hero-award,\n    .hero-award-glow,\n    .hero-cert,\n    .hero-cert-ring { animation: none; }\n}\n\n.hero-cert {\n    position: absolute;\n    top: 28px;\n    right: 28px;\n    z-index: 3;\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 12px 10px 16px;\n    background: rgba(255, 255, 255, 0.82);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    border: 1px solid rgba(255, 255, 255, 0.65);\n    border-radius: 100px;\n    box-shadow:\n        0 4px 24px rgba(30, 58, 95, 0.08),\n        0 1px 3px rgba(30, 58, 95, 0.04);\n    text-decoration: none;\n    color: var(--marineblau);\n    animation: hero-award-float 5s ease-in-out 2.5s infinite;\n    transition: transform 0.45s var(--apple-ease), box-shadow 0.45s var(--apple-ease);\n}\n\n.hero-cert:hover {\n    animation-play-state: paused;\n    transform: translateY(-4px) scale(1.02);\n    box-shadow:\n        0 12px 40px rgba(30, 58, 95, 0.14),\n        0 2px 8px rgba(30, 58, 95, 0.06);\n}\n\n.hero-cert-ring {\n    position: absolute;\n    right: 6px;\n    top: 50%;\n    width: 64px;\n    height: 64px;\n    transform: translateY(-50%);\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(66, 133, 244, 0.18) 0%, transparent 70%);\n    pointer-events: none;\n    animation: hero-cert-ring 4s ease-in-out 1s infinite;\n}\n\n.hero-cert-img {\n    position: relative;\n    z-index: 1;\n    width: 56px;\n    height: 56px;\n    object-fit: contain;\n    border-radius: 50%;\n    transition: transform 0.5s var(--apple-ease);\n}\n\n.hero-cert:hover .hero-cert-img {\n    transform: scale(1.08) rotate(6deg);\n}\n\n.hero-cert-text {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    text-align: right;\n}\n\n.hero-cert-label {\n    font-family: 'Outfit', sans-serif;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    line-height: 1.2;\n    color: var(--marineblau);\n}\n\n.hero-cert-status {\n    font-family: 'Outfit', sans-serif;\n    font-size: 10px;\n    font-weight: 500;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--text-muted);\n}\n\n@keyframes hero-cert-ring {\n    0%, 100% { opacity: 0.45; transform: translateY(-50%) scale(1); }\n    50% { opacity: 1; transform: translateY(-50%) scale(1.1); }\n}\n.btn-primary { background-color: var(--koralle-accessible); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 20px 48px; border-radius: 100px; display: inline-block; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); border: none; cursor: pointer; box-shadow: 0 10px 30px rgba(196,77,91,0.25); }\n.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(196,77,91,0.35); background-color: var(--koralle-hover); }\n\n\/* ===================== INLINE LINKS (z.B. SEO Check) ===================== *\/\n.es-link-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--koralle-accessible); transition: gap 0.3s var(--ease-out), color 0.3s ease; }\n.es-link-inline:hover { gap: 12px; color: var(--koralle-hover); }\n.es-link-inline svg { width: 18px; height: 18px; }\n\n\/* ===================== SECTIONS ===================== *\/\n.philosophy { padding: 120px 0; background-color: var(--weiss); }\n.philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; }\n.philosophy h2 { font-size: clamp(2.5rem, 4vw, 4rem); color: var(--marineblau); line-height: 1.1; }\n.philosophy-text p { font-size: 18px; color: var(--text-muted); font-weight: 300; margin-bottom: 24px; line-height: 1.8; }\n\n.services { padding: 120px 0; background-color: var(--hellgrau); border-radius: 40px; margin: 0 2vw; }\n.section-header { margin-bottom: 80px; max-width: 800px; }\n.section-header h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 16px; }\n.section-header p { font-size: 18px; color: var(--text-muted); font-weight: 300; }\n.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 64px 40px; }\n.service-card { padding-top: 24px; border-top: 1px solid rgba(30,58,95,0.1); }\n.s-icon { font-family: 'Outfit', sans-serif; font-size: 14px; color: var(--koralle-accessible); font-weight: 500; margin-bottom: 24px; display: block; }\n.service-card h3 { font-size: 26px; font-weight: 400; margin-bottom: 16px; }\n.service-card p { font-size: 16px; color: var(--text-muted); font-weight: 300; }\n\n.why-us { padding: 150px 0; background-color: var(--weiss); }\n.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 40px; margin-top: 80px; }\n.why-card h3 { font-size: 24px; font-weight: 400; margin-bottom: 16px; margin-top: 16px; }\n.why-card p { font-size: 16px; color: var(--text-muted); font-weight: 300; }\n.why-number { font-size: 64px; font-family: 'Outfit', sans-serif; font-weight: 200; color: var(--mint); line-height: 1; }\n\n\/* ===================== PORTFOLIO (APPLE STYLE) ===================== *\/\n.portfolio { padding: 120px 0; background-color: var(--apple-bg); border-radius: 48px; margin: 0 2vw; }\n.portfolio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; }\n.portfolio-header h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 500; letter-spacing: -0.03em; }\n.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: stretch; }\n\n.case { \n    display: flex; \n    flex-direction: column; \n    background: var(--weiss); \n    border-radius: 36px; \n    box-shadow: 0 10px 30px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02); \n    transition: all 0.6s var(--apple-ease); \n    border: 1px solid rgba(0,0,0,0.03);\n    text-decoration: none;\n    cursor: pointer;\n}\n.case:hover { \n    box-shadow: 0 30px 60px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.03); \n    transform: scale(1.02) translateY(-4px); \n}\n.case:nth-child(3) { grid-column: 1 \/ -1; }\n.case:nth-child(3) .case-image-wrapper { aspect-ratio: 21\/9; }\n\n.case-image-wrapper { \n    width: calc(100% - 24px); \n    margin: 12px 12px 0 12px;\n    border-radius: 24px;\n    overflow: hidden; \n    background-color: #f2f2f7; \n    display: flex; \n    align-items: center; \n    justify-content: center; \n    aspect-ratio: 4\/3; \n    position: relative;\n    z-index: 1;\n}\n.case:nth-child(1) .case-image-wrapper { background-color: #0d0d0d; }\n.case-image-wrapper img { \n    width: 100%; \n    height: 100%; \n    object-fit: contain; \n    transition: transform 0.8s var(--apple-ease); \n}\n.case:hover .case-image-wrapper img { transform: scale(1.04); }\n\n.case-info { \n    padding: 32px 28px; \n    display: flex; \n    justify-content: space-between; \n    align-items: center; \n    gap: 16px; \n    flex: 1; \n}\n.case-info > div { min-width: 0; }\n.case-info h3 { \n    font-size: 24px; \n    font-weight: 500; \n    letter-spacing: -0.02em; \n    color: var(--marineblau); \n    margin: 0 0 6px 0; \n}\n.case-info p { \n    font-size: 14px; \n    color: var(--text-muted); \n    font-weight: 400; \n    margin: 0; \n}\n\n.case-arrow { \n    display: inline-flex; \n    align-items: center; \n    justify-content: center; \n    width: 44px; \n    height: 44px; \n    border-radius: 50%; \n    background: #f2f2f7; \n    color: var(--marineblau); \n    transition: all 0.5s var(--apple-ease); \n    flex-shrink: 0; \n}\n.case:hover .case-arrow { \n    background: var(--marineblau); \n    color: var(--weiss); \n    transform: translateX(6px); \n}\n.case-arrow svg { width: 20px; height: 20px; }\n\n.btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n.btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white; }\n\n\/* ===================== TESTIMONIAL ===================== *\/\n.testimonial { padding: 120px 0; background-color: var(--weiss); text-align: center; }\n.testimonial-inner { max-width: 720px; margin: 0 auto; }\n.testimonial-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 32px; }\n.testimonial-stars svg { width: 28px; height: 28px; fill: var(--koralle); }\n.testimonial-quote { font-size: clamp(18px, 2vw, 22px); line-height: 1.7; color: var(--marineblau); font-weight: 300; margin-bottom: 32px; }\n.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 24px; }\n.testimonial-avatar { width: 72px; height: 72px; min-width: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n.testimonial-author-text { text-align: left; flex-shrink: 1; min-width: 0; }\n.testimonial-name { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 500; color: var(--marineblau); margin-bottom: 4px; }\n.testimonial-role { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 500; }\n\n\/* ===================== TESTIMONIAL SLIDER ===================== *\/\n.testimonial-slider-wrapper {\n    position: relative;\n    width: 100%;\n}\n.es-slide {\n    display: none;\n    opacity: 0;\n    transition: opacity 0.8s var(--ease-out);\n}\n.es-slide.active {\n    display: block;\n    opacity: 1;\n    animation: fadeIn 0.8s forwards;\n}\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n.es-slider-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 40px;\n}\n.es-slider-dots .dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: rgba(30, 58, 95, 0.2);\n    border: none;\n    cursor: pointer;\n    transition: background 0.3s ease;\n}\n.es-slider-dots .dot.active {\n    background: var(--marineblau);\n}\n.es-slider-dots .dot:hover {\n    background: rgba(30, 58, 95, 0.6);\n}\n\n.scroll-in { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }\n.scroll-in.scroll-in--visible { opacity: 1; transform: translateY(0); }\n.scroll-in-delay-1 { transition-delay: 0.1s; }\n.scroll-in-delay-2 { transition-delay: 0.2s; }\n.scroll-in-delay-3 { transition-delay: 0.3s; }\n.scroll-in-delay-4 { transition-delay: 0.4s; }\n\n.es-faq { padding: 150px 0; background-color: var(--hellgrau); }\n.es-faq-container { max-width: 900px; margin: 0 auto; }\n.es-faq .section-header { text-align: center; margin: 0 auto 80px; }\n.es-faq-list { display: flex; flex-direction: column; }\n.es-faq-item { border-bottom: 1px solid rgba(30,58,95,0.1); }\n.es-faq-item:first-child { border-top: 1px solid rgba(30,58,95,0.1); }\n.es-faq-question { width: 100%; text-align: left; padding: 32px 0; background: none; border: none; font-size: 22px; font-family: 'Outfit', sans-serif; font-weight: 400; color: var(--marineblau); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s ease; }\n.es-faq-question:hover { color: var(--koralle-accessible); }\n.es-faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; margin-left: 24px; }\n.es-faq-icon::before, .es-faq-icon::after { content: ''; position: absolute; background-color: var(--marineblau); transition: transform 0.4s var(--ease-out); }\n.es-faq-icon::before { top: 9px; left: 0; width: 20px; height: 2px; }\n.es-faq-icon::after { top: 0; left: 9px; width: 2px; height: 20px; }\n.es-faq-item.es-active .es-faq-icon::after { transform: rotate(90deg); }\n.es-faq-item.es-active .es-faq-question { color: var(--marineblau); }\n.es-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }\n.es-faq-answer p { padding-bottom: 32px; color: var(--text-muted); font-size: 16px; font-weight: 300; line-height: 1.8; margin: 0; }\n\n.footer-cta { padding: 150px 0; text-align: center; background: var(--marineblau); color: var(--weiss); }\n.footer-cta h2 { font-size: clamp(2.5rem, 5vw, 5rem); margin-bottom: 32px; color: var(--weiss); }\n.footer-cta p { font-size: 20px; color: rgba(255,255,255,0.7); font-weight: 300; max-width: 700px; margin: 0 auto 48px; line-height: 1.6; }\n\nfooter { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }\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, .footer-col .footer-col-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin: 0 0 16px 0; }\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 {\n        grid-template-columns: 1fr;\n        min-height: auto;\n        margin-top: 20px;\n        padding-top: 88px;\n    }\n    .hero-text {\n        order: 2;\n        text-align: center;\n        padding: 40px 5vw 56px;\n        align-items: center;\n    }\n    .hero-text .btn-primary { align-self: stretch; max-width: none; }\n    .hero-actions {\n        flex-direction: column;\n        width: 100%;\n        max-width: 420px;\n        gap: 12px;\n    }\n    .hero-actions .btn-primary,\n    .hero-actions .btn-outline {\n        width: 100%;\n        flex: none;\n        padding: 16px 24px;\n        font-size: 15px;\n    }\n    .hero h1 {\n        font-size: clamp(2rem, 7.5vw, 3rem);\n        margin-bottom: 24px;\n        text-align: center;\n    }\n    .hero p {\n        text-align: center;\n        margin-bottom: 32px;\n        max-width: 100%;\n        font-size: clamp(15px, 3.8vw, 18px);\n    }\n    .hero-image-container {\n        order: 1;\n        height: clamp(260px, 52vh, 420px);\n        min-height: 0;\n    }\n    .hero-award { left: 16px; bottom: 16px; padding: 10px 14px 10px 10px; gap: 10px; border-radius: 14px; }\n    .hero-award-img { height: 52px; }\n    .hero-award-label { font-size: 12px; }\n    .hero-award-year { font-size: 10px; }\n    .hero-award-glow { width: 56px; height: 56px; }\n    .hero-cert { top: 16px; right: 16px; padding: 8px 10px 8px 14px; gap: 10px; }\n    .hero-cert-img { width: 48px; height: 48px; }\n    .hero-cert-ring { width: 54px; height: 54px; right: 4px; }\n    .hero-cert-label { font-size: 11px; }\n    .hero-cert-status { font-size: 9px; }\n    .philosophy-grid, .why-grid { grid-template-columns: 1fr; gap: 40px; }\n    .portfolio-grid { grid-template-columns: 1fr; gap: 24px; }\n    .case:nth-child(3) { grid-column: auto; }\n    .case:nth-child(3) .case-image-wrapper { aspect-ratio: 4\/3; }\n    .services, .portfolio { margin: 0; border-radius: 0; }\n    .es-faq-question { font-size: 18px; padding: 24px 0; }\n    .es-faq { padding: 100px 0; }\n    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n    .portfolio-header { flex-direction: column; align-items: flex-start; gap: 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    .hero-text { padding: 32px 4vw 48px; }\n    .hero h1 { font-size: clamp(1.75rem, 8.5vw, 2.5rem); line-height: 1.15; }\n    .hero-actions { max-width: 100%; }\n    .hero-actions .btn-primary,\n    .hero-actions .btn-outline {\n        padding: 14px 20px;\n        font-size: 14px;\n        border-radius: 14px;\n    }\n    .hero-award {\n        left: 12px;\n        bottom: 12px;\n        max-width: calc(100% - 24px);\n        padding: 8px 12px 8px 8px;\n    }\n    .hero-award-text { min-width: 0; }\n    .hero-cert {\n        top: 12px;\n        right: 12px;\n        max-width: calc(100% - 24px);\n        padding: 6px 8px 6px 12px;\n    }\n    .hero-cert-text { display: none; }\n    .hero-cert { border-radius: 50%; padding: 6px; }\n    .hero-cert-ring { width: 48px; height: 48px; right: 2px; }\n}\n@media (max-width: 380px) {\n    .hero-actions .btn-primary { font-size: 13px; padding: 13px 16px; }\n    .hero-award-label { font-size: 11px; }\n}\n\n\/* ===================== BENTO PORTFOLIO (DARK LUXURY) ===================== *\/\n.bento-portfolio { \n    padding: 120px 0; \n    background-color: var(--hellgrau);\n    border-radius: 40px; \n    margin: 0 2vw; \n}\n.bento-portfolio .portfolio-header h2 {\n    color: rgb(30, 58, 95);\n}\n.bento-portfolio .portfolio-header p {\n    color: #8a8a93;\n}\n.bento-btn { \n    border: 1px solid rgba(255,255,255,0.2); \n    padding: 12px 28px; \n    border-radius: 100px; \n    font-size: 14px; \n    font-weight: 500; \n    transition: all 0.3s ease; \n    color: #ffffff; \n    white-space: nowrap; \n}\n.bento-btn:hover { \n    background: #ffffff; \n    color: #050507; \n}\n\n\/* Das asymmetrische Grid *\/\n.bento-grid { \n    display: grid; \n    grid-template-columns: 1fr 2fr; \n    grid-template-rows: 55vh 55vh; \n    gap: 16px; \n}\n\n\/* == DER GEILE EFFEKT: Sibling Blur == *\/\n.bento-grid:hover .bento-card {\n    opacity: 0.3;\n    filter: grayscale(80%) blur(4px);\n    transform: scale(0.98);\n}\n.bento-grid .bento-card:hover {\n    opacity: 1;\n    filter: grayscale(0%) blur(0px);\n    transform: scale(1.02);\n    z-index: 10;\n    box-shadow: 0 30px 60px rgba(0,0,0,0.8);\n}\n\n\/* Karten-Styling *\/\n.bento-card { \n    position: relative; \n    border-radius: 16px; \n    overflow: hidden; \n    background: #111; \n    display: block; \n    text-decoration: none; \n    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); \n}\n.bento-top { grid-column: 1 \/ -1; }\n.bento-bl { grid-column: 1 \/ 2; }   \n.bento-br { grid-column: 2 \/ 3; }   \n\n.bento-image { \n    position: absolute; \n    inset: 0; \n    width: 100%; \n    height: 100%; \n}\n.bento-image img { \n    width: 100%; \n    height: 100%; \n    object-fit: cover; \n    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s; \n    filter: brightness(0.8); \n}\n.bento-card:hover .bento-image img { \n    transform: scale(1.08); \n    filter: brightness(0.4); \n}\n\n\/* Text & Overlay *\/\n.bento-content { \n    position: absolute; \n    inset: 0; \n    display: flex; \n    flex-direction: column; \n    justify-content: flex-end; \n    align-items: center; \n    padding: 40px 20px; \n    text-align: center; \n    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 50%); \n}\n.bento-content h3 { \n    font-size: clamp(24px, 3vw, 32px); \n    color: #ffffff; \n    margin: 0 0 4px 0; \n    font-weight: 500; \n    letter-spacing: 0.02em; \n    transform: translateY(15px); \n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \n}\n.bento-content p { \n    font-size: 13px; \n    color: #a8dadc; \n    margin: 0; \n    text-transform: uppercase; \n    letter-spacing: 0.15em; \n    opacity: 0; \n    transform: translateY(20px); \n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, opacity 0.5s 0.1s; \n}\n\n.bento-card:hover .bento-content h3 { transform: translateY(0); }\n.bento-card:hover .bento-content p { transform: translateY(0); opacity: 1; }\n\n\/* Mobile Anpassung *\/\n@media (max-width: 900px) {\n    .bento-grid { grid-template-rows: auto; grid-auto-rows: 400px; }\n    .bento-top, .bento-bl, .bento-br { grid-column: 1 \/ -1; }\n    .bento-portfolio { margin: 0; border-radius: 0; padding: 100px 0; }\n}\n\n.partner-loop-section {\n    background-color: var(--weiss);\n    padding: 32px 0 40px;\n    overflow: hidden;\n    position: relative;\n    border-bottom: 1px solid rgba(30,58,95,0.05);\n}\n\n.partner-loop-heading {\n    text-align: center;\n    font-family: 'Outfit', sans-serif;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-muted);\n    margin-bottom: 28px;\n    padding: 0 5vw;\n    position: relative;\n    z-index: 3;\n}\n\n.partner-loop-section::before,\n.partner-loop-section::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    width: 15vw;\n    height: 100%;\n    z-index: 2;\n    pointer-events: none;\n}\n\n.partner-loop-section::before {\n    left: 0;\n    background: linear-gradient(to right, var(--weiss) 0%, transparent 100%);\n}\n\n.partner-loop-section::after {\n    right: 0;\n    background: linear-gradient(to left, var(--weiss) 0%, transparent 100%);\n}\n\n.loop-track {\n    display: flex;\n    align-items: center;\n    gap: 80px;\n    width: max-content;\n    animation: scroll-loop 25s linear infinite;\n}\n\n.loop-track:hover {\n    animation-play-state: paused;\n}\n\n.loop-item-link {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    text-decoration: none;\n}\n\n.loop-item {\n    height: 45px;\n    width: auto;\n    object-fit: contain;\n    filter: grayscale(100%) opacity(0.5);\n    transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);\n    cursor: pointer;\n}\n\n.loop-item:hover {\n    filter: grayscale(0%) opacity(1);\n    transform: scale(1.05);\n}\n\n@keyframes scroll-loop {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); } \n}\n\n@media (max-width: 900px) {\n    .loop-track { gap: 50px; }\n    .loop-item { height: 35px; }\n}\n<\/style>\n\n<main id=\"main\" role=\"main\">\n    <section class=\"hero\">\n        <div class=\"hero-text es-container\">\n            <h1>Premium Webdesign &amp;<br><span>Branding im Odenwald<\/span><\/h1>\n            <p>Du suchst keinen Standard-Baukasten, sondern <strong>Premium Webdesign<\/strong> und <strong>digitales Branding im Odenwald<\/strong>, die die Qualit\u00e4t deiner Arbeit widerspiegeln? Mit <span class=\"brand-inline\">es.design<\/span> entwickle ich ma\u00dfgeschneidertes Webdesign, E-Commerce-L\u00f6sungen und Markenidentit\u00e4ten f\u00fcr ambitionierte Unternehmen in Eberbach, Mosbach, Hirschhorn &amp; Region.<\/p>\n\n            <div class=\"hero-actions\">\n                <a href=\"#kontakt\" class=\"btn-primary\">Kostenloses Erstgespr\u00e4ch buchen<\/a>\n                <a href=\"\/preisberechnung\/\" class=\"btn-outline\">Preis berechnen<\/a>\n            <\/div>\n\n        <\/div>\n        <div class=\"hero-image-container\">\n            <img class=\"hero-portrait\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Buisiness_Bild.webp\" alt=\"Elias Schultze \u2013 Webdesigner\" width=\"800\" height=\"600\" fetchpriority=\"high\" decoding=\"async\" loading=\"eager\" title=\"| Elias Schultze\">\n            <a href=\"https:\/\/skillshop.credential.net\/54fad0d7-35da-47eb-8f8d-67ea7a5ed8b5#acc.uItF7W02\" class=\"hero-cert\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Analytics Zertifizierung \u2014 Nachweis ansehen\">\n                <span class=\"hero-cert-ring\" aria-hidden=\"true\"><\/span>\n                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Google_Analytics_2026_Badge.png\" alt=\"| es.design\" class=\"hero-cert-img\" width=\"112\" height=\"112\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                <span class=\"hero-cert-text\">\n                    <span class=\"hero-cert-label\">Google Analytics<\/span>\n                    <span class=\"hero-cert-status\">Certified<\/span>\n                <\/span>\n            <\/a>\n            <a href=\"\/neuro-web-award-2026\/\" class=\"hero-award\" aria-label=\"Neuro Web Award 2026 \u2014 mehr erfahren\">\n                <span class=\"hero-award-glow\" aria-hidden=\"true\"><\/span>\n                <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/neuro_web_award_2026.png\" alt=\"| es.design\" class=\"hero-award-img\" width=\"120\" height=\"160\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                <span class=\"hero-award-text\">\n                    <span class=\"hero-award-label\">Web Award<\/span>\n                    <span class=\"hero-award-year\">2026<\/span>\n                <\/span>\n            <\/a>\n        <\/div>\n    <\/section>\n\n<section class=\"partner-loop-section\">\n        <p class=\"partner-loop-heading\">Partner &amp; Zertifikate<\/p>\n        <div class=\"loop-track\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_Krav_Maga.png\" alt=\"Partner 1\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/es_booking_Logo_mit_Kontur_Wortbildmarke-scaled.png\" alt=\"Zertifikat 1\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/logo-heart.webp\" alt=\"Partner 2\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Original-auf-Transparenz-scaled.png\" alt=\"Content-Labor_Logo\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <a href=\"https:\/\/skillshop.credential.net\/54fad0d7-35da-47eb-8f8d-67ea7a5ed8b5#acc.uItF7W02\" class=\"loop-item-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Analytics Zertifizierung \u2014 Nachweis ansehen\">\n                <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Google_Analytics_2026_Badge.png\" alt=\"Google Analytics Certified\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <\/a>\n            \n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_Krav_Maga.png\" alt=\"Partner 1\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/es_booking_Logo_mit_Kontur_Wortbildmarke-scaled.png\" alt=\"Zertifikat 1\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/logo-heart.webp\" alt=\"Partner 2\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Original-auf-Transparenz-scaled.png\" alt=\"Content-Labor_Logo\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <a href=\"https:\/\/skillshop.credential.net\/54fad0d7-35da-47eb-8f8d-67ea7a5ed8b5#acc.uItF7W02\" class=\"loop-item-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Google Analytics Zertifizierung \u2014 Nachweis ansehen\">\n                <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/06\/Google_Analytics_2026_Badge.png\" alt=\"Google Analytics Certified\" class=\"loop-item\" loading=\"lazy\" title=\"| Elias Schultze\">\n            <\/a>\n        <\/div>\n    <\/section>\n\n    <section id=\"studio\" class=\"philosophy\">\n        <div class=\"es-container philosophy-grid\">\n            <h2 class=\"scroll-in\">Deine Marke verdient mehr als nur eine Website.<\/h2>\n            <div class=\"philosophy-text scroll-in scroll-in-delay-1\">\n                <p>Die digitale Welt ist laut und schnelllebig. Um heute echte Verbindungen aufzubauen, braucht es Klarheit, strategische Tiefe und ein Design, das sich sofort richtig anf\u00fchlt.<\/p>\n                <p>Egal, ob du als Unternehmen im Odenwald verwurzelt bist oder als Marke \u00fcberregional skalieren willst: Als dein Webdesigner baue ich nicht einfach nur Websites. Ich h\u00f6re dir zu, verstehe dein Business und \u00fcbersetze deine Ziele in digitale Erlebnisse, die Vertrauen schaffen \u2013 und aus Besuchern echte Kunden machen.<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"services\">\n        <div class=\"es-container\">\n            <div class=\"section-header\">\n                <h2 class=\"scroll-in\">Webdesign &amp; Branding<br>Leistungen f\u00fcr deinen Erfolg.<\/h2>\n                <p class=\"scroll-in scroll-in-delay-1\">Spezialisiert auf digitale L\u00f6sungen, die \u00e4sthetisch beeindrucken und technisch performen.<\/p>\n            <\/div>\n            <div class=\"service-grid\">\n                <div id=\"expertise-webdesign\" class=\"service-card scroll-in scroll-in-delay-1\">\n                    <span class=\"s-icon\">01 \u2014 Webdesign &amp; UI\/UX<\/span>\n                    <h3>Premium Webdesign &amp; UI\/UX Agentur<\/h3>\n                    <p>Deine Website ist dein wichtigster digitaler Mitarbeiter. Ich gestalte nutzerzentrierte Interfaces und Responsive Design, das komplex aussieht, aber intuitiv zu bedienen ist. Schnell, barrierefrei und f\u00fcr Suchmaschinen optimiert.<\/p>\n                    <a href=\"\/seo-check\/\" class=\"es-link-inline\">\n                        Kostenlosen SEO-Check starten \n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\n                    <\/a>\n                <\/div>\n                <div class=\"service-card scroll-in scroll-in-delay-2\">\n                    <span class=\"s-icon\">02 \u2014 Development<\/span>\n                    <h3>E-Commerce &amp; Online-Shop Entwicklung<\/h3>\n                    <p>Vom hochmodernen Online-Shop bis zur App-Entwicklung. Ich baue skalierbare digitale Produkte, die deine Vertriebsprozesse digitalisieren und deinen Umsatz messbar steigern \u2013 technisch exzellent umgesetzt.<\/p>\n                <\/div>\n                <div class=\"service-card scroll-in scroll-in-delay-3\">\n                    <span class=\"s-icon\">03 \u2014 Identity<\/span>\n                    <h3>Corporate Branding &amp; Grafikdesign<\/h3>\n                    <p>Eine starke Marke bleibt im Ged\u00e4chtnis. Ich entwickle visuelle Identit\u00e4ten \u2013 vom markanten Logo bis zur kompletten Markenwelt \u2013, die deine Werte auf den Punkt bringen und dich unverwechselbar machen.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"vorteile\" class=\"why-us\">\n        <div class=\"es-container\">\n            <h2 class=\"scroll-in\">Keine klassische Werbeagentur.<br>Sondern dein pers\u00f6nlicher Partner.<\/h2>\n            <div class=\"why-grid\">\n                <div class=\"why-card scroll-in scroll-in-delay-1\">\n                    <div class=\"why-number\">01<\/div>\n                    <h3>100% Pers\u00f6nliche Betreuung<\/h3>\n                    <p>Keine wechselnden Projektmanager oder Warteschleifen. Du hast von der ersten Idee bis zum Live-Gang genau einen Ansprechpartner f\u00fcr dein Webprojekt: mich. Direkter Austausch, ehrliche Beratung.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in scroll-in-delay-2\">\n                    <div class=\"why-number\">02<\/div>\n                    <h3>Schnell &amp; Effizient<\/h3>\n                    <p>Gro\u00dfe Agenturen sind oft schwerf\u00e4llig. Ich verbinde h\u00f6chste gestalterische Qualit\u00e4t mit agilen Prozessen. So liefern wir dein Projekt termingerecht und ohne Kompromisse bei der Qualit\u00e4t.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in scroll-in-delay-3\">\n                    <div class=\"why-number\">03<\/div>\n                    <h3>Handwerk &amp; Pr\u00e4zision aus dem Odenwald<\/h3>\n                    <p>Jedes Projekt \u2013 ob Premium Branding f\u00fcr Lebensmittel oder ein Shop f\u00fcr High-End Bodykits \u2013 wird mit h\u00f6chster Sorgfalt und modernster Technologie umgesetzt. Crafted with passion im Odenwald.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<section id=\"work\" class=\"bento-portfolio\">\n    <div class=\"es-container\">\n        <div class=\"portfolio-header\">\n            <div>\n                <h2 class=\"scroll-in\">Ausgew\u00e4hlte Projekte<\/h2>\n                <p class=\"scroll-in scroll-in-delay-1\">Einblicke in Arbeiten, die Marken digital transformiert haben.<\/p>\n            <\/div>\n            <a href=\"\/webdesign-referenzen\/\" class=\"btn-outline\">Alle Cases ansehen<\/a>\n        <\/div>\n        \n        <div class=\"bento-grid\">\n            <a href=\"\/webdesign-referenzen\/#content-labor\" class=\"bento-card bento-top scroll-in scroll-in-delay-1\">\n                <div class=\"bento-image\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-09-um-16.06.36-scaled-1.webp\" alt=\"Content Labor\" width=\"1200\" height=\"800\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                <\/div>\n                <div class=\"bento-content\">\n                    <h3>Content Labor<\/h3>\n                    <p>Landing Page &amp; Online Marketing<\/p>\n                <\/div>\n            <\/a>\n            \n            <a href=\"\/webdesign-referenzen\/#krav-maga\" class=\"bento-card bento-bl scroll-in scroll-in-delay-2\">\n                <div class=\"bento-image\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_Krav_Maga.png\" alt=\"KravMaga Fitness-Boxen\" width=\"800\" height=\"800\" style=\"object-fit: contain; padding: 20%; background: #0a0a0a;\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                <\/div>\n                <div class=\"bento-content\">\n                    <h3>KravMaga-Lev<\/h3>\n                    <p>Website Development<\/p>\n                <\/div>\n            <\/a>\n            \n            <a href=\"\/webdesign-referenzen\/#kitmanufaktur\" class=\"bento-card bento-br scroll-in scroll-in-delay-3\">\n                <div class=\"bento-image\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Kit_Manufaktur_Portfolio_image_1.webp\" alt=\"KitManufaktur E-Commerce\" width=\"800\" height=\"800\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                <\/div>\n                <div class=\"bento-content\">\n                    <h3>KitManufaktur<\/h3>\n                    <p>E-Commerce System<\/p>\n                <\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"testimonial\" class=\"testimonial\">\n    <div class=\"es-container testimonial-inner scroll-in\">\n        <div class=\"testimonial-slider-wrapper\">\n\n            <div class=\"es-slide active\">\n                <div class=\"testimonial-stars\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                <\/div>\n                <blockquote class=\"testimonial-quote\">\n                    \u201eF\u00fcr die von dir erstellte Seite hast du 6 von 5 Sternen verdient. Die Erwartungen wurden nicht nur erf\u00fcllt, sie wurden \u00fcbertroffen. Ich freue mich auf eine langfristige Zusammenarbeit.\u201c\n                <\/blockquote>\n                <div class=\"testimonial-author\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/image0-1.webp\" alt=\"Martin Sosnowski\" class=\"testimonial-avatar\" width=\"72\" height=\"72\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                    <div class=\"testimonial-author-text\">\n                        <p class=\"testimonial-name\">Martin Sosnowski<\/p>\n                        <p class=\"testimonial-role\">Social Media Manager (IHK) | Online Marketing Manager (IHK)<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"es-slide\">\n                <div class=\"testimonial-stars\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                <\/div>\n                <blockquote class=\"testimonial-quote\">\n                    \u201eF\u00fcr unser Projekt heyHelp war es uns wichtig, einen Partner zu finden, der nicht nur Code schreibt, sondern unsere Mission versteht. es.design hat genau das getan. Die App-Entwicklung verlief reibungslos, und das Gesp\u00fcr f\u00fcr intuitive Benutzerf\u00fchrung hat unsere Erwartungen \u00fcbertroffen. Die technische Pr\u00e4zision macht die App zu einem zuverl\u00e4ssigen Werkzeug. Absolute Empfehlung f\u00fcr komplexe App-Projekte!\u201c\n                <\/blockquote>\n                <div class=\"testimonial-author\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/logo-heart.webp\" alt=\"heyHelp\" class=\"testimonial-avatar\" width=\"72\" height=\"72\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                    <div class=\"testimonial-author-text\">\n                        <p class=\"testimonial-name\">Team heyHelp<\/p>\n                        <p class=\"testimonial-role\">App-Projekt<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"es-slide\">\n                <div class=\"testimonial-stars\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                <\/div>\n                <blockquote class=\"testimonial-quote\">\n                    \u201eVielen Dank an Elias Schultze f\u00fcr die schnelle und professionelle Umsetzung unserer neuen Website von Krav Maga LEV. Die Seite ist modern, klar strukturiert, individuell aufgebaut und spiegelt genau das wider, wof\u00fcr wir stehen. Besonders stark ist, dass sie nicht austauschbar wirkt, sondern wirklich durchdacht und hochwertig gemacht ist. Auch technisch und f\u00fcr Google ist die Website top aufgestellt. Klare Empfehlung von mir \u2013 5 Sterne!\u201c\n                <\/blockquote>\n                <div class=\"testimonial-author\">\n                    <img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Ramon_Bild.jpg\" alt=\"Ramon\" class=\"testimonial-avatar\" width=\"72\" height=\"72\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\">\n                    <div class=\"testimonial-author-text\">\n                        <p class=\"testimonial-name\">Ramon<\/p>\n                        <p class=\"testimonial-role\">Krav Maga LEV<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"es-slider-dots\">\n            <button class=\"dot active\" aria-label=\"Slide 1\"><\/button>\n            <button class=\"dot\" aria-label=\"Slide 2\"><\/button>\n            <button class=\"dot\" aria-label=\"Slide 3\"><\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n    <section id=\"faq\" class=\"es-faq\">\n        <div class=\"es-container es-faq-container\">\n            <div class=\"section-header\">\n                <h2 class=\"scroll-in\">H\u00e4ufig gestellte Fragen<\/h2>\n                <p class=\"scroll-in scroll-in-delay-1\">Alles, was du vor unserem gemeinsamen Start wissen musst.<\/p>\n            <\/div>\n            <div class=\"es-faq-list\">\n                <div class=\"es-faq-item\">\n                    <button class=\"es-faq-question\" type=\"button\">Wie l\u00e4uft ein Projekt mit dir typischerweise ab?<span class=\"es-faq-icon\" aria-hidden=\"true\"><\/span><\/button>\n                    <div class=\"es-faq-answer\"><p>Wir starten immer mit einem unverbindlichen 30-min\u00fctigen Kennenlernen, um herauszufinden, ob wir zueinander passen. Danach erstelle ich eine strategische Konzeption f\u00fcr dein Projekt. Sobald du zufrieden bist, geht es ins Design und schlie\u00dflich in die technische Umsetzung. Du wirst bei jedem Schritt transparent eingebunden.<\/p><\/div>\n                <\/div>\n                <div class=\"es-faq-item\">\n                    <button class=\"es-faq-question\" type=\"button\">Wie lange dauert die Umsetzung einer neuen Website?<span class=\"es-faq-icon\" aria-hidden=\"true\"><\/span><\/button>\n                    <div class=\"es-faq-answer\"><p>Qualit\u00e4t braucht Zeit, aber keine Ewigkeit. In der Regel dauert ein komplettes Premium Webdesign-Projekt von der ersten Idee bis zum finalen Live-Gang zwischen 4 und 8 Wochen. Bei komplexeren E-Commerce-Systemen oder App-Entwicklungen planen wir den Zeitrahmen individuell.<\/p><\/div>\n                <\/div>\n                <div class=\"es-faq-item\">\n                    <button class=\"es-faq-question\" type=\"button\">Mit welchen Systemen (CMS) arbeitest du?<span class=\"es-faq-icon\" aria-hidden=\"true\"><\/span><\/button>\n                    <div class=\"es-faq-answer\"><p>Ich setze auf hochmoderne, skalierbare Technologien. F\u00fcr Corporate Websites nutze ich meist Webflow oder WordPress, f\u00fcr E-Commerce-L\u00f6sungen setzen wir auf Shopify. Wir w\u00e4hlen gemeinsam das System aus, das am besten zu deinen internen Prozessen und Wachstumszielen passt.<\/p><\/div>\n                <\/div>\n                <div class=\"es-faq-item\">\n                    <button class=\"es-faq-question\" type=\"button\">Betreust du meine Website auch nach dem Live-Gang?<span class=\"es-faq-icon\" aria-hidden=\"true\"><\/span><\/button>\n                    <div class=\"es-faq-answer\"><p>Absolut! Eine Website ist nie &#8222;fertig&#8220;, sie w\u00e4chst mit deinem Unternehmen. Ich biete ma\u00dfgeschneiderte Betreuungs- und SEO-Pakete an, damit deine digitale Pr\u00e4senz immer technisch auf dem neuesten Stand bleibt, sicher ist und dauerhaft Top-Platzierungen bei Google erreicht.<\/p><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"kontakt\" class=\"footer-cta\">\n        <div class=\"es-container\">\n            <h2 class=\"scroll-in\">Bereit, dein Projekt zu starten?<\/h2>\n            <p class=\"scroll-in scroll-in-delay-1\">Hi, ich bin Elias. Lass uns in einem kurzen, 30-min\u00fctigen Gespr\u00e4ch herausfinden, wo du stehst und wie wir dein Projekt gemeinsam auf das n\u00e4chste Level bringen k\u00f6nnen. Ganz entspannt und v\u00f6llig unverbindlich.<\/p>\n<iframe loading=\"lazy\"\n  id=\"es-booking-frame\"\n  src=\"https:\/\/es-booking.vercel.app\/book\/kostenloses-erstgesprach?embed=1\"\n  width=\"100%\"\n  height=\"640\"\n  frameborder=\"0\"\n  scrolling=\"no\"\n  style=\"border: none; border-radius: 12px; max-width: 100%; display: block; overflow: hidden;\"\n  title=\"Termin buchen\"\n><\/iframe>\n<script>\n(function(){\n  var MIN=320;\n  window.addEventListener(\"message\",function(e){\n    if(!e.data||e.data.type!==\"es-booking:resize\")return;\n    var f=document.getElementById(\"es-booking-frame\");\n    if(!f)return;\n    var h=Math.max(MIN,Number(e.data.height)||MIN);\n    f.style.height=h+\"px\";\n  });\n})();\n<\/script>\n        <\/div>\n    <\/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 src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\" width=\"140\" height=\"44\" loading=\"lazy\" decoding=\"async\" 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                <h3 class=\"footer-col-title\">Navigation<\/h3>\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=\"\/seo-check\/\">SEO-Check<\/a><\/li>\n                    <li><a href=\"#kontakt\">Kontakt<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h3 class=\"footer-col-title\">Rechtliches<\/h3>\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                <h3 class=\"footer-col-title\">Kontakt<\/h3>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@eliasschultze.de\">info@eliasschultze.de<\/a><\/p>\n            <\/div>\n        <\/div>\n        <p class=\"footer-bottom\">\u00a9 2026 es.design | Elias Schultze. All rights reserved.<\/p>\n    <\/div>\n<\/footer>\n\n<script>\n(function() {\n    'use strict';\n    function esInit() {\n        \/\/ --- FAQ Logik ---\n        var faqItems = document.querySelectorAll('.es-faq-item');\n        if (faqItems.length > 0) {\n            faqItems.forEach(function(item) {\n                var btn = item.querySelector('.es-faq-question');\n                if (!btn) return;\n                btn.addEventListener('click', function() {\n                    var active = item.classList.contains('es-active');\n                    faqItems.forEach(function(el) {\n                        el.classList.remove('es-active');\n                        var a = el.querySelector('.es-faq-answer');\n                        if (a) a.style.maxHeight = null;\n                    });\n                    if (!active) {\n                        item.classList.add('es-active');\n                        var ans = item.querySelector('.es-faq-answer');\n                        if (ans) ans.style.maxHeight = (ans.scrollHeight + 40) + 'px';\n                    }\n                });\n            });\n        }\n\n        \/\/ --- Scroll Animation ---\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            }, { rootMargin: '0px 0px -80px 0px', threshold: 0.1 });\n            scrollEls.forEach(function(el) { obs.observe(el); });\n        } else {\n            scrollEls.forEach(function(el) { el.classList.add('scroll-in--visible'); });\n        }\n\n        \/\/ --- Testimonial Slider Logik ---\n        var slides = document.querySelectorAll('.es-slide');\n        var dots = document.querySelectorAll('.es-slider-dots .dot');\n        var currentSlide = 0;\n        var slideInterval;\n\n        if (slides.length > 1) {\n            function showSlide(index) {\n                slides[currentSlide].classList.remove('active');\n                if(dots.length) dots[currentSlide].classList.remove('active');\n                \n                currentSlide = index;\n                \n                slides[currentSlide].classList.add('active');\n                if(dots.length) dots[currentSlide].classList.add('active');\n            }\n\n            function nextSlide() {\n                var next = (currentSlide + 1) % slides.length;\n                showSlide(next);\n            }\n\n            \/\/ Automatischer Wechsel alle 8 Sekunden\n            slideInterval = setInterval(nextSlide, 8000);\n\n            \/\/ Klick auf die Punkte\n            dots.forEach(function(dot, idx) {\n                dot.addEventListener('click', function() {\n                    clearInterval(slideInterval); \/\/ Stoppt den Timer bei Klick\n                    showSlide(idx);\n                    slideInterval = setInterval(nextSlide, 8000); \/\/ Startet Timer neu\n                });\n            });\n        }\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', esInit);\n    } else {\n        esInit();\n    }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Studio Expertise Cases Blog Kontakt Kostenloses Erstgespr\u00e4ch DE EN Instagram \u2924 Studio Expertise Cases Blog DE EN Let&#8217;s talk Premium Webdesign &amp;Branding im Odenwald Du suchst keinen Standard-Baukasten, sondern Premium Webdesign und digitales Branding im Odenwald, die die Qualit\u00e4t deiner Arbeit widerspiegeln? Mit es.design entwickle ich ma\u00dfgeschneidertes Webdesign, E-Commerce-L\u00f6sungen und Markenidentit\u00e4ten f\u00fcr ambitionierte Unternehmen in [&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-1889","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1889","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=1889"}],"version-history":[{"count":156,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1889\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1889\/revisions\/2644"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=1889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}