{"id":1894,"date":"2026-03-13T22:07:04","date_gmt":"2026-03-13T22:07:04","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=1894"},"modified":"2026-04-15T20:35:19","modified_gmt":"2026-04-15T20:35:19","slug":"webdesign-expertise","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/webdesign-expertise\/","title":{"rendered":"Webdesign Expertise"},"content":{"rendered":"\n<!--\n  HEADER F\u00dcR EXPERTISE-SEITE \u2013 wie header-snippet, aber Expertise in der Nav unterstrichen\/markiert (active)\n  F\u00fcr WordPress: Als Custom-HTML-Block auf der Expertise-Seite einf\u00fcgen (oberhalb des Seiteninhalts).\n  Enth\u00e4lt: Skip-Link, Mobile Nav, Desktop-Header, Burger, Suche, DE\/EN, CSS + JS.\n-->\n\n<style>\n\/* ===================== VARIABLEN & BASIS (f\u00fcr Header) ===================== *\/\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --mint: #a8dadc;\n    --text-muted: #66768f;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n\/* ===================== HEADER ===================== *\/\nheader {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    padding: 20px 0;\n    z-index: 500;\n    background: var(--weiss);\n    border-bottom: 1px solid rgba(30,58,95,0.06);\n}\n.nav-inner {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n    min-height: 52px;\n}\n.nav-inner .logo { flex-shrink: 0; z-index: 700; }\n.nav-inner .nav-links {\n    position: absolute;\n    left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    list-style: none;\n}\n.nav-inner .nav-right-group { flex-shrink: 0; display: flex; align-items: center; gap: 0; z-index: 700; }\n\n.logo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--marineblau); display: flex; align-items: center; }\n.logo a { color: inherit; }\n.logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n.nav-links { font-size: 15px; font-weight: 400; }\n.nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n.nav-links a:hover,\n.nav-links a.active { color: var(--marineblau); text-decoration: underline; text-decoration-color: var(--koralle); text-underline-position: under; }\n\n.btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n.btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white; }\n\n.nav-right { display: flex; align-items: center; gap: 0; }\n.nav-utils { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(30,58,95,0.12); }\n\n.nav-search { display: flex; align-items: center; flex-direction: row-reverse; }\n.nav-search-trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; }\n.nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n.nav-search-trigger svg { width: 20px; height: 20px; }\n.nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; }\n.nav-search.is-open .nav-search-input-wrap { width: 200px; min-width: 200px; opacity: 1; }\n.nav-search-input-wrap input { width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2); border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau); background: var(--weiss); box-sizing: border-box; }\n.nav-search-input-wrap input:focus { outline: none; border-color: var(--marineblau); }\n.nav-search-input-wrap input::placeholder { color: var(--text-muted); }\n\n.nav-lang { display: flex; align-items: center; background: rgba(30,58,95,0.06); border-radius: 100px; padding: 4px; gap: 2px; }\n.nav-lang a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: 100px; transition: color 0.2s ease, background 0.2s ease; }\n.nav-lang a:hover { color: var(--marineblau); }\n.nav-lang a.active { color: var(--marineblau); background: var(--weiss); box-shadow: 0 1px 3px rgba(30,58,95,0.08); }\n\na:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marineblau); outline-offset: 2px; }\n\n.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--marineblau); color: var(--weiss); font-size: 14px; font-weight: 500; border-radius: 8px; transition: top 0.2s ease; }\n.skip-link:focus { top: 16px; }\n\n\/* ===================== BURGER ===================== *\/\n.es-burger {\n    display: none;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 44px; height: 44px;\n    background: none; border: none;\n    cursor: pointer;\n    z-index: 700;\n    padding: 0; flex-shrink: 0;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-burger-box { position: relative; width: 24px; height: 16px; }\n.es-burger-box span {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 24px; height: 2px;\n    background: var(--marineblau);\n    border-radius: 2px;\n    transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, opacity 0.2s ease;\n}\n.es-burger-box span:nth-child(1) { top: 0; }\n.es-burger-box span:nth-child(2) { top: 7px; }\n.es-burger-box span:nth-child(3) { top: 14px; }\n.es-burger.is-open .es-burger-box span {\n    background: var(--weiss);\n    transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, opacity 0.2s ease;\n}\n.es-burger.is-open .es-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }\n.es-burger.is-open .es-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.es-burger.is-open .es-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }\n\n\/* ===================== FULLSCREEN OVERLAY ===================== *\/\n.es-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 600;\n    background: var(--marineblau);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 100px 10vw 60px;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-20px);\n    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;\n}\n.es-mobile-overlay.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n.es-mobile-overlay::before {\n    content: 'es.';\n    position: absolute;\n    right: 5vw; bottom: -0.05em;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(120px, 25vw, 220px);\n    font-weight: 700;\n    color: rgba(255,255,255,0.04);\n    line-height: 1;\n    pointer-events: none;\n    letter-spacing: -0.04em;\n    user-select: none;\n}\n.es-overlay-close {\n    position: absolute;\n    top: 24px; right: 5vw;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px; height: 44px;\n    background: rgba(255,255,255,0.12);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--weiss);\n    transition: background 0.25s ease, transform 0.25s ease;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-overlay-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }\n.es-overlay-close svg { width: 20px; height: 20px; }\n\n.es-mobile-nav { list-style: none; width: 100%; }\n.es-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav a {\n    display: block;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(36px, 8vw, 64px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.9);\n    letter-spacing: -0.03em;\n    padding: 20px 0; line-height: 1;\n    transform: translateY(40px); opacity: 0;\n    transition: color 0.25s ease, padding-left 0.3s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s ease;\n}\n.es-mobile-overlay.is-open .es-mobile-nav a { transform: translateY(0); opacity: 1; }\n.es-mobile-nav li:nth-child(1) a { transition-delay: 0.1s; }\n.es-mobile-nav li:nth-child(2) a { transition-delay: 0.18s; }\n.es-mobile-nav li:nth-child(3) a { transition-delay: 0.26s; }\n.es-mobile-nav li:nth-child(4) a { transition-delay: 0.34s; }\n.es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n.es-mobile-nav a.active { color: var(--koralle); }\n\n.es-mobile-cta { margin-top: 48px; transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out) 0.42s, opacity 0.5s ease 0.42s; }\n.es-mobile-overlay.is-open .es-mobile-cta { transform: translateY(0); opacity: 1; }\n.es-mobile-cta a { display: inline-block; background: var(--koralle); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 18px 44px; border-radius: 100px; transition: background 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(246,114,128,0.25); }\n.es-mobile-cta a:hover { background: var(--koralle-hover); transform: translateY(-2px); }\n\n.es-mobile-footer { position: absolute; bottom: 40px; left: 10vw; right: 10vw; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; }\n.es-mobile-overlay.is-open .es-mobile-footer { opacity: 1; transform: translateY(0); }\n.es-mobile-lang { display: flex; gap: 16px; }\n.es-mobile-lang a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s ease; }\n.es-mobile-lang a.active, .es-mobile-lang a:hover { color: rgba(255,255,255,0.9); }\n.es-mobile-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s ease; }\n.es-mobile-social a:hover { color: rgba(255,255,255,0.9); }\n\nbody.es-nav-open { overflow: hidden; }\n\n\/* ===================== RESPONSIVE (Header) ===================== *\/\n@media (max-width: 900px) {\n    .nav-inner .nav-links,\n    .nav-inner .nav-right { display: none !important; }\n    .es-burger { display: flex; }\n}\n<\/style>\n\n<a href=\"#main\" class=\"skip-link\">Zum Inhalt springen<\/a>\n\n<!-- ========== MOBILE NAV \u2013 Expertise aktiv (Koralle) ========== -->\n<div class=\"es-mobile-overlay\" id=\"es-mobile-overlay\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Navigation\">\n    <button type=\"button\" class=\"es-overlay-close\" id=\"es-overlay-close\" aria-label=\"Men\u00fc schlie\u00dfen\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"\/>\n        <\/svg>\n    <\/button>\n    <nav aria-label=\"Mobile Navigation\">\n        <ul class=\"es-mobile-nav\">\n            <li><a href=\"\/webdesigner-mosbach\/\" class=\"es-mobile-link\">Studio<\/a><\/li>\n            <li><a href=\"\/webdesign-expertise\/\" class=\"es-mobile-link active\">Expertise<\/a><\/li>\n            <li><a href=\"\/webdesign-referenzen\/\" class=\"es-mobile-link\">Cases<\/a><\/li>\n        <\/ul>\n        <div class=\"es-mobile-cta\">\n            <a href=\"\/#kontakt\" class=\"es-mobile-link\">Kostenloses Erstgespr\u00e4ch<\/a>\n        <\/div>\n    <\/nav>\n    <div class=\"es-mobile-footer\">\n        <div class=\"es-mobile-lang\">\n            <a href=\"\/webdesign-expertise\/\" class=\"active\" hreflang=\"de\">DE<\/a>\n            <a href=\"\/en\/expertise\/\" hreflang=\"en\">EN<\/a>\n        <\/div>\n        <div class=\"es-mobile-social\">\n            <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram \u2924<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<header id=\"header\" class=\"header\" role=\"banner\">\n    <div class=\"es-container nav-inner\">\n        <a href=\"\/\" class=\"logo\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2025\/12\/Logo_mit_Kontur_Wortbildmarke-scaled.webp\" alt=\"es.design \u2013 Startseite\" width=\"180\" height=\"36\" title=\"| Elias Schultze\">\n        <\/a>\n        <nav class=\"nav-links\" aria-label=\"Hauptnavigation\">\n            <a href=\"\/webdesigner-mosbach\/\">Studio<\/a>\n            <a href=\"\/webdesign-expertise\/\" class=\"active\" aria-current=\"page\">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=\"\/webdesign-expertise\/\" class=\"active\" hreflang=\"de\" lang=\"de\">DE<\/a>\n                        <a href=\"\/en\/expertise\/\" hreflang=\"en\" lang=\"en\">EN<\/a>\n                    <\/div>\n                <\/div>\n                <a href=\"\/#kontakt\" class=\"btn-outline\">Let&#8217;s talk<\/a>\n            <\/div>\n            <button type=\"button\" class=\"es-burger\" id=\"es-burger\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"es-mobile-overlay\">\n                <div class=\"es-burger-box\">\n                    <span><\/span>\n                    <span><\/span>\n                    <span><\/span>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/header>\n\n<script>\n(function() {\n    'use strict';\n    var burger   = document.getElementById('es-burger');\n    var overlay  = document.getElementById('es-mobile-overlay');\n    var closeBtn = document.getElementById('es-overlay-close');\n    var mobileLinks = document.querySelectorAll('.es-mobile-link');\n\n    if (burger && overlay) {\n        var menuOpen = false;\n        function openNav() {\n            menuOpen = true;\n            burger.classList.add('is-open');\n            overlay.classList.add('is-open');\n            overlay.setAttribute('aria-hidden', 'false');\n            burger.setAttribute('aria-expanded', 'true');\n            burger.setAttribute('aria-label', 'Men\u00fc schlie\u00dfen');\n            document.body.classList.add('es-nav-open');\n        }\n        function closeNav() {\n            menuOpen = false;\n            burger.classList.remove('is-open');\n            overlay.classList.remove('is-open');\n            overlay.setAttribute('aria-hidden', 'true');\n            burger.setAttribute('aria-expanded', 'false');\n            burger.setAttribute('aria-label', 'Men\u00fc \u00f6ffnen');\n            document.body.classList.remove('es-nav-open');\n        }\n        burger.addEventListener('click', function(e) { e.stopPropagation(); menuOpen ? closeNav() : openNav(); });\n        if (closeBtn) closeBtn.addEventListener('click', function(e) { e.stopPropagation(); closeNav(); });\n        mobileLinks.forEach(function(link) { link.addEventListener('click', closeNav); });\n        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && menuOpen) closeNav(); });\n        window.addEventListener('resize', function() { if (window.innerWidth > 900 && menuOpen) closeNav(); });\n    }\n\n    var searchWrap = document.getElementById('nav-search-wrap');\n    var searchTrigger = document.getElementById('nav-search-trigger');\n    var searchForm = document.getElementById('nav-search-form');\n    var searchInput = document.getElementById('nav-search-input');\n    if (searchWrap && searchTrigger && searchForm && searchInput) {\n        searchTrigger.addEventListener('click', function() {\n            searchWrap.classList.toggle('is-open');\n            if (searchWrap.classList.contains('is-open')) searchInput.focus();\n        });\n        searchInput.addEventListener('blur', function() {\n            setTimeout(function() { searchWrap.classList.remove('is-open'); }, 450);\n        });\n        searchForm.addEventListener('submit', function(e) { e.preventDefault(); });\n    }\n\n    function init() {\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n            return;\n        }\n    }\n    init();\n})();\n<\/script>\n\n\n\n<style>\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --koralle-accessible: #c44d5b;\n    --text-muted: #5a6178;\n    --mint: #a8dadc;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\nh1, h2, h3, h4 {\n    font-family: 'Outfit', sans-serif;\n    font-weight: 300;\n    line-height: 1.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\n.hero-services {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    min-height: 85vh;\n    padding-top: 93px;\n    overflow: hidden;\n}\n.hero-services-text {\n    background: var(--hellgrau);\n    padding: 80px 5vw 80px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.hero-services .eyebrow {\n    display: block;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: var(--koralle);\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 24px;\n}\n.hero-services h1 {\n    font-size: clamp(2.5rem, 4vw, 4.5rem);\n    margin-bottom: 28px;\n    color: var(--marineblau);\n    line-height: 1.1;\n    text-align: left;\n}\n.hero-services h1 span {\n    font-weight: 500;\n    display: inline;\n    padding-bottom: 2px;\n    background: linear-gradient(to top, rgba(168, 218, 220, 0.5) 0%, rgba(168, 218, 220, 0.5) 10px, transparent 10px);\n    background-size: 100% 14px;\n    background-position: 0 calc(100% - 15px);\n    background-repeat: no-repeat;\n    -webkit-box-decoration-break: clone;\n    box-decoration-break: clone;\n    border-radius: 3px;\n}\n.hero-services-text p {\n    font-size: clamp(16px, 1.4vw, 18px);\n    color: var(--text-muted);\n    max-width: 520px;\n    line-height: 1.7;\n    text-align: left;\n}\n.hero-services-image {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 400px;\n    overflow: hidden;\n}\n.hero-services-image img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n}\n\n.services-showcase { padding: 80px 0 150px; }\n.srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }\n.srv-card {\n    background: var(--hellgrau);\n    border: 1px solid rgba(30, 58, 95, 0.05);\n    border-radius: 32px;\n    padding: 64px 48px;\n    position: relative;\n    transition: all 0.5s var(--ease-out);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n.srv-card:hover {\n    background: var(--weiss);\n    transform: translateY(-8px);\n    box-shadow: 0 30px 60px rgba(30, 58, 95, 0.08);\n    border-color: rgba(30, 58, 95, 0.1);\n}\n.srv-num {\n    font-family: 'Outfit', sans-serif;\n    font-size: 80px;\n    font-weight: 200;\n    line-height: 1;\n    color: var(--mint);\n    opacity: 0.5;\n    margin-bottom: 32px;\n    transition: opacity 0.3s ease, color 0.3s ease;\n}\n.srv-card:hover .srv-num { opacity: 1; color: var(--koralle); }\n.srv-card h3 { font-size: 32px; font-weight: 500; margin-bottom: 24px; }\n.srv-card p { font-size: 18px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.7; flex-grow: 1; }\n.srv-list { list-style: none; border-top: 1px solid rgba(30, 58, 95, 0.1); padding-top: 32px; }\n.srv-list li {\n    position: relative;\n    padding-left: 32px;\n    margin-bottom: 16px;\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--marineblau);\n}\n.srv-list li:last-child { margin-bottom: 0; }\n.srv-list li::before {\n    content: '\u2192';\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--koralle);\n    font-family: 'Outfit', sans-serif;\n    font-size: 20px;\n    line-height: 1.5;\n    transition: transform 0.3s ease;\n}\n.srv-card:hover .srv-list li::before { transform: translateX(4px); }\n\n.why-us {\n    padding: 150px 0;\n    background-color: var(--marineblau);\n    color: var(--weiss);\n    border-radius: 40px;\n    margin: 0 2vw;\n}\n.why-us h2 {\n    font-size: clamp(2.5rem, 4vw, 4rem);\n    margin-bottom: 80px;\n    text-align: center;\n}\n.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 40px; }\n.why-card h3 { font-size: 24px; font-weight: 400; margin-bottom: 16px; margin-top: 24px; }\n.why-card p { font-size: 16px; color: rgba(255, 255, 255, 0.7); 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.local-seo { padding: 150px 0 80px; text-align: center; }\n.local-seo h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 24px; }\n.local-seo p { font-size: 20px; color: var(--text-muted); max-width: 600px; margin: 0 auto; }\n\n.local-seo-grid {\n    display: grid; \n    grid-template-columns: 1fr 500px; \n    gap: 60px; \n    align-items: stretch; \n    margin-bottom: 80px;\n}\n.local-seo-text {\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.local-seo-text h2 {\n    font-size: clamp(2rem, 3.5vw, 3rem); \n    margin-bottom: 32px; \n    text-align: left;\n}\n.local-seo-text p {\n    font-size: 20px; \n    color: var(--text-muted); \n    line-height: 1.7; \n    margin-bottom: 24px;\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 100%;\n    text-align: left;\n}\n.local-seo-text p:last-child {\n    margin-bottom: 0;\n}\n.local-seo-image {\n    position: relative; \n    height: 100%; \n    border-radius: 24px; \n    overflow: hidden; \n    box-shadow: 0 20px 60px rgba(30,58,95,0.1);\n    background: linear-gradient(135deg, var(--hellgrau) 0%, var(--mint) 100%);\n}\n.local-seo-image img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%; \n    height: 100%; \n    object-fit: cover;\n}\n\n.cta-box {\n    background: var(--hellgrau);\n    border-radius: 32px;\n    padding: 80px 40px;\n    text-align: center;\n    border: 1px solid rgba(30, 58, 95, 0.05);\n}\n.cta-box h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 24px; }\n.cta-box p {\n    font-size: 18px;\n    color: var(--text-muted);\n    margin-bottom: 40px;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.btn-primary {\n    background-color: var(--koralle-accessible);\n    color: var(--weiss);\n    font-size: 16px;\n    font-weight: 500;\n    padding: 20px 48px;\n    border-radius: 100px;\n    display: inline-block;\n    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);\n    border: none;\n    cursor: pointer;\n    box-shadow: 0 10px 30px rgba(246, 114, 128, 0.2);\n}\n.btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 15px 40px rgba(246, 114, 128, 0.3);\n    background-color: var(--koralle-hover);\n}\n.contact-info { display: flex; justify-content: center; gap: 40px; margin-top: 48px; flex-wrap: wrap; }\n.contact-item {\n    font-size: 16px;\n    color: var(--marineblau);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.contact-item svg { width: 20px; height: 20px; color: var(--koralle); }\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); margin-top: 80px; }\n.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px 32px; margin-bottom: 48px; }\n.footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }\n.footer-brand .footer-logo img { height: 44px; width: auto; display: block; }\n.footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 280px; margin-bottom: 24px; }\n.footer-search-form { display: flex; align-items: stretch; max-width: 280px; margin-bottom: 24px; }\n.footer-search-form input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.25); border-right: none; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.95); font-size: 14px; font-family: inherit; color: var(--marineblau); }\n.footer-search-form input::placeholder { color: var(--text-muted); }\n.footer-search-form button { width: 44px; background: var(--mint); border: none; border-radius: 0 8px 8px 0; color: var(--marineblau); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-search-form button:hover { background: #8fcacd; }\n.footer-search-form button svg { width: 18px; height: 18px; }\n.footer-social { display: flex; gap: 10px; }\n.footer-social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-social a:hover { background: rgba(255,255,255,0.2); }\n.footer-social a svg { width: 18px; height: 18px; }\n.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }\n.footer-col ul { list-style: none; }\n.footer-col ul li { margin-bottom: 10px; }\n.footer-col a { font-size: 15px; color: rgba(255,255,255,0.9); transition: color 0.2s ease; }\n.footer-col a:hover { color: var(--weiss); }\n.footer-col p { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }\n.footer-col p a { color: inherit; }\n.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }\n\n.scroll-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }\n.scroll-in.scroll-in--visible { opacity: 1; transform: translateY(0); }\n.delay-1 { transition-delay: 0.1s; }\n.delay-2 { transition-delay: 0.2s; }\n.delay-3 { transition-delay: 0.3s; }\n\n@media (max-width: 900px) {\n    .srv-grid, .why-grid { grid-template-columns: 1fr; gap: 40px; }\n    .srv-card { padding: 40px 32px; }\n    .why-us { margin: 0; border-radius: 0; padding: 100px 5vw; }\n    .hero-services {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto auto;\n        min-height: auto;\n        padding-top: 72px;\n    }\n    .hero-services-text { order: 2; padding: 60px 5vw 80px; text-align: center; }\n    .hero-services h1 { text-align: center; }\n    .hero-services-text p { margin-left: auto; margin-right: auto; text-align: center; }\n    .hero-services-image { order: 1; min-height: 50vh; }\n    \n    .local-seo-grid {\n        grid-template-columns: 1fr;\n        gap: 40px;\n    }\n    .local-seo-text h2, .local-seo-text p {\n        text-align: center;\n    }\n    .local-seo-text p {\n        font-size: 16px;\n    }\n    .local-seo-image {\n        height: 300px;\n    }\n\n    .contact-info { flex-direction: column; gap: 16px; align-items: center; }\n    .cta-box { padding: 56px 24px; }\n    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n}\n@media (max-width: 768px) {\n    .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n}\n<\/style>\n\n<main id=\"main\" role=\"main\">\n    <section class=\"hero-services\">\n        <div class=\"hero-services-text\">\n            <span class=\"eyebrow scroll-in\">Webdesign Expertise &#038; Strategie<\/span>\n            <h1 class=\"scroll-in delay-1\">Wir verwandeln Ihre digitale Vision in <span>messbaren Erfolg<\/span><\/h1>\n            <p class=\"scroll-in delay-2\">Wahre <strong>Webdesign Expertise<\/strong> verbindet \u00c4sthetik mit Verkaufspsychologie. Als Full-Service-Partner f\u00fcr digitale Strategie in Mosbach und dem Odenwald entwickle ich Websites, die Ihre Marke st\u00e4rken und Besucher in loyale Kunden verwandeln. Wir setzen auf Performance, Design und messbare Ergebnisse.<\/p>\n        <\/div>\n        <div class=\"hero-services-image\">\n            <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/side-view-smiley-woman-work-scaled.jpg\" alt=\"Professionelle Webdesign Expertise von Elias Schultze\" width=\"1080\" height=\"720\" fetchpriority=\"high\" title=\"| Elias Schultze\">\n        <\/div>\n    <\/section>\n\n    <section id=\"leistungen\" class=\"services-showcase\">\n        <div class=\"es-container srv-grid\">\n            <div class=\"srv-card scroll-in\">\n                <div>\n                    <div class=\"srv-num\">01<\/div>\n                    <h3>Strategie &#038; Beratung<\/h3>\n                    <p>Ein starkes Fundament ist die Basis jeder Webdesign Expertise. Wir analysieren Wettbewerber und Nutzerbed\u00fcrfnisse im Odenwald und deutschlandweit, um eine nachhaltige digitale Strategie zu entwickeln, die Ihre Marke klar positioniert und Conversion-Pfade optimiert.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Wettbewerbsanalyse &#038; Audit<\/li>\n                    <li>Nutzerf\u00fchrung (UX-Konzept)<\/li>\n                    <li>Markenpositionierung &#038; Branding<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in delay-1\">\n                <div>\n                    <div class=\"srv-num\">02<\/div>\n                    <h3>High-End UI\/UX Design<\/h3>\n                    <p>Meine <strong>UI\/UX Design Expertise<\/strong> garantiert digitale Erlebnisse, die intuitiv begeistern. Wir gestalten individuelle Layouts nach dem Mobile-First-Prinzip, um auf jedem Endger\u00e4t eine perfekte User Experience zu gew\u00e4hrleisten \u2013 technisch brillant und optisch unverwechselbar.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Individuelles Layout-Design<\/li>\n                    <li>Mobile First Optimierung<\/li>\n                    <li>User Interface (UI) Design<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in\">\n                <div>\n                    <div class=\"srv-num\">03<\/div>\n                    <h3>E-Commerce L\u00f6sungen<\/h3>\n                    <p>Skalierbarer Online-Handel erfordert technisches Know-how. Wir entwickeln leistungsstarke E-Commerce Plattformen, die durch schnelle Ladezeiten und eine optimierte Checkout-Experience bestechen. So steigern wir nachhaltig Ihren Umsatz durch strategisches Webdesign.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Anbindung moderner Zahlsysteme<\/li>\n                    <li>Conversion-Rate-Optimierung<\/li>\n                    <li>Skalierbare Shop-Architektur<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"srv-card scroll-in delay-1\">\n                <div>\n                    <div class=\"srv-num\">04<\/div>\n                    <h3>Individuelle Web-Apps<\/h3>\n                    <p>Wir digitalisieren komplexe Gesch\u00e4ftsprozesse durch ma\u00dfgeschneiderte Applikationen. Von Progressive Web Apps (PWA) bis hin zu individuellen API-Schnittstellen bieten wir die Expertise, um Ihre internen Abl\u00e4ufe effizienter und zukunftssicher zu gestalten.<\/p>\n                <\/div>\n                <ul class=\"srv-list\">\n                    <li>Native &#038; Cross-Platform Apps<\/li>\n                    <li>Progressive Web Apps (PWA)<\/li>\n                    <li>Individuelle Schnittstellen (API)<\/li>\n                <\/ul>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"why-us\">\n        <div class=\"es-container\">\n            <h2 class=\"scroll-in\">Warum Kunden auf meine Expertise vertrauen<\/h2>\n            <div class=\"why-grid\">\n                <div class=\"why-card scroll-in delay-1\">\n                    <div class=\"why-number\">01<\/div>\n                    <h3>Agilit\u00e4t &#038; Geschwindigkeit<\/h3>\n                    <p>Zeit ist Geld. Durch agiles Projektmanagement liefern wir hochwertige Web-Projekte ohne unn\u00f6tige Verz\u00f6gerungen. Perfekte Handwerkskunst trifft auf effiziente Workflows.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in delay-2\">\n                    <div class=\"why-number\">02<\/div>\n                    <h3>Senior Beratung<\/h3>\n                    <p>Keine anonymen Ticket-Systeme. Sie profitieren von direkter Kommunikation auf Augenh\u00f6he und einer pers\u00f6nlichen Betreuung, die Ihre Business-Ziele in den Fokus r\u00fcckt.<\/p>\n                <\/div>\n                <div class=\"why-card scroll-in delay-3\">\n                    <div class=\"why-number\">03<\/div>\n                    <h3>Nachhaltige Qualit\u00e4t<\/h3>\n                    <p>Jedes Detail z\u00e4hlt. Wir arbeiten mit Leidenschaft daran, dass Ihre Website nicht nur heute \u00fcberzeugt, sondern auch morgen technisch und optisch State-of-the-Art bleibt.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"kontakt\" class=\"local-seo\">\n        <div class=\"es-container\">\n            <div class=\"scroll-in\" style=\"margin-bottom: 80px;\">\n                <div class=\"local-seo-grid\">\n                    <div class=\"local-seo-text\">\n                        <h2>Ihr Partner f\u00fcr Webdesign in Mosbach &#038; dem Odenwald<\/h2>\n                        <p>\n                            Suchen Sie einen Experten f\u00fcr <strong>Webdesign Mosbach<\/strong>? Ich unterst\u00fctze Unternehmen in Waldbrunn, Mosbach und der gesamten Metropolregion Rhein-Neckar dabei, digital sichtbar zu werden. Meine <strong>Webdesign Expertise<\/strong> umfasst die Planung und Umsetzung von WordPress-Websites, die sowohl Suchmaschinen als auch Nutzer \u00fcberzeugen.\n                        <\/p>\n                        <p>\n                            Durch die Kombination aus lokalem Verst\u00e4ndnis und modernsten Web-Technologien schaffen wir digitale Werte, die Bestand haben. Ob E-Commerce-Shops, Corporate Sites oder Web-Apps \u2013 wir optimieren Ihre Seite f\u00fcr Top-Rankings bei Google und schnelle Ladezeiten. Lassen Sie uns gemeinsam Ihre digitale Erfolgsgeschichte im Odenwald starten.\n                        <\/p>\n                    <\/div>\n                    <div class=\"local-seo-image\">\n                        <img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Schultze_Elias_2-scaled.webp\" alt=\"Elias Schultze - Webdesign Experte f\u00fcr Mosbach\" loading=\"lazy\" title=\"| Elias Schultze\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"cta-box scroll-in delay-1\">\n                <h2>Bereit f\u00fcr ein erstklassiges Webprojekt?<\/h2>\n                <p>Nutzen Sie meine Webdesign Expertise f\u00fcr Ihren Erfolg. Lassen Sie uns in einem kostenlosen Erstgespr\u00e4ch \u00fcber Ihre Ziele und die passende digitale Strategie sprechen.<\/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-28\" 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 sb-date-past\"\n                                                     disabled                                                    >\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 sb-date-past\"\n                                                     disabled                                                    >\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 sb-date-past\"\n                                                     disabled                                                    >\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 bg-gray-900 text-white font-semibold\"\n                                                                                                         data-selected=\"true\">\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                                            Donnerstag                                        <\/div>\n                                        <div class=\"text-sm font-medium text-gray-900 sb-selected-date-label\">\n                                            28. 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-28';\n                        let selectedWeekdayLabel = 'Donnerstag';\n                        let selectedDateLabel = '28. 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-28';\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 = '861bcb6385';\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        <\/div>\n    <\/section>\n<\/main>\n\n<footer>\n    <div class=\"es-container\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-brand\">\n                <a href=\"\/\" class=\"footer-logo\"><img decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\" width=\"140\" height=\"44\" loading=\"lazy\" title=\"| Elias Schultze\"><\/a>\n                <p class=\"footer-tagline\">Webdesign und Entwicklung mit Leidenschaft aus dem sch\u00f6nen Odenwald. Beratung, Design, Social Media &#038; mehr.<\/p>\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\"><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><\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Navigation<\/h4>\n                <ul>\n                    <li><a href=\"\/\">Home<\/a><\/li>\n                    <li><a href=\"\/webdesigner-mosbach\/\">Studio<\/a><\/li>\n                    <li><a href=\"\/webdesign-expertise\/\">Expertise<\/a><\/li>\n                    <li><a href=\"\/webdesign-referenzen\/\">Cases<\/a><\/li>\n                    <li><a href=\"\/#kontakt\">Kontakt<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Rechtliches<\/h4>\n                <ul>\n                    <li><a href=\"\/impressum\/\">Impressum<\/a><\/li>\n                    <li><a href=\"\/datenschutz\/\">Datenschutz<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Kontakt<\/h4>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@es.design.de\">info@es.design.de<\/a><\/p>\n            <\/div>\n        <\/div>\n        <p class=\"footer-bottom\">\u00a9 2026 es.design | Elias Schultze. All rights reserved.<\/p>\n    <\/div>\n<\/footer>\n\n<script>\n(function() {\n    'use strict';\n    function init() {\n        var scrollElements = document.querySelectorAll('.scroll-in');\n        if ('IntersectionObserver' in window) {\n            var observer = new IntersectionObserver(function(entries) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) entry.target.classList.add('scroll-in--visible');\n                });\n            }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n            scrollElements.forEach(function(el) { observer.observe(el); });\n        } else {\n            scrollElements.forEach(function(el) { el.classList.add('scroll-in--visible'); });\n        }\n    }\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', init);\n    } else {\n        init();\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Zum Inhalt springen Studio Expertise Cases Kostenloses Erstgespr\u00e4ch DE EN Instagram \u2924 Studio Expertise Cases DE EN Let&#8217;s talk Webdesign Expertise &#038; Strategie Wir verwandeln Ihre digitale Vision in messbaren Erfolg Wahre Webdesign Expertise verbindet \u00c4sthetik mit Verkaufspsychologie. Als Full-Service-Partner f\u00fcr digitale Strategie in Mosbach und dem Odenwald entwickle ich Websites, die Ihre Marke st\u00e4rken [&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-1894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894","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=1894"}],"version-history":[{"count":48,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/1894\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}