{"id":1901,"date":"2026-03-13T22:11:48","date_gmt":"2026-03-13T22:11:48","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=1901"},"modified":"2026-04-20T19:18:32","modified_gmt":"2026-04-20T19:18:32","slug":"webdesign-referenzen","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesign-referenzen\/","title":{"rendered":"Webdesign Referenzen"},"content":{"rendered":"\n<!--\n  HEADER F\u00dcR CASES-SEITE \u2013 wie header-snippet, aber Cases in der Nav unterstrichen\/markiert (active)\n  F\u00fcr WordPress: Als Custom-HTML-Block auf der Cases-Seite einf\u00fcgen (oberhalb des Seiteninhalts).\n  Enth\u00e4lt: Skip-Link, Mobile Nav, Desktop-Header, Burger, Suche, DE\/EN, CSS + JS.\n-->\n\n<style>\n\/* ===================== VARIABLEN & BASIS (f\u00fcr Header) ===================== *\/\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --mint: #a8dadc;\n    --text-muted: #66768f;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n\/* ===================== HEADER ===================== *\/\nheader {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    padding: 20px 0;\n    z-index: 500;\n    background: var(--weiss);\n    border-bottom: 1px solid rgba(30,58,95,0.06);\n}\n.nav-inner {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n    min-height: 52px;\n}\n.nav-inner .logo { flex-shrink: 0; z-index: 700; }\n.nav-inner .nav-links {\n    position: absolute;\n    left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    list-style: none;\n}\n.nav-inner .nav-right-group { flex-shrink: 0; display: flex; align-items: center; gap: 0; z-index: 700; }\n\n.logo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--marineblau); display: flex; align-items: center; }\n.logo a { color: inherit; }\n.logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n.nav-links { font-size: 15px; font-weight: 400; }\n.nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n.nav-links a:hover,\n.nav-links a.active { color: var(--marineblau); text-decoration: underline; text-decoration-color: var(--koralle); text-underline-position: under; }\n\n.btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n.btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white; }\n\n.nav-right { display: flex; align-items: center; gap: 0; }\n.nav-utils { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(30,58,95,0.12); }\n\n.nav-search { display: flex; align-items: center; flex-direction: row-reverse; }\n.nav-search-trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; }\n.nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n.nav-search-trigger svg { width: 20px; height: 20px; }\n.nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; }\n.nav-search.is-open .nav-search-input-wrap { width: 200px; min-width: 200px; opacity: 1; }\n.nav-search-input-wrap input { width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2); border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau); background: var(--weiss); box-sizing: border-box; }\n.nav-search-input-wrap input:focus { outline: none; border-color: var(--marineblau); }\n.nav-search-input-wrap input::placeholder { color: var(--text-muted); }\n\n.nav-lang { display: flex; align-items: center; background: rgba(30,58,95,0.06); border-radius: 100px; padding: 4px; gap: 2px; }\n.nav-lang a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: 100px; transition: color 0.2s ease, background 0.2s ease; }\n.nav-lang a:hover { color: var(--marineblau); }\n.nav-lang a.active { color: var(--marineblau); background: var(--weiss); box-shadow: 0 1px 3px rgba(30,58,95,0.08); }\n\na:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marineblau); outline-offset: 2px; }\n\n.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--marineblau); color: var(--weiss); font-size: 14px; font-weight: 500; border-radius: 8px; transition: top 0.2s ease; }\n.skip-link:focus { top: 16px; }\n\n\/* ===================== BURGER ===================== *\/\n.es-burger {\n    display: none;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 44px; height: 44px;\n    background: none; border: none;\n    cursor: pointer;\n    z-index: 700;\n    padding: 0; flex-shrink: 0;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-burger-box { position: relative; width: 24px; height: 16px; }\n.es-burger-box span {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 24px; height: 2px;\n    background: var(--marineblau);\n    border-radius: 2px;\n    transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, opacity 0.2s ease;\n}\n.es-burger-box span:nth-child(1) { top: 0; }\n.es-burger-box span:nth-child(2) { top: 7px; }\n.es-burger-box span:nth-child(3) { top: 14px; }\n.es-burger.is-open .es-burger-box span {\n    background: var(--weiss);\n    transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, opacity 0.2s ease;\n}\n.es-burger.is-open .es-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }\n.es-burger.is-open .es-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.es-burger.is-open .es-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }\n\n\/* ===================== FULLSCREEN OVERLAY ===================== *\/\n.es-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 600;\n    background: var(--marineblau);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 100px 10vw 60px;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-20px);\n    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;\n}\n.es-mobile-overlay.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n.es-mobile-overlay::before {\n    content: 'es.';\n    position: absolute;\n    right: 5vw; bottom: -0.05em;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(120px, 25vw, 220px);\n    font-weight: 700;\n    color: rgba(255,255,255,0.04);\n    line-height: 1;\n    pointer-events: none;\n    letter-spacing: -0.04em;\n    user-select: none;\n}\n.es-overlay-close {\n    position: absolute;\n    top: 24px; right: 5vw;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px; height: 44px;\n    background: rgba(255,255,255,0.12);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--weiss);\n    transition: background 0.25s ease, transform 0.25s ease;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-overlay-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }\n.es-overlay-close svg { width: 20px; height: 20px; }\n\n.es-mobile-nav { list-style: none; width: 100%; }\n.es-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav a {\n    display: block;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(36px, 8vw, 64px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.9);\n    letter-spacing: -0.03em;\n    padding: 20px 0; line-height: 1;\n    transform: translateY(40px); opacity: 0;\n    transition: color 0.25s ease, padding-left 0.3s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s ease;\n}\n.es-mobile-overlay.is-open .es-mobile-nav a { transform: translateY(0); opacity: 1; }\n.es-mobile-nav li:nth-child(1) a { transition-delay: 0.1s; }\n.es-mobile-nav li:nth-child(2) a { transition-delay: 0.18s; }\n.es-mobile-nav li:nth-child(3) a { transition-delay: 0.26s; }\n.es-mobile-nav li:nth-child(4) a { transition-delay: 0.34s; }\n.es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n.es-mobile-nav a.active { color: var(--koralle); }\n\n.es-mobile-cta { margin-top: 48px; transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out) 0.42s, opacity 0.5s ease 0.42s; }\n.es-mobile-overlay.is-open .es-mobile-cta { transform: translateY(0); opacity: 1; }\n.es-mobile-cta a { display: inline-block; background: var(--koralle); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 18px 44px; border-radius: 100px; transition: background 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(246,114,128,0.25); }\n.es-mobile-cta a:hover { background: var(--koralle-hover); transform: translateY(-2px); }\n\n.es-mobile-footer { position: absolute; bottom: 40px; left: 10vw; right: 10vw; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; }\n.es-mobile-overlay.is-open .es-mobile-footer { opacity: 1; transform: translateY(0); }\n.es-mobile-lang { display: flex; gap: 16px; }\n.es-mobile-lang a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s ease; }\n.es-mobile-lang a.active, .es-mobile-lang a:hover { color: rgba(255,255,255,0.9); }\n.es-mobile-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s ease; }\n.es-mobile-social a:hover { color: rgba(255,255,255,0.9); }\n\nbody.es-nav-open { overflow: hidden; }\n\n\/* ===================== RESPONSIVE (Header) ===================== *\/\n@media (max-width: 900px) {\n    .nav-inner .nav-links,\n    .nav-inner .nav-right { display: none !important; }\n    .es-burger { display: flex; }\n}\n<\/style>\n<!-- ========== MOBILE NAV \u2013 Cases aktiv (Koralle) ========== -->\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\"\/>\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 active\">Cases<\/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=\"\/webdesign-referenzen\/\" class=\"active\" hreflang=\"de\">DE<\/a>\n            <a href=\"\/en\/cases\/\" 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\/2025\/12\/Logo_mit_Kontur_Wortbildmarke-scaled.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\/\" class=\"active\" aria-current=\"page\">Cases<\/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\"\/><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"nav-lang\">\n                        <a href=\"\/webdesign-referenzen\/\" class=\"active\" hreflang=\"de\" lang=\"de\">DE<\/a>\n                        <a href=\"\/en\/cases\/\" 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', init);\n            return;\n        }\n    }\n    init();\n})();\n<\/script>\n\n\n\n<style>\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --mint: #a8dadc;\n    --text-muted: #66768f;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n    \n    \/* Before\/After Slider *\/\n    --slider-handle-size: 40px;\n    --slider-mint-alpha: rgba(168, 218, 220, 0.8);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\nh1, h2, h3, h4 {\n    font-family: 'Outfit', sans-serif;\n    font-weight: 300;\n    line-height: 1.2;\n    letter-spacing: -0.02em;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n.hero-cases {\n    padding: 200px 0 100px;\n    padding-top: 180px;\n    background-color: var(--hellgrau);\n    text-align: center;\n}\n.hero-cases .eyebrow {\n    display: inline-block;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: var(--koralle);\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 24px;\n}\n.hero-cases h1 {\n    font-size: clamp(3rem, 5vw, 5.5rem);\n    margin-bottom: 32px;\n    color: var(--marineblau);\n    max-width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.hero-cases h1 span {\n    font-weight: 500;\n    display: inline;\n    padding-bottom: 2px;\n    background: linear-gradient(to top, rgba(168, 218, 220, 0.5) 0%, rgba(168, 218, 220, 0.5) 10px, transparent 10px);\n    background-size: 100% 14px;\n    background-position: 0 calc(100% - 15px);\n    background-repeat: no-repeat;\n    -webkit-box-decoration-break: clone;\n    box-decoration-break: clone;\n    border-radius: 3px;\n}\n.hero-cases p {\n    font-size: clamp(16px, 1.5vw, 20px);\n    color: var(--text-muted);\n    font-weight: 300;\n    max-width: 650px;\n    margin: 0 auto;\n    line-height: 1.7;\n}\n\n.cases-showcase {\n    padding: 120px 0;\n    background-color: var(--weiss);\n}\n.case-block {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 80px;\n    align-items: center;\n    margin-bottom: 160px;\n}\n.case-block:last-child { margin-bottom: 0; }\n.case-block:nth-child(even) .case-gallery { order: 2; }\n.case-block:nth-child(even) .case-content { order: 1; }\n\n.case-gallery {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 100%;\n}\n.case-gallery-main {\n    position: relative;\n    width: 100%;\n    \/* UPDATE: 16:9 ist ideal f\u00fcr UI\/Desktop-Screenshots *\/\n    aspect-ratio: 16\/9;\n    border-radius: 24px;\n    overflow: hidden;\n    background-color: var(--hellgrau);\n    box-shadow: 0 30px 60px rgba(30, 58, 95, 0.08);\n}\n\/* Globale Image Regel mit Top-Anchoring *\/\n.case-gallery-main > img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: top left;\n    transition: opacity 0.3s ease;\n}\n\n\/* =========================================\n   PERFORMANCE BEFORE\/AFTER SLIDER\n   ========================================= *\/\n.es-comparison-slider {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    --position: 50%;\n}\n.es-comparison-slider img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    \/* UPDATE: Sichert, dass Webseiten-Header immer oben b\u00fcndig sind *\/\n    object-position: top left; \n    pointer-events: none;\n}\n.es-comparison-slider .es-image-after {\n    z-index: 1;\n}\n.es-comparison-slider .es-image-before {\n    z-index: 2;\n    clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);\n}\n.es-slider-handle-line {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: var(--position);\n    width: 2px;\n    background: var(--weiss);\n    z-index: 3;\n    transform: translateX(-50%);\n    pointer-events: none;\n}\n.es-slider-handle {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: var(--slider-handle-size);\n    height: var(--slider-handle-size);\n    background: var(--weiss);\n    border-radius: 50%;\n    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 0.2s ease, background 0.2s ease;\n}\n.es-slider-handle svg {\n    width: 18px;\n    height: 18px;\n    color: var(--marineblau);\n}\n.es-slider-input {\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: ew-resize;\n    z-index: 4;\n    margin: 0;\n    -webkit-appearance: none;\n}\n.es-comparison-slider:hover .es-slider-handle {\n    background: var(--slider-mint-alpha);\n    transform: translate(-50%, -50%) scale(1.05);\n}\n.es-slider-input:focus-visible ~ .es-slider-handle-line .es-slider-handle {\n    outline: 3px solid var(--mint);\n    outline-offset: 2px;\n}\n\n.case-gallery-thumbs { display: flex; gap: 12px; }\n.case-gallery-thumbs img {\n    flex: 1;\n    min-width: 0;\n    height: 80px;\n    object-fit: cover;\n    object-position: top left;\n    border-radius: 12px;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: border-color 0.2s ease, opacity 0.2s ease;\n}\n.case-gallery-thumbs img:hover,\n.case-gallery-thumbs img.active { border-color: var(--marineblau); opacity: 1; }\n.case-gallery-thumbs img:not(.active) { opacity: 0.85; }\n\n.case-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.case-category {\n    font-family: 'Inter', sans-serif;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--marineblau);\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n.case-category::before {\n    content: '';\n    display: block;\n    width: 40px;\n    height: 2px;\n    background-color: var(--mint);\n}\n.case-content h2 {\n    font-size: clamp(2.5rem, 3.5vw, 3.5rem);\n    font-weight: 500;\n    margin-bottom: 40px;\n    color: var(--marineblau);\n}\n.case-text-section { margin-bottom: 32px; }\n.case-text-section h3 {\n    font-size: 20px;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: var(--marineblau);\n}\n.case-text-section p {\n    font-size: 16px;\n    color: var(--text-muted);\n    line-height: 1.7;\n    margin-bottom: 16px;\n}\n.case-list { list-style: none; margin-bottom: 16px; }\n.case-list li {\n    position: relative;\n    padding-left: 24px;\n    margin-bottom: 8px;\n    color: var(--marineblau);\n    font-size: 16px;\n}\n.case-list li::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 9px;\n    width: 6px;\n    height: 6px;\n    background: var(--koralle);\n    border-radius: 50%;\n}\n.case-stats {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 24px;\n    background: var(--hellgrau);\n    padding: 32px;\n    border-radius: 16px;\n    margin-top: 24px;\n    border: 1px solid rgba(30, 58, 95, 0.05);\n}\n.stat-item .stat-value {\n    font-family: 'Outfit', sans-serif;\n    font-size: 32px;\n    font-weight: 400;\n    color: var(--koralle);\n    margin-bottom: 4px;\n    line-height: 1;\n}\n.stat-item .stat-label { font-size: 13px; color: var(--text-muted); line-height: 1.4; }\n.tech-stack {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    margin-top: 40px;\n    padding-top: 32px;\n    border-top: 1px solid rgba(30, 58, 95, 0.1);\n}\n.tech-badge {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--marineblau);\n    background: var(--weiss);\n    border: 1px solid rgba(30, 58, 95, 0.15);\n    padding: 6px 16px;\n    border-radius: 100px;\n}\n\n.footer-cta {\n    padding: 150px 0;\n    text-align: center;\n    background: var(--marineblau);\n    color: var(--weiss);\n    margin: 0 2vw 50px 2vw;\n    border-radius: 40px;\n}\n.footer-cta h2 {\n    font-size: clamp(2.5rem, 4vw, 4.5rem);\n    margin-bottom: 24px;\n    color: var(--weiss);\n}\n.footer-cta p {\n    font-size: 20px;\n    color: rgba(255,255,255,0.7);\n    font-weight: 300;\n    max-width: 700px;\n    margin: 0 auto 48px;\n    line-height: 1.6;\n}\n.btn-primary {\n    background-color: var(--koralle);\n    color: var(--weiss);\n    font-size: 16px;\n    font-weight: 500;\n    padding: 20px 48px;\n    border-radius: 100px;\n    display: inline-block;\n    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);\n    border: none;\n    cursor: pointer;\n    box-shadow: 0 10px 30px rgba(246, 114, 128, 0.2);\n}\n.btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 15px 40px rgba(246, 114, 128, 0.3);\n    background-color: var(--koralle-hover);\n}\n\nfooter { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }\n.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px 32px; margin-bottom: 48px; }\n.footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }\n.footer-brand .footer-logo img { height: 44px; width: auto; display: block; }\n.footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 280px; margin-bottom: 24px; }\n.footer-search-form { display: flex; align-items: stretch; max-width: 280px; margin-bottom: 24px; }\n.footer-search-form input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.25); border-right: none; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.95); font-size: 14px; font-family: inherit; color: var(--marineblau); }\n.footer-search-form input::placeholder { color: var(--text-muted); }\n.footer-search-form button { width: 44px; background: var(--mint); border: none; border-radius: 0 8px 8px 0; color: var(--marineblau); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-search-form button:hover { background: #8fcacd; }\n.footer-search-form button svg { width: 18px; height: 18px; }\n.footer-social { display: flex; gap: 10px; }\n.footer-social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-social a:hover { background: rgba(255,255,255,0.2); }\n.footer-social a svg { width: 18px; height: 18px; }\n.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }\n.footer-col ul { list-style: none; }\n.footer-col ul li { margin-bottom: 10px; }\n.footer-col a { font-size: 15px; color: rgba(255,255,255,0.9); transition: color 0.2s ease; }\n.footer-col a:hover { color: var(--weiss); }\n.footer-col p { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }\n.footer-col p a { color: inherit; }\n.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }\n\n.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\n@media (max-width: 900px) {\n    .case-block { grid-template-columns: 1fr; gap: 40px; margin-bottom: 100px; }\n    .case-block:nth-child(even) .case-gallery { order: 1; }\n    .case-block:nth-child(even) .case-content { order: 2; }\n    .case-gallery-thumbs img { height: 64px; }\n    .footer-cta { margin: 0; border-radius: 0; padding: 100px 5vw; }\n    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n}\n@media (max-width: 768px) {\n    .case-stats { grid-template-columns: 1fr; }\n    .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n}\n<\/style>\n\n<main id=\"main\" role=\"main\">\n    <section class=\"hero-cases\">\n        <div class=\"es-container\">\n            <span class=\"eyebrow scroll-in\">Webdesign Referenzen &#038; Case Studies<\/span>\n            <h1 class=\"scroll-in delay-1\">Unsere Cases: <span>Exzellenz in Design &#038; Funktion<\/span><\/h1>\n            <p class=\"scroll-in delay-2\">Entdecken Sie eine Auswahl der Webdesign- und E-Commerce-Projekte von <strong>es.design<\/strong> \u2013 aus dem Odenwald und der Region. Von der ersten Idee bis zum Launch einer High-Performance Website.<\/p>\n        <\/div>\n    <\/section>\n\n    <section class=\"cases-showcase\">\n        <div class=\"es-container\">\n            <article id=\"kitmanufaktur\" class=\"case-block\">\n                <div class=\"case-gallery scroll-in\">\n                    <div class=\"case-gallery-main\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kitmanufaktur_Home-scaled.png\" alt=\"KitManufaktur \u2013 E-Commerce Home\" data-case=\"1\" title=\"| Elias Schultze\">\n                    <\/div>\n                    <div class=\"case-gallery-thumbs\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kitmanufaktur_Home-scaled.png\" alt=\"KitManufaktur Home\" role=\"presentation\" data-case=\"1\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kitmanufaktur_Sektion-scaled.png\" alt=\"KitManufaktur Sektion\" role=\"presentation\" data-case=\"1\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kitmanufaktur_Shop-scaled.png\" alt=\"KitManufaktur Shop\" role=\"presentation\" data-case=\"1\" tabindex=\"0\" title=\"| Elias Schultze\">\n                    <\/div>\n                <\/div>\n                <div class=\"case-content\">\n                    <span class=\"case-category scroll-in\">E-Commerce &#038; Brand Identity<\/span>\n                    <h2 class=\"scroll-in delay-1\">KitManufaktur<\/h2>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Die Herausforderung<\/h3>\n                        <p>Der Kunde stand vor der Herausforderung, eine zu hohe Absprungrate im Checkout und ein veraltetes Markenbild zu bew\u00e4ltigen. Ziel war es, eine digitale Pr\u00e4senz zu schaffen, die Vertrauen weckt und die Conversion-Rate nachhaltig steigert.<\/p>\n                    <\/div>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Unsere L\u00f6sung<\/h3>\n                        <p>Durch einen nutzerzentrierten Design-Ansatz (UX\/UI) haben wir eine intuitive Benutzeroberfl\u00e4che entwickelt.<\/p>\n                        <ul class=\"case-list\">\n                            <li>Individuelles Interface-Design<\/li>\n                            <li>Optimierung der Core Web Vitals f\u00fcr maximale Geschwindigkeit<\/li>\n                            <li>Nahtlose Integration von Shopify<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Das Ergebnis<\/h3>\n                        <div class=\"case-stats\">\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">+45%<\/div>\n                                <div class=\"stat-label\">Steigerung der Verk\u00e4ufe<\/div>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">&lt; 1s<\/div>\n                                <div class=\"stat-label\">Optimierte Ladezeiten<\/div>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">98%<\/div>\n                                <div class=\"stat-label\">Positives Nutzer-Feedback<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"tech-stack scroll-in delay-2\">\n                        <span class=\"tech-badge\">Shopify<\/span>\n                        <span class=\"tech-badge\">Figma<\/span>\n                        <span class=\"tech-badge\">Tailwind CSS<\/span>\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <article id=\"content-labor\" class=\"case-block\">\n                <div class=\"case-gallery scroll-in\">\n                    <div class=\"case-gallery-main\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-09-um-16.06.36-scaled-1.webp\" alt=\"Content Labor \u2013 Case Study\" data-case=\"2\" title=\"| Elias Schultze\">\n                    <\/div>\n                    <div class=\"case-gallery-thumbs\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-09-um-16.06.36-scaled-1.webp\" alt=\"| es.design\" role=\"presentation\" data-case=\"2\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-09-um-16.06.36-scaled-1.webp\" alt=\"| es.design\" role=\"presentation\" data-case=\"2\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Bildschirmfoto-2026-03-09-um-16.06.36-scaled-1.webp\" alt=\"| es.design\" role=\"presentation\" data-case=\"2\" tabindex=\"0\" title=\"| Elias Schultze\">\n                    <\/div>\n                <\/div>\n                <div class=\"case-content\">\n                    <span class=\"case-category scroll-in\">Corporate Website &#038; Strategie<\/span>\n                    <h2 class=\"scroll-in delay-1\">Content Labor<\/h2>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Die Herausforderung<\/h3>\n                        <p>Fehlende organische Sichtbarkeit in Google und ein veraltetes Design, das nicht zur Premium-Positionierung des Unternehmens und der hohen Expertise des Inhabers passte.<\/p>\n                    <\/div>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Unsere L\u00f6sung<\/h3>\n                        <p>Neuentwicklung der gesamten Informationsarchitektur und Fokus auf SEO-optimierten Content in Kombination mit einem High-End-Design.<\/p>\n                        <ul class=\"case-list\">\n                            <li>Strategische Inhaltsplanung &#038; Copywriting<\/li>\n                            <li>SEO-Struktur f\u00fcr lokale und nationale Keywords<\/li>\n                            <li>Responsive Design f\u00fcr alle Endger\u00e4te<\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Das Ergebnis<\/h3>\n                        <p>Die neue Website positioniert den Kunden als absoluten Marktf\u00fchrer in seiner Nische und sorgt dank exzellentem Ranking f\u00fcr einen konstanten Strom an qualifizierten Leads.<\/p>\n                    <\/div>\n                    <div class=\"tech-stack scroll-in delay-2\">\n                        <span class=\"tech-badge\">Individuelles Theme<\/span>\n                        <span class=\"tech-badge\">WordPress<\/span>\n                        <span class=\"tech-badge\">SEO Strategie<\/span>\n                        <span class=\"tech-badge\">UI\/UX Design<\/span>\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <article id=\"krav-maga\" class=\"case-block\">\n                <div class=\"case-gallery scroll-in\">\n                    <div class=\"case-gallery-main\">\n                        <div class=\"es-comparison-slider\" data-case-comparison=\"3\">\n                            \n                            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/KravMaga-lev_Home-scaled.png\" alt=\"Neues High-End Interface \u2013 Nachher\" class=\"es-image-after\" title=\"| Elias Schultze\">\n                            \n                            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kravmaga-lev_alt_home-scaled.png\" alt=\"Altes Interface \u2013 Vorher\" class=\"es-image-before\" title=\"| Elias Schultze\">\n                            \n                            <div class=\"es-slider-handle-line\">\n                                <div class=\"es-slider-handle\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 8 4 4-4 4M6 16l-4-4 4-4\"\/><\/svg>\n                                <\/div>\n                            <\/div>\n                            \n                            <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"es-slider-input\" aria-label=\"Vergleichs-Slider steuern: Links Vorher, Rechts Nachher\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"case-gallery-thumbs\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/KravMaga-lev_Home-scaled.png\" data-before=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kravmaga-lev_alt_home-scaled.png\" alt=\"Krav Maga LEV Home\" role=\"presentation\" data-case=\"3\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/KravMaga-lev_fitnes_boxen-scaled.png\" data-before=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kravmaga-lev_alt_fitness_boxen-scaled.png\" alt=\"Fitness Boxen Flow\" role=\"presentation\" data-case=\"3\" tabindex=\"0\" title=\"| Elias Schultze\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/KravMaga-lev_kindergeburtstage-scaled.png\" data-before=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/04\/Kravmaga-lev_alt_kinder_krav_maga-scaled.png\" alt=\"Kindergeburtstage\" role=\"presentation\" data-case=\"3\" tabindex=\"0\" title=\"| Elias Schultze\">\n                    <\/div>\n                <\/div>\n                <div class=\"case-content\">\n                    <span class=\"case-category scroll-in\">Custom Dev &#038; AI Integration<\/span>\n                    <h2 class=\"scroll-in delay-1\">Krav Maga LEV<\/h2>\n                    \n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Die Herausforderung<\/h3>\n                        <p>Die digitale Pr\u00e4senz von Krav Maga Leverkusen ben\u00f6tigte ein massives Upgrade. Das veraltete Design entsprach visuell nicht der hohen Trainingsqualit\u00e4t und bot keinerlei Automatisierung zur Bew\u00e4ltigung von Support-Anfragen oder zur Skalierung der Probetrainings.<\/p>\n                        <p><strong>Erleben Sie die Transformation:<\/strong> Klicken Sie sich durch die Sektionen und nutzen Sie den Slider, um das alte Interface direkt mit unserem High-End Design zu vergleichen.<\/p>\n                    <\/div>\n                    \n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Unsere L\u00f6sung<\/h3>\n                        <p>Wir verzichteten auf Standard-Bauk\u00e4sten und entwickelten eine performante, ma\u00dfgeschneiderte L\u00f6sung.<\/p>\n                        <ul class=\"case-list\">\n                            <li>Custom Frontend-Entwicklung f\u00fcr kompromisslose Performance<\/li>\n                            <li>Klares, visuell eindrucksvolles Brand Interface<\/li>\n                            <li>Integration eines conversion-optimierten Buchungssystems<\/li>\n                            <li>Entwicklung eines nativen KI-Chatbots zur Automatisierung<\/li>\n                        <\/ul>\n                    <\/div>\n                    \n                    <div class=\"case-text-section scroll-in delay-2\">\n                        <h3>Das Ergebnis<\/h3>\n                        <div class=\"case-stats\">\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">24\/7<\/div>\n                                <div class=\"stat-label\">Automatisierter Support<\/div>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">+80%<\/div>\n                                <div class=\"stat-label\">Effizienz im Booking<\/div>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <div class=\"stat-value\">&lt; 0.8s<\/div>\n                                <div class=\"stat-label\">Page Speed<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"tech-stack scroll-in delay-2\">\n                        <span class=\"tech-badge\">Vanilla JS<\/span>\n                        <span class=\"tech-badge\">Custom HTML\/CSS<\/span>\n                        <span class=\"tech-badge\">KI Chatbot<\/span>\n                        <span class=\"tech-badge\">Booking Plugin<\/span>\n                    <\/div>\n                <\/div>\n            <\/article>\n        <\/div>\n    <\/section>\n\n    <section id=\"kontakt\" class=\"footer-cta scroll-in\">\n        <div class=\"es-container\">\n            <h2>Bereit f\u00fcr Ihre eigene Erfolgsgeschichte?<\/h2>\n            <p>Jedes Projekt ist einzigartig. Lassen Sie uns gemeinsam analysieren, wie wir Ihre Ziele erreichen k\u00f6nnen.<\/p>\n            <a href=\"\/#kontakt\" class=\"btn-primary\">Projekt anfragen<\/a>\n        <\/div>\n    <\/section>\n<\/main>\n\n<footer>\n    <div class=\"es-container\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-brand\">\n                <a href=\"\/\" class=\"footer-logo\"><img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\" title=\"| Elias Schultze\"><\/a>\n                <p class=\"footer-tagline\">Webdesign und Entwicklung mit Leidenschaft aus dem sch\u00f6nen Odenwald. Beratung, Design, Social Media &#038; mehr.<\/p>\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n                    <\/a>\n                    <a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Navigation<\/h4>\n                <ul>\n                    <li><a href=\"\/\">Home<\/a><\/li>\n                    <li><a href=\"\/webdesigner-mosbach\/\">Studio<\/a><\/li>\n                    <li><a href=\"\/webdesign-expertise\/\">Expertise<\/a><\/li>\n                    <li><a href=\"\/webdesign-referenzen\/\">Cases<\/a><\/li>\n                    <li><a href=\"\/#kontakt\">Kontakt<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Rechtliches<\/h4>\n                <ul>\n                    <li><a href=\"\/impressum\/\">Impressum<\/a><\/li>\n                    <li><a href=\"\/datenschutz\/\">Datenschutz<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Kontakt<\/h4>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@es.design.de\">info@es.design.de<\/a><\/p>\n            <\/div>\n        <\/div>\n        <p class=\"footer-bottom\">\u00a9 2026 es.design | Elias Schultze. All rights reserved.<\/p>\n    <\/div>\n<\/footer>\n\n<script>\n(function() {\n    'use strict';\n    function init() {\n        \/\/ --- 1. Gallery Thumbnail Logic ---\n        document.querySelectorAll('.case-gallery').forEach(function(gallery) {\n            var thumbs = gallery.querySelectorAll('.case-gallery-thumbs img');\n            if (!thumbs.length) return;\n            \n            \/\/ Set initial active thumb\n            thumbs[0].classList.add('active');\n            \n            var sliderContainer = gallery.querySelector('.es-comparison-slider');\n            \n            thumbs.forEach(function(thumb) {\n                thumb.addEventListener('click', function() {\n                    if (sliderContainer) {\n                        \/\/ Slider Case Logic\n                        var afterImg = sliderContainer.querySelector('.es-image-after');\n                        var beforeImg = sliderContainer.querySelector('.es-image-before');\n                        \n                        afterImg.src = thumb.src;\n                        \n                        if(thumb.dataset.before) {\n                            beforeImg.src = thumb.dataset.before;\n                        }\n                        \n                        \/\/ Reset slider on image switch\n                        sliderContainer.style.setProperty('--position', '50%');\n                        sliderContainer.querySelector('.es-slider-input').value = 50;\n                    } else {\n                        \/\/ Standard Gallery Logic\n                        var mainImg = gallery.querySelector('.case-gallery-main > img');\n                        if(mainImg) mainImg.src = thumb.src;\n                    }\n                    \n                    \/\/ Update active state\n                    thumbs.forEach(function(t) { t.classList.remove('active'); });\n                    thumb.classList.add('active');\n                });\n            });\n        });\n        \n        \/\/ --- 2. Before\/After Slider Interaction ---\n        var sliderInputs = document.querySelectorAll('.es-slider-input');\n        sliderInputs.forEach(function(input) {\n            input.addEventListener('input', function(e) {\n                e.target.parentNode.style.setProperty('--position', e.target.value + '%');\n            });\n        });\n\n        \/\/ --- 3. Scroll-In Animation ---\n        var scrollElements = document.querySelectorAll('.scroll-in');\n        if ('IntersectionObserver' in window) {\n            var observer = new IntersectionObserver(function(entries) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('scroll-in--visible');\n                        observer.unobserve(entry.target);\n                    }\n                });\n            }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n            scrollElements.forEach(function(el) { observer.observe(el); });\n        } else {\n            scrollElements.forEach(function(el) { el.classList.add('scroll-in--visible'); });\n        }\n    }\n    \n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', init);\n    } else {\n        init();\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Studio Expertise Cases Kostenloses Erstgespr\u00e4ch DE EN Instagram \u2924 Studio Expertise Cases DE EN Let&#8217;s talk Webdesign Referenzen &#038; Case Studies Unsere Cases: Exzellenz in Design &#038; Funktion Entdecken Sie eine Auswahl der Webdesign- und E-Commerce-Projekte von es.design \u2013 aus dem Odenwald und der Region. Von der ersten Idee bis zum Launch einer High-Performance Website. [&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-1901","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1901","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=1901"}],"version-history":[{"count":36,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1901\/revisions"}],"predecessor-version":[{"id":2502,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1901\/revisions\/2502"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=1901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}