{"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-04-20T19:19:59","modified_gmt":"2026-04-20T19:19:59","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\"\/>\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=\"#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        <\/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=\"\/\" 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&#038;family=Outfit:wght@200;300;400;500;600&#038;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 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-image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\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 { grid-template-columns: 1fr; }\n    .hero-text { order: 2; text-align: center; padding: 60px 5vw 80px; }\n    .hero-text .btn-primary { align-self: center; }\n    .hero h1, .hero p { text-align: center; }\n    .hero-image-container { order: 1; height: 60vh; min-height: 400px; }\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}\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<\/style>\n\n<main id=\"main\" role=\"main\">\n    <section class=\"hero\">\n        <div class=\"hero-text es-container\">\n            <h1>Premium Webdesign &#038;<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 &#038; Region.<\/p>\n\n<div style=\"display: flex; flex-direction: row; gap: 20px; align-items: center;\"> \n            <a href=\"#kontakt\" class=\"btn-primary\">Kostenloses Erstgespr\u00e4ch buchen<\/a>\n<a href=\"\/preisberechnung\/\" class=\"btn-outline\" style=\"border-color:var(--marineblau);color:var(--marineblau); padding: 20px 25px; font-size: 16px;;\">Preis berechnen<\/a>\n<\/div>\n\n        <\/div>\n        <div class=\"hero-image-container\">\n            <img 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        <\/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 &#038; 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 &#038; UI\/UX<\/span>\n                    <h3>Premium Webdesign &#038; 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\"\/><\/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 &#038; 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 &#038; 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 &#038; 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 &#038; 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 &#038; 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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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\"\/><\/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            \n                        <!-- es.booking Wrapper -->\n            <div class=\"simplebooker-wrapper w-full py-10 min-h-screen\" data-simplebooker-root=\"1\" data-sb-form-id=\"30minuten\" data-sb-booked=\"[]\" data-sb-allowed-weekdays=\"[1,2,3,4,5]\" data-sb-allowed-dates=\"[]\" data-sb-today-iso=\"2026-05-25\" data-sb-date-only=\"0\" data-sb-times-by-weekday=\"[[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;],[&quot;17:00&quot;,&quot;17:30&quot;,&quot;18:00&quot;,&quot;18:30&quot;,&quot;19:00&quot;,&quot;19:30&quot;,&quot;20:00&quot;]]\" data-sb-slot-duration=\"30\" data-sb-min-advance-hours=\"0\" data-sb-dynamic-enabled=\"0\" data-sb-dynamic-field=\"age_group\" data-sb-dynamic-rules=\"[]\" style=\"width: 100%; max-width: 100%; box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, &#039;Segoe UI&#039;, sans-serif; background: transparent !important\">\n                                                                    <script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" async defer><\/script>\n                                <style>\n                    \/* Volle Breite \u2013 unabh\u00e4ngig vom Theme-Container; Safe Area f\u00fcr Notch-Ger\u00e4te *\/\n                    .simplebooker-wrapper {\n                        width: 100% !important;\n                        max-width: 100% !important;\n                        min-height: 100vh !important;\n                        box-sizing: border-box;\n                        padding-left: max(0.5rem, env(safe-area-inset-left));\n                        padding-right: max(0.5rem, env(safe-area-inset-right));\n                        display: flex;\n                        flex-direction: column;\n                    }\n                                        \/* Harte Style-Isolation gegen Theme\/Global-CSS *\/\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"],\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] *,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] *::before,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] *::after {\n                        box-sizing: border-box !important;\n                    }\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] {\n                        isolation: isolate;\n                        font-family: system-ui, -apple-system, BlinkMacSystemFont, &#039;Segoe UI&#039;, sans-serif !important;\n                        line-height: 1.5 !important;\n                        color: #111827 !important;\n                        text-align: left !important;\n                    }\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h1,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h2,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h3,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h4,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h5,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] h6,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] p,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] span,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] label,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] a,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] button,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] input,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] textarea,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] select {\n                        font-family: inherit !important;\n                        line-height: inherit !important;\n                        letter-spacing: normal !important;\n                        text-transform: none !important;\n                        color: inherit;\n                        text-align: left !important;\n                    }\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] p,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] li,\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] small {\n                        color: inherit !important;\n                        text-align: left !important;\n                    }\n                    .simplebooker-wrapper[data-simplebooker-root=\"1\"] img {\n                        max-width: none !important;\n                    }\n                                        \/* Profilbild: Gr\u00f6\u00dfe, Invertierung durch Theme\/Dark-Mode r\u00fcckg\u00e4ngig machen *\/\n                    .simplebooker-wrapper .sb-profile-img {\n                        width: 6rem; height: 6rem; min-width: 6rem; min-height: 6rem;\n                        border-radius: 9999px;\n                        object-fit: cover;\n                        object-position: center top;\n                        display: block;\n                        mix-blend-mode: normal !important;\n                    }\n                    .simplebooker-wrapper .sb-card-outer { width: 100% !important; max-width: 100% !important;  }\n                    \/* Titel und Name nutzen dieselbe Schrift wie das Formular (\u00fcberschreibt Theme-\u00dcberschriften) *\/\n                    .simplebooker-wrapper .sb-form-name {\n                        font-family: system-ui, -apple-system, BlinkMacSystemFont, &#039;Segoe UI&#039;, sans-serif !important;\n                    }\n                    \/* h2 statt h1: Browser-\/Theme-Defaults neutralisieren, Optik wie zuvor (text-2xl \/ font-medium \/ mb-2) *\/\n                    .simplebooker-wrapper .sb-form-title {\n                        font-family: system-ui, -apple-system, BlinkMacSystemFont, &#039;Segoe UI&#039;, sans-serif !important;\n                        font-size: 1.5rem !important;\n                        line-height: 1.25 !important;\n                        font-weight: 500 !important;\n                        letter-spacing: -0.025em !important;\n                        color: #111827 !important;\n                        margin: 0 0 0.5rem 0 !important;\n                    }\n                                        \/* Isoliertes Styling f\u00fcr es.booking (kleine Erg\u00e4nzungen neben Tailwind) *\/\n                    .simplebooker-wrapper .sb-scroll-times {\n                        max-height: 480px;\n                        overflow-y: auto;\n                    }\n                    .simplebooker-wrapper .sb-scroll-times::-webkit-scrollbar {\n                        width: 6px;\n                    }\n                    .simplebooker-wrapper .sb-scroll-times::-webkit-scrollbar-track {\n                        background: #f3f4f6;\n                    }\n                    .simplebooker-wrapper .sb-scroll-times::-webkit-scrollbar-thumb {\n                        background: #d1d5db;\n                        border-radius: 9999px;\n                    }\n                    .simplebooker-wrapper .sb-time-btn[data-selected=\"true\"] {\n                        background-color: #111827;\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn[data-selected=\"true\"] * {\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn {\n                        background-color: #f3f4f6 !important;\n                        color: #374151 !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn * {\n                        color: inherit !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn:hover {\n                        background-color: #111827 !important;\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn:hover * {\n                        color: #ffffff !important;\n                    }\n                    \/* Selected-Zeitslot muss immer dunkel + wei\u00dfe Schrift bleiben *\/\n                    .simplebooker-wrapper .sb-time-btn[data-selected=\"true\"] {\n                        background-color: #111827 !important;\n                        border-color: #111827 !important;\n                        color: #ffffff !important;\n                        opacity: 1 !important;\n                    }\n                    .simplebooker-wrapper .sb-time-btn[data-selected=\"true\"] * {\n                        color: #ffffff !important;\n                        opacity: 1 !important;\n                    }\n                    .simplebooker-wrapper .sb-date-btn[data-selected=\"true\"] {\n                        background-color: #111827 !important;\n                        border-color: #111827 !important;\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-date-btn[data-selected=\"true\"] * {\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-date-btn.sb-date-past {\n                        opacity: 0.5;\n                        cursor: not-allowed;\n                        color: #9ca3af !important;\n                        pointer-events: none;\n                    }\n                    .simplebooker-wrapper .sb-date-btn.sb-date-disallowed-weekday {\n                        opacity: 0.4 !important;\n                        cursor: not-allowed !important;\n                        color: #9ca3af !important;\n                        background-color: #f3f4f6 !important;\n                        pointer-events: none !important;\n                    }\n                    .simplebooker-wrapper .sb-date-btn.sb-date-disallowed-weekday:hover {\n                        background-color: #f3f4f6 !important;\n                    }\n                    .simplebooker-wrapper .sb-date-btn.sb-date-booked {\n                        opacity: 0.45 !important;\n                        cursor: not-allowed !important;\n                        color: #9ca3af !important;\n                        background-color: #f3f4f6 !important;\n                        pointer-events: none !important;\n                    }\n                    .simplebooker-wrapper .sb-date-today {\n                        border: 1px solid #111827;\n                        background-color: #ffffff;\n                    }\n                    .simplebooker-wrapper .sb-accent {\n                        color: #111827;\n                    }\n                    .simplebooker-wrapper .sb-accent-bg {\n                        background-color: #111827;\n                        color: #ffffff;\n                    }\n                    .simplebooker-wrapper .sb-steps-wrap {\n                        flex: 0 1 auto;\n                        width: 100%;\n                    }\n                    .simplebooker-wrapper .sb-powered-by-footer {\n                        color: #9ca3af !important;\n                        text-align: center !important;\n                        margin-top: 1.25rem !important;\n                        padding-top: 0.5rem;\n                        padding-bottom: 0.5rem;\n                        flex-shrink: 0;\n                    }\n                    .simplebooker-wrapper .sb-powered-by-footer .sb-accent {\n                        color: #111827 !important;\n                    }\n                    .simplebooker-wrapper .sb-next-btn,\n                    .simplebooker-wrapper .sb-step-2 button[type=\"submit\"],\n                    .simplebooker-wrapper .sb-step-3 .sb-back-to-step1,\n                    .simplebooker-wrapper .sb-step-3 button[type=\"submit\"] {\n                        background-color: #111827 !important;\n                        border-color: #111827 !important;\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-next-btn *,\n                    .simplebooker-wrapper .sb-step-2 button[type=\"submit\"] *,\n                    .simplebooker-wrapper .sb-step-3 .sb-back-to-step1 *,\n                    .simplebooker-wrapper .sb-step-3 button[type=\"submit\"] * {\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-next-btn:disabled,\n                    .simplebooker-wrapper .sb-next-btn:disabled * {\n                        color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .sb-step-2 .sb-back-to-step1 {\n                        background: transparent !important;\n                        border: 0 !important;\n                        color: #6b7280 !important;\n                    }\n                    .simplebooker-wrapper.sb-view-list .sb-calendar-card {\n                        display: none;\n                    }\n                    .simplebooker-wrapper.sb-view-list .sb-layout-grid {\n                        grid-template-columns: minmax(0,1fr) !important;\n                    }\n                    \/* Mobile: Touch-Ziele, Abst\u00e4nde, kein Overflow *\/\n                    @media (max-width: 767px) {\n                        .simplebooker-wrapper {\n                            padding-top: 1rem !important;\n                            padding-bottom: 1.5rem !important;\n                            padding-left: max(0.5rem, env(safe-area-inset-left)) !important;\n                            padding-right: max(0.5rem, env(safe-area-inset-right)) !important;\n                            overflow-x: hidden;\n                        }\n                        .simplebooker-wrapper .sb-card-outer {\n                            border-radius: 1rem;\n                            margin: 0 2px;\n                        }\n                        .simplebooker-wrapper .sb-card-outer > div > div:first-child {\n                            padding-left: 1rem !important;\n                            padding-right: 1rem !important;\n                            padding-top: 1.25rem !important;\n                            padding-bottom: 1.25rem !important;\n                        }\n                        .simplebooker-wrapper .sb-card-outer > div > div:last-child {\n                            padding-left: 1rem !important;\n                            padding-right: 1rem !important;\n                            padding-top: 1.25rem !important;\n                            padding-bottom: 1.25rem !important;\n                        }\n                        .simplebooker-wrapper .sb-calendar-card,\n                        .simplebooker-wrapper .sb-layout-grid > div.bg-white {\n                            padding: 1rem !important;\n                        }\n                        .simplebooker-wrapper .sb-calendar-grid {\n                            gap: 2px !important;\n                        }\n                        .simplebooker-wrapper .sb-date-btn {\n                            min-height: 44px !important;\n                            min-width: 44px !important;\n                            height: auto !important;\n                            aspect-ratio: 1;\n                            font-size: 0.875rem;\n                        }\n                        .simplebooker-wrapper .sb-time-btn {\n                            min-height: 48px !important;\n                            padding: 0.75rem 1rem !important;\n                            font-size: 1rem;\n                        }\n                        .simplebooker-wrapper .sb-next-btn,\n                        .simplebooker-wrapper .sb-back-to-step1,\n                        .simplebooker-wrapper button[type=\"submit\"],\n                        .simplebooker-wrapper .sb-step-2 button[type=\"submit\"],\n                        .simplebooker-wrapper .sb-step-3 .sb-back-to-step1 {\n                            min-height: 48px !important;\n                            padding: 0.75rem 1.25rem !important;\n                        }\n                        .simplebooker-wrapper .sb-scroll-times {\n                            max-height: 320px;\n                        }\n                        .simplebooker-wrapper .sb-step-2,\n                        .simplebooker-wrapper .sb-step-3 {\n                            margin-top: 1rem !important;\n                            padding-left: 0.5rem !important;\n                            padding-right: 0.5rem !important;\n                        }\n                        .simplebooker-wrapper .sb-step-2 .rounded-2xl,\n                        .simplebooker-wrapper .sb-step-3 .rounded-2xl {\n                            padding: 1rem !important;\n                        }\n                    }\n                    @media (max-width: 480px) {\n                        .simplebooker-wrapper {\n                            padding-left: max(0.25rem, env(safe-area-inset-left)) !important;\n                            padding-right: max(0.25rem, env(safe-area-inset-right)) !important;\n                        }\n                        .simplebooker-wrapper .sb-date-btn {\n                            min-width: 38px !important;\n                            min-height: 38px !important;\n                            font-size: 0.8125rem;\n                        }\n                        .simplebooker-wrapper .sb-card-outer > div > div:first-child .sb-form-title {\n                            font-size: 1.25rem !important;\n                        }\n                    }\n                    \/* iOS: Kein Zoom bei Input-Focus (font-size >= 16px) *\/\n                    .simplebooker-wrapper input[type=\"text\"],\n                    .simplebooker-wrapper input[type=\"email\"],\n                    .simplebooker-wrapper input[type=\"tel\"],\n                    .simplebooker-wrapper input[type=\"number\"],\n                    .simplebooker-wrapper input[type=\"url\"],\n                    .simplebooker-wrapper input[type=\"date\"],\n                    .simplebooker-wrapper input[type=\"time\"],\n                    .simplebooker-wrapper select,\n                    .simplebooker-wrapper textarea {\n                        font-size: 16px !important;\n                    }\n                    \/* Theme-Schutz: Form-Feld-Rahmen innerhalb es.booking *\/\n                    .simplebooker-wrapper input[type=\"text\"],\n                    .simplebooker-wrapper input[type=\"email\"],\n                    .simplebooker-wrapper input[type=\"tel\"],\n                    .simplebooker-wrapper input[type=\"number\"],\n                    .simplebooker-wrapper input[type=\"url\"],\n                    .simplebooker-wrapper input[type=\"date\"],\n                    .simplebooker-wrapper input[type=\"time\"],\n                    .simplebooker-wrapper select,\n                    .simplebooker-wrapper textarea {\n                        border: 1px solid #e5e7eb !important; \/* gray-200 *\/\n                        background-color: #ffffff !important;\n                    }\n                    .simplebooker-wrapper .rounded-lg {\n                        border-radius: 0.5rem !important;\n                    }\n                    .simplebooker-wrapper input[type=\"text\"]:focus,\n                    .simplebooker-wrapper input[type=\"email\"]:focus,\n                    .simplebooker-wrapper input[type=\"tel\"]:focus,\n                    .simplebooker-wrapper input[type=\"number\"]:focus,\n                    .simplebooker-wrapper input[type=\"url\"]:focus,\n                    .simplebooker-wrapper input[type=\"date\"]:focus,\n                    .simplebooker-wrapper input[type=\"time\"]:focus,\n                    .simplebooker-wrapper select:focus,\n                    .simplebooker-wrapper textarea:focus {\n                        border: 1px solid #111827 !important;\n                        outline: none !important;\n                        box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12) !important;\n                    }\n                <\/style>\n\n                <div class=\"sb-steps-wrap\">\n                                <div class=\"sb-card-outer bg-white shadow-xl rounded-2xl overflow-hidden w-full\">\n                    <div class=\"flex flex-col md:flex-row\">\n                                                <!-- Linke Spalte: Info -->\n                        <div class=\"md:w-5\/12 lg:w-4\/12 bg-white px-8 py-10 border-r border-gray-100 flex flex-col\">\n                            <div class=\"flex items-center space-x-4 mb-8\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Buisiness_Bild.webp\" alt=\"Elias Schultze\" class=\"sb-profile-img\" width=\"96\" height=\"96\" loading=\"eager\" title=\"| Elias Schultze\">\n                                                                <div>\n                                    <div class=\"text-sm text-gray-500 mb-0.5\">es.booking<\/div>\n                                    <div class=\"sb-form-name font-semibold text-gray-900\">Elias Schultze<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <h2 class=\"sb-form-title text-2xl font-medium tracking-tight text-gray-900 mb-2\">\n                                30 Minuten Meeting                            <\/h2>\n\n                                                            <div class=\"self-start inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full border border-gray-200 text-xs font-medium text-gray-700 mb-4\">\n                                    <svg class=\"h-3.5 w-3.5 text-gray-400 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n                                              d=\"M12 6v6l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                                    <\/svg>\n                                    <span>30 minutes<\/span>\n                                <\/div>\n                            \n                            <div class=\"text-sm text-gray-600 leading-relaxed mb-8 space-y-2\">\n                                <p>Hi, ich bin Elias. <br \/>\r\nBuche gerne dein kostenloses Erstgespr\u00e4ch um dich Beraten zu lassen!<\/p>\n                            <\/div>\n\n                            <div class=\"mt-8 pt-6 border-t border-gray-100 text-xs text-gray-400\">\n                                <span class=\"sb-accent font-medium\">POWERED BY <a href=\"https:\/\/eliasschultze.de\/\" class=\"sb-accent font-medium underline hover:opacity-90\" target=\"_blank\" rel=\"noopener noreferrer\">es.design<\/a><\/span>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Rechte Spalte: App -->\n                        <div class=\"md:w-7\/12 lg:w-8\/12 bg-gray-50 px-6 lg:px-10 py-8\">\n                                                        <!-- Header Bar -->\n                            <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-4\">\n                                <div class=\"flex items-center space-x-3\">\n                                                                        <div class=\"inline-flex items-center px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm\">\n                                        <span class=\"mr-2 text-xs text-gray-400\">\n                                            UTC Offset                                        <\/span>\n                                        <select class=\"border-0 bg-transparent focus:outline-none text-sm font-medium pr-4 sb-timezone-select\">\n                                                                                            <optgroup label=\"Europa\">\n                                                                                                            <option value=\"Europe\/Berlin\">CET \u2013 Berlin<\/option>\n                                                                                                            <option value=\"Europe\/Zurich\">CET \u2013 Z\u00fcrich<\/option>\n                                                                                                            <option value=\"Europe\/Vienna\">CET \u2013 Wien<\/option>\n                                                                                                            <option value=\"Europe\/Amsterdam\">CET \u2013 Amsterdam<\/option>\n                                                                                                            <option value=\"Europe\/Paris\">CET \u2013 Paris<\/option>\n                                                                                                            <option value=\"Europe\/Brussels\">CET \u2013 Br\u00fcssel<\/option>\n                                                                                                            <option value=\"Europe\/Madrid\">CET \u2013 Madrid<\/option>\n                                                                                                            <option value=\"Europe\/Rome\">CET \u2013 Rom<\/option>\n                                                                                                            <option value=\"Europe\/Stockholm\">CET \u2013 Stockholm<\/option>\n                                                                                                            <option value=\"Europe\/Oslo\">CET \u2013 Oslo<\/option>\n                                                                                                            <option value=\"Europe\/Copenhagen\">CET \u2013 Kopenhagen<\/option>\n                                                                                                            <option value=\"Europe\/Helsinki\">EET \u2013 Helsinki<\/option>\n                                                                                                            <option value=\"Europe\/Athens\">EET \u2013 Athen<\/option>\n                                                                                                            <option value=\"Europe\/Bucharest\">EET \u2013 Bukarest<\/option>\n                                                                                                            <option value=\"Europe\/Warsaw\">CET \u2013 Warschau<\/option>\n                                                                                                            <option value=\"Europe\/Prague\">CET \u2013 Prag<\/option>\n                                                                                                            <option value=\"Europe\/Budapest\">CET \u2013 Budapest<\/option>\n                                                                                                            <option value=\"Europe\/London\">GMT \u2013 London<\/option>\n                                                                                                            <option value=\"Europe\/Dublin\">GMT \u2013 Dublin<\/option>\n                                                                                                    <\/optgroup>\n                                                                                            <optgroup label=\"Amerika\">\n                                                                                                            <option value=\"America\/New_York\">EST \u2013 New York<\/option>\n                                                                                                            <option value=\"America\/Chicago\">CST \u2013 Chicago<\/option>\n                                                                                                            <option value=\"America\/Denver\">MST \u2013 Denver<\/option>\n                                                                                                            <option value=\"America\/Los_Angeles\">PST \u2013 Los Angeles<\/option>\n                                                                                                            <option value=\"America\/Toronto\">EST \u2013 Toronto<\/option>\n                                                                                                            <option value=\"America\/Vancouver\">PST \u2013 Vancouver<\/option>\n                                                                                                            <option value=\"America\/Sao_Paulo\">BRT \u2013 S\u00e3o Paulo<\/option>\n                                                                                                            <option value=\"America\/Buenos_Aires\">ART \u2013 Buenos Aires<\/option>\n                                                                                                            <option value=\"America\/Mexico_City\">CST \u2013 Mexiko-Stadt<\/option>\n                                                                                                    <\/optgroup>\n                                                                                            <optgroup label=\"Asien\">\n                                                                                                            <option value=\"Asia\/Tokyo\">JST \u2013 Tokio<\/option>\n                                                                                                            <option value=\"Asia\/Shanghai\">CST \u2013 Shanghai<\/option>\n                                                                                                            <option value=\"Asia\/Hong_Kong\">HKT \u2013 Hong Kong<\/option>\n                                                                                                            <option value=\"Asia\/Singapore\">SGT \u2013 Singapur<\/option>\n                                                                                                            <option value=\"Asia\/Seoul\">KST \u2013 Seoul<\/option>\n                                                                                                            <option value=\"Asia\/Bangkok\">ICT \u2013 Bangkok<\/option>\n                                                                                                            <option value=\"Asia\/Dubai\">GST \u2013 Dubai<\/option>\n                                                                                                            <option value=\"Asia\/Jerusalem\">IST \u2013 Jerusalem<\/option>\n                                                                                                            <option value=\"Asia\/Kolkata\">IST \u2013 Mumbai\/Delhi<\/option>\n                                                                                                    <\/optgroup>\n                                                                                            <optgroup label=\"Ozeanien\">\n                                                                                                            <option value=\"Australia\/Sydney\">AEST \u2013 Sydney<\/option>\n                                                                                                            <option value=\"Australia\/Melbourne\">AEST \u2013 Melbourne<\/option>\n                                                                                                            <option value=\"Australia\/Perth\">AWST \u2013 Perth<\/option>\n                                                                                                            <option value=\"Pacific\/Auckland\">NZST \u2013 Auckland<\/option>\n                                                                                                    <\/optgroup>\n                                                                                            <optgroup label=\"Afrika\">\n                                                                                                            <option value=\"Africa\/Cairo\">EET \u2013 Kairo<\/option>\n                                                                                                            <option value=\"Africa\/Johannesburg\">SAST \u2013 Johannesburg<\/option>\n                                                                                                            <option value=\"Africa\/Lagos\">WAT \u2013 Lagos<\/option>\n                                                                                                    <\/optgroup>\n                                                                                    <\/select>\n                                    <\/div>\n                                                                    <\/div>\n\n                                                                <div class=\"flex items-center flex-wrap gap-2 sm:gap-3\">\n                                    <span class=\"text-sm text-gray-600\">\n                                        Listen- \/ Kalenderansicht                                    <\/span>\n                                    <button type=\"button\"\n                                            class=\"inline-flex items-center justify-center h-10 w-10 min-w-[44px] min-h-[44px] rounded-lg bg-white text-gray-500 border border-gray-200 shadow-sm hover:bg-gray-50 active:bg-gray-100 touch-manipulation shrink-0\"\n                                            data-sb-view-toggle=\"1\"\n                                            title=\"Ansicht wechseln (Kalender\/Liste)\"\n                                            aria-label=\"Ansicht wechseln (Kalender\/Liste)\">\n                                        <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n                                                  d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v11a2 2 0 002 2z\" \/>\n                                        <\/svg>\n                                    <\/button>\n                                <\/div>\n                                                            <\/div>\n\n                            <!-- Kalender + Zeiten -->\n                                                        <div class=\"grid grid-cols-1 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.1fr)] gap-5 sb-layout-grid\">\n                                <!-- Karte 1: Kalender -->\n                                <div class=\"sb-calendar-card bg-white rounded-2xl shadow-lg p-5 lg:p-6 flex flex-col\">\n                                    <div class=\"flex items-center justify-between mb-4\">\n                                        <div>\n                                            <div class=\"text-xs font-semibold tracking-wide text-gray-400 uppercase sb-calendar-month-label\">\n                                                MAI 2026                                            <\/div>\n                                            <div class=\"text-xl font-semibold text-gray-900\">\n                                                W\u00e4hle ein Datum                                            <\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 text-gray-400\">\n                                            <button type=\"button\" class=\"sb-nav-prev min-w-[44px] min-h-[44px] w-10 h-10 rounded-full hover:bg-gray-100 active:bg-gray-200 flex items-center justify-center touch-manipulation\" aria-label=\"Vorheriger Monat\">\n                                                <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 19l-7-7 7-7\" \/>\n                                                <\/svg>\n                                            <\/button>\n                                            <button type=\"button\" class=\"sb-nav-next min-w-[44px] min-h-[44px] w-10 h-10 rounded-full hover:bg-gray-100 active:bg-gray-200 flex items-center justify-center touch-manipulation\" aria-label=\"N\u00e4chster Monat\">\n                                                <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 5l7 7-7 7\" \/>\n                                                <\/svg>\n                                            <\/button>\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"grid grid-cols-7 text-xs text-center text-gray-400 mb-2\">\n                                                                                <div>Mo<\/div>\n                                                                                <div>Di<\/div>\n                                                                                <div>Mi<\/div>\n                                                                                <div>Do<\/div>\n                                                                                <div>Fr<\/div>\n                                                                                <div>Sa<\/div>\n                                                                                <div>So<\/div>\n                                                                            <\/div>\n\n                                    <!-- Dynamischer Kalenderraster f\u00fcr aktuellen Monat -->\n                                    <div class=\"grid grid-cols-7 gap-1.5 text-sm sb-calendar-grid\"\n                                         data-year=\"2026\"\n                                         data-month=\"5\">\n                                        <div><\/div><div><\/div><div><\/div><div><\/div>                                            <button type=\"button\"\n                                                    data-sb-date=\"2026-05-01\"\n                                                    data-sb-weekday=\"Fri\"\n                                                    data-sb-label=\"1. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                1                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-02\"\n                                                    data-sb-weekday=\"Sat\"\n                                                    data-sb-label=\"2. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                2                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-03\"\n                                                    data-sb-weekday=\"Sun\"\n                                                    data-sb-label=\"3. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                3                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-04\"\n                                                    data-sb-weekday=\"Mon\"\n                                                    data-sb-label=\"4. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                4                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-05\"\n                                                    data-sb-weekday=\"Tue\"\n                                                    data-sb-label=\"5. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                5                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-06\"\n                                                    data-sb-weekday=\"Wed\"\n                                                    data-sb-label=\"6. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                6                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-07\"\n                                                    data-sb-weekday=\"Thu\"\n                                                    data-sb-label=\"7. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                7                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-08\"\n                                                    data-sb-weekday=\"Fri\"\n                                                    data-sb-label=\"8. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                8                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-09\"\n                                                    data-sb-weekday=\"Sat\"\n                                                    data-sb-label=\"9. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                9                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-10\"\n                                                    data-sb-weekday=\"Sun\"\n                                                    data-sb-label=\"10. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                10                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-11\"\n                                                    data-sb-weekday=\"Mon\"\n                                                    data-sb-label=\"11. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                11                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-12\"\n                                                    data-sb-weekday=\"Tue\"\n                                                    data-sb-label=\"12. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                12                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-13\"\n                                                    data-sb-weekday=\"Wed\"\n                                                    data-sb-label=\"13. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                13                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-14\"\n                                                    data-sb-weekday=\"Thu\"\n                                                    data-sb-label=\"14. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                14                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-15\"\n                                                    data-sb-weekday=\"Fri\"\n                                                    data-sb-label=\"15. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                15                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-16\"\n                                                    data-sb-weekday=\"Sat\"\n                                                    data-sb-label=\"16. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                16                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-17\"\n                                                    data-sb-weekday=\"Sun\"\n                                                    data-sb-label=\"17. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                17                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-18\"\n                                                    data-sb-weekday=\"Mon\"\n                                                    data-sb-label=\"18. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                18                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-19\"\n                                                    data-sb-weekday=\"Tue\"\n                                                    data-sb-label=\"19. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                19                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-20\"\n                                                    data-sb-weekday=\"Wed\"\n                                                    data-sb-label=\"20. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                20                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-21\"\n                                                    data-sb-weekday=\"Thu\"\n                                                    data-sb-label=\"21. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                21                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-22\"\n                                                    data-sb-weekday=\"Fri\"\n                                                    data-sb-label=\"22. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                22                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-23\"\n                                                    data-sb-weekday=\"Sat\"\n                                                    data-sb-label=\"23. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                23                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-24\"\n                                                    data-sb-weekday=\"Sun\"\n                                                    data-sb-label=\"24. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-past\"\n                                                     disabled                                                    >\n                                                24                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-25\"\n                                                    data-sb-weekday=\"Mon\"\n                                                    data-sb-label=\"25. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation bg-gray-900 text-white font-semibold\"\n                                                                                                         data-selected=\"true\">\n                                                25                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-26\"\n                                                    data-sb-weekday=\"Tue\"\n                                                    data-sb-label=\"26. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation text-gray-700 hover:bg-gray-100\"\n                                                                                                        >\n                                                26                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-27\"\n                                                    data-sb-weekday=\"Wed\"\n                                                    data-sb-label=\"27. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation text-gray-700 hover:bg-gray-100\"\n                                                                                                        >\n                                                27                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-28\"\n                                                    data-sb-weekday=\"Thu\"\n                                                    data-sb-label=\"28. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation text-gray-700 hover:bg-gray-100\"\n                                                                                                        >\n                                                28                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-29\"\n                                                    data-sb-weekday=\"Fri\"\n                                                    data-sb-label=\"29. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation text-gray-700 hover:bg-gray-100\"\n                                                                                                        >\n                                                29                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-30\"\n                                                    data-sb-weekday=\"Sat\"\n                                                    data-sb-label=\"30. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-disallowed-weekday\"\n                                                     disabled                                                    >\n                                                30                                            <\/button>\n                                                                                        <button type=\"button\"\n                                                    data-sb-date=\"2026-05-31\"\n                                                    data-sb-weekday=\"Sun\"\n                                                    data-sb-label=\"31. Mai 2026\"\n                                                    class=\"sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none touch-manipulation sb-date-disallowed-weekday\"\n                                                     disabled                                                    >\n                                                31                                            <\/button>\n                                                                                <\/div>\n\n                                                                    <\/div>\n\n                                <!-- Karte 2: Zeiten -->\n                                                                <div class=\"bg-white rounded-2xl shadow-lg p-5 lg:p-6 flex flex-col\">\n                                    <div class=\"mb-3\">\n                                        <div class=\"text-xs font-semibold tracking-wide text-gray-400 uppercase mb-1 sb-selected-weekday\">\n                                            Montag                                        <\/div>\n                                        <div class=\"text-sm font-medium text-gray-900 sb-selected-date-label\">\n                                            25. Mai 2026                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"sb-scroll-times space-y-2 pr-1 mt-2 mb-4\">\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"17:00\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>17:00<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"17:30\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>17:30<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"18:00\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>18:00<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"18:30\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>18:30<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"19:00\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>19:00<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"19:30\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>19:30<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                                    <button type=\"button\"\n                                                    data-sb-time=\"20:00\"\n                                                    class=\"sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center justify-between touch-manipulation\">\n                                                <span>20:00<\/span>\n                                                                                                    <span class=\"text-xs text-gray-400 ml-3\">30 min<\/span>\n                                                                                            <\/button>\n                                                                            <\/div>\n\n                                    <button type=\"button\"\n                                            class=\"sb-next-btn inline-flex items-center justify-center px-4 py-2 rounded-full bg-gray-900 text-white text-sm font-medium opacity-50 cursor-not-allowed self-end touch-manipulation\">\n                                        Weiter                                    <\/button>\n                                <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Schritt 2: Formular -->\n                <div class=\"mt-8 hidden sb-step sb-step-2 max-w-3xl mx-auto\">\n                    <div class=\"bg-white rounded-2xl shadow-lg p-6 lg:p-8\">\n                        <div class=\"mb-6\">\n                            <div class=\"text-xs font-semibold tracking-wide text-gray-400 uppercase mb-1\">\n                                Schritt 2: Best\u00e4tigung erhalten                            <\/div>\n                            <div class=\"text-sm text-gray-600\">\n                                Du bekommst sofort eine automatische Best\u00e4tigung per E-Mail mit allen Termindetails.                            <\/div>\n                        <\/div>\n\n                        <form class=\"space-y-4 sb-booking-form\">\n                            <input type=\"hidden\" name=\"form_id\" value=\"30minuten\">\n                            <input type=\"hidden\" name=\"date\" value=\"\">\n                            <input type=\"hidden\" name=\"time\" value=\"\">\n                                                        \n                                                                <div>\n                                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                            Name                                                                                            <span class=\"text-red-500\">*<\/span>\n                                                                                    <\/label>\n                                                                                    <input\n                                                type=\"text\"\n                                                name=\"fields[name]\"\n                                                class=\"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900\"\n                                                placeholder=\"Name*\"\n                                                required>\n                                                                            <\/div>\n                                                                    <div>\n                                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                            E-Mail                                                                                            <span class=\"text-red-500\">*<\/span>\n                                                                                    <\/label>\n                                                                                    <input\n                                                type=\"email\"\n                                                name=\"fields[email]\"\n                                                class=\"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900\"\n                                                placeholder=\"E-Mail*\"\n                                                required>\n                                                                            <\/div>\n                                                                    <div>\n                                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">\n                                            Anmerkungen                                                                                            <span class=\"text-red-500\">*<\/span>\n                                                                                    <\/label>\n                                                                                    <textarea\n                                                name=\"fields[notes]\"\n                                                rows=\"3\"\n                                                class=\"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900\"\n                                                placeholder=\"Anmerkungen (optional)\"\n                                                required><\/textarea>\n                                                                            <\/div>\n                                                                                            <div class=\"sb-privacy-notice text-sm leading-relaxed pt-1\" style=\"color:#166534;\">\n                                                                            <label class=\"flex items-start gap-2.5 cursor-pointer text-left\">\n                                            <input type=\"checkbox\"\n                                                   name=\"sb_privacy_consent\"\n                                                   value=\"1\"\n                                                   class=\"mt-1 rounded border-gray-300 text-gray-900 focus:ring-gray-900 shrink-0\"\n                                                   required>\n                                            <span class=\"flex-1\">Es gilt unsere<a href=\"https:\/\/eliasschultze.de\/datenschutzerklaerung\/\" class=\"underline underline-offset-2 hover:opacity-80\" style=\"color:inherit\" target=\"_blank\" rel=\"noopener noreferrer\">Datenschutzerkl\u00e4rung<\/a><\/span>\n                                        <\/label>\n                                                                    <\/div>\n                                                                                        <div class=\"sb-captcha-wrap mt-4 mb-2\">\n                                    <div class=\"g-recaptcha\" data-sitekey=\"6Lc-ApssAAAAAJB05N0nLTECgdKocodCjsXsdktJ\"><\/div>\n                                <\/div>\n                            \n                            <div class=\"flex items-center justify-between pt-2\">\n                                <button type=\"button\" class=\"text-sm text-gray-500 hover:text-gray-900 sb-back-to-step1\">\n                                    Zur\u00fcck                                <\/button>\n                                <button type=\"submit\"\n                                        class=\"inline-flex items-center px-5 py-2.5 rounded-full bg-gray-900 text-white text-sm font-medium hover:bg-black focus:outline-none\">\n                                    Termin anfragen                                <\/button>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n                <\/div>\n\n                <!-- Schritt 3: Best\u00e4tigung -->\n                <div class=\"mt-8 hidden sb-step sb-step-3 max-w-3xl mx-auto\">\n                    <div class=\"bg-white rounded-2xl shadow-lg p-6 lg:p-8 text-center\">\n                        <div class=\"mb-3 text-xs font-semibold tracking-wide text-gray-400 uppercase\">\n                            Schritt 3: Ich melde mich bei dir                        <\/div>\n                        <div class=\"text-sm text-gray-600 mb-2\">\n                            Ich pr\u00fcfe deinen Termin und melde mich pers\u00f6nlich bei dir \u2013 per E-Mail oder Telefon.                        <\/div>\n                        <div class=\"text-sm text-gray-700 mb-4 sb-confirmation-details\"><\/div>\n                        <button type=\"button\" class=\"inline-flex items-center px-5 py-2.5 rounded-full bg-gray-900 text-white text-sm font-medium hover:bg-black focus:outline-none sb-back-to-step1\">\n                            Weitere Buchung anlegen                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <\/div><!-- \/.sb-steps-wrap -->\n\n                \n                <!-- Inline JS (Vanilla) f\u00fcr Interaktionen & AJAX -->\n                <script>\n                    (function() {\n                        const root = document.currentScript.closest('.simplebooker-wrapper');\n                        if (!root) return;\n\n                        const dateOnly = (root.getAttribute('data-sb-date-only') || '0') === '1';\n\n                        let selectedDate = '2026-05-25';\n                        let selectedWeekdayLabel = 'Montag';\n                        let selectedDateLabel = '25. Mai 2026';\n                        let selectedTime = dateOnly ? '' : null;\n\n                        let bookedSlots = {};\n                        try {\n                            const raw = root.getAttribute('data-sb-booked');\n                            if (raw) bookedSlots = JSON.parse(raw);\n                        } catch (e) {}\n                        const sbFormId = root.getAttribute('data-sb-form-id') || '';\n                        let liveBlockedTimesForDate = [];\n\n                        function parseAllowedWeekdays() {\n                            const raw = root.getAttribute('data-sb-allowed-weekdays');\n                            if (!raw) return null;\n                            try {\n                                const a = JSON.parse(raw);\n                                if (Array.isArray(a) && a.length > 0) {\n                                    return a.map(function (x) { return parseInt(x, 10); }).filter(function (n) { return n >= 0 && n <= 6; });\n                                }\n                            } catch (err) {}\n                            return null;\n                        }\n                        const allowedWeekdays = parseAllowedWeekdays();\n\n                        function parseAllowedDates() {\n                            const raw = root.getAttribute('data-sb-allowed-dates');\n                            if (!raw) return null;\n                            try {\n                                const a = JSON.parse(raw);\n                                if (Array.isArray(a) && a.length > 0) {\n                                    return a.map(function (s) { return String(s || '').trim(); })\n                                        .filter(function (s) { return \/^\\d{4}-\\d{2}-\\d{2}$\/.test(s); });\n                                }\n                            } catch (err) {}\n                            return null;\n                        }\n                        const allowedDates = parseAllowedDates();\n                        const dynamicEnabled = (root.getAttribute('data-sb-dynamic-enabled') || '0') === '1';\n                        const dynamicFieldId = root.getAttribute('data-sb-dynamic-field') || '';\n                        let dynamicRules = {};\n                        try {\n                            const rawDyn = root.getAttribute('data-sb-dynamic-rules');\n                            if (rawDyn) {\n                                const parsedDyn = JSON.parse(rawDyn);\n                                if (parsedDyn && typeof parsedDyn === 'object') {\n                                    dynamicRules = parsedDyn;\n                                }\n                            }\n                        } catch (errDyn) {}\n                        const dynamicSelectControl = (dynamicEnabled && dynamicFieldId)\n                            ? root.querySelector('[data-sb-dynamic-control=\"1\"]')\n                            : null;\n                        const dynamicSelectFallback = (dynamicEnabled && dynamicFieldId)\n                            ? root.querySelector('[name=\"fields[' + dynamicFieldId + ']\"]')\n                            : null;\n                        let activeDynamicTimesMap = null;\n                        let activeDynamicWeekdays = null;\n\n                        function resolveDynamicAvailability() {\n                            if (!dynamicEnabled) {\n                                activeDynamicTimesMap = null;\n                                activeDynamicWeekdays = null;\n                                return;\n                            }\n                            const selectedGroupRaw = dynamicSelectControl\n                                ? dynamicSelectControl.value\n                                : (dynamicSelectFallback ? dynamicSelectFallback.value : '');\n                            const selectedGroup = String(selectedGroupRaw || '').trim();\n                            if (!selectedGroup || !dynamicRules[selectedGroup] || typeof dynamicRules[selectedGroup] !== 'object') {\n                                \/\/ Wenn Steuer-Dropdown in Schritt 1 sichtbar ist, ohne Auswahl konsequent blockieren.\n                                if (dynamicSelectControl) {\n                                    activeDynamicTimesMap = {};\n                                    activeDynamicWeekdays = [];\n                                } else {\n                                    activeDynamicTimesMap = null;\n                                    activeDynamicWeekdays = null;\n                                }\n                                return;\n                            }\n                            const map = dynamicRules[selectedGroup];\n                            const weekdays = [];\n                            Object.keys(map).forEach(function(wd){\n                                const wi = parseInt(wd, 10);\n                                if (!isNaN(wi) && wi >= 0 && wi <= 6) {\n                                    const arr = Array.isArray(map[wd]) ? map[wd] : [];\n                                    if (arr.length > 0) weekdays.push(wi);\n                                }\n                            });\n                            activeDynamicTimesMap = map;\n                            activeDynamicWeekdays = weekdays;\n                        }\n\n                        resolveDynamicAvailability();\n\n                        function normTime(str) {\n                            if (!str) return '';\n                            const d = new Date('2000-01-01 ' + str);\n                            if (isNaN(d.getTime())) return str;\n                            return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');\n                        }\n\n                        const weekdayEl = root.querySelector('.sb-selected-weekday');\n                        const dateLabelEl = root.querySelector('.sb-selected-date-label');\n                        const nextButton = root.querySelector('.sb-next-btn');\n\n                        let timesByWeekday = {};\n                        try {\n                            const rawTw = root.getAttribute('data-sb-times-by-weekday');\n                            if (rawTw) {\n                                timesByWeekday = JSON.parse(rawTw);\n                            }\n                        } catch (eTw) {}\n                        const rawSlotDur = root.getAttribute('data-sb-slot-duration');\n                        const slotDurationMin = rawSlotDur === null || rawSlotDur === '' ? 0 : parseInt(rawSlotDur, 10);\n                        const showSlotDuration = !isNaN(slotDurationMin) && slotDurationMin > 0;\n                        const todayIso = root.getAttribute('data-sb-today-iso') || '2026-05-25';\n                        const rawMinAdvanceHours = root.getAttribute('data-sb-min-advance-hours');\n                        const minAdvanceHours = rawMinAdvanceHours === null || rawMinAdvanceHours === '' ? 12 : parseInt(rawMinAdvanceHours, 10);\n                        const minAdvanceMinutes = (!isNaN(minAdvanceHours) && minAdvanceHours > 0) ? (minAdvanceHours * 60) : 0;\n\n                        function getNowMinutes() {\n                            const now = new Date();\n                            return (now.getHours() * 60) + now.getMinutes();\n                        }\n\n                        function toMinutes(timeStr) {\n                            const m = String(timeStr || '').match(\/^(\\d{1,2}):(\\d{2})$\/);\n                            if (!m) return null;\n                            const hh = parseInt(m[1], 10);\n                            const mm = parseInt(m[2], 10);\n                            if (isNaN(hh) || isNaN(mm)) return null;\n                            return (hh * 60) + mm;\n                        }\n\n                        function getMinutesUntilSlot(iso, timeStr) {\n                            const parts = String(iso || '').split('-');\n                            if (parts.length !== 3) return null;\n                            const y = parseInt(parts[0], 10);\n                            const mo = parseInt(parts[1], 10);\n                            const da = parseInt(parts[2], 10);\n                            const hm = String(timeStr || '').split(':');\n                            if (hm.length !== 2) return null;\n                            const hh = parseInt(hm[0], 10);\n                            const mm = parseInt(hm[1], 10);\n                            if ([y, mo, da, hh, mm].some(v => isNaN(v))) return null;\n                            const slot = new Date(y, mo - 1, da, hh, mm, 0, 0);\n                            const now = new Date();\n                            return Math.floor((slot.getTime() - now.getTime()) \/ 60000);\n                        }\n\n                        function renderTimeSlotsForDate(iso) {\n                            if (dateOnly) {\n                                return;\n                            }\n                            const wrap = root.querySelector('.sb-scroll-times');\n                            if (!wrap) {\n                                return;\n                            }\n                            const parts = String(iso || '').split('-');\n                            if (parts.length !== 3) {\n                                return;\n                            }\n                            const y = parseInt(parts[0], 10);\n                            const mo = parseInt(parts[1], 10);\n                            const da = parseInt(parts[2], 10);\n                            if (isNaN(y) || isNaN(mo) || isNaN(da)) {\n                                return;\n                            }\n                            const dateObj = new Date(y, mo - 1, da);\n                            const dow = dateObj.getDay();\n                            const key = String(dow);\n                            const sourceMap = activeDynamicTimesMap !== null ? activeDynamicTimesMap : timesByWeekday;\n                            const arr = sourceMap && Object.prototype.hasOwnProperty.call(sourceMap, key) ? sourceMap[key] : [];\n                            const list = Array.isArray(arr) ? arr : [];\n                            wrap.innerHTML = '';\n                            list.forEach(function(time) {\n                                const slotMinutes = toMinutes(time);\n                                const diffMinutes = getMinutesUntilSlot(iso, time);\n                                if (diffMinutes !== null && diffMinutes < minAdvanceMinutes) {\n                                    return;\n                                }\n                                if (iso === todayIso && slotMinutes !== null && slotMinutes <= getNowMinutes()) {\n                                    return;\n                                }\n                                const b = document.createElement('button');\n                                b.type = 'button';\n                                b.setAttribute('data-sb-time', time);\n                                b.className = 'sb-time-btn w-full text-sm text-gray-700 bg-gray-100 hover:bg-gray-900 hover:text-white font-medium px-3 py-2 rounded-full transition-colors flex items-center touch-manipulation ' + (showSlotDuration ? 'justify-between' : 'justify-center');\n                                const span1 = document.createElement('span');\n                                span1.textContent = time;\n                                b.appendChild(span1);\n                                if (showSlotDuration) {\n                                    const span2 = document.createElement('span');\n                                    span2.className = 'text-xs text-gray-400 ml-3';\n                                    span2.textContent = slotDurationMin + ' min';\n                                    b.appendChild(span2);\n                                }\n                                wrap.appendChild(b);\n                            });\n                            selectedTime = null;\n                            liveBlockedTimesForDate = [];\n                            if (nextButton) {\n                                nextButton.disabled = true;\n                                nextButton.classList.add('opacity-50', 'cursor-not-allowed');\n                            }\n                            applyBookedStateToTimeButtons();\n                            refreshBlockedTimesForDate(iso);\n                        }\n\n                        function applyBookedStateToTimeButtons() {\n                            if (dateOnly) return;\n                            const timeBtns = root.querySelectorAll('.sb-time-btn');\n                            const nextBtn = root.querySelector('.sb-next-btn');\n                            const timesForDate = bookedSlots[selectedDate] || [];\n                            const liveTimes = Array.isArray(liveBlockedTimesForDate) ? liveBlockedTimesForDate : [];\n                            timeBtns.forEach(btn => {\n                                const t = btn.getAttribute('data-sb-time');\n                                const tNorm = normTime(t);\n                                const isBooked = (\n                                    timesForDate.indexOf(tNorm) !== -1 ||\n                                    timesForDate.indexOf(t) !== -1 ||\n                                    liveTimes.indexOf(tNorm) !== -1 ||\n                                    liveTimes.indexOf(t) !== -1\n                                );\n                                btn.disabled = isBooked;\n                                btn.setAttribute('aria-disabled', isBooked ? 'true' : 'false');\n                                if (isBooked) {\n                                    btn.classList.add('opacity-50', 'cursor-not-allowed');\n                                    btn.classList.remove('hover:bg-gray-900', 'hover:text-white');\n                                    btn.dataset.selected = 'false';\n                                    if (selectedTime === t) selectedTime = null;\n                                } else {\n                                    btn.classList.remove('opacity-50', 'cursor-not-allowed');\n                                    btn.classList.add('hover:bg-gray-900', 'hover:text-white');\n                                }\n                            });\n                            if (!selectedTime && nextBtn) {\n                                nextBtn.disabled = true;\n                                nextBtn.classList.add('opacity-50', 'cursor-not-allowed');\n                            }\n                        }\n\n                        function refreshBlockedTimesForDate(iso) {\n                            if (!sbFormId || !iso || !\/^\\d{4}-\\d{2}-\\d{2}$\/.test(String(iso))) {\n                                return Promise.resolve();\n                            }\n                            const requestedDate = String(iso);\n                            const ajaxUrl = 'https:\/\/eliasschultze.de\/wp-admin\/admin-ajax.php';\n                            const fd = new FormData();\n                            fd.append('action', 'simple_booker_get_blocked_for_date');\n                            fd.append('form_id', sbFormId);\n                            fd.append('date', requestedDate);\n                            return fetch(ajaxUrl, { method: 'POST', body: fd })\n                                .then(function(r){ return r.json(); })\n                                .then(function(d){\n                                    if (requestedDate !== selectedDate) {\n                                        return;\n                                    }\n                                    if (d && d.success && d.data && Array.isArray(d.data.blocked_times)) {\n                                        liveBlockedTimesForDate = d.data.blocked_times;\n                                        applyBookedStateToTimeButtons();\n                                    }\n                                })\n                                .catch(function(){});\n                        }\n\n                        function refreshBlockedSlotsFromServer() {\n                            if (!sbFormId) return Promise.resolve();\n                            const ajaxUrl = 'https:\/\/eliasschultze.de\/wp-admin\/admin-ajax.php';\n                            const fd = new FormData();\n                            fd.append('action', 'simple_booker_get_booked_slots');\n                            fd.append('form_id', sbFormId);\n                            return fetch(ajaxUrl, { method: 'POST', body: fd })\n                                .then(function(r){ return r.json(); })\n                                .then(function(d){\n                                    if (d && d.success && d.data && d.data.booked_slots && typeof d.data.booked_slots === 'object') {\n                                        bookedSlots = d.data.booked_slots;\n                                        if (calendarGrid) {\n                                            const year = parseInt(calendarGrid.getAttribute('data-year') || '2026', 10);\n                                            const month = parseInt(calendarGrid.getAttribute('data-month') || '5', 10);\n                                            renderCalendar(year, month);\n                                        }\n                                        if (!dateOnly) {\n                                            renderTimeSlotsForDate(selectedDate);\n                                        }\n                                    }\n                                })\n                                .catch(function(){});\n                        }\n\n                        \/\/ Kalender-Rendering mit Monatswechsel\n                        const calendarGrid = root.querySelector('.sb-calendar-grid');\n                        const viewToggle   = root.querySelector('[data-sb-view-toggle]');\n                        const navPrev = root.querySelector('.h-8.w-8.rounded-full.hover\\\\:bg-gray-100.flex.items-center.justify-center:nth-child(1)');\n                        const navNext = root.querySelector('.h-8.w-8.rounded-full.hover\\\\:bg-gray-100.flex.items-center.justify-center:nth-child(2)');\n\n                        function renderCalendar(year, month) {\n                            if (!calendarGrid) return;\n                            calendarGrid.innerHTML = '';\n\n                            const firstDay = new Date(year, month - 1, 1);\n                            const startWeekday = (firstDay.getDay() + 6) % 7; \/\/ 0=Montag (Woche beginnt Mo)\n                            const daysInMonth = new Date(year, month, 0).getDate();\n                            const monthLabel = firstDay.toLocaleDateString('de-DE', { month: 'long' });\n\n                            const monthTitle = root.querySelector('.sb-calendar-month-label');\n                            if (monthTitle) {\n                                monthTitle.textContent = monthLabel.toUpperCase() + ' ' + year;\n                            }\n\n                            for (let i = 0; i < startWeekday; i++) {\n                                const empty = document.createElement('div');\n                                calendarGrid.appendChild(empty);\n                            }\n\n                            for (let day = 1; day <= daysInMonth; day++) {\n                                const dateObj = new Date(year, month - 1, day);\n                                const iso = year.toString().padStart(4, '0') + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0');\n                                const weekdayLabel = dateObj.toLocaleDateString('de-DE', { weekday: 'short' });\n                                const dateLabel = dateObj.toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' });\n                                const jsDow = dateObj.getDay();\n                                const timesForDate = bookedSlots[iso] || [];\n\n                                const btn = document.createElement('button');\n                                btn.type = 'button';\n                                btn.className = 'sb-date-btn flex items-center justify-center h-9 rounded-full cursor-pointer select-none text-gray-700 hover:bg-gray-100';\n                                btn.textContent = String(day);\n                                btn.setAttribute('data-sb-date', iso);\n                                btn.setAttribute('data-sb-weekday', weekdayLabel);\n                                btn.setAttribute('data-sb-label', dateLabel);\n\n                                if (iso < todayIso) {\n                                    btn.disabled = true;\n                                    btn.classList.add('sb-date-past');\n                                } else if (activeDynamicWeekdays && activeDynamicWeekdays.indexOf(jsDow) === -1) {\n                                    btn.disabled = true;\n                                    btn.classList.add('sb-date-disallowed-weekday');\n                                } else if (dateOnly && Array.isArray(timesForDate) && timesForDate.length > 0) {\n                                    btn.disabled = true;\n                                    btn.classList.add('sb-date-booked');\n                                } else if (allowedDates && allowedDates.indexOf(iso) === -1) {\n                                    btn.disabled = true;\n                                    btn.classList.add('sb-date-disallowed-weekday');\n                                } else if (allowedWeekdays && allowedWeekdays.indexOf(jsDow) === -1) {\n                                    btn.disabled = true;\n                                    btn.classList.add('sb-date-disallowed-weekday');\n                                }\n\n                                if (iso === todayIso && !btn.disabled) {\n                                    btn.classList.add('sb-date-today');\n                                }\n                                if (iso === selectedDate && !btn.disabled) {\n                                    btn.dataset.selected = 'true';\n                                    btn.classList.remove('sb-date-today');\n                                    btn.classList.add('bg-gray-900', 'text-white', 'font-semibold');\n                                }\n\n                                btn.addEventListener('click', function () {\n                                    if (this.disabled) return;\n                                    const allButtons = root.querySelectorAll('.sb-date-btn');\n                                    allButtons.forEach(b => {\n                                        b.dataset.selected = 'false';\n                                        b.classList.remove('bg-gray-900', 'text-white', 'font-semibold');\n                                        if (b.getAttribute('data-sb-date') === todayIso) {\n                                            b.classList.add('sb-date-today');\n                                        } else {\n                                            b.classList.remove('sb-date-today');\n                                        }\n                                    });\n\n                                    this.dataset.selected = 'true';\n                                    this.classList.remove('sb-date-today');\n                                    this.classList.add('bg-gray-900', 'text-white', 'font-semibold');\n\n                                    selectedDate = this.getAttribute('data-sb-date');\n                                    selectedWeekdayLabel = this.getAttribute('data-sb-weekday');\n                                    selectedDateLabel = this.getAttribute('data-sb-label');\n\n                                    if (weekdayEl && selectedWeekdayLabel) {\n                                        weekdayEl.textContent = selectedWeekdayLabel;\n                                    }\n                                    if (dateLabelEl && selectedDateLabel) {\n                                        dateLabelEl.textContent = selectedDateLabel;\n                                    }\n                                    if (!dateOnly) {\n                                        renderTimeSlotsForDate(selectedDate);\n                                    } else if (nextButton) {\n                                        nextButton.disabled = false;\n                                        nextButton.classList.remove('opacity-50', 'cursor-not-allowed');\n                                    }\n                                });\n\n                                calendarGrid.appendChild(btn);\n                            }\n\n                            calendarGrid.setAttribute('data-year', String(year));\n                            calendarGrid.setAttribute('data-month', String(month));\n                        }\n\n                        \/\/ Ansicht umschalten: Kalender + Zeiten <-> nur Zeiten (Liste)\n                        if (viewToggle && !dateOnly) {\n                            let listMode = false;\n                            viewToggle.addEventListener('click', function() {\n                                listMode = !listMode;\n                                if (listMode) {\n                                    root.classList.add('sb-view-list');\n                                } else {\n                                    root.classList.remove('sb-view-list');\n                                }\n                            });\n                        }\n\n                        if (calendarGrid) {\n                            const year = parseInt(calendarGrid.getAttribute('data-year') || '2026', 10);\n                            const month = parseInt(calendarGrid.getAttribute('data-month') || '5', 10);\n                            renderCalendar(year, month);\n                            if (!dateOnly) {\n                                renderTimeSlotsForDate(selectedDate);\n                            }\n\n                            const prevBtn = root.querySelectorAll('.flex.items-center.space-x-1.text-gray-400 button')[0];\n                            const nextBtn = root.querySelectorAll('.flex.items-center.space-x-1.text-gray-400 button')[1];\n\n                            if (prevBtn && nextBtn) {\n                                prevBtn.addEventListener('click', function() {\n                                    let y = parseInt(calendarGrid.getAttribute('data-year'), 10);\n                                    let m = parseInt(calendarGrid.getAttribute('data-month'), 10);\n                                    m -= 1;\n                                    if (m < 1) {\n                                        m = 12;\n                                        y -= 1;\n                                    }\n                                    renderCalendar(y, m);\n                                });\n                                nextBtn.addEventListener('click', function() {\n                                    let y = parseInt(calendarGrid.getAttribute('data-year'), 10);\n                                    let m = parseInt(calendarGrid.getAttribute('data-month'), 10);\n                                    m += 1;\n                                    if (m > 12) {\n                                        m = 1;\n                                        y += 1;\n                                    }\n                                    renderCalendar(y, m);\n                                });\n                            }\n                        }\n                        refreshBlockedSlotsFromServer();\n\n                        function onDynamicSelectionChanged() {\n                                resolveDynamicAvailability();\n                                if (calendarGrid) {\n                                    const year = parseInt(calendarGrid.getAttribute('data-year') || '2026', 10);\n                                    const month = parseInt(calendarGrid.getAttribute('data-month') || '5', 10);\n                                    renderCalendar(year, month);\n                                }\n                                if (!dateOnly) {\n                                    renderTimeSlotsForDate(selectedDate);\n                                }\n                                if (nextButton) {\n                                    nextButton.disabled = true;\n                                    nextButton.classList.add('opacity-50', 'cursor-not-allowed');\n                                }\n                        }\n                        if (dynamicSelectControl) {\n                            dynamicSelectControl.addEventListener('change', onDynamicSelectionChanged);\n                        }\n                        if (dynamicSelectFallback) {\n                            dynamicSelectFallback.addEventListener('change', onDynamicSelectionChanged);\n                        }\n\n                        \/\/ Zeit-Auswahl (Delegation: Slots werden bei Datumswechsel neu gerendert)\n                        if (!dateOnly) {\n                            root.addEventListener('click', function(ev) {\n                                const btn = ev.target.closest('.sb-time-btn');\n                                if (!btn || !root.contains(btn)) {\n                                    return;\n                                }\n                                if (btn.disabled) {\n                                    return;\n                                }\n                                root.querySelectorAll('.sb-time-btn').forEach(function(b) {\n                                    b.dataset.selected = 'false';\n                                });\n                                btn.dataset.selected = 'true';\n                                selectedTime = btn.getAttribute('data-sb-time');\n                                if (nextButton) {\n                                    nextButton.disabled = false;\n                                    nextButton.classList.remove('opacity-50', 'cursor-not-allowed');\n                                }\n                            });\n                        } else if (nextButton) {\n                            const canProceedDateOnly = !(dynamicSelectControl || dynamicSelectFallback) || (activeDynamicWeekdays && activeDynamicWeekdays.length > 0);\n                            nextButton.disabled = !canProceedDateOnly;\n                            if (canProceedDateOnly) {\n                                nextButton.classList.remove('opacity-50', 'cursor-not-allowed');\n                            } else {\n                                nextButton.classList.add('opacity-50', 'cursor-not-allowed');\n                            }\n                        }\n\n                        applyBookedStateToTimeButtons();\n\n                        \/\/ Schrittwechsel (alles innerhalb dieses .simplebooker-wrapper \u2013 mehrere Shortcodes pro Seite)\n                        const stepsRoot = root.querySelector('.sb-steps-wrap') || root;\n                        const step1 = root.querySelector('.sb-card-outer');\n                        const step2 = stepsRoot.querySelector('.sb-step-2');\n                        const step3 = stepsRoot.querySelector('.sb-step-3');\n                        const form = stepsRoot.querySelector('form.sb-booking-form');\n                        const dateField = form ? form.querySelector('input[name=\"date\"]') : null;\n                        const timeField = form ? form.querySelector('input[name=\"time\"]') : null;\n                        const dynamicHiddenField = form ? form.querySelector('[data-sb-dynamic-hidden=\"1\"]') : null;\n                        const backButtons = root.querySelectorAll('.sb-back-to-step1');\n\n                        if (nextButton && step1 && step2 && form && dateField && timeField) {\n                            nextButton.addEventListener('click', function() {\n                                if (dynamicSelectControl && !String(dynamicSelectControl.value || '').trim()) {\n                                    alert('Bitte zuerst eine Auswahl treffen.');\n                                    return;\n                                }\n                                if (!selectedDate) {\n                                    alert('Bitte Datum ausw\u00e4hlen.');\n                                    return;\n                                }\n                                if (!dateOnly && !selectedTime) {\n                                    alert('Bitte Datum und Uhrzeit ausw\u00e4hlen.');\n                                    return;\n                                }\n                                dateField.value = selectedDate;\n                                timeField.value = dateOnly ? '' : selectedTime;\n                                if (dynamicHiddenField) {\n                                    const dynVal = dynamicSelectControl\n                                        ? String(dynamicSelectControl.value || '').trim()\n                                        : (dynamicSelectFallback ? String(dynamicSelectFallback.value || '').trim() : '');\n                                    dynamicHiddenField.value = dynVal;\n                                }\n                                step1.classList.add('hidden');\n                                step2.classList.remove('hidden');\n                                step3.classList.add('hidden');\n                                requestAnimationFrame(function() {\n                                    if (step2 && typeof step2.scrollIntoView === 'function') {\n                                        try {\n                                            step2.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });\n                                        } catch (err) {\n                                            var rect = step2.getBoundingClientRect();\n                                            var y = rect.top + window.pageYOffset - 16;\n                                            window.scrollTo(0, Math.max(0, y));\n                                        }\n                                    }\n                                });\n                            });\n                        }\n\n                        backButtons.forEach(btn => {\n                            btn.addEventListener('click', function() {\n                                step1.classList.remove('hidden');\n                                step2.classList.add('hidden');\n                                step3.classList.add('hidden');\n                            });\n                        });\n\n                        \/\/ AJAX Formular\n                        if (form) {\n                            let sbSubmitting = false;\n                            form.addEventListener('submit', function(e) {\n                                e.preventDefault();\n                                if (sbSubmitting) {\n                                    return;\n                                }\n                                const ajaxUrl = 'https:\/\/eliasschultze.de\/wp-admin\/admin-ajax.php';\n                                const initialNonce = 'de919ddced';\n                                const submitBtn = form.querySelector('button[type=\"submit\"]');\n                                const originalBtnHtml = submitBtn ? submitBtn.innerHTML : '';\n\n                                function setSubmittingState(on) {\n                                    sbSubmitting = !!on;\n                                    if (!submitBtn) return;\n                                    submitBtn.disabled = !!on;\n                                    submitBtn.classList.toggle('opacity-60', !!on);\n                                    submitBtn.classList.toggle('cursor-not-allowed', !!on);\n                                    if (on) {\n                                        submitBtn.innerHTML = 'Wird gesendet\u2026';\n                                    } else {\n                                        submitBtn.innerHTML = originalBtnHtml;\n                                    }\n                                }\n\n                                function fetchFreshNonce() {\n                                    const nonceData = new FormData();\n                                    nonceData.append('action', 'simple_booker_get_nonce');\n                                    return fetch(ajaxUrl, { method: 'POST', body: nonceData })\n                                        .then(function(r){ return r.json(); })\n                                        .then(function(d){\n                                            if (d && d.success && d.data && d.data.nonce) {\n                                                return String(d.data.nonce);\n                                            }\n                                            throw new Error('nonce');\n                                        });\n                                }\n\n                                function handleSubmitSuccess() {\n                                    const isRescheduleFlow = !!form.querySelector('input[name=\"reschedule_token\"]');\n                                    form.reset();\n                                    step1.classList.add('hidden');\n                                    step2.classList.add('hidden');\n                                    step3.classList.remove('hidden');\n                                    setSubmittingState(false);\n                                    const details = step3.querySelector('.sb-confirmation-details');\n                                    if (details && selectedDateLabel) {\n                                        if (isRescheduleFlow && dateOnly) {\n                                            details.textContent = 'Dein Termin am ' + selectedDateLabel + ' wurde umgebucht. Du erh\u00e4ltst in K\u00fcrze eine E-Mail-Best\u00e4tigung.';\n                                        } else if (isRescheduleFlow && selectedTime) {\n                                            details.textContent = 'Dein Termin am ' + selectedDateLabel + ' um ' + selectedTime + ' wurde umgebucht. Du erh\u00e4ltst in K\u00fcrze eine E-Mail-Best\u00e4tigung.';\n                                        } else if (dateOnly) {\n                                            details.textContent = 'Dein Termin am ' + selectedDateLabel + ' wurde angefragt. Du erh\u00e4ltst in K\u00fcrze eine E-Mail-Best\u00e4tigung.';\n                                        } else if (selectedTime) {\n                                            details.textContent = 'Dein Termin am ' + selectedDateLabel + ' um ' + selectedTime + ' wurde angefragt. Du erh\u00e4ltst in K\u00fcrze eine E-Mail-Best\u00e4tigung.';\n                                        }\n                                    }\n                                }\n\n                                function submitBookingWithNonce(nonceValue, allowRetry) {\n                                    const formData = new FormData(form);\n                                    formData.append('action', 'simple_booker_submit');\n                                    formData.append('nonce', nonceValue);\n                                    formData.append('sb_return_url', window.location.href.split('#')[0]);\n\n                                    return fetch(ajaxUrl, {\n                                        method: 'POST',\n                                        body: formData\n                                    }).then(function(response){ return response.json(); })\n                                      .then(function(data){\n                                          if (data && data.success) {\n                                              const paymentRequired = !!(data.data && Number(data.data.payment_required) === 1);\n                                              const paymentUrl = data.data && data.data.payment_url ? String(data.data.payment_url) : '';\n                                              if (paymentRequired && paymentUrl) {\n                                                  window.location.href = paymentUrl;\n                                                  return;\n                                              }\n                                              handleSubmitSuccess();\n                                              return;\n                                          }\n                                          const msg = (data && data.data) ? String(data.data) : 'Es ist ein Fehler aufgetreten.';\n                                          if (allowRetry && msg.indexOf('Ung\u00fcltige Anfrage') !== -1) {\n                                              return fetchFreshNonce().then(function(freshNonce){\n                                                  return submitBookingWithNonce(freshNonce, false);\n                                              }).catch(function(){\n                                                  setSubmittingState(false);\n                                                  alert(msg);\n                                              });\n                                          }\n                                          setSubmittingState(false);\n                                          alert(msg);\n                                      }).catch(function(){\n                                          setSubmittingState(false);\n                                          alert('Es ist ein Fehler aufgetreten.');\n                                      });\n                                }\n\n                                setSubmittingState(true);\n                                submitBookingWithNonce(initialNonce, true);\n                            });\n                        }\n                    })();\n                <\/script>\n            <\/div>\n\n            \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 &#038; mehr.<\/p>\n\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n                    <\/a>\n                    <a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <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 Kontakt Kostenloses Erstgespr\u00e4ch DE EN Instagram \u2924 Studio Expertise Cases DE EN Let&#8217;s talk Premium Webdesign &#038;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 Eberbach, Mosbach, [&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":141,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1889\/revisions"}],"predecessor-version":[{"id":2505,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1889\/revisions\/2505"}],"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}]}}