{"id":2232,"date":"2026-03-27T23:36:45","date_gmt":"2026-03-27T23:36:45","guid":{"rendered":"https:\/\/eliasschultze.de\/?page_id=2232"},"modified":"2026-03-28T00:28:38","modified_gmt":"2026-03-28T00:28:38","slug":"preisberechnung","status":"publish","type":"page","link":"https:\/\/eliasschultze.de\/en\/preisberechnung\/","title":{"rendered":"preisberechnung"},"content":{"rendered":"\n<style>\n\/* ===================== VARIABLEN & BASIS (f\u00fcr Header) ===================== *\/\n:root {\n    --marineblau: #1e3a5f;\n    --hellgrau: #f5f5f5;\n    --weiss: #ffffff;\n    --koralle: #f67280;\n    --koralle-hover: #e05e6b;\n    --mint: #a8dadc;\n    --text-muted: #66768f;\n    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n}\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: var(--weiss);\n    color: var(--marineblau);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n}\na { text-decoration: none; color: inherit; }\n.es-container { width: 100%; margin: 0 auto; padding: 0 5vw; }\n\n\/* ===================== HEADER ===================== *\/\nheader {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    padding: 20px 0;\n    z-index: 500;\n    background: var(--weiss);\n    border-bottom: 1px solid rgba(30,58,95,0.06);\n}\n.nav-inner {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n    min-height: 52px;\n}\n.nav-inner .logo { flex-shrink: 0; z-index: 700; }\n.nav-inner .nav-links {\n    position: absolute;\n    left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    list-style: none;\n}\n.nav-inner .nav-right-group { flex-shrink: 0; display: flex; align-items: center; gap: 0; z-index: 700; }\n\n.logo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--marineblau); display: flex; align-items: center; }\n.logo a { color: inherit; }\n.logo img { display: block; height: 36px; width: auto; max-width: 180px; object-fit: contain; }\n\n.nav-links { font-size: 15px; font-weight: 400; }\n.nav-links a { color: var(--text-muted); transition: color 0.2s ease; }\n.nav-links a:hover { color: var(--marineblau); }\n\n.btn-outline { border: 1px solid rgba(30,58,95,0.2); padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; color: var(--marineblau); white-space: nowrap; }\n.btn-outline:hover { border-color: var(--marineblau); background: var(--marineblau); color: white !important; }\n\n.nav-right { display: flex; align-items: center; gap: 0; }\n.nav-utils { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(30,58,95,0.12); }\n\n.nav-search { display: flex; align-items: center; flex-direction: row-reverse; }\n.nav-search-trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; transition: color 0.2s ease, background 0.2s ease; }\n.nav-search-trigger:hover { color: var(--marineblau); background: rgba(30,58,95,0.06); }\n.nav-search-trigger svg { width: 20px; height: 20px; }\n.nav-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; }\n.nav-search.is-open .nav-search-input-wrap { width: 200px; min-width: 200px; opacity: 1; }\n.nav-search-input-wrap input { width: 100%; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(30,58,95,0.2); border-radius: 100px; font-size: 14px; font-family: inherit; color: var(--marineblau); background: var(--weiss); box-sizing: border-box; }\n.nav-search-input-wrap input:focus { outline: none; border-color: var(--marineblau); }\n.nav-search-input-wrap input::placeholder { color: var(--text-muted); }\n\n.nav-lang { display: flex; align-items: center; background: rgba(30,58,95,0.06); border-radius: 100px; padding: 4px; gap: 2px; }\n.nav-lang a { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: 100px; transition: color 0.2s ease, background 0.2s ease; }\n.nav-lang a:hover { color: var(--marineblau); }\n.nav-lang a.active { color: var(--marineblau); background: var(--weiss); box-shadow: 0 1px 3px rgba(30,58,95,0.08); }\n\na:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marineblau); outline-offset: 2px; }\n\n.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--marineblau); color: var(--weiss); font-size: 14px; font-weight: 500; border-radius: 8px; transition: top 0.2s ease; }\n.skip-link:focus { top: 16px; }\n\n\/* ===================== BURGER ===================== *\/\n.es-burger {\n    display: none;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 44px; height: 44px;\n    background: none; border: none;\n    cursor: pointer;\n    z-index: 700;\n    padding: 0; flex-shrink: 0;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-burger-box { position: relative; width: 24px; height: 16px; }\n.es-burger-box span {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 24px; height: 2px;\n    background: var(--marineblau);\n    border-radius: 2px;\n    transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, opacity 0.2s ease;\n}\n.es-burger-box span:nth-child(1) { top: 0; }\n.es-burger-box span:nth-child(2) { top: 7px; }\n.es-burger-box span:nth-child(3) { top: 14px; }\n.es-burger.is-open .es-burger-box span {\n    background: var(--weiss);\n    transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, opacity 0.2s ease;\n}\n.es-burger.is-open .es-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }\n.es-burger.is-open .es-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.es-burger.is-open .es-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }\n\n\/* ===================== FULLSCREEN OVERLAY ===================== *\/\n.es-mobile-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 600;\n    background: var(--marineblau);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 100px 10vw 60px;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-20px);\n    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;\n}\n.es-mobile-overlay.is-open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n}\n.es-mobile-overlay::before {\n    content: 'es.';\n    position: absolute;\n    right: 5vw; bottom: -0.05em;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(120px, 25vw, 220px);\n    font-weight: 700;\n    color: rgba(255,255,255,0.04);\n    line-height: 1;\n    pointer-events: none;\n    letter-spacing: -0.04em;\n    user-select: none;\n}\n.es-overlay-close {\n    position: absolute;\n    top: 24px; right: 5vw;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px; height: 44px;\n    background: rgba(255,255,255,0.12);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--weiss);\n    transition: background 0.25s ease, transform 0.25s ease;\n    -webkit-tap-highlight-color: transparent;\n}\n.es-overlay-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }\n.es-overlay-close svg { width: 20px; height: 20px; }\n\n.es-mobile-nav { list-style: none; width: 100%; }\n.es-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n.es-mobile-nav a {\n    display: block;\n    font-family: 'Outfit', sans-serif;\n    font-size: clamp(36px, 8vw, 64px);\n    font-weight: 300;\n    color: rgba(255,255,255,0.9);\n    letter-spacing: -0.03em;\n    padding: 20px 0; line-height: 1;\n    transform: translateY(40px); opacity: 0;\n    transition: color 0.25s ease, padding-left 0.3s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s ease;\n}\n.es-mobile-overlay.is-open .es-mobile-nav a { transform: translateY(0); opacity: 1; }\n.es-mobile-nav li:nth-child(1) a { transition-delay: 0.1s; }\n.es-mobile-nav li:nth-child(2) a { transition-delay: 0.18s; }\n.es-mobile-nav li:nth-child(3) a { transition-delay: 0.26s; }\n.es-mobile-nav li:nth-child(4) a { transition-delay: 0.34s; }\n.es-mobile-nav a:hover { color: var(--koralle); padding-left: 12px; }\n\n.es-mobile-cta { margin-top: 48px; transform: translateY(30px); opacity: 0; transition: transform 0.5s var(--ease-out) 0.42s, opacity 0.5s ease 0.42s; }\n.es-mobile-overlay.is-open .es-mobile-cta { transform: translateY(0); opacity: 1; }\n.es-mobile-cta a { display: inline-block; background: var(--koralle); color: var(--weiss); font-size: 16px; font-weight: 500; padding: 18px 44px; border-radius: 100px; transition: background 0.3s ease, transform 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(246,114,128,0.25); }\n.es-mobile-cta a:hover { background: var(--koralle-hover); transform: translateY(-2px); }\n\n.es-mobile-footer { position: absolute; bottom: 40px; left: 10vw; right: 10vw; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; }\n.es-mobile-overlay.is-open .es-mobile-footer { opacity: 1; transform: translateY(0); }\n.es-mobile-lang { display: flex; gap: 16px; }\n.es-mobile-lang a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s ease; }\n.es-mobile-lang a.active, .es-mobile-lang a:hover { color: rgba(255,255,255,0.9); }\n.es-mobile-social a { font-size: 13px; color: rgba(255,255,255,0.4); transition: color 0.2s ease; }\n.es-mobile-social a:hover { color: rgba(255,255,255,0.9); }\n\nbody.es-nav-open { overflow: hidden; }\n\n\/* ===================== RESPONSIVE (Header) ===================== *\/\n@media (max-width: 900px) {\n    .nav-inner .nav-links,\n    .nav-inner .nav-right { display: none !important; }\n    .es-burger { display: flex; }\n}\n<\/style>\n\n<a href=\"#main\" class=\"skip-link\">Zum Inhalt springen<\/a>\n\n<!-- ========== MOBILE NAV (Fullscreen-Overlay: Burger \u00f6ffnet, X\/Link\/Escape schlie\u00dfen) ========== -->\n<div class=\"es-mobile-overlay\" id=\"es-mobile-overlay\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Navigation\">\n    <button type=\"button\" class=\"es-overlay-close\" id=\"es-overlay-close\" aria-label=\"Men\u00fc schlie\u00dfen\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"\/>\n        <\/svg>\n    <\/button>\n    <nav aria-label=\"Mobile Navigation\">\n        <ul class=\"es-mobile-nav\">\n            <li><a href=\"\/studio\/\" class=\"es-mobile-link\">Studio<\/a><\/li>\n            <li><a href=\"\/expertise\/\" class=\"es-mobile-link\">Expertise<\/a><\/li>\n            <li><a href=\"\/cases\/\" class=\"es-mobile-link\">Cases<\/a><\/li>\n            <li><a href=\"#kontakt\" class=\"es-mobile-link\">Kontakt<\/a><\/li>\n        <\/ul>\n        <div class=\"es-mobile-cta\">\n            <a href=\"#kontakt\" class=\"es-mobile-link\">Kostenloses Erstgespr\u00e4ch<\/a>\n        <\/div>\n    <\/nav>\n    <div class=\"es-mobile-footer\">\n        <div class=\"es-mobile-lang\">\n            <a href=\"\/\" class=\"active\" hreflang=\"de\">DE<\/a>\n            <a href=\"en\/index.html\" hreflang=\"en\">EN<\/a>\n        <\/div>\n        <div class=\"es-mobile-social\">\n            <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram \u2924<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<header id=\"header\" class=\"header\" role=\"banner\">\n    <div class=\"es-container nav-inner\">\n        <a href=\"\/\" class=\"logo\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/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=\"\/studio\/\">Studio<\/a>\n            <a href=\"\/expertise\/\">Expertise<\/a>\n            <a href=\"\/cases\/\">Cases<\/a>\n        <\/nav>\n        <div class=\"nav-right-group\">\n            <div class=\"nav-right\">\n                <div class=\"nav-utils\">\n                    <div class=\"nav-search\" id=\"nav-search-wrap\">\n                        <form class=\"nav-search-input-wrap\" role=\"search\" action=\"#\" method=\"get\" id=\"nav-search-form\">\n                            <input type=\"search\" id=\"nav-search-input\" name=\"q\" placeholder=\"Suchen\u2026\" autocomplete=\"off\" aria-label=\"Seite durchsuchen\">\n                        <\/form>\n                        <button type=\"button\" class=\"nav-search-trigger\" aria-label=\"Suchen\" id=\"nav-search-trigger\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div class=\"nav-lang\">\n                        <a href=\"\/\" class=\"active\" hreflang=\"de\" lang=\"de\">DE<\/a>\n                        <a href=\"en\/index\" hreflang=\"en\" lang=\"en\">EN<\/a>\n                    <\/div>\n                <\/div>\n                <a href=\"#kontakt\" class=\"btn-outline\">Let&#8217;s talk<\/a>\n            <\/div>\n            <button type=\"button\" class=\"es-burger\" id=\"es-burger\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"es-mobile-overlay\">\n                <div class=\"es-burger-box\">\n                    <span><\/span>\n                    <span><\/span>\n                    <span><\/span>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/header>\n\n<script>\n(function() {\n    'use strict';\n    var burger   = document.getElementById('es-burger');\n    var overlay  = document.getElementById('es-mobile-overlay');\n    var closeBtn = document.getElementById('es-overlay-close');\n    var mobileLinks = document.querySelectorAll('.es-mobile-link');\n\n    if (burger && overlay) {\n        var menuOpen = false;\n        function openNav() {\n            menuOpen = true;\n            burger.classList.add('is-open');\n            overlay.classList.add('is-open');\n            overlay.setAttribute('aria-hidden', 'false');\n            burger.setAttribute('aria-expanded', 'true');\n            burger.setAttribute('aria-label', 'Men\u00fc schlie\u00dfen');\n            document.body.classList.add('es-nav-open');\n        }\n        function closeNav() {\n            menuOpen = false;\n            burger.classList.remove('is-open');\n            overlay.classList.remove('is-open');\n            overlay.setAttribute('aria-hidden', 'true');\n            burger.setAttribute('aria-expanded', 'false');\n            burger.setAttribute('aria-label', 'Men\u00fc \u00f6ffnen');\n            document.body.classList.remove('es-nav-open');\n        }\n        burger.addEventListener('click', function(e) { e.stopPropagation(); menuOpen ? closeNav() : openNav(); });\n        if (closeBtn) closeBtn.addEventListener('click', function(e) { e.stopPropagation(); closeNav(); });\n        mobileLinks.forEach(function(link) { link.addEventListener('click', closeNav); });\n        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && menuOpen) closeNav(); });\n        window.addEventListener('resize', function() { if (window.innerWidth > 900 && menuOpen) closeNav(); });\n    }\n\n    var searchWrap = document.getElementById('nav-search-wrap');\n    var searchTrigger = document.getElementById('nav-search-trigger');\n    var searchForm = document.getElementById('nav-search-form');\n    var searchInput = document.getElementById('nav-search-input');\n    if (searchWrap && searchTrigger && searchForm && searchInput) {\n        searchTrigger.addEventListener('click', function() {\n            searchWrap.classList.toggle('is-open');\n            if (searchWrap.classList.contains('is-open')) searchInput.focus();\n        });\n        searchInput.addEventListener('blur', function() {\n            setTimeout(function() { searchWrap.classList.remove('is-open'); }, 450);\n        });\n        searchForm.addEventListener('submit', function(e) { e.preventDefault(); });\n    }\n\n    function init() {\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', arguments.callee);\n            return;\n        }\n    }\n    init();\n})();\n<\/script>\n\n\n\n<style>\n        :root {\n            --marineblau: #1e3a5f;\n            --hellgrau: #f5f5f5;\n            --weiss: #ffffff;\n            --koralle-accessible: #c44d5b;\n            --koralle-hover: #e05e6b;\n            --text-muted: #5a6178;\n            --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n            --line: rgba(30, 58, 95, 0.1);\n        }\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n        html { scroll-behavior: smooth; }\n        body {\n            font-family: 'Inter', sans-serif;\n            background: var(--weiss);\n            color: var(--marineblau);\n            line-height: 1.65;\n            font-size: 16px;\n            -webkit-font-smoothing: antialiased;\n        }\n        h1, h2 {\n            font-family: 'Outfit', sans-serif;\n            font-weight: 400;\n            letter-spacing: -0.02em;\n        }\n        a { color: var(--koralle-accessible); text-decoration: none; }\n        a:hover { text-decoration: underline; }\n\n        .skip-link {\n            position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;\n        }\n        .skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 12px 16px; background: var(--marineblau); color: var(--weiss); z-index: 9999; border-radius: 4px; }\n\n        .es-price-wrap { max-width: min(100%, 980px); margin: 0 auto; padding: 40px 5vw 56px; }\n        .es-price-hero { margin-bottom: 28px; }\n        .es-price-hero h1 {\n            font-size: clamp(1.85rem, 4vw, 2.5rem);\n            font-weight: 500;\n            margin-bottom: 14px;\n            color: var(--marineblau);\n        }\n        .es-price-lead { font-size: 1.02rem; color: var(--text-muted); font-weight: 300; }\n\n        .es-wiz-progress {\n            margin-bottom: 24px;\n            font-size: 0.82rem;\n            color: var(--text-muted);\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 12px;\n        }\n        .es-wiz-bar {\n            flex: 1;\n            height: 4px;\n            background: rgba(30, 58, 95, 0.1);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n        .es-wiz-bar-fill {\n            height: 100%;\n            background: var(--marineblau);\n            border-radius: 4px;\n            transition: width 0.35s var(--ease-out);\n            width: 20%;\n            opacity: 0.85;\n        }\n\n        .es-price-panel {\n            border: 1px solid var(--line);\n            border-radius: 16px;\n            background: #eef0f3;\n            padding: 28px;\n        }\n\n        .es-wiz-step { display: none; }\n        .es-wiz-step.is-active { display: block; }\n        .es-wiz-step h2 {\n            font-size: 1.28rem;\n            font-weight: 600;\n            font-family: 'Outfit', sans-serif;\n            color: var(--marineblau);\n            margin-bottom: 10px;\n            letter-spacing: -0.03em;\n        }\n        .es-wiz-hint { font-size: 0.9rem; color: var(--text-muted); font-weight: 400; margin-bottom: 22px; line-height: 1.55; max-width: 52ch; }\n        .es-wiz-existing-url { margin-top: 18px; margin-bottom: 0; }\n        .es-wiz-existing-url .es-wiz-existing-url-hint { margin-top: 8px; margin-bottom: 0; font-size: 0.82rem; }\n\n        .es-wiz-options { display: flex; flex-direction: column; gap: 10px; }\n        .es-wiz-opt {\n            display: block;\n            cursor: pointer;\n        }\n        .es-wiz-opt input {\n            position: absolute;\n            opacity: 0;\n            width: 0;\n            height: 0;\n        }\n        .es-wiz-opt span {\n            display: block;\n            padding: 14px 16px;\n            border: 1px solid rgba(30, 58, 95, 0.18);\n            border-radius: 10px;\n            background: var(--weiss);\n            font-size: 0.95rem;\n            transition: border-color 0.2s, box-shadow 0.2s;\n        }\n        .es-wiz-opt input:focus + span {\n            outline-offset: 2px;\n        }\n        .es-wiz-opt input:checked + span {\n            box-shadow: 0 0 0 1px var(--marineblau);\n            background: rgba(30, 58, 95, 0.04);\n        }\n        .es-wiz-opt:hover span { border-color: rgba(30, 58, 95, 0.35); }\n        .es-wiz-opt span strong {\n            display: block;\n            font-weight: 500;\n            color: var(--marineblau);\n            margin-bottom: 4px;\n        }\n\n        .es-select-cards {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n        .es-select-cards .es-wiz-opt span {\n            padding: 0;\n            border: 1px solid #dde2e9;\n            border-radius: 12px;\n            background: #ffffff;\n            box-shadow: 0 1px 3px rgba(30, 58, 95, 0.05);\n            overflow: hidden;\n            transition: border-color 0.2s ease, box-shadow 0.2s ease;\n        }\n        .es-select-cards .es-wiz-opt:hover span {\n            border-color: #b8c2ce;\n            box-shadow: 0 2px 8px rgba(30, 58, 95, 0.07);\n        }\n        .es-select-cards .es-wiz-opt input:focus + span {\n            outline: none !important;\n            box-shadow: 0 0 0 2px var(--marineblau);\n        }\n        .es-select-cards .es-wiz-opt input:checked + span {\n            border: 2px solid var(--marineblau);\n            box-shadow: 0 2px 12px rgba(30, 58, 95, 0.1);\n            background: #ffffff;\n        }\n        .es-select-cards .es-wiz-opt span strong {\n            font-family: 'Outfit', sans-serif;\n            font-size: 1.05rem;\n            font-weight: 600;\n            letter-spacing: -0.02em;\n            padding: 16px 18px 0;\n            margin-bottom: 0;\n            color: #152a45;\n        }\n        .es-select-cards .es-wiz-opt span .es-wiz-desc-wrap {\n            display: block;\n            margin: 10px 18px 16px;\n            padding: 12px 14px;\n            background: #f4f6f8;\n            border: none;\n            border-radius: 8px;\n            font-size: 0.8125rem;\n            line-height: 1.5;\n            color: #5a6578;\n            font-weight: 400;\n        }\n\n        .es-wiz-nav {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 24px;\n            padding-top: 20px;\n            border-top: 1px solid var(--line);\n        }\n        .es-wiz-back {\n            background: none;\n            border: none;\n            color: var(--text-muted);\n            font: inherit;\n            font-size: 0.92rem;\n            cursor: pointer;\n            text-decoration: underline;\n            padding: 8px 0;\n        }\n        .es-wiz-back:hover { color: var(--marineblau); }\n        .es-wiz-back:disabled {\n            opacity: 0.35;\n            cursor: not-allowed;\n            text-decoration: none;\n        }\n        .es-wiz-next {\n            background: var(--koralle-accessible);\n            color: var(--weiss);\n            border: none;\n            padding: 14px 28px;\n            border-radius: 100px;\n            font-size: 15px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.25s, transform 0.25s var(--ease-out);\n            box-shadow: 0 8px 24px rgba(196, 77, 91, 0.2);\n        }\n        .es-wiz-next:hover:not(:disabled) { background: var(--koralle-hover); transform: translateY(-2px); }\n        .es-wiz-next:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }\n\n        .es-price-result {\n            margin-top: 8px;\n            padding: 20px 0 8px;\n            border-top: 1px solid var(--line);\n        }\n        .es-price-result-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }\n        .es-price-amount { font-size: 2rem; font-weight: 600; font-family: 'Outfit', sans-serif; letter-spacing: -0.03em; color: var(--marineblau); }\n        .es-price-hint { font-size: 0.9rem; color: var(--text-muted); margin-top: 10px; font-weight: 300; }\n\n        .es-wiz-summary {\n            font-size: 0.88rem;\n            color: var(--text-muted);\n            background: var(--weiss);\n            padding: 16px;\n            border-radius: 8px;\n            border: 1px solid var(--line);\n            margin-bottom: 20px;\n            white-space: pre-line;\n        }\n        .es-wiz-summary strong { color: var(--marineblau); font-weight: 500; }\n\n        .es-wiz-form .es-wiz-field { margin-bottom: 16px; }\n        .es-wiz-form label {\n            display: block;\n            font-size: 0.82rem;\n            font-weight: 500;\n            color: var(--marineblau);\n            margin-bottom: 6px;\n        }\n        .es-wiz-form input[type=\"email\"],\n        .es-wiz-form input[type=\"text\"],\n        .es-wiz-form input[type=\"tel\"],\n        .es-wiz-form input[type=\"url\"],\n        .es-wiz-form textarea {\n            width: 100%;\n            padding: 12px 14px;\n            border: 1px solid rgba(30, 58, 95, 0.2);\n            border-radius: 8px;\n            font: inherit;\n            color: var(--marineblau);\n            background: var(--weiss);\n        }\n        .es-wiz-form textarea { min-height: 88px; resize: vertical; }\n        .es-wiz-form input:focus, .es-wiz-form textarea:focus {\n            outline: none;\n            border-color: var(--marineblau);\n        }\n        .es-wiz-form .es-wiz-required::after { content: ' *'; color: var(--koralle-accessible); }\n\n        .es-wiz-privacy {\n            font-size: 0.82rem;\n            color: var(--text-muted);\n            line-height: 1.45;\n            margin-bottom: 16px;\n        }\n        .es-wiz-check {\n            display: flex;\n            align-items: flex-start;\n            gap: 14px;\n            margin-bottom: 22px;\n            padding: 14px 16px;\n            border-radius: 12px;\n            background: rgba(30, 58, 95, 0.04);\n            border: 1px solid rgba(30, 58, 95, 0.1);\n            cursor: pointer;\n            transition: border-color 0.2s, background 0.2s;\n        }\n        .es-wiz-check:hover {\n            background: rgba(30, 58, 95, 0.06);\n            border-color: rgba(30, 58, 95, 0.16);\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-boxwrap {\n            position: relative;\n            flex-shrink: 0;\n            width: 24px !important;\n            min-width: 24px !important;\n            max-width: none !important;\n            height: 24px !important;\n            min-height: 24px !important;\n            margin-top: 1px;\n            display: block;\n            box-sizing: border-box;\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-input {\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 24px !important;\n            min-width: 24px !important;\n            max-width: none !important;\n            height: 24px !important;\n            min-height: 24px !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            opacity: 0;\n            cursor: pointer;\n            z-index: 2;\n            appearance: none;\n            -webkit-appearance: none;\n            box-sizing: border-box;\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-ui {\n            position: absolute;\n            left: 0;\n            top: 0;\n            display: block !important;\n            width: 24px !important;\n            min-width: 24px !important;\n            max-width: none !important;\n            height: 24px !important;\n            min-height: 24px !important;\n            box-sizing: border-box;\n            border-radius: 5px;\n            border: 2px solid var(--marineblau) !important;\n            background-color: #ffffff !important;\n            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);\n            transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n            pointer-events: none;\n        }\n        .es-wiz-form .es-wiz-check:hover .es-wiz-check-ui {\n            border-color: #152a45 !important;\n            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(30, 58, 95, 0.15);\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-input:checked + .es-wiz-check-ui {\n            background-color: var(--marineblau) !important;\n            border-color: var(--marineblau) !important;\n            box-shadow: none !important;\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-input:checked + .es-wiz-check-ui::after {\n            content: '';\n            position: absolute;\n            left: 50%;\n            top: 42%;\n            width: 5px;\n            height: 10px;\n            border: solid #ffffff;\n            border-width: 0 2.5px 2.5px 0;\n            transform: translate(-50%, -50%) rotate(45deg);\n            box-sizing: border-box;\n        }\n        .es-wiz-form .es-wiz-check .es-wiz-check-input:focus-visible + .es-wiz-check-ui {\n            outline: 3px solid rgba(30, 58, 95, 0.4) !important;\n            outline-offset: 2px;\n        }\n        .es-wiz-check-text {\n            font-size: 0.9rem;\n            line-height: 1.5;\n            color: var(--marineblau);\n            font-weight: 400;\n        }\n        .es-wiz-check-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }\n\n        .es-wiz-submit {\n            width: 100%;\n            background: var(--marineblau);\n            color: var(--weiss);\n            border: none;\n            padding: 16px 24px;\n            border-radius: 100px;\n            font-size: 16px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: opacity 0.2s, transform 0.25s var(--ease-out);\n        }\n        .es-wiz-submit:hover:not(:disabled) { transform: translateY(-2px); opacity: 0.95; }\n        .es-wiz-submit:disabled { opacity: 0.5; cursor: not-allowed; }\n\n        .es-wiz-submit-error {\n            font-size: 0.88rem;\n            color: var(--koralle-accessible);\n            margin-bottom: 14px;\n            padding: 10px 12px;\n            background: rgba(196, 77, 91, 0.08);\n            border-radius: 8px;\n            border: 1px solid rgba(196, 77, 91, 0.25);\n        }\n\n        .es-wiz-done {\n            display: none;\n            text-align: center;\n            padding: 16px 0 8px;\n        }\n        .es-wiz-done.is-visible { display: block; }\n        .es-wiz-done h2 { margin-bottom: 10px; }\n\n        .es-care-compare-wrap {\n            margin-bottom: 22px;\n        }\n        .es-care-scroll-hint {\n            display: none;\n            font-size: 0.78rem;\n            color: var(--text-muted);\n            margin: 0 0 8px 0;\n            padding: 0 4px;\n        }\n        @media (max-width: 900px) {\n            .es-care-scroll-hint { display: block; }\n        }\n        .es-care-compare {\n            overflow-x: auto;\n            -webkit-overflow-scrolling: touch;\n            border-radius: 12px;\n            border: 1px solid rgba(30, 58, 95, 0.14);\n            background: var(--weiss);\n            box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);\n            scrollbar-color: rgba(30, 58, 95, 0.35) rgba(30, 58, 95, 0.06);\n        }\n        .es-care-compare::-webkit-scrollbar {\n            height: 10px;\n        }\n        .es-care-compare::-webkit-scrollbar-track {\n            background: rgba(30, 58, 95, 0.06);\n            border-radius: 0 0 12px 12px;\n        }\n        .es-care-compare::-webkit-scrollbar-thumb {\n            background: rgba(30, 58, 95, 0.3);\n            border-radius: 5px;\n        }\n        .es-care-table {\n            width: 100%;\n            min-width: 640px;\n            border-collapse: collapse;\n            table-layout: fixed;\n            font-size: 0.875rem;\n            line-height: 1.45;\n            color: #3d4a5c;\n        }\n        .es-care-table caption {\n            caption-side: top;\n            text-align: left;\n            padding: 14px 16px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.07em;\n            color: var(--marineblau);\n            background: rgba(30, 58, 95, 0.08);\n            border-bottom: 1px solid rgba(30, 58, 95, 0.12);\n        }\n        .es-care-table thead th {\n            padding: 12px 12px;\n            border-bottom: 2px solid rgba(30, 58, 95, 0.15);\n            vertical-align: bottom;\n            text-align: left;\n        }\n        .es-care-table th,\n        .es-care-table td {\n            padding: 11px 12px;\n            border-bottom: 1px solid rgba(30, 58, 95, 0.1);\n            vertical-align: top;\n            text-align: left;\n            word-wrap: break-word;\n            hyphens: auto;\n        }\n        .es-care-table thead th:first-child {\n            width: 26%;\n        }\n        .es-care-table th[scope=\"col\"] {\n            font-size: 0.78rem;\n            font-weight: 600;\n            color: var(--marineblau);\n            background: rgba(30, 58, 95, 0.06);\n        }\n        .es-care-table th[scope=\"row\"] {\n            font-weight: 600;\n            color: var(--marineblau);\n            background: rgba(30, 58, 95, 0.04);\n        }\n        .es-care-table tbody tr:nth-child(even) td,\n        .es-care-table tbody tr:nth-child(even) th[scope=\"row\"] {\n            background: rgba(30, 58, 95, 0.03);\n        }\n        .es-care-table tbody tr:hover td,\n        .es-care-table tbody tr:hover th[scope=\"row\"] {\n            background: rgba(30, 58, 95, 0.055);\n        }\n        .es-care-table tbody tr:last-child th,\n        .es-care-table tbody tr:last-child td {\n            border-bottom: none;\n        }\n        .es-care-table .es-care-price-row td,\n        .es-care-table .es-care-price-row th {\n            background: rgba(30, 58, 95, 0.07) !important;\n            font-weight: 700;\n            color: var(--marineblau);\n            font-size: 1rem;\n            border-bottom: 2px solid rgba(30, 58, 95, 0.12);\n        }\n        @media (min-width: 901px) {\n            .es-care-table {\n                min-width: 0;\n            }\n        }\n        .es-care-note {\n            font-size: 0.8rem;\n            color: var(--text-muted);\n            margin-top: 14px;\n            padding: 12px 14px;\n            background: rgba(30, 58, 95, 0.05);\n            border-radius: 8px;\n            line-height: 1.45;\n        }\n        .es-care-note strong { color: var(--marineblau); font-weight: 600; }\n\n        .es-detail-sub {\n            font-family: 'Outfit', sans-serif;\n            font-size: 0.95rem;\n            font-weight: 600;\n            color: var(--marineblau);\n            margin: 0 0 14px 0;\n            letter-spacing: -0.02em;\n        }\n        .es-detail-block { margin-top: 4px; }\n        .check-data { display: flex !important; align-items: center !important; }\n    <\/style>\n<\/head>\n<body>\n    <a href=\"#main\" class=\"skip-link\">Zum Inhalt springen<\/a>\n\n    <main id=\"main\" style=\"padding-top: 5vh;\">\n        <div class=\"es-price-wrap\">\n            <div class=\"es-price-hero\">\n                <h1>Preisberechnung<\/h1>\n                <p class=\"es-price-lead\">\n                    Zuerst kl\u00e4ren wir, was zu dir passt \u2014 ohne Preisdruck in jeder Zeile. Deine passende Preisspanne siehst du erst am Ende; dort kannst du mir deine E-Mail hinterlassen.\n                <\/p>\n            <\/div>\n\n            <div class=\"es-wiz-progress\" aria-hidden=\"true\">\n                <span id=\"wiz-step-label\">Schritt 1 von 5<\/span>\n                <div class=\"es-wiz-bar\" role=\"presentation\"><div class=\"es-wiz-bar-fill\" id=\"wiz-bar-fill\"><\/div><\/div>\n            <\/div>\n\n\n            <div class=\"es-price-panel\" id=\"wizard\">\n                <form class=\"es-wiz-form\" id=\"wiz-form\" action=\"#\" method=\"post\" novalidate data-mail-endpoint=\"https:\/\/eliasschultze.de\/wp-content\/themes\/wordpress-theme-esdesign-paste\/send-preisberechnung.php\">\n                    <input type=\"hidden\" name=\"service\" id=\"derived-service\" value=\"\" autocomplete=\"off\">\n\n                    <div class=\"es-wiz-step is-active\" id=\"panel-mode\" role=\"region\" aria-labelledby=\"wiz-q1\">\n                        <h2 id=\"wiz-q1\">Einmalprojekt oder laufende Betreuung?<\/h2>\n                        <p class=\"es-wiz-hint\">Einmalige Projekte nach Festpreisliste \u2014 oder laufende Betreuung in den Paketen A, B und C (Technik, SEO, optional KI).<\/p>\n                        <div class=\"es-wiz-options\" role=\"radiogroup\" aria-labelledby=\"wiz-q1\">\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"mode\" value=\"project\" checked> <span>Einmaliges Projekt (Leistung aus der Preisliste)<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"mode\" value=\"care\"> <span>Laufende Betreuung &amp; Wartung (Paket A, B oder C)<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"mode\" value=\"unsure\"> <span>Ich wei\u00df noch nicht \/ Einordnung per E-Mail<\/span><\/label>\n                        <\/div>\n                    <\/div>\n                    <div class=\"es-wiz-step\" id=\"panel-proj-category\" role=\"region\" aria-labelledby=\"wiz-pcat\">\n                        <h2 id=\"wiz-pcat\">Worum geht es?<\/h2>\n                        <p class=\"es-wiz-hint\">Zuerst der grobe Rahmen. Bei Website und App\/PWA folgt gleich eine zweite Frage \u2014 bei Shop, Branding, Buchung oder Beratung springen wir direkt weiter.<\/p>\n                        <div class=\"es-wiz-options es-select-cards\" role=\"radiogroup\" aria-labelledby=\"wiz-pcat\">\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"web\" checked>\n                                <span><strong>Website &amp; Webauftritt<\/strong><span class=\"es-wiz-desc-wrap\">Landing, mehrseitige Site oder eigenes Theme \u2014 Umfang kl\u00e4ren wir im n\u00e4chsten Schritt.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"ecommerce\">\n                                <span><strong>Shop &amp; E-Commerce<\/strong><span class=\"es-wiz-desc-wrap\">Verkaufen online: Warenkorb, Checkout, Versand &amp; rechtliche Grundlagen.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"app_pwa\">\n                                <span><strong>App &amp; PWA<\/strong><span class=\"es-wiz-desc-wrap\">Progressive Web App oder native\/hybride App \u2014 die passende Variante w\u00e4hlst du als N\u00e4chstes.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"branding\">\n                                <span><strong>Branding &amp; Design<\/strong><span class=\"es-wiz-desc-wrap\">Markenauftritt: Logo, Farben, Typografie, Bildsprache.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"booking\">\n                                <span><strong>Buchung &amp; Termine<\/strong><span class=\"es-wiz-desc-wrap\">Verf\u00fcgbarkeit und Buchung direkt auf der Website.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"consulting\">\n                                <span><strong>Strategie &amp; Beratung<\/strong><span class=\"es-wiz-desc-wrap\">Stundenweise: Priorit\u00e4ten, Technik, UX \u2014 ohne Projekt-Pflicht.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_category\" value=\"unsure\">\n                                <span><strong>Ich wei\u00df noch nicht<\/strong><span class=\"es-wiz-desc-wrap\">Kein fester Richtpreis hier \u2014 ich schlage dir nach kurzer R\u00fcckmeldung per E-Mail etwas Passendes vor.<\/span><\/span><\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"es-wiz-step\" id=\"panel-proj-detail\" role=\"region\" aria-labelledby=\"wiz-pdet\">\n                        <h2 id=\"wiz-pdet\">Einordnung<\/h2>\n                        <p class=\"es-wiz-hint\" id=\"wiz-pdet-hint\">Bitte w\u00e4hlen.<\/p>\n\n                        <div id=\"detail-block-web\" class=\"es-detail-block\">\n                            <h3 class=\"es-detail-sub\">Website: Umfang<\/h3>\n                            <div class=\"es-wiz-options es-select-cards\" role=\"radiogroup\" aria-labelledby=\"web-sub\">\n                                <p class=\"es-wiz-hint\" id=\"web-sub\" style=\"margin-bottom: 12px;\">Wie viele Ebenen brauchst du ungef\u00e4hr?<\/p>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_web\" value=\"onepager\" checked>\n                                    <span><strong>OnePager<\/strong><span class=\"es-wiz-desc-wrap\">Eine Seite, ein Fokus \u2014 Kampagne, Angebot oder schneller Einstieg.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_web\" value=\"web5\">\n                                    <span><strong>Bis 5 Unterseiten<\/strong><span class=\"es-wiz-desc-wrap\">Kompakt: Leistungen, Vertrauen, Kontakt.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_web\" value=\"web10\">\n                                    <span><strong>Bis 10 Unterseiten<\/strong><span class=\"es-wiz-desc-wrap\">Mehr Tiefe: Referenzen, Team, Blog o.\u202f\u00c4.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_web\" value=\"custom_theme\">\n                                    <span><strong>Custom Theme<\/strong><span class=\"es-wiz-desc-wrap\">Eigenes Theme (z.&nbsp;B. WordPress) statt Standard-Vorlage.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_web\" value=\"unsure\">\n                                    <span><strong>Ich wei\u00df noch nicht<\/strong><span class=\"es-wiz-desc-wrap\">Richtpreis kl\u00e4ren wir per E-Mail \u2014 kurz beschreiben, was du dir vorstellst.<\/span><\/span><\/label>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"detail-block-app\" class=\"es-detail-block\" hidden>\n                            <h3 class=\"es-detail-sub\">App oder PWA?<\/h3>\n                            <div class=\"es-wiz-options es-select-cards\" role=\"radiogroup\" aria-labelledby=\"app-sub\">\n                                <p class=\"es-wiz-hint\" id=\"app-sub\" style=\"margin-bottom: 12px;\">Was trifft eher zu?<\/p>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_app\" value=\"pwa\" checked>\n                                    <span><strong>PWA<\/strong><span class=\"es-wiz-desc-wrap\">Im Browser, installierbar, offline-f\u00e4hig \u2014 stark mobil.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_app\" value=\"app\">\n                                    <span><strong>App (nativ \/ hybrid)<\/strong><span class=\"es-wiz-desc-wrap\">Store, Push, volle Ger\u00e4teintegration.<\/span><\/span><\/label>\n                                <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"project_detail_app\" value=\"unsure\">\n                                    <span><strong>Ich wei\u00df noch nicht<\/strong><span class=\"es-wiz-desc-wrap\">Richtpreis kl\u00e4ren wir per E-Mail.<\/span><\/span><\/label>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"es-wiz-step\" role=\"region\" aria-labelledby=\"wiz-q2-care\" id=\"panel-care\">\n                        <h2 id=\"wiz-q2-care\">Betreuungspaket<\/h2>\n                        <p class=\"es-wiz-hint\">Technik, Sicherheit und Monitoring sind in A, B und C enthalten. Die Tabelle zeigt die Staffelung \u2014 unten w\u00e4hlst du eine Variante f\u00fcr die Anfrage.<\/p>\n\n                        <div class=\"es-care-compare-wrap\">\n                            <p class=\"es-care-scroll-hint\">Tabelle bei schmalen Displays nach rechts scrollen \u2014 alle Spalten sind dann lesbar.<\/p>\n                            <div class=\"es-care-compare\" role=\"region\" aria-label=\"Paketvergleich\">\n                            <table class=\"es-care-table\">\n                                <caption>Vergleich der Pakete<\/caption>\n                                <thead>\n                                    <tr>\n                                        <th scope=\"col\">Leistung<\/th>\n                                        <th scope=\"col\">A \u00b7 Basis &amp; Kontrolle<\/th>\n                                        <th scope=\"col\">B \u00b7 Wachstum &amp; Sichtbarkeit<\/th>\n                                        <th scope=\"col\">C \u00b7 Innovation &amp; KI<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody>\n                                    <tr class=\"es-care-price-row\">\n                                        <th scope=\"row\">Monatlich (Orientierung)<\/th>\n                                        <td>39&nbsp;\u20ac<\/td>\n                                        <td>69&nbsp;\u20ac<\/td>\n                                        <td>89&nbsp;\u20ac<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Technik &amp; Sicherheit<\/th>\n                                        <td>inkl.<\/td>\n                                        <td>inkl.<\/td>\n                                        <td>inkl.<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Updates &amp; Backups<\/th>\n                                        <td>laufend<\/td>\n                                        <td>laufend<\/td>\n                                        <td>laufend<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">24\/7-Monitoring<\/th>\n                                        <td>\u2713<\/td>\n                                        <td>\u2713<\/td>\n                                        <td>\u2713<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Inhalte selbst \u00e4ndern<\/th>\n                                        <td>Autonomie-System<\/td>\n                                        <td>\u2713<\/td>\n                                        <td>\u2713<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">SEO &amp; Keywords<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>Landingpages &amp; Local SEO<\/td>\n                                        <td>\u2713<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Google-Business-Profil<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>Optimierung<\/td>\n                                        <td>\u2713<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Bildbearbeitung<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>professionell<\/td>\n                                        <td>\u2713<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">KI-Integration<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>\u2014<\/td>\n                                        <td>z.&nbsp;B. autom. Chatbot<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Konkurrenz-Analyse<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>\u2014<\/td>\n                                        <td>laufend<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <th scope=\"row\">Premium-Design<\/th>\n                                        <td>\u2014<\/td>\n                                        <td>\u2014<\/td>\n                                        <td>inkl. Animationen<\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                            <\/div>\n                        <\/div>\n                        <p class=\"es-care-note\"><strong>Rahmenbedingungen:<\/strong> Mindestlaufzeit 12 Monate \u2014 danach monatlich k\u00fcndbar. Details im Vertrag bzw. Angebot.<\/p>\n\n                        <p class=\"es-wiz-hint\" id=\"wiz-q2-care-pick\" style=\"margin-bottom: 12px; margin-top: 8px;\">Paket w\u00e4hlen<\/p>\n                        <div class=\"es-wiz-options es-select-cards\" role=\"radiogroup\" aria-labelledby=\"wiz-q2-care-pick\">\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"care_package\" value=\"paket_a\" checked>\n                                <span><strong>Paket A \u2014 Basis &amp; Kontrolle<\/strong><span class=\"es-wiz-desc-wrap\">Solide technische Basis, du pflegst Inhalte selbst \u2014 ideal, wenn SEO &amp; Sichtbarkeit noch keine Priorit\u00e4t haben.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"care_package\" value=\"paket_b\">\n                                <span><strong>Paket B \u2014 Wachstum &amp; Sichtbarkeit<\/strong><span class=\"es-wiz-desc-wrap\">Mehr Reichweite: Local SEO, Google-Business-Optimierung und professionelle Bildbearbeitung \u2014 aufbauend auf Paket A.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"care_package\" value=\"paket_c\">\n                                <span><strong>Paket C \u2014 Innovation &amp; KI<\/strong><span class=\"es-wiz-desc-wrap\">Volles Paket inkl. KI (z.&nbsp;B. Chatbot), laufender Konkurrenz-Check und Premium-Design mit Animationen.<\/span><\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"care_package\" value=\"unsure\">\n                                <span><strong>Ich wei\u00df noch nicht<\/strong><span class=\"es-wiz-desc-wrap\">Welches Paket passt, kl\u00e4ren wir per E-Mail \u2014 hier kein fester Monatspreis.<\/span><\/span><\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"es-wiz-step\" id=\"panel-timeline\" role=\"region\" aria-labelledby=\"wiz-q3\">\n                        <h2 id=\"wiz-q3\">Wann soll es realistisch starten?<\/h2>\n                        <p class=\"es-wiz-hint\">Hilft mir bei der Planung \u2014 keine feste Verpflichtung.<\/p>\n                        <div class=\"es-wiz-options\" role=\"radiogroup\" aria-labelledby=\"wiz-q3\">\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"timeline\" value=\"asap\" checked> <span>So bald wie m\u00f6glich<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"timeline\" value=\"quarter\"> <span>In den n\u00e4chsten ein bis drei Monaten<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"timeline\" value=\"later\"> <span>Erst sp\u00e4ter \/ nur vorerst Orientierung<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"timeline\" value=\"unsure\"> <span>Ich wei\u00df noch nicht<\/span><\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"es-wiz-step\" id=\"panel-existing\" role=\"region\" aria-labelledby=\"wiz-q4\">\n                        <h2 id=\"wiz-q4\">Gibt es schon eine Website oder einen bestehenden Auftritt?<\/h2>\n                        <p class=\"es-wiz-hint\">Wichtig f\u00fcr Relaunch, Migration und Aufwand \u2014 bei reiner Beratung oder Branding oft weniger relevant, dann einfach \u201eunklar\u201c w\u00e4hlen.<\/p>\n                        <div class=\"es-wiz-options\" role=\"radiogroup\" aria-labelledby=\"wiz-q4\">\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"existing\" value=\"yes\"> <span>Ja, es gibt bereits eine Seite<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"existing\" value=\"no\" checked> <span>Nein \/ Start von null<\/span><\/label>\n                            <label class=\"es-wiz-opt\"><input type=\"radio\" name=\"existing\" value=\"unsure\"> <span>Ich wei\u00df noch nicht<\/span><\/label>\n                        <\/div>\n                        <div class=\"es-wiz-field es-wiz-existing-url\" id=\"field-existing-website\" hidden>\n                            <label for=\"existing_website\">Aktuelle Website<\/label>\n                            <input type=\"url\" name=\"existing_website\" id=\"existing_website\" inputmode=\"url\" autocomplete=\"url\" placeholder=\"https:\/\/deine-domain.de\" disabled>\n                            <p class=\"es-wiz-hint es-wiz-existing-url-hint\">Trag hier die URL deiner bestehenden Seite ein (optional, hilft bei Relaunch &amp; Sch\u00e4tzung).<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"es-wiz-step\" id=\"panel-result\" role=\"region\" aria-labelledby=\"wiz-q5\">\n                        <h2 id=\"wiz-q5\">Passende Preisspanne &amp; Kontakt<\/h2>\n                        <p class=\"es-wiz-hint\" id=\"wiz-result-lead\">Hier die Orientierung aus der Preisliste zu deiner Auswahl. Zum Angebot brauche ich deine E-Mail \u2014 bindend ist nur das schriftliche Angebot.<\/p>\n\n                        <div class=\"es-price-result\">\n                            <div class=\"es-price-result-label\" id=\"price-result-label\">Orientierung (Basis\u2013Premium)<\/div>\n                            <div class=\"es-price-amount\" id=\"price-out\">4.500 \u2013 9.000 \u20ac<\/div>\n                            <p class=\"es-price-hint\" id=\"price-period\">Preisspanne, zzgl. ggf. MwSt.<\/p>\n                        <\/div>\n                        <p class=\"es-care-note\" id=\"care-fineprint\" hidden><strong>Betreuung:<\/strong> Mindestlaufzeit 12 Monate, danach monatlich k\u00fcndbar. Preis monatlich, zzgl. ggf. MwSt.<\/p>\n\n                        <p class=\"es-wiz-summary\" id=\"wiz-summary\" aria-live=\"polite\"><\/p>\n\n                        <div class=\"es-wiz-field\">\n                            <label for=\"email\" class=\"es-wiz-required\">E-Mail<\/label>\n                            <input type=\"email\" id=\"email\" name=\"email\" required autocomplete=\"email\" placeholder=\"name@beispiel.de\">\n                        <\/div>\n                        <div class=\"es-wiz-field\">\n                            <label for=\"name\">Name<\/label>\n                            <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" placeholder=\"Optional, aber hilfreich\">\n                        <\/div>\n                        <div class=\"es-wiz-field\">\n                            <label for=\"phone\">Telefon<\/label>\n                            <input type=\"tel\" id=\"phone\" name=\"phone\" autocomplete=\"tel\" placeholder=\"Optional\">\n                        <\/div>\n                        <div class=\"es-wiz-field\">\n                            <label for=\"message\">Kurz notieren (optional)<\/label>\n                            <textarea id=\"message\" name=\"message\" placeholder=\"z.\u202fB. Branche, besondere W\u00fcnsche \u2026\"><\/textarea>\n                        <\/div>\n\n                        <input type=\"hidden\" name=\"preis_richtpreis\" id=\"hidden_preis\" value=\"\">\n                        <input type=\"hidden\" name=\"preis_details\" id=\"hidden_details\" value=\"\">\n\n                        <p class=\"es-wiz-privacy\">\n                            Mit dem Absenden willigst du ein, dass ich deine Angaben zur Bearbeitung deiner Anfrage nutze.\n                            Hinweise zur Verarbeitung findest du in der <a href=\"datenschutz\">Datenschutzerkl\u00e4rung<\/a>.\n                        <\/p>\n                        <label class=\"es-wiz-check check-data\" for=\"privacy_ok\">\n                            <span class=\"es-wiz-check-boxwrap\">\n                                <input type=\"checkbox\" class=\"es-wiz-check-input\" name=\"privacy_ok\" id=\"privacy_ok\" value=\"1\" required>\n                                <span class=\"es-wiz-check-ui\" aria-hidden=\"true\"><\/span>\n                            <\/span>\n                            <span class=\"es-wiz-check-text\">Ich habe die <a href=\"datenschutz\">Datenschutzerkl\u00e4rung<\/a> zur Kenntnis genommen.<\/span>\n                        <\/label>\n\n                        <p class=\"es-wiz-submit-error\" id=\"wiz-submit-error\" role=\"alert\" hidden><\/p>\n\n                        <button type=\"submit\" class=\"es-wiz-submit\" id=\"wiz-submit\">Anfrage senden<\/button>\n                    <\/div>\n\n                    <div class=\"es-wiz-done\" id=\"wiz-done\" role=\"status\" aria-live=\"polite\">\n                        <h2>Danke<\/h2>\n                        <p class=\"es-price-lead\" style=\"margin: 0;\">Deine Angaben sind bei mir eingegangen. Ich melde mich per E-Mail.<\/p>\n                    <\/div>\n\n                    <div class=\"es-wiz-nav\" id=\"wiz-nav\">\n                        <button type=\"button\" class=\"es-wiz-back\" id=\"wiz-back\" disabled>Zur\u00fcck<\/button>\n                        <button type=\"button\" class=\"es-wiz-next\" id=\"wiz-next\">Weiter<\/button>\n                    <\/div>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <script>\n(function () {\n    'use strict';\n\n    var SERVICES = {\n        onepager:     { label: 'OnePager', range: '1.200 \u2013 3.500 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        web5:         { label: 'Webseite (bis 5 Unterseiten)', range: '2.500 \u2013 5.000 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        web10:        { label: 'Webseite (bis 10 Unterseiten)', range: '4.500 \u2013 9.000 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        custom_theme: { label: 'Custom Theme', range: '1.500 \u2013 4.000 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        pwa:          { label: 'PWA (Progressive Web App)', range: '5.000 \u2013 15.000 \u20ac+', period: 'einmalig, zzgl. ggf. MwSt.', plus: true, hourly: false },\n        branding:     { label: 'Branding', range: '1.500 \u2013 6.000 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        booking:      { label: 'Buchungssystem', range: '800 \u2013 2.500 \u20ac', period: 'einmalig, zzgl. ggf. MwSt.', plus: false, hourly: false },\n        ecommerce:    { label: 'E-Commerce', range: '5.000 \u2013 20.000 \u20ac+', period: 'einmalig, zzgl. ggf. MwSt.', plus: true, hourly: false },\n        app:          { label: 'App Development', range: '8.000 \u2013 40.000 \u20ac+', period: 'einmalig, zzgl. ggf. MwSt.', plus: true, hourly: false },\n        consulting:   { label: 'Strategie & Beratung', range: '100 \u2013 180 \u20ac', period: 'pro Stunde, zzgl. ggf. MwSt.', plus: false, hourly: true }\n    };\n\n    var CARE_PACKAGES = {\n        paket_a: {\n            title: 'Paket A: Basis & Kontrolle',\n            priceDisplay: '39,00 \u20ac',\n            period: 'pro Monat, zzgl. ggf. MwSt.'\n        },\n        paket_b: {\n            title: 'Paket B: Wachstum & Sichtbarkeit',\n            priceDisplay: '69,00 \u20ac',\n            period: 'pro Monat, zzgl. ggf. MwSt.'\n        },\n        paket_c: {\n            title: 'Paket C: Innovation & KI',\n            priceDisplay: '89,00 \u20ac',\n            period: 'pro Monat, zzgl. ggf. MwSt.'\n        }\n    };\n\n    var CATEGORY_LABELS = {\n        web: 'Bereich: Website & Web',\n        ecommerce: 'Bereich: E-Commerce',\n        app_pwa: 'Bereich: App \/ PWA',\n        branding: 'Bereich: Branding',\n        booking: 'Bereich: Buchung',\n        consulting: 'Bereich: Beratung',\n        unsure: 'Bereich: noch offen (Richtpreis per E-Mail)'\n    };\n\n    var LABELS = {\n        mode: { project: 'Einmalprojekt \/ Festpreisleistung', care: 'Laufende Betreuung (Paket A, B oder C)', unsure: 'Noch nicht entschieden \/ Einordnung per E-Mail' },\n        timeline: { asap: 'Start: m\u00f6glichst bald', quarter: 'Start: in 1\u20133 Monaten', later: 'Start: sp\u00e4ter \/ nur Orientierung', unsure: 'Start: noch offen' },\n        existing: { yes: 'Bestehender Auftritt: ja', no: 'Neuaufbau \/ kein bestehender Auftritt', unsure: 'Bestehender Auftritt: noch offen' }\n    };\n\n    var DEFAULT_RESULT_LEAD = 'Hier die Orientierung aus der Preisliste zu deiner Auswahl. Zum Angebot brauche ich deine E-Mail \u2014 bindend ist nur das schriftliche Angebot.';\n    var RESULT_LEAD_UNKNOWN = 'Du hast \u201eIch wei\u00df noch nicht\u201c gew\u00e4hlt \u2014 hier kann ich keinen festen Richtpreis aus der Liste anzeigen. Bitte schreib mir kurz per E-Mail (Formular unten), dann schlage ich dir einen passenden Rahmen vor.';\n\n    var form = document.getElementById('wiz-form');\n    var stepLabel = document.getElementById('wiz-step-label');\n    var barFill = document.getElementById('wiz-bar-fill');\n    var btnBack = document.getElementById('wiz-back');\n    var btnNext = document.getElementById('wiz-next');\n    var priceOut = document.getElementById('price-out');\n    var pricePeriod = document.getElementById('price-period');\n    var summaryEl = document.getElementById('wiz-summary');\n    var hiddenPreis = document.getElementById('hidden_preis');\n    var hiddenDetails = document.getElementById('hidden_details');\n    var wizDone = document.getElementById('wiz-done');\n    var priceResultLabel = document.getElementById('price-result-label');\n    var careFineprint = document.getElementById('care-fineprint');\n    var wizResultLead = document.getElementById('wiz-result-lead');\n    var wizNav = document.getElementById('wiz-nav');\n    var submitError = document.getElementById('wiz-submit-error');\n    var submitBtn = document.getElementById('wiz-submit');\n\n    var currentPanelId = 'panel-mode';\n\n    function buildMailBody() {\n        var parts = [];\n        parts.push('=== Preisberechnung (es.design) ===');\n        parts.push('');\n        var sum = document.getElementById('wiz-summary');\n        if (sum && sum.textContent.trim()) {\n            parts.push(sum.textContent.trim());\n        }\n        parts.push('');\n        parts.push('--- Kontakt ---');\n        var emVal = (document.getElementById('email') || {}).value || '';\n        parts.push('E-Mail: ' + emVal);\n        var n = document.getElementById('name');\n        if (n && n.value.trim()) parts.push('Name: ' + n.value.trim());\n        var ph = document.getElementById('phone');\n        if (ph && ph.value.trim()) parts.push('Telefon: ' + ph.value.trim());\n        var msg = document.getElementById('message');\n        if (msg && msg.value.trim()) parts.push('Nachricht: ' + msg.value.trim());\n        parts.push('');\n        parts.push('--- Technische Angaben ---');\n        parts.push('service: ' + ((document.getElementById('derived-service') || {}).value || ''));\n        parts.push('preis_richtpreis: ' + ((document.getElementById('hidden_preis') || {}).value || ''));\n        parts.push('preis_details: ' + ((document.getElementById('hidden_details') || {}).value || ''));\n        var exW = document.getElementById('existing_website');\n        if (exW && !exW.disabled && exW.value.trim()) {\n            parts.push('bestehende Website: ' + exW.value.trim());\n        }\n        return parts.join('\\n');\n    }\n\n    function finalizeSuccessUI() {\n        form.querySelectorAll('input, textarea, button').forEach(function (el) { el.disabled = true; });\n        if (wizNav) wizNav.style.display = 'none';\n        form.querySelectorAll('.es-wiz-step').forEach(function (el) {\n            el.classList.remove('is-active');\n            el.hidden = true;\n        });\n        wizDone.classList.add('is-visible');\n    }\n\n    function getMode() {\n        var m = form.querySelector('input[name=\"mode\"]:checked');\n        return m ? m.value : 'project';\n    }\n\n    function getProjectCategory() {\n        var el = form.querySelector('input[name=\"project_category\"]:checked');\n        return el ? el.value : 'web';\n    }\n\n    function getSequence() {\n        var m = getMode();\n        if (m === 'unsure') {\n            return ['panel-mode', 'panel-timeline', 'panel-existing', 'panel-result'];\n        }\n        if (m === 'care') {\n            return ['panel-mode', 'panel-care', 'panel-timeline', 'panel-existing', 'panel-result'];\n        }\n        var cat = getProjectCategory();\n        var seq = ['panel-mode', 'panel-proj-category'];\n        if (cat === 'web' || cat === 'app_pwa') {\n            seq.push('panel-proj-detail');\n        }\n        seq.push('panel-timeline', 'panel-existing', 'panel-result');\n        return seq;\n    }\n\n    function deriveService() {\n        var cat = getProjectCategory();\n        if (cat === 'unsure') return 'unsure';\n        if (cat === 'ecommerce') return 'ecommerce';\n        if (cat === 'branding') return 'branding';\n        if (cat === 'booking') return 'booking';\n        if (cat === 'consulting') return 'consulting';\n        if (cat === 'web') {\n            var w = (form.querySelector('input[name=\"project_detail_web\"]:checked') || {}).value;\n            if (w === 'unsure') return 'unsure';\n            return w || 'web5';\n        }\n        if (cat === 'app_pwa') {\n            var ap = (form.querySelector('input[name=\"project_detail_app\"]:checked') || {}).value;\n            if (ap === 'unsure') return 'unsure';\n            return ap === 'app' ? 'app' : 'pwa';\n        }\n        return 'web10';\n    }\n\n    function syncDerivedService() {\n        var h = document.getElementById('derived-service');\n        if (!h) return;\n        var mode = getMode();\n        if (mode === 'unsure') {\n            h.value = 'unsure';\n        } else if (mode === 'project') {\n            h.value = deriveService();\n        } else {\n            h.value = '';\n        }\n    }\n\n    function isPriceIndeterminate() {\n        var mode = getMode();\n        if (mode === 'unsure') return true;\n        if (mode === 'care') {\n            var cp = form.querySelector('input[name=\"care_package\"]:checked');\n            return !!(cp && cp.value === 'unsure');\n        }\n        if (mode === 'project') {\n            var cat = getProjectCategory();\n            if (cat === 'unsure') return true;\n            if (cat === 'web') {\n                return ((form.querySelector('input[name=\"project_detail_web\"]:checked') || {}).value) === 'unsure';\n            }\n            if (cat === 'app_pwa') {\n                return ((form.querySelector('input[name=\"project_detail_app\"]:checked') || {}).value) === 'unsure';\n            }\n        }\n        return false;\n    }\n\n    function updateExistingWebsiteField() {\n        var wrap = document.getElementById('field-existing-website');\n        var inp = document.getElementById('existing_website');\n        if (!wrap || !inp) return;\n        var ex = form.querySelector('input[name=\"existing\"]:checked');\n        if (ex && ex.value === 'yes') {\n            wrap.hidden = false;\n            inp.disabled = false;\n        } else {\n            wrap.hidden = true;\n            inp.disabled = true;\n            inp.value = '';\n        }\n    }\n\n    function pushExistingWebsiteLine(lines) {\n        var ex = form.querySelector('input[name=\"existing\"]:checked');\n        if (!ex || ex.value !== 'yes') return;\n        var url = (document.getElementById('existing_website') || {}).value;\n        url = typeof url === 'string' ? url.trim() : '';\n        if (url) lines.push('Aktuelle Website: ' + url);\n    }\n\n    function updateDetailBlocksVisibility() {\n        var cat = getProjectCategory();\n        var web = document.getElementById('detail-block-web');\n        var app = document.getElementById('detail-block-app');\n        var hint = document.getElementById('wiz-pdet-hint');\n        if (!web || !app) return;\n        if (cat === 'unsure') {\n            web.hidden = true;\n            app.hidden = true;\n            if (hint) hint.textContent = 'Keine weitere Auswahl n\u00f6tig \u2014 der Richtpreis folgt per E-Mail.';\n        } else if (cat === 'web') {\n            web.hidden = false;\n            app.hidden = true;\n            if (hint) hint.textContent = 'Welcher Umfang kommt deinem Plan am n\u00e4chsten?';\n        } else if (cat === 'app_pwa') {\n            web.hidden = true;\n            app.hidden = false;\n            if (hint) hint.textContent = 'PWA im Browser oder App im Store \u2014 was ist das Ziel?';\n        } else {\n            web.hidden = true;\n            app.hidden = true;\n        }\n    }\n\n    function syncBranchInputs() {\n        var isProj = getMode() === 'project';\n        ['panel-proj-category', 'panel-proj-detail'].forEach(function (id) {\n            var p = document.getElementById(id);\n            if (p) p.querySelectorAll('input').forEach(function (el) { el.disabled = !isProj; });\n        });\n        var care = document.getElementById('panel-care');\n        if (care) care.querySelectorAll('input').forEach(function (el) { el.disabled = isProj; });\n    }\n\n    function validatePanel(panelId) {\n        if (panelId === 'panel-mode') return !!form.querySelector('input[name=\"mode\"]:checked');\n        if (panelId === 'panel-proj-category') return !!form.querySelector('input[name=\"project_category\"]:checked');\n        if (panelId === 'panel-care') return !!form.querySelector('input[name=\"care_package\"]:checked');\n        if (panelId === 'panel-proj-detail') {\n            var cat = getProjectCategory();\n            if (cat === 'web') return !!form.querySelector('input[name=\"project_detail_web\"]:checked');\n            if (cat === 'app_pwa') return !!form.querySelector('input[name=\"project_detail_app\"]:checked');\n            return false;\n        }\n        if (panelId === 'panel-timeline') return !!form.querySelector('input[name=\"timeline\"]:checked');\n        if (panelId === 'panel-existing') return !!form.querySelector('input[name=\"existing\"]:checked');\n        if (panelId === 'panel-result') return true;\n        return true;\n    }\n\n    function showPanel(panelId) {\n        var seq = getSequence();\n        if (seq.indexOf(panelId) < 0) {\n            panelId = seq[0];\n        }\n        currentPanelId = panelId;\n        var idx = seq.indexOf(panelId);\n        form.querySelectorAll('.es-wiz-step').forEach(function (el) {\n            el.classList.remove('is-active');\n        });\n        var panel = document.getElementById(panelId);\n        if (panel) panel.classList.add('is-active');\n        if (panelId === 'panel-proj-detail') updateDetailBlocksVisibility();\n        if (panelId === 'panel-existing') updateExistingWebsiteField();\n        syncBranchInputs();\n        syncDerivedService();\n        stepLabel.textContent = 'Schritt ' + (idx + 1) + ' von ' + seq.length;\n        barFill.style.width = ((idx + 1) \/ seq.length) * 100 + '%';\n        btnBack.disabled = idx === 0;\n        if (idx === seq.length - 1) {\n            btnNext.style.display = 'none';\n            updatePriceAndSummary();\n        } else {\n            btnNext.style.display = '';\n            btnNext.disabled = !validatePanel(panelId);\n        }\n        var fh = panel ? panel.querySelector('h2') : null;\n        if (fh) {\n            try { fh.focus({ preventScroll: true }); } catch (e) {}\n        }\n    }\n\n    function goNext() {\n        var seq = getSequence();\n        var i = seq.indexOf(currentPanelId);\n        if (!validatePanel(currentPanelId)) return;\n        if (i < seq.length - 1) showPanel(seq[i + 1]);\n    }\n\n    function goBack() {\n        var seq = getSequence();\n        var i = seq.indexOf(currentPanelId);\n        if (i > 0) showPanel(seq[i - 1]);\n    }\n\n    function updatePriceAndSummary() {\n        var mode = getMode();\n        var linePreis = '';\n        var lines = [];\n\n        if (isPriceIndeterminate()) {\n            if (priceResultLabel) priceResultLabel.textContent = 'Orientierung';\n            if (careFineprint) careFineprint.hidden = true;\n            priceOut.textContent = '???';\n            pricePeriod.textContent = 'Kein fester Richtpreis aus der Liste \u2014 bitte kurz per E-Mail melden (Formular unten), dann schlage ich dir einen passenden Rahmen vor.';\n            if (wizResultLead) wizResultLead.textContent = RESULT_LEAD_UNKNOWN;\n            linePreis = '??? \u2014 Kl\u00e4rung per E-Mail';\n            lines.push(LABELS.mode[mode]);\n            if (mode === 'project') {\n                lines.push(CATEGORY_LABELS[getProjectCategory()] || '');\n            }\n            if (mode === 'care') {\n                lines.push('Betreuungspaket: noch offen');\n            }\n            var tlU = form.querySelector('input[name=\"timeline\"]:checked');\n            if (tlU) lines.push(LABELS.timeline[tlU.value]);\n            var exU = form.querySelector('input[name=\"existing\"]:checked');\n            if (exU) lines.push(LABELS.existing[exU.value]);\n            pushExistingWebsiteLine(lines);\n            summaryEl.innerHTML = '<strong>Deine Auswahl<\/strong>\\n' + lines.filter(Boolean).map(function (l) { return '\u00b7 ' + l; }).join('\\n');\n            hiddenPreis.value = linePreis;\n            hiddenDetails.value = lines.filter(Boolean).join(' | ');\n            syncDerivedService();\n            return;\n        }\n\n        if (wizResultLead) wizResultLead.textContent = DEFAULT_RESULT_LEAD;\n\n        if (mode === 'project') {\n            if (priceResultLabel) priceResultLabel.textContent = 'Orientierung (Basis\u2013Premium)';\n            if (careFineprint) careFineprint.hidden = true;\n            var key = deriveService();\n            var s = SERVICES[key];\n            if (!s) s = SERVICES.web10;\n            priceOut.textContent = s.range;\n            if (s.hourly) {\n                pricePeriod.textContent = s.period + ' (Orientierung aus der Preisliste)';\n            } else if (s.plus) {\n                pricePeriod.textContent = s.period + ' \u2014 Bei hohem Aufwand kann der Preis \u00fcber der oberen Spanne liegen.';\n            } else {\n                pricePeriod.textContent = s.period;\n            }\n            linePreis = s.range + ' \u2014 ' + s.label;\n            lines.push(CATEGORY_LABELS[getProjectCategory()] || '');\n            lines.push(s.label);\n        } else {\n            if (priceResultLabel) priceResultLabel.textContent = 'Monatlicher Betrag (Betreuung)';\n            if (careFineprint) careFineprint.hidden = false;\n            var pk = form.querySelector('input[name=\"care_package\"]:checked');\n            var pkey = pk ? pk.value : 'paket_a';\n            var c = CARE_PACKAGES[pkey];\n            if (!c) c = CARE_PACKAGES.paket_a;\n            priceOut.textContent = c.priceDisplay;\n            pricePeriod.textContent = c.period;\n            linePreis = c.priceDisplay + ' \/ Monat \u2014 ' + c.title;\n            lines.push(c.title);\n        }\n\n        lines.unshift(LABELS.mode[mode]);\n\n        var tl = form.querySelector('input[name=\"timeline\"]:checked');\n        if (tl) lines.push(LABELS.timeline[tl.value]);\n\n        var ex = form.querySelector('input[name=\"existing\"]:checked');\n        if (ex) lines.push(LABELS.existing[ex.value]);\n        pushExistingWebsiteLine(lines);\n\n        summaryEl.innerHTML = '<strong>Deine Auswahl<\/strong>\\n' + lines.filter(Boolean).map(function (l) { return '\u00b7 ' + l; }).join('\\n');\n        hiddenPreis.value = linePreis;\n        hiddenDetails.value = lines.filter(Boolean).join(' | ');\n        syncDerivedService();\n    }\n\n    btnNext.addEventListener('click', goNext);\n\n    btnBack.addEventListener('click', goBack);\n\n    form.querySelectorAll('input[type=\"radio\"]').forEach(function (inp) {\n        inp.addEventListener('change', function () {\n            if (inp.name === 'mode') {\n                syncBranchInputs();\n                showPanel('panel-mode');\n                return;\n            }\n            if (inp.name === 'project_category') {\n                updateDetailBlocksVisibility();\n            }\n            if (inp.name === 'existing') {\n                updateExistingWebsiteField();\n            }\n            var seq = getSequence();\n            if (seq.indexOf(currentPanelId) >= 0 && currentPanelId !== 'panel-result') {\n                btnNext.disabled = !validatePanel(currentPanelId);\n            }\n        });\n    });\n    form.addEventListener('submit', function (e) {\n        var em = document.getElementById('email');\n        var priv = document.getElementById('privacy_ok');\n        if (!em.value.trim()) {\n            e.preventDefault();\n            em.focus();\n            return;\n        }\n        if (!priv.checked) {\n            e.preventDefault();\n            priv.focus();\n            return;\n        }\n        e.preventDefault();\n        updatePriceAndSummary();\n\n        var mailEndpoint = (form.getAttribute('data-mail-endpoint') || '').trim();\n        if (submitError) {\n            submitError.hidden = true;\n            submitError.textContent = '';\n        }\n\n        if (!mailEndpoint) {\n            finalizeSuccessUI();\n            return;\n        }\n\n        var nameEl = document.getElementById('name');\n        var fromName = (nameEl && nameEl.value.trim()) ? nameEl.value.trim() : 'Preisberechnung';\n\n        if (submitBtn) {\n            submitBtn.disabled = true;\n            submitBtn.textContent = 'Wird gesendet\u2026';\n        }\n\n        function handleSendError(msg) {\n            if (submitError) {\n                submitError.textContent = msg || 'Versand fehlgeschlagen. Bitte sp\u00e4ter erneut versuchen.';\n                submitError.hidden = false;\n            }\n            if (submitBtn) {\n                submitBtn.disabled = false;\n                submitBtn.textContent = 'Anfrage senden';\n            }\n        }\n\n        function handleSendSuccess(data) {\n            if (data && (data.success || data.ok)) {\n                finalizeSuccessUI();\n            } else {\n                handleSendError(data && data.message ? data.message : null);\n            }\n        }\n\n        var payload = {\n            email: em.value.trim(),\n            name: fromName,\n            message: buildMailBody(),\n            privacy_ok: priv.checked ? 1 : 0\n        };\n\n        fetch(mailEndpoint, {\n            method: 'POST',\n            headers: { 'Content-Type': 'application\/json', 'Accept': 'application\/json' },\n            body: JSON.stringify(payload)\n        })\n            .then(function (r) { return r.json().catch(function () { return {}; }); })\n            .then(handleSendSuccess)\n            .catch(function () { handleSendError('Netzwerkfehler. Liegt send-preisberechnung.php am richtigen Ort? Pfad in data-mail-endpoint pr\u00fcfen.'); });\n    });\n\n    showPanel('panel-mode');\n    updateExistingWebsiteField();\n})();\n    <\/script>\n\n\n\n<body>\n\n<footer>\n    <div class=\"es-container\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-brand\">\n                <a href=\"\/\" class=\"footer-logo\"><img src=\"https:\/\/eliasschultze.de\/wp-content\/uploads\/2026\/03\/Logo_weiss-1.webp\" alt=\"es.design\" width=\"140\" height=\"44\" loading=\"lazy\" decoding=\"async\" title=\"| Elias Schultze\"><\/a>\n                <p class=\"footer-tagline\">Webdesign und Entwicklung mit Leidenschaft aus dem sch\u00f6nen Odenwald. Beratung, Design, Social Media &#038; mehr.<\/p>\n\n                <div class=\"footer-social\">\n                    <a href=\"https:\/\/www.instagram.com\/eliasschultze\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            <div class=\"footer-col\">\n                <h3 class=\"footer-col-title\">Navigation<\/h3>\n                <ul>\n                    <li><a href=\"\/\">Home<\/a><\/li>\n                    <li><a href=\"\/studio\/\">Studio<\/a><\/li>\n                    <li><a href=\"\/expertise\/\">Expertise<\/a><\/li>\n                    <li><a href=\"\/cases\/\">Cases<\/a><\/li>\n                    <li><a href=\"#kontakt\">Kontakt<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h3 class=\"footer-col-title\">Rechtliches<\/h3>\n                <ul>\n                    <li><a href=\"\/impressum\/\">Impressum<\/a><\/li>\n                    <li><a href=\"\/datenschutz\/\">Datenschutz<\/a><\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"footer-col\">\n                <h3 class=\"footer-col-title\">Kontakt<\/h3>\n                <p><a href=\"tel:+4915902025178\">+49 159 02025178<\/a><\/p>\n                <p><a href=\"mailto:info@eliasschultze.de\">info@eliasschultze.de<\/a><\/p>\n            <\/div>\n        <\/div>\n        <p class=\"footer-bottom\">\u00a9 2026 es.design | Elias Schultze. All rights reserved.<\/p>\n    <\/div>\n<\/footer>\n<\/body>\n<style>\na{text-decoration: none !important;}\n.footer-cta { padding: 150px 0; text-align: center; background: var(--marineblau); color: var(--weiss); }\n.footer-cta h2 { font-size: clamp(2.5rem, 5vw, 5rem); margin-bottom: 32px; color: var(--weiss); }\n.footer-cta p { font-size: 20px; color: rgba(255,255,255,0.7); font-weight: 300; max-width: 700px; margin: 0 auto 48px; line-height: 1.6; }\n\nfooter { background: var(--marineblau); padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }\n.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px 32px; margin-bottom: 48px; }\n.footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }\n.footer-brand .footer-logo img { height: 44px; width: auto; display: block; }\n.footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 280px; margin-bottom: 24px; }\n.footer-search-form { display: flex; align-items: stretch; max-width: 280px; margin-bottom: 24px; }\n.footer-search-form input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.25); border-right: none; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.95); font-size: 14px; font-family: inherit; color: var(--marineblau); }\n.footer-search-form input::placeholder { color: var(--text-muted); }\n.footer-search-form button { width: 44px; background: var(--mint); border: none; border-radius: 0 8px 8px 0; color: var(--marineblau); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-search-form button:hover { background: #8fcacd; }\n.footer-search-form button svg { width: 18px; height: 18px; }\n.footer-social { display: flex; gap: 10px; }\n.footer-social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }\n.footer-social a:hover { background: rgba(255,255,255,0.2); }\n.footer-social a svg { width: 18px; height: 18px; }\n.footer-col h4, .footer-col .footer-col-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin: 0 0 16px 0; }\n.footer-col ul { list-style: none; }\n.footer-col ul li { margin-bottom: 10px; }\n.footer-col a { font-size: 15px; color: rgba(255,255,255,0.9); transition: color 0.2s ease; }\n.footer-col a:hover { color: var(--weiss); }\n.footer-col p { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 6px; }\n.footer-col p a { color: inherit; }\n.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }\n\n@media (max-width: 900px) {\n    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }\n\n}\n@media (max-width: 768px) {\n    .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n}\n\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Zum Inhalt springen Studio Expertise Cases Kontakt Kostenloses Erstgespr\u00e4ch DE EN Instagram \u2924 Studio Expertise Cases DE EN Let&#8217;s talk Zum Inhalt springen Preisberechnung Zuerst kl\u00e4ren wir, was zu dir passt \u2014 ohne Preisdruck in jeder Zeile. Deine passende Preisspanne siehst du erst am Ende; dort kannst du mir deine E-Mail hinterlassen. Schritt 1 von [&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-2232","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/2232","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=2232"}],"version-history":[{"count":16,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/2232\/revisions"}],"predecessor-version":[{"id":2264,"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/pages\/2232\/revisions\/2264"}],"wp:attachment":[{"href":"https:\/\/eliasschultze.de\/en\/wp-json\/wp\/v2\/media?parent=2232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}