{"id":17120,"date":"2026-01-16T19:41:18","date_gmt":"2026-01-16T18:41:18","guid":{"rendered":"https:\/\/boraoenal.com\/?page_id=17120"},"modified":"2026-04-09T05:12:21","modified_gmt":"2026-04-09T03:12:21","slug":"shopify-ki-beratung","status":"publish","type":"page","link":"https:\/\/boraoenal.com\/en\/","title":{"rendered":"Shopify &#038; KI im E-Commerce \u2013 Beratung, Entwicklung &#038; Automatisierungen &#8211; 2026"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17120\" class=\"elementor elementor-17120\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e69c394 e-con-full e-flex e-con e-parent\" data-id=\"e69c394\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d476e3f elementor-widget elementor-widget-html\" data-id=\"d476e3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n  CHATBOT WIDGET \u2013 boraoenal.com\n  Bot: Website-Besucher (\u00f6ffentlich)\n\n  EINBINDUNG in WordPress \/ Elementor:\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  1. VPS + n8n einrichten (siehe der-plan-bis-golive.md)\n  2. N8N_WEBHOOK_URL unten eintragen (Zeile ~790)\n  3. Code per WPCode Plugin oder footer.php einbinden\n\n  WEBHOOK URL EINTRAGEN:\n  Suche nach: proxyUrl: 'N8N_WEBHOOK_URL_HIER_EINTRAGEN'\n  Ersetze mit deiner n8n Webhook URL, z.B.:\n  proxyUrl: 'https:\/\/n8n.boraoenal.com\/webhook\/bora-website'\n  ============================================================ -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* \u2500\u2500 Design: boraoenal.com \u2013 Blau #119eda Prim\u00e4r, Orange #E8490F Akzent \u2500\u2500 *\/\n  :root {\n    --bc-primary: #119eda;\n    --bc-primary-hover: #0e8bc4;\n    --bc-primary-light: rgba(17, 158, 218, 0.10);\n    --bc-primary-glow: rgba(17, 158, 218, 0.35);\n    --bc-accent: #E8490F;\n    --bc-bg: #ffffff;\n    --bc-bg-input: #f7fafd;\n    --bc-bg-bot: #f3f6fb;\n    --bc-text: #1a2535;\n    --bc-text-sub: #64748b;\n    --bc-text-time: #94a3b8;\n    --bc-border: #e4ecf5;\n    --bc-radius: 16px;\n    --bc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  \/* \u2500\u2500 Hard Reset (Elementor-sicher) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-widget,\n  #bc-widget *,\n  #bc-widget *::before,\n  #bc-widget *::after {\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    font-family: var(--bc-font) !important;\n    line-height: normal !important;\n    letter-spacing: normal !important;\n    text-transform: none !important;\n    text-decoration: none !important;\n    border: none !important;\n    outline: none !important;\n    box-shadow: none !important;\n    float: none !important;\n    clear: none !important;\n    -webkit-text-size-adjust: 100% !important;\n  }\n\n  \/* \u2500\u2500 Toggle Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-toggle {\n    position: fixed !important;\n    bottom: 28px !important;\n    right: 28px !important;\n    width: 60px !important;\n    height: 60px !important;\n    background: var(--bc-primary) !important;\n    border-radius: 50% !important;\n    cursor: pointer !important;\n    box-shadow: 0 4px 24px var(--bc-primary-glow), 0 2px 8px rgba(0, 0, 0, 0.12) !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    z-index: 99999 !important;\n    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;\n  }\n\n  #bc-toggle:hover {\n    transform: scale(1.08) !important;\n    box-shadow: 0 6px 32px var(--bc-primary-glow), 0 2px 12px rgba(0, 0, 0, 0.15) !important;\n  }\n\n  #bc-toggle svg {\n    width: 26px !important;\n    height: 26px !important;\n    fill: #fff !important;\n    transition: opacity 0.18s ease, transform 0.2s ease !important;\n    position: absolute !important;\n  }\n\n  #bc-icon-close {\n    display: none !important;\n    opacity: 0 !important;\n  }\n\n  \/* Unread badge *\/\n  #bc-badge {\n    position: absolute !important;\n    top: -1px !important;\n    right: -1px !important;\n    width: 16px !important;\n    height: 16px !important;\n    background: var(--bc-primary) !important;\n    border-radius: 50% !important;\n    border: 2.5px solid #fff !important;\n    display: none !important;\n    animation: bc-badgepop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;\n  }\n\n  @keyframes bc-badgepop {\n    from { transform: scale(0); }\n    to { transform: scale(1); }\n  }\n\n  \/* \u2500\u2500 Proaktive Bubble \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-proactive {\n    position: fixed !important;\n    bottom: 98px !important;\n    right: 28px !important;\n    background: var(--bc-bg) !important;\n    color: var(--bc-text) !important;\n    padding: 12px 16px !important;\n    border-radius: 14px 14px 4px 14px !important;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;\n    font-size: 13.5px !important;\n    font-weight: 500 !important;\n    line-height: 1.45 !important;\n    max-width: 260px !important;\n    z-index: 99998 !important;\n    opacity: 0 !important;\n    transform: translateY(8px) scale(0.95) !important;\n    pointer-events: none !important;\n    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;\n    border-left: 3px solid var(--bc-accent) !important;\n  }\n\n  #bc-proactive.bc-show {\n    opacity: 1 !important;\n    transform: translateY(0) scale(1) !important;\n    pointer-events: all !important;\n  }\n\n  #bc-proactive-close {\n    position: absolute !important;\n    top: -8px !important;\n    right: -8px !important;\n    width: 22px !important;\n    height: 22px !important;\n    background: #e2e8f0 !important;\n    border-radius: 50% !important;\n    cursor: pointer !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    font-size: 12px !important;\n    color: #64748b !important;\n    font-weight: 700 !important;\n    transition: background 0.15s !important;\n  }\n\n  #bc-proactive-close:hover {\n    background: #cbd5e1 !important;\n  }\n\n  \/* \u2500\u2500 Chat Window \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-window {\n    position: fixed !important;\n    bottom: 102px !important;\n    right: 28px !important;\n    width: 385px !important;\n    height: 540px !important;\n    background: var(--bc-bg) !important;\n    border-radius: var(--bc-radius) !important;\n    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 4px 24px var(--bc-primary-glow) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    z-index: 99998 !important;\n    overflow: hidden !important;\n    transform: scale(0.88) translateY(24px) !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease !important;\n    transform-origin: bottom right !important;\n  }\n\n  #bc-window.bc-open {\n    transform: scale(1) translateY(0) !important;\n    opacity: 1 !important;\n    pointer-events: all !important;\n  }\n\n  \/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-header {\n    background: linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-hover) 100%) !important;\n    padding: 14px 16px !important;\n    display: flex !important;\n    align-items: center !important;\n    gap: 12px !important;\n    flex-shrink: 0 !important;\n  }\n\n  .bc-avatar {\n    width: 42px !important;\n    height: 42px !important;\n    background: rgba(255, 255, 255, 0.18) !important;\n    border-radius: 50% !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    flex-shrink: 0 !important;\n    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;\n  }\n\n  .bc-avatar svg {\n    width: 22px !important;\n    height: 22px !important;\n    fill: #fff !important;\n  }\n\n  .bc-header-info {\n    flex: 1 !important;\n  }\n\n  .bc-header-name {\n    color: #fff !important;\n    font-weight: 700 !important;\n    font-size: 15px !important;\n    line-height: 1.2 !important;\n  }\n\n  .bc-header-sub {\n    color: rgba(255, 255, 255, 0.82) !important;\n    font-size: 12px !important;\n    margin-top: 2px !important;\n    display: flex !important;\n    align-items: center !important;\n    gap: 5px !important;\n  }\n\n  .bc-dot {\n    width: 7px !important;\n    height: 7px !important;\n    background: #4ade80 !important;\n    border-radius: 50% !important;\n    flex-shrink: 0 !important;\n    animation: bc-pulse 2.2s ease infinite !important;\n  }\n\n  @keyframes bc-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.55; transform: scale(0.85); }\n  }\n\n  #bc-close {\n    background: rgba(255, 255, 255, 0.08) !important;\n    cursor: pointer !important;\n    padding: 6px !important;\n    color: rgba(255, 255, 255, 0.8) !important;\n    display: flex !important;\n    align-items: center !important;\n    border-radius: 8px !important;\n    transition: color 0.15s, background 0.15s !important;\n  }\n\n  #bc-close:hover {\n    color: #fff !important;\n    background: rgba(255, 255, 255, 0.18) !important;\n  }\n\n  #bc-close svg {\n    width: 18px !important;\n    height: 18px !important;\n    fill: currentColor !important;\n  }\n\n  \/* \u2500\u2500 Loading Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-loadbar {\n    height: 3px !important;\n    background: rgba(232, 73, 15, 0.08) !important;\n    flex-shrink: 0 !important;\n    position: relative !important;\n    overflow: hidden !important;\n  }\n\n  #bc-loadbar.bc-loading::after {\n    content: '' !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: -40% !important;\n    width: 40% !important;\n    height: 100% !important;\n    background: var(--bc-accent) !important;\n    border-radius: 2px !important;\n    animation: bc-slide 1.1s ease infinite !important;\n  }\n\n  @keyframes bc-slide {\n    to { left: 140%; }\n  }\n\n  \/* \u2500\u2500 DSGVO Screen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-gdpr {\n    flex: 1 !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    justify-content: center !important;\n    padding: 28px 24px !important;\n    text-align: center !important;\n  }\n\n  #bc-gdpr.bc-hidden {\n    display: none !important;\n  }\n\n  .bc-gdpr-icon {\n    width: 52px !important;\n    height: 52px !important;\n    background: var(--bc-primary-light) !important;\n    border-radius: 50% !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    margin-bottom: 16px !important;\n  }\n\n  .bc-gdpr-icon svg {\n    width: 24px !important;\n    height: 24px !important;\n    fill: var(--bc-primary) !important;\n  }\n\n  .bc-gdpr-title {\n    font-size: 16px !important;\n    font-weight: 700 !important;\n    color: var(--bc-text) !important;\n    margin-bottom: 8px !important;\n  }\n\n  .bc-gdpr-text {\n    font-size: 13px !important;\n    color: var(--bc-text-sub) !important;\n    line-height: 1.6 !important;\n    margin-bottom: 20px !important;\n    max-width: 300px !important;\n  }\n\n  .bc-gdpr-text a {\n    color: var(--bc-accent) !important;\n    text-decoration: underline !important;\n  }\n\n  #bc-gdpr-accept {\n    background: var(--bc-primary) !important;\n    color: #fff !important;\n    padding: 11px 28px !important;\n    border-radius: 10px !important;\n    font-size: 14px !important;\n    font-weight: 600 !important;\n    cursor: pointer !important;\n    transition: background 0.18s, transform 0.1s !important;\n  }\n\n  #bc-gdpr-accept:hover {\n    background: var(--bc-primary-hover) !important;\n    transform: translateY(-1px) !important;\n  }\n\n  \/* \u2500\u2500 Messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-messages {\n    flex: 1 !important;\n    overflow-y: auto !important;\n    padding: 16px !important;\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 14px !important;\n    scroll-behavior: smooth !important;\n  }\n\n  #bc-messages.bc-hidden {\n    display: none !important;\n  }\n\n  #bc-messages::-webkit-scrollbar { width: 4px !important; }\n  #bc-messages::-webkit-scrollbar-track { background: transparent !important; }\n  #bc-messages::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 2px !important; }\n\n  .bc-msg {\n    display: flex !important;\n    flex-direction: column !important;\n    max-width: 87% !important;\n    animation: bc-in 0.3s ease both !important;\n  }\n\n  @keyframes bc-in {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .bc-msg.bc-user { align-self: flex-end !important; align-items: flex-end !important; }\n  .bc-msg.bc-bot  { align-self: flex-start !important; align-items: flex-start !important; }\n\n  \/* H\u00f6here Spezifit\u00e4t als #bc-widget * damit padding nicht \u00fcberschrieben wird *\/\n  #bc-widget .bc-bubble {\n    padding: 10px 14px !important;\n    font-size: 14px !important;\n    line-height: 1.5 !important;\n    word-break: break-word !important;\n    border-radius: 0px !important;\n    text-decoration: none !important;\n  }\n\n  #bc-widget .bc-user .bc-bubble {\n    background: var(--bc-primary) !important;\n    color: #fff !important;\n  }\n\n  #bc-widget .bc-bot .bc-bubble {\n    background: #dce8f6 !important;\n    color: #0f1d2e !important;\n    border: 1.5px solid #a8c0dc !important;\n    box-shadow: none !important;\n  }\n\n  #bc-widget .bc-bot .bc-bubble strong { font-weight: 700 !important; color: #0f1d2e !important; }\n  #bc-widget .bc-bot .bc-bubble a { color: var(--bc-accent) !important; text-decoration: underline !important; }\n  #bc-widget .bc-bot .bc-bubble p { margin-bottom: 6px !important; }\n  #bc-widget .bc-bot .bc-bubble p:last-child { margin-bottom: 0 !important; }\n\n  .bc-time {\n    font-size: 11px !important;\n    color: var(--bc-text-time) !important;\n    margin-top: 5px !important;\n    padding: 0 4px !important;\n    line-height: 1.4 !important;\n  }\n\n  \/* \u2500\u2500 Quick Replies \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .bc-quick-replies {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 7px !important;\n    margin-top: 10px !important;\n  }\n\n  .bc-qr-btn {\n    background: var(--bc-bg) !important;\n    color: var(--bc-primary) !important;\n    border: 1.5px solid var(--bc-primary) !important;\n    border-radius: 20px !important;\n    padding: 7px 14px !important;\n    font-size: 12.5px !important;\n    font-weight: 500 !important;\n    cursor: pointer !important;\n    transition: background 0.18s, color 0.18s, transform 0.1s !important;\n    white-space: nowrap !important;\n  }\n\n  .bc-qr-btn:hover {\n    background: var(--bc-primary) !important;\n    color: #fff !important;\n    transform: translateY(-1px) !important;\n  }\n\n  \/* Contact button *\/\n  .bc-contact-btn {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 10px !important;\n    margin-top: 14px !important;\n    padding: 15px 26px !important;\n    background: var(--bc-accent) !important;\n    color: #fff !important;\n    border-radius: 0px !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    text-decoration: none !important;\n    transition: background 0.18s, transform 0.1s !important;\n    cursor: pointer !important;\n    letter-spacing: 0.01em !important;\n  }\n\n  .bc-contact-btn:hover {\n    background: #c93a0a !important;\n    transform: translateY(-1px) !important;\n  }\n\n  .bc-contact-btn svg {\n    width: 18px !important;\n    height: 18px !important;\n    fill: #fff !important;\n    flex-shrink: 0 !important;\n  }\n\n  \/* Typing dots *\/\n  #bc-widget .bc-typing-el .bc-bubble { padding: 14px 18px !important; }\n\n  .bc-dots {\n    display: flex !important;\n    gap: 4px !important;\n    align-items: center !important;\n  }\n\n  .bc-dots span {\n    width: 7px !important;\n    height: 7px !important;\n    background: #94a3b8 !important;\n    border-radius: 50% !important;\n    animation: bc-bounce 1.3s ease infinite !important;\n  }\n\n  .bc-dots span:nth-child(2) { animation-delay: 0.18s !important; }\n  .bc-dots span:nth-child(3) { animation-delay: 0.36s !important; }\n\n  @keyframes bc-bounce {\n    0%, 60%, 100% { transform: translateY(0); }\n    30% { transform: translateY(-7px); }\n  }\n\n  \/* \u2500\u2500 Input Area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-input-wrap {\n    padding: 12px 14px !important;\n    border-top: 1px solid var(--bc-border) !important;\n    display: flex !important;\n    gap: 8px !important;\n    align-items: flex-end !important;\n    flex-shrink: 0 !important;\n    background: var(--bc-bg) !important;\n  }\n\n  #bc-input-wrap.bc-hidden { display: none !important; }\n\n  #bc-input {\n    flex: 1 !important;\n    border: 1.5px solid #dde6f0 !important;\n    border-radius: 12px !important;\n    padding: 10px 13px !important;\n    font-size: 14px !important;\n    font-family: var(--bc-font) !important;\n    color: var(--bc-text) !important;\n    resize: none !important;\n    outline: none !important;\n    min-height: 42px !important;\n    max-height: 108px !important;\n    line-height: 1.45 !important;\n    transition: border-color 0.18s !important;\n    background: var(--bc-bg-input) !important;\n    box-shadow: none !important;\n  }\n\n  #bc-input:focus {\n    border-color: var(--bc-primary) !important;\n    background: #fff !important;\n  }\n\n  #bc-input::placeholder { color: var(--bc-text-time) !important; }\n\n  #bc-send {\n    width: 42px !important;\n    height: 42px !important;\n    background: var(--bc-primary) !important;\n    border-radius: 12px !important;\n    cursor: pointer !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    flex-shrink: 0 !important;\n    transition: background 0.18s, transform 0.1s !important;\n  }\n\n  #bc-send:hover { background: var(--bc-primary-hover) !important; }\n  #bc-send:active { transform: scale(0.94) !important; }\n  #bc-send:disabled { background: #cbd5e1 !important; cursor: not-allowed !important; }\n\n  #bc-send svg {\n    width: 18px !important;\n    height: 18px !important;\n    fill: #fff !important;\n  }\n\n  \/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  #bc-footer-note {\n    text-align: center !important;\n    font-size: 11px !important;\n    color: #b0bec5 !important;\n    padding: 5px 14px 10px !important;\n    flex-shrink: 0 !important;\n    background: var(--bc-bg) !important;\n  }\n\n  \/* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  @media (max-width: 460px) {\n    #bc-window {\n      width: calc(100vw - 18px) !important;\n      right: 9px !important;\n      bottom: 90px !important;\n      height: calc(100svh - 108px) !important;\n      max-height: 580px !important;\n    }\n\n    #bc-toggle { right: 14px !important; bottom: 14px !important; }\n\n    #bc-proactive {\n      right: 14px !important;\n      bottom: 84px !important;\n      max-width: calc(100vw - 90px) !important;\n    }\n  }\n<\/style>\n\n<!-- \u2500\u2500 Widget HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div id=\"bc-widget\" role=\"complementary\" aria-label=\"Chat-Assistent Bora \u00d6nal\">\n\n  <!-- Proaktive Bubble -->\n  <div id=\"bc-proactive\">\n    <div id=\"bc-proactive-close\" aria-label=\"Schlie\u00dfen\">\u2715<\/div>\n    \ud83d\udc4b Hallo! Ich bin Diego, Boras KI-Assistent. Wie kann ich helfen?\n  <\/div>\n\n  <button id=\"bc-toggle\" aria-label=\"Chat \u00f6ffnen\/schlie\u00dfen\" aria-expanded=\"false\">\n    <svg id=\"bc-icon-chat\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z\" \/>\n    <\/svg>\n    <svg id=\"bc-icon-close\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" \/>\n    <\/svg>\n    <span id=\"bc-badge\" aria-hidden=\"true\"><\/span>\n  <\/button>\n\n  <div id=\"bc-window\" role=\"dialog\" aria-label=\"Chatbot Bora \u00d6nal\" aria-modal=\"true\">\n\n    <div id=\"bc-header\">\n      <div class=\"bc-avatar\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\" \/>\n        <\/svg>\n      <\/div>\n      <div class=\"bc-header-info\">\n        <div class=\"bc-header-name\">Bora \u00d6nal \u00b7 KI-Assistent<\/div>\n        <div class=\"bc-header-sub\">\n          <span class=\"bc-dot\"><\/span>\n          Shopify & KI-Experte\n        <\/div>\n      <\/div>\n      <button id=\"bc-close\" aria-label=\"Chat schlie\u00dfen\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" \/>\n        <\/svg>\n      <\/button>\n    <\/div>\n\n    <div id=\"bc-loadbar\"><\/div>\n\n    <!-- DSGVO Consent Screen -->\n    <div id=\"bc-gdpr\">\n      <div class=\"bc-gdpr-icon\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" \/>\n        <\/svg>\n      <\/div>\n      <div class=\"bc-gdpr-title\">Datenschutzhinweis<\/div>\n      <div class=\"bc-gdpr-text\">\n        Dieser Chatbot nutzt KI zur Beantwortung Ihrer Fragen. Ihre Nachrichten werden zur Verarbeitung an einen\n        KI-Dienst gesendet und nicht dauerhaft gespeichert.<br><br>\n        Durch Klick auf \u201eChat starten\" stimmen Sie der Verarbeitung zu.\n      <\/div>\n      <button id=\"bc-gdpr-accept\">\ud83d\udcac Chat starten<\/button>\n    <\/div>\n\n    <div id=\"bc-messages\" class=\"bc-hidden\" role=\"log\" aria-live=\"polite\" aria-relevant=\"additions\"><\/div>\n\n    <div id=\"bc-input-wrap\" class=\"bc-hidden\">\n      <textarea id=\"bc-input\" placeholder=\"Ihre Frage...\" rows=\"1\" aria-label=\"Nachricht eingeben\" maxlength=\"800\"><\/textarea>\n      <button id=\"bc-send\" aria-label=\"Senden\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\" \/>\n        <\/svg>\n      <\/button>\n    <\/div>\n\n    <div id=\"bc-footer-note\">KI-Assistent \u00b7 Antworten basieren auf hinterlegten Infos<\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    'use strict';\n\n    \/* ============================================================\n       KONFIGURATION \u2013 boraoenal.com\n    ============================================================ *\/\n    const CFG = {\n      proxyUrl: 'https:\/\/boraoenal.com\/chatbot-proxy.php',\n\n      email: 'info@boraoenal.com',\n      emailSubject: 'Projektanfrage \u00fcber Website-Chatbot',\n      maxHistory: 12,\n\n      \/\/ Proaktive Nachricht (Sekunden nach Pageload, 0 = aus)\n      proactiveDelay: 6,\n\n      quickReplies: [\n        'Was bietest du an?',\n        'Wie l\u00e4uft ein Projekt ab?',\n        'Kostenlose Erstberatung buchen',\n      ],\n    };\n\n    \/* \u2500\u2500 STATE & DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    let isOpen = false;\n    let isLoading = false;\n    let history = [];\n    let gdprAccepted = localStorage.getItem('bc_gdpr_bora') === '1';\n    let rateLimiter = { count: 0, resetAt: 0 };\n\n    const $ = (id) => document.getElementById(id);\n\n    const $toggle   = $('bc-toggle');\n    const $window   = $('bc-window');\n    const $close    = $('bc-close');\n    const $messages = $('bc-messages');\n    const $input    = $('bc-input');\n    const $send     = $('bc-send');\n    const $badge    = $('bc-badge');\n    const $iconChat = $('bc-icon-chat');\n    const $iconX    = $('bc-icon-close');\n    const $loadbar  = $('bc-loadbar');\n    const $gdpr     = $('bc-gdpr');\n    const $gdprAccept = $('bc-gdpr-accept');\n    const $inputWrap  = $('bc-input-wrap');\n    const $proactive  = $('bc-proactive');\n    const $proClose   = $('bc-proactive-close');\n\n    \/* \u2500\u2500 SESSION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    function saveSession() {\n      try {\n        sessionStorage.setItem('bc_session_bora', JSON.stringify({ history: history.slice(-CFG.maxHistory), ts: Date.now() }));\n      } catch (e) {}\n    }\n\n    function restoreSession() {\n      try {\n        const raw = sessionStorage.getItem('bc_session_bora');\n        if (!raw) return false;\n        const data = JSON.parse(raw);\n        if (Date.now() - data.ts > 30 * 60 * 1000) { sessionStorage.removeItem('bc_session_bora'); return false; }\n        history = data.history || [];\n        return history.length > 0;\n      } catch (e) { return false; }\n    }\n\n    \/* \u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    function now() {\n      return new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });\n    }\n\n    function esc(t) {\n      return String(t).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\n    }\n\n    function fmt(t) {\n      return esc(t)\n        .replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>')\n        .replace(\/\\[([^\\]]+)\\]\\((https?:\\\/\\\/[^\\)]+)\\)\/g, '<a href=\"$2\" target=\"_blank\" rel=\"noopener\">$1<\/a>')\n        .replace(\/^\u2022 (.+)$\/gm, '<span style=\"display:block;padding-left:12px;text-indent:-12px;\">\u2022 $1<\/span>')\n        .replace(\/\\n\/g, '<br>');\n    }\n\n    function scrollDown() {\n      $messages.scrollTo({ top: $messages.scrollHeight, behavior: 'smooth' });\n    }\n\n    function checkRateLimit() {\n      const ts = Date.now();\n      if (ts > rateLimiter.resetAt) { rateLimiter = { count: 0, resetAt: ts + 60000 }; }\n      if (rateLimiter.count >= 15) return false;\n      rateLimiter.count++;\n      return true;\n    }\n\n    \/* \u2500\u2500 RENDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    function appendUser(text) {\n      history.push({ role: 'user', content: text });\n      const el = document.createElement('div');\n      el.className = 'bc-msg bc-user';\n      el.innerHTML = `<div class=\"bc-bubble\">${esc(text)}<\/div><span class=\"bc-time\">${now()}<\/span>`;\n      $messages.appendChild(el);\n      scrollDown();\n      saveSession();\n    }\n\n    function appendBot(text, showQuickReplies) {\n      history.push({ role: 'assistant', content: text });\n      const hasContact = text.includes('[KONTAKT]');\n      const clean = text.replace('[KONTAKT]', '').trim();\n      const el = document.createElement('div');\n      el.className = 'bc-msg bc-bot';\n      const mailHref = `mailto:${CFG.email}?subject=${encodeURIComponent(CFG.emailSubject)}`;\n      let qrHtml = '';\n      if (showQuickReplies && CFG.quickReplies.length > 0) {\n        qrHtml = `<div class=\"bc-quick-replies\">${CFG.quickReplies.map(q => `<button class=\"bc-qr-btn\" data-bc-qr=\"${esc(q)}\">${esc(q)}<\/button>`).join('')}<\/div>`;\n      }\n      el.innerHTML = `\n        <div class=\"bc-bubble\">${fmt(clean)}<\/div>\n        ${hasContact ? `<a class=\"bc-contact-btn\" href=\"${mailHref}\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>E-Mail an Bora senden<\/a>` : ''}\n        ${qrHtml}\n        <span class=\"bc-time\">${now()}<\/span>`;\n      $messages.appendChild(el);\n      scrollDown();\n      saveSession();\n      el.querySelectorAll('.bc-qr-btn').forEach(btn => {\n        btn.addEventListener('click', function () {\n          const q = this.getAttribute('data-bc-qr');\n          const qrWrap = this.closest('.bc-quick-replies');\n          if (qrWrap) qrWrap.remove();\n          $input.value = q;\n          send();\n        });\n      });\n    }\n\n    function showTyping() {\n      const el = document.createElement('div');\n      el.className = 'bc-msg bc-bot bc-typing-el';\n      el.id = 'bc-typing';\n      el.innerHTML = `<div class=\"bc-bubble\"><div class=\"bc-dots\"><span><\/span><span><\/span><span><\/span><\/div><\/div>`;\n      $messages.appendChild(el);\n      scrollDown();\n    }\n\n    function hideTyping() { const el = $('bc-typing'); if (el) el.remove(); }\n    function showLoading(on) { $loadbar.classList.toggle('bc-loading', on); }\n\n    function renderRestoredHistory() {\n      history.forEach(msg => {\n        const el = document.createElement('div');\n        el.className = `bc-msg ${msg.role === 'user' ? 'bc-user' : 'bc-bot'}`;\n        el.style.animation = 'none';\n        el.innerHTML = msg.role === 'user'\n          ? `<div class=\"bc-bubble\">${esc(msg.content)}<\/div>`\n          : `<div class=\"bc-bubble\">${fmt(msg.content.replace('[KONTAKT]','').trim())}<\/div>`;\n        $messages.appendChild(el);\n      });\n      scrollDown();\n    }\n\n    \/* \u2500\u2500 API CALL \u2192 n8n Webhook \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    async function callAPI() {\n      const res = await fetch(CFG.proxyUrl, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ messages: history.slice(-CFG.maxHistory) }),\n      });\n      if (!res.ok) {\n        const err = await res.json().catch(() => ({}));\n        throw new Error(err.error || `HTTP ${res.status}`);\n      }\n      const data = await res.json();\n      \/\/ n8n gibt { output: \"...\" } oder OpenAI-Format { choices: [...] }\n      return data.response || data.output || data.choices?.[0]?.message?.content || data.text || 'Keine Antwort erhalten.';\n    }\n\n    \/* \u2500\u2500 SEND \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    async function send() {\n      const text = $input.value.trim();\n      if (!text || isLoading) return;\n      if (!checkRateLimit()) {\n        appendBot('Bitte warten Sie einen Moment, bevor Sie eine weitere Frage stellen.');\n        return;\n      }\n      $input.value = '';\n      $input.style.height = 'auto';\n      isLoading = true;\n      $send.disabled = true;\n      appendUser(text);\n      showTyping();\n      showLoading(true);\n      try {\n        const reply = await callAPI();\n        hideTyping();\n        showLoading(false);\n        appendBot(reply, false);\n      } catch (e) {\n        hideTyping();\n        showLoading(false);\n        appendBot('Es tut mir leid, es gab einen technischen Fehler. Bitte versuche es erneut oder kontaktiere Bora direkt. [KONTAKT]');\n      }\n      isLoading = false;\n      $send.disabled = false;\n      $input.focus();\n    }\n\n    \/* \u2500\u2500 DSGVO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    function acceptGDPR() {\n      gdprAccepted = true;\n      localStorage.setItem('bc_gdpr_bora', '1');\n      $gdpr.classList.add('bc-hidden');\n      $messages.classList.remove('bc-hidden');\n      $inputWrap.classList.remove('bc-hidden');\n      startChat();\n    }\n\n    function startChat() {\n      const hasHistory = restoreSession();\n      if (hasHistory) {\n        renderRestoredHistory();\n      } else {\n        appendBot(\n          'Hallo! Ich bin **Diego**, der KI-Assistent von **Bora \u00d6nal**.\\n\\nIch beantworte Ihre Fragen rund um **Shopify-Entwicklung** und **KI-L\u00f6sungen im E-Commerce**. Wie kann ich Ihnen helfen?',\n          true\n        );\n      }\n      setTimeout(() => $input.focus(), 300);\n    }\n\n    \/* \u2500\u2500 TOGGLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    function toggle() {\n      isOpen = !isOpen;\n      $window.classList.toggle('bc-open', isOpen);\n      $toggle.setAttribute('aria-expanded', String(isOpen));\n      $iconChat.style.display = isOpen ? 'none' : 'block';\n      $iconChat.style.opacity = isOpen ? '0' : '1';\n      $iconX.style.display = isOpen ? 'block' : 'none';\n      $iconX.style.opacity = isOpen ? '1' : '0';\n      $badge.style.display = 'none';\n      hideProactive();\n      if (isOpen) {\n        if (gdprAccepted) {\n          $gdpr.classList.add('bc-hidden');\n          $messages.classList.remove('bc-hidden');\n          $inputWrap.classList.remove('bc-hidden');\n          if (history.length === 0) startChat();\n          else setTimeout(() => $input.focus(), 300);\n        }\n      }\n    }\n\n    \/* \u2500\u2500 PROAKTIV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    let proactiveShown = false;\n\n    function showProactive() { if (isOpen || proactiveShown) return; proactiveShown = true; $proactive.classList.add('bc-show'); }\n    function hideProactive() { $proactive.classList.remove('bc-show'); }\n\n    \/* \u2500\u2500 EVENTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    $toggle.addEventListener('click', toggle);\n    $close.addEventListener('click', toggle);\n    $send.addEventListener('click', send);\n    $gdprAccept.addEventListener('click', acceptGDPR);\n    $proClose.addEventListener('click', (e) => { e.stopPropagation(); hideProactive(); });\n    $proactive.addEventListener('click', (e) => { if (e.target === $proClose) return; hideProactive(); if (!isOpen) toggle(); });\n\n    $input.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }\n    });\n\n    $input.addEventListener('input', () => {\n      $input.style.height = 'auto';\n      $input.style.height = Math.min($input.scrollHeight, 108) + 'px';\n    });\n\n    document.addEventListener('click', (e) => {\n      if (isOpen && !$('bc-widget').contains(e.target)) toggle();\n    }, true);\n\n    document.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen) toggle();\n    });\n\n    setTimeout(() => { if (!isOpen) $badge.style.display = 'block'; }, 8000);\n\n    if (CFG.proactiveDelay > 0) {\n      setTimeout(() => showProactive(), CFG.proactiveDelay * 1000);\n      setTimeout(() => hideProactive(), (CFG.proactiveDelay + 15) * 1000);\n    }\n\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-392178f elementor-widget elementor-widget-html\" data-id=\"392178f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"de\">\n\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Bora Oenal - V3 Fixed<\/title>\n        <script\n            src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,typography,container-queries\"><\/script>\n        <link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\"\/>\n        <link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\"\/>\n        <link\n            href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700;900&display=swap\"\n            rel=\"stylesheet\"\/>\n        <link\n            href=\"https:\/\/assets.calendly.com\/assets\/external\/widget.css\"\n            rel=\"stylesheet\">\n        <script\n            src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\"\n            type=\"text\/javascript\"\n            async><\/script>\n    <\/head>\n\n    <body class=\"bg-white dark:bg-background-dark m-0 p-0 overflow-x-hidden\">\n        <script>\n            tailwind.config = {\n                darkMode: \"class\",\n                important: '#bora-v3-wrapper',\n                theme: {\n                    extend: {\n                        colors: {\n                            primary: \"#F05A22\",\n                            \"primary-hover\": \"#D94A1A\",\n                            \"background-light\": \"#F8FAFC\",\n                            \"background-dark\": \"#0A192F\",\n                            \"navy-custom\": \"#112240\",\n                            \"deep-navy\": \"#0B1120\",\n                            \"accent-blue\": \"#119eda\"\n                        },\n                        fontFamily: {\n                            sans: [\n                                \"Roboto\", \"sans-serif\"\n                            ],\n                            display: [\"Roboto\", \"sans-serif\"]\n                        },\n                        borderRadius: {\n                            DEFAULT: \"0.5rem\"\n                        }\n                    }\n                }\n            };\n        <\/script>\n\n        <style>\n            .gradient-text {\n                background: linear-gradient(90deg, #F05A22, #FF8E53);\n                background-clip: text;\n                -webkit-background-clip: text;\n                -webkit-text-fill-color: transparent;\n            }\n\n            .hero-pattern {\n                background-image: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.05) 1px, transparent 0);\n                background-size: 24px 24px;\n            }\n\n            .dark .hero-pattern {\n                background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);\n            }\n\n            .hide-scrollbar::-webkit-scrollbar {\n                display: none;\n            }\n\n            .hide-scrollbar {\n                -ms-overflow-style: none;\n                scrollbar-width: none;\n            }\n\n            .carousel-container {\n                scroll-behavior: smooth;\n            }\n\n            html {\n                scroll-behavior: smooth;\n                overflow-x: hidden;\n                box-sizing: border-box;\n            }\n            *,\n            *:after,\n            *:before {\n                box-sizing: inherit;\n            }\n\n            .btn-primary {\n                background-color: #F05A22;\n                color: white !important;\n                font-weight: bold;\n                border-radius: 12px !important;\n                transition: all 0.3s ease-out;\n                text-align: center;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n            }\n            .btn-primary:hover {\n                background-color: #D94A1A;\n                box-shadow: 0 10px 20px -5px rgba(217, 74, 26, 0.6);\n                transform: translateY(-2px);\n            }\n\n            .problem-card,\n            .service-card,\n            .testimonial-card {\n                background-color: white;\n                padding: 2.5rem;\n                border-radius: 2rem;\n                border: 1px solid #f1f5f9;\n                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n                transition: all 0.3s;\n            }\n\n            .dark .problem-card,\n            .dark .service-card,\n            .dark .testimonial-card {\n                background-color: rgba(15, 23, 42, 0.4);\n                border-color: #1e293b;\n            }\n            .problem-card:hover,\n            .service-card:hover,\n            .testimonial-card:hover {\n                transform: translateY(-0.5rem);\n                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n                border-color: rgba(240, 90, 34, 0.2);\n            }\n\n            .slider-arrow {\n                width: 3rem;\n                height: 3rem;\n                border-radius: 9999px;\n                border: 1px solid #cbd5e1;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background-color: white;\n                color: #475569;\n                transition: all 0.3s;\n                cursor: pointer;\n            }\n\n            .dark .slider-arrow {\n                background-color: #151E2D;\n                border-color: #334155;\n                color: #cbd5e1;\n            }\n            .slider-arrow:hover {\n                background-color: #F05A22;\n                border-color: #F05A22;\n                color: white;\n            }\n\n            .pagination-dot {\n                width: 0.625rem;\n                height: 0.625rem;\n                border-radius: 9999px;\n                background-color: #cbd5e1;\n                transition: all 0.3s;\n                cursor: pointer;\n            }\n\n            .dark .pagination-dot {\n                background-color: #334155;\n            }\n\n            .pagination-dot.active {\n                width: 2rem;\n                background-color: #F05A22;\n            }\n\n            .logo-shape {\n                clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%);\n            }\n            @keyframes logo-scroll {\n                0% {\n                    transform: translateX(0);\n                }\n\n                100% {\n                    transform: translateX(-50%);\n                }\n            }\n\n            .logo-scroll-container {\n                display: flex;\n                width: fit-content;\n                animation: logo-scroll 30s linear infinite;\n            }\n            .logo-scroll-container:hover {\n                animation-play-state: paused;\n            }\n\n            .logo-text-item {\n                padding: 0 40px;\n                white-space: nowrap;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n\n            .h-timeline-container {\n                position: relative;\n                padding: 2rem 0;\n                width: 100%;\n            }\n\n            .h-timeline-line {\n                position: absolute;\n                top: 50%;\n                left: 0;\n                right: 0;\n                height: 2px;\n                background: #e2e8f0;\n                z-index: 1;\n                transform: translateY(-50%);\n            }\n\n            .dark .h-timeline-line {\n                background: #1e293b;\n            }\n\n            .h-timeline-items {\n                display: flex;\n                justify-content: space-between;\n                position: relative;\n                z-index: 2;\n            }\n\n            .h-timeline-item {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                width: 100px;\n            }\n\n            .h-timeline-marker {\n                width: 40px;\n                height: 40px;\n                background: white;\n                border: 2px solid #F05A22;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                margin-bottom: 0.5rem;\n                transition: all 0.3s ease;\n            }\n\n            .dark .h-timeline-marker {\n                background: #0b1120;\n            }\n            .h-timeline-item:hover .h-timeline-marker {\n                transform: scale(1.1);\n                background: #F05A22;\n            }\n            .h-timeline-item:hover .h-desc,\n            .h-timeline-item:hover .h-timeline-marker svg,\n            .h-timeline-item:hover .h-year {\n                color: white !important;\n            }\n\n            .h-year {\n                font-size: 0.75rem;\n                font-weight: 800;\n                color: #F05A22;\n                margin-bottom: 0.25rem;\n            }\n\n            .h-desc {\n                font-size: 0.75rem;\n                font-weight: 600;\n                color: #64748b;\n                text-align: center;\n                line-height: 1.2;\n                max-width: 80px;\n            }\n\n            .dark .h-desc {\n                color: #94a3b8;\n            }\n\n            .stat-chip {\n                background: white;\n                padding: 1rem 1.5rem;\n                border-radius: 1rem;\n                border: 1px solid #f1f5f9;\n                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n                transition: all 0.3s ease;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                flex: 1;\n                min-width: 0;\n            }\n\n            .dark .stat-chip {\n                background: rgba(17, 34, 64, 0.4);\n                border-color: #1e293b;\n            }\n            .stat-chip:hover {\n                transform: translateY(-3px);\n                border-color: rgba(240, 90, 34, 0.3);\n            }\n\n            h4 {\n                font-size: 1rem;\n                text-align: left;\n            }\n\n            \/* Mobile Menu Styles *\/\n            .mobile-menu {\n                display: none;\n                position: fixed;\n                top: 64px;\n                left: 0;\n                right: 0;\n                background: white;\n                z-index: 40;\n                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n            }\n\n            .dark .mobile-menu {\n                background: #112240;\n            }\n\n            .mobile-menu.active {\n                display: block;\n            }\n\n            .hamburger {\n                display: flex;\n                flex-direction: column;\n                gap: 4px;\n                cursor: pointer;\n            }\n\n            .hamburger span {\n                width: 24px;\n                height: 2px;\n                background: currentColor;\n                transition: all 0.3s;\n            }\n            .hamburger.active span:nth-child(1) {\n                transform: rotate(45deg) translate(6px, 6px);\n            }\n            .hamburger.active span:nth-child(2) {\n                opacity: 0;\n            }\n            .hamburger.active span:nth-child(3) {\n                transform: rotate(-45deg) translate(6px, -6px);\n            }\n\n            \/* Nav Breakpoints - kein Tailwind md: n\u00f6tig *\/\n            @media (max-width: 767px) {\n                .nav-desktop-items { display: none !important; }\n            }\n            @media (min-width: 768px) {\n                #nav-hamburger { display: none !important; }\n            }\n\n        <\/style>\n\n        <div id=\"bora-v3-wrapper\" class=\"w-full max-w-full overflow-x-hidden\">\n            <style>\n                #bora-v3-wrapper {\n                    width: 100%;\n                }\n\n            <\/style>\n\n            <div\n                id=\"bora-v3-dark-toggle\"\n                class=\"w-full max-w-full transition-colors duration-300\">\n                <div\n                    class=\"bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 transition-colors duration-300 font-sans leading-normal overflow-x-hidden\">\n\n                    <nav\n                        class=\"fixed top-0 w-full z-50 bg-white\/80 dark:bg-navy-custom\/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"flex justify-between items-center h-16\">\n                                <div class=\"flex items-center gap-3\">\n                                    <a href=\"https:\/\/boraoenal.com\/\" class=\"block flex-shrink-0\">\n                                        <img decoding=\"async\"\n                                            src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2026\/01\/logo-boraoenal-transp-1.png\"\n                                            alt=\"Bora Oenal Logo\"\n                                            class=\"h-10 w-auto object-contain transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95 block dark:hidden\"\/>\n                                        <img decoding=\"async\"\n                                            src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2026\/03\/logo-white-header-mobile.png\"\n                                            alt=\"Bora Oenal Logo\"\n                                            class=\"h-10 w-auto object-contain transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95 hidden dark:block\"\/>\n                                    <\/a>\n                                <\/div>\n                                <div class=\"nav-desktop-items flex items-center space-x-8 text-xs font-medium\">\n                                    <a\n                                        class=\"text-slate-600 dark:text-slate-400 hover:text-primary transition-colors\"\n                                        href=\"#solutions\">Leistungen<\/a>\n                                    <a\n                                        class=\"text-slate-600 dark:text-slate-400 hover:text-primary transition-colors\"\n                                        href=\"#portfolio\">Referenzen<\/a>\n                                    <a\n                                        class=\"text-slate-600 dark:text-slate-400 hover:text-primary transition-colors\"\n                                        href=\"#about\">\u00dcber Mich<\/a>\n                                    <a\n                                        class=\"text-slate-600 dark:text-slate-400 hover:text-primary transition-colors\"\n                                        href=\"#faq\">FAQ<\/a>\n                                    <a\n                                        class=\"px-5 py-2.5 text-[13px] rounded-xl cursor-pointer font-bold text-white transition-all duration-300 hover:-translate-y-0.5\"\n                                        style=\"background-color: #119eda; box-shadow: 0 4px 12px rgba(17, 158, 218, 0.3);\"\n                                        onclick=\"openCalendly(); return false;\">Projektanfrage<\/a>\n                                <\/div>\n                                <div class=\"flex items-center gap-2\">\n                                    <button\n                                        class=\"p-2 rounded-full bg-slate-100 dark:bg-navy-custom hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors\"\n                                        onclick=\"document.getElementById('bora-v3-dark-toggle').classList.toggle('dark')\">\n                                        <svg\n                                            class=\"w-5 h-5 block dark:hidden text-slate-700\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"><\/path>\n                                        <\/svg>\n                                        <svg\n                                            class=\"w-5 h-5 hidden dark:block text-yellow-400\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"><\/path>\n                                        <\/svg>\n                                    <\/button>\n                                    <button\n                                        id=\"nav-hamburger\"\n                                        class=\"hamburger text-slate-700 dark:text-slate-200\"\n                                        onclick=\"toggleMobileMenu()\"\n                                        aria-label=\"Men\u00fc \u00f6ffnen\"\n                                        style=\"background: none; border: none; padding: 8px; cursor: pointer;\">\n                                        <span><\/span>\n                                        <span><\/span>\n                                        <span><\/span>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <!-- Mobile Menu -->\n                        <div id=\"mobile-menu\" class=\"mobile-menu\">\n                            <div class=\"px-[5%] py-6 flex flex-col gap-1\">\n                                <a href=\"#solutions\"\n                                    class=\"block py-3 px-4 text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-primary dark:hover:text-primary hover:bg-slate-50 dark:hover:bg-white\/5 rounded-xl transition-colors\"\n                                    onclick=\"toggleMobileMenu()\">Leistungen<\/a>\n                                <a href=\"#portfolio\"\n                                    class=\"block py-3 px-4 text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-primary dark:hover:text-primary hover:bg-slate-50 dark:hover:bg-white\/5 rounded-xl transition-colors\"\n                                    onclick=\"toggleMobileMenu()\">Referenzen<\/a>\n                                <a href=\"#about\"\n                                    class=\"block py-3 px-4 text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-primary dark:hover:text-primary hover:bg-slate-50 dark:hover:bg-white\/5 rounded-xl transition-colors\"\n                                    onclick=\"toggleMobileMenu()\">\u00dcber Mich<\/a>\n                                <a href=\"#faq\"\n                                    class=\"block py-3 px-4 text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-primary dark:hover:text-primary hover:bg-slate-50 dark:hover:bg-white\/5 rounded-xl transition-colors\"\n                                    onclick=\"toggleMobileMenu()\">FAQ<\/a>\n                                <div class=\"pt-3 mt-2 border-t border-slate-100 dark:border-slate-700\">\n                                    <a\n                                        class=\"block w-full text-center py-3 px-4 rounded-xl font-bold text-white text-sm cursor-pointer\"\n                                        style=\"background-color: #119eda; box-shadow: 0 4px 12px rgba(17,158,218,0.3);\"\n                                        onclick=\"toggleMobileMenu(); openCalendly(); return false;\">Projektanfrage<\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/nav>\n\n                    <header class=\"relative pt-20 md:pt-32 pb-16 overflow-hidden hero-pattern\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n                                <div class=\"z-10\">\n                                    <div\n                                        class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-100 dark:bg-orange-900\/30 text-primary !text-[12px] font-bold uppercase tracking-wider mb-6 block !inline-flex\">\n                                        <span class=\"w-2 h-2 rounded-full bg-primary animate-pulse\"><\/span>\n                                        Shopify & KI-Experte\n                                    <\/div>\n                                    <h1\n                                        class=\"text-5xl lg:text-7xl font-display font-extrabold text-slate-900 dark:text-white leading-tight mb-6\">\n                                        Shopify & KI \u2013 mehr\n                                        <span class=\"text-accent-blue\">Umsatz<\/span>, weniger Aufwand.\n                                    <\/h1>\n                                    <p class=\"text-xl text-slate-600 dark:text-slate-400 mb-8 max-w-xl\">\n                                        Als Freelance Shopify Developer entwickle ich ma\u00dfgeschneiderte L\u00f6sungen mit\n                                        KI-Integration f\u00fcr mehr Umsatz und effizientere E-Commerce-Prozesse.\n                                    <\/p>\n                                    <div class=\"flex flex-wrap gap-4 mb-8\">\n                                        <div\n                                            class=\"flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300\">\n                                            <svg\n                                                class=\"w-5 h-5 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n                                            <\/svg>\n                                            DSGVO-konform\n                                        <\/div>\n                                        <div\n                                            class=\"flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300\">\n                                            <svg\n                                                class=\"w-5 h-5 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n                                            <\/svg>\n                                            EU-Hosting\n                                        <\/div>\n                                        <div\n                                            class=\"flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300\">\n                                            <svg\n                                                class=\"w-5 h-5 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n                                            <\/svg>\n                                            AVV verf\u00fcgbar\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"flex flex-col sm:flex-row gap-4\">\n                                        <a\n                                            class=\"btn-primary text-base px-8 py-4 rounded-xl cursor-pointer\"\n                                            onclick=\"openCalendly(); return false;\">\n                                            Kostenlose Erstberatung\n                                        <\/a>\n                                        <a\n                                            href=\"mailto:info@boraoenal.com?subject=Website%20Kommunikation\"\n                                            class=\"text-base px-8 py-4 rounded-xl cursor-pointer font-bold text-slate-900 dark:text-white bg-white dark:bg-navy-custom border-2 border-slate-200 dark:border-slate-700 hover:border-primary dark:hover:border-primary transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg text-center inline-flex items-center justify-center\">\n                                            E-Mail Kontakt\n                                        <\/a>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"relative group\">\n                                    <div\n                                        class=\"absolute -inset-4 bg-gradient-to-r from-primary\/20 to-accent-blue\/20 blur-3xl opacity-30 group-hover:opacity-50 transition-opacity\"><\/div>\n                                    <div\n                                        class=\"relative rounded-3xl overflow-hidden border-8 border-white dark:border-navy-custom shadow-2xl max-w-md mx-auto\">\n                                        <img decoding=\"async\"\n                                            alt=\"Bora Oenal - Shopify Expert\"\n                                            class=\"w-full h-auto grayscale hover:grayscale-0 transition-all duration-700\"\n                                            src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2025\/09\/bora-oenal-e-commerce-ki-experta-dach-raum.webp\"\/>\n                                    <\/div>\n                                    <!-- Availability Badge -->\n                                    <div\n                                        class=\"absolute -bottom-6 left-6 bg-white dark:bg-navy-custom rounded-2xl shadow-2xl px-6 py-4 flex items-center gap-4 border border-slate-100 dark:border-slate-800 z-10\">\n                                        <div\n                                            class=\"w-12 h-12 rounded-xl bg-orange-100 dark:bg-orange-900\/30 flex items-center justify-center flex-shrink-0\">\n                                            <svg\n                                                class=\"w-6 h-6 text-primary\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <div>\n                                            <div\n                                                class=\"text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider\">\n                                                Verf\u00fcgbarkeit<\/div>\n                                            <div class=\"text-base font-bold text-slate-900 dark:text-white\">Wieder verf\u00fcgbar f\u00fcr Q2\/2026<\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/header>\n\n                    <!-- ABOUT ME SECTION WITH SVG ICONS -->\n                    <section\n                        class=\"py-12 bg-white dark:bg-navy-custom border-b border-slate-100 dark:border-slate-800\/50 overflow-hidden max-w-full\"\n                        id=\"about\">\n                        <div class=\"w-full px-[5%] overflow-x-hidden\">\n                            <div\n                                class=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-8 justify-between\">\n                                <div class=\"flex-shrink-0 text-center lg:text-left w-full lg:w-auto\">\n                                    <h2\n                                        class=\"text-[24px] md:text-[40px] font-display font-bold text-slate-900 dark:text-white mb-1 leading-tight\">\n                                        Bora \u00d6nal<\/h2>\n                                    <p class=\"text-lg font-display font-bold text-accent-blue mb-4\">Shopify & AI Experte<\/p>\n                                    <div\n                                        class=\"inline-block py-1 px-3 bg-primary\/5 dark:bg-primary\/10 border border-primary\/20 rounded-lg text-primary font-bold text-xs uppercase tracking-wider\">\n                                        Ich biete professionelle\n                                        <br>Shopify-Entwicklung\n                                        <br>mit KI-Integration.\n                                    <\/div>\n                                <\/div>\n                                <div class=\"flex-grow w-full max-w-2xl px-0 lg:px-8\">\n                                    <div class=\"h-timeline-container\">\n                                        <div class=\"h-timeline-line\"><\/div>\n                                        <div class=\"h-timeline-items\">\n                                            <!-- 2014: Code Icon -->\n                                            <div class=\"h-timeline-item\">\n                                                <div class=\"h-year\">2014<\/div>\n                                                <div class=\"h-timeline-marker\">\n                                                    <svg\n                                                        class=\"w-5 h-5 text-primary transition-colors\"\n                                                        fill=\"none\"\n                                                        stroke=\"currentColor\"\n                                                        viewBox=\"0 0 24 24\">\n                                                        <path\n                                                            stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\"\n                                                            stroke-width=\"2\"\n                                                            d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"><\/path>\n                                                    <\/svg>\n                                                <\/div>\n                                                <div class=\"h-desc text-[10px]\">Web-Entwicklung Start<\/div>\n                                            <\/div>\n                                            <!-- 2018: Shopping Cart Icon -->\n                                            <div class=\"h-timeline-item\">\n                                                <div class=\"h-year\">2018<\/div>\n                                                <div class=\"h-timeline-marker\">\n                                                    <svg\n                                                        class=\"w-5 h-5 text-primary transition-colors\"\n                                                        fill=\"none\"\n                                                        stroke=\"currentColor\"\n                                                        viewBox=\"0 0 24 24\">\n                                                        <path\n                                                            stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\"\n                                                            stroke-width=\"2\"\n                                                            d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"><\/path>\n                                                    <\/svg>\n                                                <\/div>\n                                                <div class=\"h-desc text-[10px]\">E-Commerce Spezialist<\/div>\n                                            <\/div>\n                                            <!-- 2023: AI\/Lightbulb Icon -->\n                                            <div class=\"h-timeline-item\">\n                                                <div class=\"h-year\">2023<\/div>\n                                                <div class=\"h-timeline-marker\">\n                                                    <svg\n                                                        class=\"w-5 h-5 text-primary transition-colors\"\n                                                        fill=\"none\"\n                                                        stroke=\"currentColor\"\n                                                        viewBox=\"0 0 24 24\">\n                                                        <path\n                                                            stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\"\n                                                            stroke-width=\"2\"\n                                                            d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"><\/path>\n                                                    <\/svg>\n                                                <\/div>\n                                                <div class=\"h-desc text-[10px]\">AI-Integration<\/div>\n                                            <\/div>\n                                            <!-- 2026: Group Icon -->\n                                            <div class=\"h-timeline-item\">\n                                                <div class=\"h-year\">2026<\/div>\n                                                <div class=\"h-timeline-marker\">\n                                                    <svg\n                                                        class=\"w-5 h-5 text-primary transition-colors\"\n                                                        fill=\"none\"\n                                                        stroke=\"currentColor\"\n                                                        viewBox=\"0 0 24 24\">\n                                                        <path\n                                                            stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\"\n                                                            stroke-width=\"2\"\n                                                            d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"><\/path>\n                                                    <\/svg>\n                                                <\/div>\n                                                <div class=\"h-desc text-[10px] font-bold text-slate-900 dark:text-white\">\n                                                    250+ Projekte<\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"flex-shrink-0 flex flex-wrap justify-center gap-3\">\n                                    <div class=\"stat-chip\">\n                                        <div class=\"text-2xl font-black text-primary leading-none mb-1\">250+<\/div>\n                                        <div class=\"text-[10px] uppercase font-bold text-slate-500 tracking-wider\">\n                                            Erfolgreiche Projekte<\/div>\n                                    <\/div>\n                                    <div class=\"stat-chip\">\n                                        <div class=\"text-2xl font-black text-primary leading-none mb-1\">200+<\/div>\n                                        <div class=\"text-[10px] uppercase font-bold text-slate-500 tracking-wider\">\n                                            Zufriedene Kunden<\/div>\n                                    <\/div>\n                                    <div class=\"stat-chip\">\n                                        <div class=\"text-2xl font-black text-primary leading-none mb-1\">11+<\/div>\n                                        <div class=\"text-[10px] uppercase font-bold text-slate-500 tracking-wider\">Jahre Erfahrung<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- BENEFITS SECTION -->\n                    <section class=\"py-20 bg-background-light dark:bg-deep-navy\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"text-center mb-12\">\n                                <span\n                                    class=\"text-[14px] text-primary font-bold uppercase tracking-[0.1em] mb-3 block\">DEINE VORTEILE<\/span>\n                                <h2\n                                    class=\"text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight\">\n                                    Warum mit mir arbeiten?\n                                <\/h2>\n                            <\/div>\n                            <div class=\"grid md:grid-cols-3 gap-8\">\n                                <div\n                                    class=\"bg-white dark:bg-navy-custom\/40 rounded-2xl p-8 border border-slate-200 dark:border-slate-800 hover:border-primary dark:hover:border-primary transition-all duration-300 hover:-translate-y-2 hover:shadow-xl group\">\n                                    <div\n                                        class=\"w-16 h-16 bg-green-50 dark:bg-green-900\/20 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110\">\n                                        <svg\n                                            class=\"w-8 h-8 inline-block text-green-500\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path>\n                                        <\/svg>\n                                    <\/div>\n                                    <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">Mehr Umsatz<\/h3>\n                                    <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">\n                                        Optimierte Conversion-Funnels und KI-gest\u00fctzte Personalisierung steigern deine\n                                        Verkaufszahlen messbar.\n                                    <\/p>\n                                <\/div>\n                                <div\n                                    class=\"bg-white dark:bg-navy-custom\/40 rounded-2xl p-8 border border-slate-200 dark:border-slate-800 hover:border-primary dark:hover:border-primary transition-all duration-300 hover:-translate-y-2 hover:shadow-xl group\">\n                                    <div\n                                        class=\"w-16 h-16 bg-orange-50 dark:bg-orange-900\/20 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110\">\n                                        <svg\n                                            class=\"w-8 h-8 inline-block text-primary\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\"><\/path>\n                                        <\/svg>\n                                    <\/div>\n                                    <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">Weniger Aufwand\n                                    <\/h3>\n                                    <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">\n                                        Automatisierte Workflows und intelligente Prozesse sparen dir wertvolle Zeit und\n                                        Ressourcen.\n                                    <\/p>\n                                <\/div>\n                                <div\n                                    class=\"bg-white dark:bg-navy-custom\/40 rounded-2xl p-8 border border-slate-200 dark:border-slate-800 hover:border-primary dark:hover:border-primary transition-all duration-300 hover:-translate-y-2 hover:shadow-xl group\">\n                                    <div\n                                        class=\"w-16 h-16 bg-blue-50 dark:bg-blue-900\/20 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110\">\n                                        <svg\n                                            class=\"w-8 h-8 inline-block text-accent-blue\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path>\n                                        <\/svg>\n                                    <\/div>\n                                    <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">Bessere Performance<\/h3>\n                                    <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">\n                                        Mobile-first Design, schnelle Ladezeiten und durchdachte UX sorgen f\u00fcr mehr\n                                        Verk\u00e4ufe und zufriedenere Kunden.\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- SOLUTIONS SECTION (Rest of content continues...) -->\n                    <section\n                        class=\"py-24 bg-white dark:bg-navy-custom overflow-hidden\"\n                        id=\"solutions\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"text-center mb-16\">\n                                <span\n                                    class=\"text-[14px] text-accent-blue font-bold uppercase tracking-[0.1em] mb-3 block\">Leistungen<\/span>\n                                <h2\n                                    class=\"text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight\">\n                                    Intelligente E-Commerce-L\u00f6sungen:<br class=\"hidden md:block\"\/>\n                                    <span class=\"text-primary\">Shopify-Shops mit KI-Integration.<\/span>\n                                <\/h2>\n                            <\/div>\n                            <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\n                                <div class=\"space-y-12\">\n                                    <div class=\"flex gap-6 group\">\n                                        <div\n                                            class=\"flex-shrink-0 w-16 h-16 rounded-2xl bg-blue-50 dark:bg-blue-900\/20 flex items-center justify-center text-accent-blue transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-8 h-8 inline-block\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <div>\n                                            <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">\n                                                Strategisches Shopify Development<\/h3>\n                                            <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">Individuelle\n                                                Entwicklung und Weiterentwicklung von Shopify-Shops mit Fokus auf\n                                                Skalierbarkeit, sauberen Code und starke User Experience.<\/p>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"flex gap-6 group\">\n                                        <div\n                                            class=\"flex-shrink-0 w-16 h-16 bg-orange-50 dark:bg-orange-900\/20 rounded-2xl flex items-center justify-center text-primary transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-8 h-8 inline-block\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <div>\n                                            <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">\n                                                KI-Automatisierung f\u00fcr Wachstum<\/h3>\n                                            <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">Integration von\n                                                KI-gest\u00fctzten Workflows: automatisierte Journeys, smartes Content-Erstellung,\n                                                Chatbots und Social Media Automatisierung.<\/p>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"flex gap-6 group\">\n                                        <div\n                                            class=\"flex-shrink-0 w-16 h-16 rounded-2xl bg-green-50 dark:bg-green-900\/20 flex items-center justify-center text-green-500 transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-8 h-8 inline-block\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-7.714 2.143L11 21l-2.286-6.857L1 12l7.714-2.143L11 3z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <div>\n                                            <h3 class=\"text-[20px] font-bold text-slate-900 dark:text-white mb-3\">AI Strategy & Consulting<\/h3>\n                                            <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed\">Strategische\n                                                Beratung zur AI-Integration in E-Commerce-Prozesse. Potenzial-Analyse,\n                                                Implementierungs-Roadmap und Umsetzung konkreter L\u00f6sungen f\u00fcr Newsletter,\n                                                Content und Customer Service.<\/p>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"relative\">\n                                    <div\n                                        class=\"absolute -inset-10 bg-accent-blue\/5 dark:bg-accent-blue\/10 rounded-full blur-3xl\"><\/div>\n                                    <div\n                                        class=\"relative bg-[#F8FAFC] dark:bg-navy-custom\/50 rounded-[3rem] p-8 md:p-12 shadow-inner border border-slate-100 dark:border-slate-800\">\n                                        <div\n                                            class=\"w-full aspect-[4\/3] bg-white dark:bg-navy-custom rounded-2xl shadow-2xl overflow-hidden border-[10px] border-slate-900\/5 dark:border-white\/5 relative\">\n                                            <div\n                                                class=\"absolute top-0 left-0 w-full h-6 bg-slate-50 dark:bg-navy-custom flex items-center px-3 gap-1 border-b border-slate-200 dark:border-slate-800\">\n                                                <div class=\"w-1.5 h-1.5 rounded-full bg-red-400\/50\"><\/div>\n                                                <div class=\"w-1.5 h-1.5 rounded-full bg-yellow-400\/50\"><\/div>\n                                                <div class=\"w-1.5 h-1.5 rounded-full bg-green-400\/50\"><\/div>\n                                            <\/div>\n                                            <div class=\"pt-6 h-full flex items-center justify-center p-6\">\n                                                <video\n                                                    class=\"w-full h-auto rounded-lg shadow-sm\"\n                                                    autoplay\n                                                    loop\n                                                    muted\n                                                    playsinline>\n                                                    <source\n                                                        src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2026\/01\/boraoenal.com-new.mp4\"\n                                                        type=\"video\/mp4\">\n                                                    Dein Browser unterst\u00fctzt dieses Videoformat nicht.\n                                                <\/video>\n                                            <\/div>\n                                        <\/div>\n                                        <div\n                                            class=\"absolute top-6 right-6 md:top-10 md:right-10 z-20 bg-white dark:bg-navy-custom px-4 py-2 rounded-xl shadow-xl flex items-center gap-2 border border-slate-100 dark:border-slate-800\">\n                                            <svg\n                                                class=\"w-6 h-6 inline-block text-green-500 font-bold\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path>\n                                            <\/svg>\n                                            <span class=\"text-sm font-bold text-slate-900 dark:text-white\">\n                                                <span class=\"text-slate-400 font-medium\">Shops die mit AI wachsen<\/span>\n                                            <\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- PARTNERS SECTION -->\n                    <section\n                        class=\"py-12 bg-white dark:bg-navy-custom border-y border-slate-200 dark:border-slate-800 overflow-hidden\"\n                        id=\"partners\">\n                        <div class=\"w-full\">\n                            <div\n                                class=\"logo-scroll-container opacity-50 grayscale hover:grayscale-0 transition-all duration-500\">\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    GOLDGARN DENIM<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    WALL STREET BOYZ<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    COMUNA PROJECT<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    ANZIVINO<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    BERLIN BIKE<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    FAHRRADKAUF24<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    KESKIN E-BIKE<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    OCQ<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    GOLDGARN DENIM<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    WALL STREET BOYZ<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    COMUNA PROJECT<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    ANZIVINO<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    BERLIN BIKE<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    FAHRRADKAUF24<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    KESKIN E-BIKE<\/div>\n                                <div\n                                    class=\"logo-text-item text-2xl font-black font-display tracking-tighter text-slate-900 dark:text-white uppercase\">\n                                    OCQ<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- PORTFOLIO SECTION -->\n                    <section class=\"py-24 bg-[#F1F5F9] dark:bg-navy-custom\/80\" id=\"portfolio\">\n                        <div class=\"w-full px-[5%]\">\n                            <div\n                                class=\"flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-6\">\n                                <div>\n                                    <span\n                                        class=\"section-label text-accent-blue font-bold uppercase tracking-widest text-sm mb-3 block\">PORTFOLIO<\/span>\n                                    <h2\n                                        class=\"section-headline text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight !mb-0\">\n                                        Ausgew\u00e4hlte Arbeiten<\/h2>\n                                <\/div>\n                                <div class=\"flex items-center gap-4 mb-2\">\n                                    <div class=\"hidden sm:flex gap-2\">\n                                        <button\n                                            class=\"slider-arrow\"\n                                            style=\"width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background-color: white; color: #475569; cursor: pointer; transition: all 0.3s;\"\n                                            onclick=\"document.getElementById('portfolio-slider').scrollBy({left: -document.getElementById('portfolio-slider').offsetWidth * 0.9, behavior: 'smooth'})\">\n                                            <svg\n                                                class=\"w-6 h-6\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\"\n                                                style=\"display: block;\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"><\/path>\n                                            <\/svg>\n                                        <\/button>\n                                        <button\n                                            class=\"slider-arrow\"\n                                            style=\"width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background-color: white; color: #475569; cursor: pointer; transition: all 0.3s;\"\n                                            onclick=\"document.getElementById('portfolio-slider').scrollBy({left: document.getElementById('portfolio-slider').offsetWidth * 0.9, behavior: 'smooth'})\">\n                                            <svg\n                                                class=\"w-5 h-5\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\"\n                                                style=\"display: block;\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path>\n                                            <\/svg>\n                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"relative\">\n                                <div\n                                    class=\"flex overflow-x-auto hide-scrollbar snap-x snap-mandatory gap-6 pb-8 carousel-container\"\n                                    id=\"portfolio-slider\">\n\n                                    <!-- Slide 1: Goldgarn Denim -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        FASHION & RETAIL\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Goldgarn Denim<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Custom Shopify Theme mit AI-Workflow: Mockup-Generierung, Vibe-Coding,\n                                                        Newsletter-Segmentierung. Plus geplante AI-Integration (Chatbot,\n                                                        Automatisierung). Moderne Entwicklung ohne Agentur-Overhead.\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-3 gap-8 mb-12\">\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                \u20ac10.100<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">gespart \u00fcber 3 Jahre<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                50%<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">schnellere Entwicklung<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                \u20ac0\/Monat<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">laufende Kosten<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-[#E9EEF1] dark:bg-navy-custom p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-slate-900\/10 dark:border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-slate-100 dark:bg-navy-custom flex items-center px-4 gap-1.5 border-b border-slate-200 dark:border-slate-800\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div class=\"pt-8 h-full\">\n                                                        <img decoding=\"async\"\n                                                            alt=\"Goldgarn Denim Website Mockup\"\n                                                            class=\"w-full h-full object-cover\"\n                                                            src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuBdJsljQWbXFwPDML2HDKzyViNIfY2W7wbK8Ke7u5NGgBDQYNLtRl0OtrZ6zrLCbPf9NxKjB9oQT9heUdBwdcoov7hFNSUDF0H84d8CpLAktimT1w0KF2bckKB4j2z84jPogAWKW0d0XDagcaY36jI3dhNMwoM1cH9nS0651fCIKIpi2Hz33EkKAEEQuMQlMUDXPhzP-_R5jA73vOPvVmu2wmvMULb0kdnfPbsmAViJqsEvbQ1P227-J5tjFWJwgv3Gd2eeJp6LcRRd\"\/>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Slide 2: Berlin Bike -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        MOBILITY & E-BIKE\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Berlin Bike<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Entwicklung und erfolgreicher Go-Live einer neuen E-Bike Marke im stark\n                                                        umk\u00e4mpften Markt. Custom Shopify Theme mit Mobile-First-Ansatz und\n                                                        multilingualer Voice-Agent-Integration (3 Sprachen) f\u00fcr 24\/7 Customer-Service\n                                                        und Verkaufsberatung.\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-3 gap-8 mb-12\">\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                50%<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">g\u00fcnstiger als Agentur<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                2 Wochen<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Launch-Zeit<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                ~60%<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Support-Entlastung<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-[#F1F5F9] dark:bg-navy-custom p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-slate-900\/10 dark:border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-slate-100 dark:bg-navy-custom flex items-center px-4 gap-1.5 border-b border-slate-200 dark:border-slate-800\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div\n                                                        class=\"pt-8 h-full bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 flex items-center justify-center\">\n                                                        <div class=\"text-center\">\n                                                            <div\n                                                                class=\"w-20 h-20 mx-auto mb-4 rounded-full bg-white\/10 flex items-center justify-center backdrop-blur-sm\">\n                                                                <svg\n                                                                    class=\"w-10 h-10 text-white\"\n                                                                    fill=\"none\"\n                                                                    stroke=\"currentColor\"\n                                                                    viewBox=\"0 0 24 24\">\n                                                                    <path\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\"\n                                                                        stroke-width=\"1.5\"\n                                                                        d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path>\n                                                                <\/svg>\n                                                            <\/div>\n                                                            <span class=\"text-white font-display font-bold text-xl\">Berlin Bike<\/span>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Slide 3: Wallstreet Boyz -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        LIFESTYLE & PRINT-ON-DEMAND\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Wallstreet Boyz<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Ultra-schneller Launch innerhalb weniger Tage: Print-on-Demand Shop mit \u00fcber 100\n                                                        Produkten. Custom Shopify Theme mit konsequentem Mobile-First-Ansatz f\u00fcr\n                                                        maximale Conversion auf allen Devices. Vom Konzept zum Live-Shop in Rekordzeit.\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-3 gap-8 mb-12\">\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                3 Tage<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Launch-Zeit<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                100+<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Produkte Live<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                0\u20ac<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Lagerkosten<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-slate-900 p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-slate-900 flex items-center px-4 gap-1.5 border-b border-slate-700\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div\n                                                        class=\"pt-8 h-full bg-gradient-to-br from-slate-900 via-amber-900 to-slate-800 flex items-center justify-center\">\n                                                        <div class=\"text-center\">\n                                                            <div\n                                                                class=\"w-20 h-20 mx-auto mb-4 rounded-full bg-amber-500\/20 flex items-center justify-center backdrop-blur-sm border border-amber-500\/30\">\n                                                                <svg\n                                                                    class=\"w-10 h-10 text-amber-400\"\n                                                                    fill=\"none\"\n                                                                    stroke=\"currentColor\"\n                                                                    viewBox=\"0 0 24 24\">\n                                                                    <path\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\"\n                                                                        stroke-width=\"1.5\"\n                                                                        d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n                                                                <\/svg>\n                                                            <\/div>\n                                                            <span class=\"text-amber-100 font-display font-bold text-xl\">Wallstreet Boyz<\/span>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Slide 4: Anzivino -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        LUXURY & JEWELRY\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Anzivino<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Langfristige Partnerschaft mit dem erfolgreichen Schmuckunternehmen aus Ulm. Vom initialen Shopify-Launch mit Custom Theme \u00fcber strategischen Relaunch bis zur kontinuierlichen Betreuung. Fokus auf minimalistische Luxury-Experience, SEO-Optimierung und exzellente User Experience f\u00fcr individuellen Schmuckdesign.\n                                                    <\/p>\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-3 gap-8 mb-12\">\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                5 Jahre<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Partnerschaft<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                2 Projekte<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Launch + Relaunch<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                50%<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">g\u00fcnstiger als Agentur<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-[#FAF9F6] dark:bg-navy-custom p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-slate-900\/10 dark:border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-stone-100 dark:bg-navy-custom flex items-center px-4 gap-1.5 border-b border-stone-200 dark:border-slate-800\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div\n                                                        class=\"pt-8 h-full bg-gradient-to-br from-stone-100 via-amber-50 to-stone-200 flex items-center justify-center\">\n                                                        <div class=\"text-center\">\n                                                            <div\n                                                                class=\"w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center border border-amber-200\/50 shadow-inner\">\n                                                                <svg\n                                                                    class=\"w-10 h-10 text-amber-700\"\n                                                                    fill=\"none\"\n                                                                    stroke=\"currentColor\"\n                                                                    viewBox=\"0 0 24 24\">\n                                                                    <path\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\"\n                                                                        stroke-width=\"1.5\"\n                                                                        d=\"M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7\"><\/path>\n                                                                <\/svg>\n                                                            <\/div>\n                                                            <span class=\"text-stone-800 font-display font-bold text-xl\">Anzivino<\/span>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Slide 5: Fahrradkauf24 -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        E-COMMERCE & AI INNOVATION\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Fahrradkauf24<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Custom Shopify Theme mit revolution\u00e4rer AI-Integration: Voice AI Agent als digitaler Verkaufsberater entlastet Customer Service massiv. Generative Engine Optimization (GEO) f\u00fcr maximale Sichtbarkeit in KI-Suchmaschinen wie ChatGPT und Perplexity. Launch innerhalb von 5 Tagen.\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-2 gap-8 mb-12\">\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                -50%<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">\n                                                                Support-Anfragen<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                24\/7<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">AI Verkaufsberater<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-[#FFF9F5] dark:bg-navy-custom p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-slate-900\/10 dark:border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-slate-100 dark:bg-navy-custom flex items-center px-4 gap-1.5 border-b border-slate-200 dark:border-slate-800\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div\n                                                        class=\"pt-8 h-full bg-gradient-to-br from-orange-500 via-blue-600 to-orange-600 flex items-center justify-center\">\n                                                        <div class=\"text-center\">\n                                                            <div\n                                                                class=\"w-20 h-20 mx-auto mb-4 rounded-full bg-white\/20 flex items-center justify-center backdrop-blur-sm border border-white\/30\">\n                                                                <svg\n                                                                    class=\"w-10 h-10 text-white\"\n                                                                    fill=\"none\"\n                                                                    stroke=\"currentColor\"\n                                                                    viewBox=\"0 0 24 24\">\n                                                                    <path\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\"\n                                                                        stroke-width=\"1.5\"\n                                                                        d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path>\n                                                                <\/svg>\n                                                            <\/div>\n                                                            <span class=\"text-white font-display font-bold text-xl\">Fahrradkauf24<\/span>\n                                                            <div\n                                                                class=\"mt-2 px-3 py-1 rounded-full bg-white\/20 backdrop-blur-sm inline-block\">\n                                                                <span class=\"text-xs text-white font-semibold\">AI Voice Agent<\/span>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Slide 6: Keskin E-Bike -->\n                                    <div class=\"min-w-[90%] sm:min-w-[85%] lg:min-w-[90%] snap-start px-1\">\n                                        <div\n                                            class=\"bg-white dark:bg-navy-custom rounded-[2rem] overflow-hidden shadow-xl border border-slate-100 dark:border-slate-800 flex flex-col lg:flex-row h-full\">\n                                            <div class=\"lg:w-1\/2 p-8 lg:p-16 flex flex-col justify-between\">\n                                                <div>\n                                                    <div\n                                                        class=\"inline-block px-4 py-1.5 rounded-full bg-slate-100 dark:bg-navy-custom text-slate-600 dark:text-slate-300 text-xs font-bold uppercase tracking-wider mb-8\">\n                                                        MANUFACTURING & BRAND RELAUNCH\n                                                    <\/div>\n                                                    <h3\n                                                        class=\"text-[32px] lg:text-[44px] font-display font-extrabold text-slate-900 dark:text-white mb-6\">\n                                                        Keskin E-Bike<\/h3>\n                                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed\">\n                                                        Kompletter Relaunch einer etablierten E-Bike Traditionsmarke mit Custom Shopify\n                                                        Theme. Modernisierung der digitalen Pr\u00e4senz f\u00fcr direkten Endkundenvertrieb und\n                                                        D2C-Transformation mit Fokus auf Brand-Storytelling und Performance.\n                                                    <\/p>\n                                                    <div class=\"grid grid-cols-2 gap-8 mb-12\">\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                Modern<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">D2C Approach<\/div>\n                                                        <\/div>\n                                                        <div>\n                                                            <div\n                                                                class=\"text-3xl font-display font-extrabold text-slate-900 dark:text-white mb-1\">\n                                                                Custom<\/div>\n                                                            <div class=\"text-sm text-slate-500 dark:text-slate-400\">Brand Experience<\/div>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            <div\n                                                class=\"lg:w-1\/2 bg-[#EDF2F7] dark:bg-navy-custom p-8 lg:p-12 flex items-center justify-center relative\">\n                                                <div\n                                                    class=\"w-full max-w-lg aspect-[4\/3] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-navy-custom border-[12px] border-slate-900\/10 dark:border-white\/5 relative transform hover:scale-[1.02] transition-transform duration-500\">\n                                                    <div\n                                                        class=\"absolute top-0 left-0 w-full h-8 bg-slate-100 dark:bg-navy-custom flex items-center px-4 gap-1.5 border-b border-slate-200 dark:border-slate-800\">\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/div>\n                                                        <div class=\"w-2.5 h-2.5 rounded-full bg-green-400\"><\/div>\n                                                    <\/div>\n                                                    <div\n                                                        class=\"pt-8 h-full bg-gradient-to-br from-slate-700 via-blue-900 to-slate-800 flex items-center justify-center\">\n                                                        <div class=\"text-center\">\n                                                            <div\n                                                                class=\"w-20 h-20 mx-auto mb-4 rounded-full bg-blue-500\/20 flex items-center justify-center backdrop-blur-sm border border-blue-400\/30\">\n                                                                <svg\n                                                                    class=\"w-10 h-10 text-blue-300\"\n                                                                    fill=\"none\"\n                                                                    stroke=\"currentColor\"\n                                                                    viewBox=\"0 0 24 24\">\n                                                                    <path\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\"\n                                                                        stroke-width=\"1.5\"\n                                                                        d=\"M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z\"><\/path>\n                                                                <\/svg>\n                                                            <\/div>\n                                                            <span class=\"text-blue-100 font-display font-bold text-xl\">Keskin E-Bike<\/span>\n                                                        <\/div>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                <\/div>\n                                <div class=\"flex justify-center gap-3 mt-6\" id=\"pagination-container\">\n                                    <button class=\"pagination-dot active\" onclick=\"scrollToSlide(0)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToSlide(1)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToSlide(2)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToSlide(3)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToSlide(4)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToSlide(5)\"><\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- TESTIMONIALS SECTION WITH SVG STAR ICONS -->\n                    <section class=\"py-24 bg-white dark:bg-navy-custom\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"flex flex-col items-center text-center mb-12 gap-6\">\n                                <div>\n                                    <span\n                                        class=\"section-label text-accent-blue font-bold uppercase tracking-widest text-sm mb-3 block\">TESTIMONIALS<\/span>\n                                    <h2\n                                        class=\"section-headline text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight !mb-0\">\n                                        Kundenstimmen<\/h2>\n                                <\/div>\n                                <div class=\"flex gap-2\">\n                                    <button\n                                        class=\"slider-arrow\"\n                                        style=\"width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background-color: white; color: #475569; cursor: pointer; transition: all 0.3s;\"\n                                        onclick=\"document.getElementById('testimonial-slider').scrollBy({left: -document.getElementById('testimonial-slider').offsetWidth * 0.9, behavior: 'smooth'})\">\n                                        <svg\n                                            class=\"w-6 h-6\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\"\n                                            style=\"display: block;\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"><\/path>\n                                        <\/svg>\n                                    <\/button>\n                                    <button\n                                        class=\"slider-arrow\"\n                                        style=\"width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background-color: white; color: #475569; cursor: pointer; transition: all 0.3s;\"\n                                        onclick=\"document.getElementById('testimonial-slider').scrollBy({left: document.getElementById('testimonial-slider').offsetWidth * 0.9, behavior: 'smooth'})\">\n                                        <svg\n                                            class=\"w-5 h-5\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\"\n                                            style=\"display: block;\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path>\n                                        <\/svg>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <div class=\"relative\">\n                                <div\n                                    class=\"flex overflow-x-auto hide-scrollbar snap-x snap-mandatory gap-6 pb-8 carousel-container\"\n                                    id=\"testimonial-slider\">\n                                    <!-- Testimonial 1 -->\n                                    <div class=\"min-w-full md:min-w-[48%] lg:min-w-[32%] snap-start\">\n                                        <div class=\"testimonial-card\">\n                                            <div class=\"flex gap-1 mb-4\">\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                            <\/div>\n                                            <p class=\"text-slate-600 dark:text-slate-300 leading-relaxed mb-8 italic\">\n                                                \"Seit 2010 wissen wir mit Bora einen zuverl\u00e4ssigen und kompetenten Partner an\n                                                unserer Seite. Ein kreativer Kopf, der sein Handwerk versteht. L\u00f6sungen zu\n                                                Problemen werden angeboten, besprochen und sofort umgesetzt.\"\n                                            <\/p>\n                                            <div class=\"mt-auto flex items-center gap-4\">\n                                                <img decoding=\"async\"\n                                                    alt=\"Devrim \u00d6rdek\"\n                                                    class=\"w-14 h-14 rounded-full border-2 border-slate-100 dark:border-slate-800 object-cover\"\n                                                    src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/07\/dev-oerdek.webp\"\/>\n                                                <div>\n                                                    <div class=\"font-bold text-slate-900 dark:text-white leading-none mb-1\">\n                                                        Devrim \u00d6rdek<\/div>\n                                                    <div class=\"text-[10px] text-slate-500 uppercase tracking-wide font-semibold\">\n                                                        Head of E-Commerce B2C<\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <!-- Testimonial 2 -->\n                                    <div class=\"min-w-full md:min-w-[48%] lg:min-w-[32%] snap-start\">\n                                        <div class=\"testimonial-card\">\n                                            <div class=\"flex gap-1 mb-4\">\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                            <\/div>\n                                            <p class=\"text-slate-600 dark:text-slate-300 leading-relaxed mb-8 italic\">\n                                                \"Ich habe noch nie mit einem so zuverl\u00e4ssigen Developer wie Bora gearbeitet. Er\n                                                ist immer da, wenn wir ihn brauchen und hat exzellente\n                                                Kommunikationsf\u00e4higkeiten. Ich w\u00fcrde ihn jedem empfehlen, denn er macht es beim\n                                                ersten Mal richtig!\"\n                                            <\/p>\n                                            <div class=\"mt-auto flex items-center gap-4\">\n                                                <img decoding=\"async\"\n                                                    alt=\"Julia Merk\"\n                                                    class=\"w-14 h-14 rounded-full border-2 border-slate-100 dark:border-slate-800 object-cover\"\n                                                    src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/07\/julia-merk256x256.webp\"\/>\n                                                <div>\n                                                    <div class=\"font-bold text-slate-900 dark:text-white leading-none mb-1\">\n                                                        Julia Merk<\/div>\n                                                    <div class=\"text-[10px] text-slate-500 uppercase tracking-wide font-semibold\">\n                                                        Managing Director<\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <!-- Testimonial 3 -->\n                                    <div class=\"min-w-full md:min-w-[48%] lg:min-w-[32%] snap-start\">\n                                        <div class=\"testimonial-card\">\n                                            <div class=\"flex gap-1 mb-4\">\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                            <\/div>\n                                            <p class=\"text-slate-600 dark:text-slate-300 leading-relaxed mb-8 italic\">\n                                                \"Die Zusammenarbeit mit Bora ist immer ein Traum! Wir vertrauen ihm seit\n                                                mehreren Jahren \u2013 er ist \u00e4u\u00dferst effizient, zuverl\u00e4ssig und liefert stets\n                                                p\u00fcnktlich. Bora ist ein Helfer mit gro\u00dfem Herzen, vielen Dank f\u00fcr alles!\"\n                                            <\/p>\n                                            <div class=\"mt-auto flex items-center gap-4\">\n                                                <img decoding=\"async\"\n                                                    alt=\"Alfonso Anzivino\"\n                                                    class=\"w-14 h-14 rounded-full border-2 border-slate-100 dark:border-slate-800 object-cover\"\n                                                    src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/07\/alfonso-anzivino.jpg\"\/>\n                                                <div>\n                                                    <div class=\"font-bold text-slate-900 dark:text-white leading-none mb-1\">\n                                                        Alfonso Anzivino<\/div>\n                                                    <div class=\"text-[10px] text-slate-500 uppercase tracking-wide font-semibold\">\n                                                        Managing Director<\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <!-- Testimonial 4 -->\n                                    <div class=\"min-w-full md:min-w-[48%] lg:min-w-[32%] snap-start\">\n                                        <div class=\"testimonial-card\">\n                                            <div class=\"flex gap-1 mb-4\">\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                            <\/div>\n                                            <p class=\"text-slate-600 dark:text-slate-300 leading-relaxed mb-8 italic\">\n                                                \"Bora war ein absoluter Gl\u00fccksgriff f\u00fcr mich. Er hat drei Websites mit WordPress\n                                                f\u00fcr mich entwickelt. Ich konnte nach unseren Website-Relaunches und\n                                                Optimierungen definitiv mehr Kunden online generieren. Vielen Dank Bora, gerne\n                                                wieder!\"\n                                            <\/p>\n                                            <div class=\"mt-auto flex items-center gap-4\">\n                                                <img decoding=\"async\"\n                                                    alt=\"Hakan Temizer\"\n                                                    class=\"w-14 h-14 rounded-full border-2 border-slate-100 dark:border-slate-800 object-cover\"\n                                                    src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/07\/htemizer-e1691380841812.webp\"\/>\n                                                <div>\n                                                    <div class=\"font-bold text-slate-900 dark:text-white leading-none mb-1\">\n                                                        Hakan Temizer<\/div>\n                                                    <div class=\"text-[10px] text-slate-500 uppercase tracking-wide font-semibold\">\n                                                        Managing Director<\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <!-- Testimonial 5 -->\n                                    <div class=\"min-w-full md:min-w-[48%] lg:min-w-[32%] snap-start\">\n                                        <div class=\"testimonial-card\">\n                                            <div class=\"flex gap-1 mb-4\">\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                                <svg class=\"w-5 h-5 text-orange-400 fill-current\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\n                                                <\/svg>\n                                            <\/div>\n                                            <p class=\"text-slate-600 dark:text-slate-300 leading-relaxed mb-8 italic\">\n                                                \"Ich arbeite mit vielen Developern und kann ohne Zweifel sagen, dass Bora einer\n                                                der Besten ist. Er nimmt sich so viel Zeit f\u00fcr die Zusammenarbeit wie n\u00f6tig, um\n                                                sicherzustellen, dass er deine Anforderungen versteht, bevor er anf\u00e4ngt zu\n                                                coden. Nach der Zusammenarbeit liefert er erstklassige, elegante L\u00f6sungen \u2013\n                                                schnell und effizient.\"\n                                            <\/p>\n                                            <div class=\"mt-auto flex items-center gap-4\">\n                                                <img decoding=\"async\"\n                                                    alt=\"Cihan Erkan\"\n                                                    class=\"w-14 h-14 rounded-full border-2 border-slate-100 dark:border-slate-800 object-cover\"\n                                                    src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/07\/c-erkan.webp\"\/>\n                                                <div>\n                                                    <div class=\"font-bold text-slate-900 dark:text-white leading-none mb-1\">\n                                                        Cihan Erkan<\/div>\n                                                    <div class=\"text-[10px] text-slate-500 uppercase tracking-wide font-semibold\">\n                                                        Managing Director<\/div>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"flex justify-center gap-3 mt-8\" id=\"testimonial-pagination\">\n                                    <button class=\"pagination-dot active\" onclick=\"scrollToTestimonial(0)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToTestimonial(1)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToTestimonial(2)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToTestimonial(3)\"><\/button>\n                                    <button class=\"pagination-dot\" onclick=\"scrollToTestimonial(4)\"><\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- FAQ SECTION -->\n                    <section class=\"py-24 bg-background-light dark:bg-deep-navy\" id=\"faq\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"text-left mb-12\">\n                                <span\n                                    class=\"section-label text-accent-blue font-bold uppercase tracking-widest text-sm mb-3 block\">FAQ<\/span>\n                                <h2\n                                    class=\"section-headline text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight !mb-0\">\n                                    Fragen &\n                                    <span class=\"text-accent-blue\">Antworten<\/span>\n                                <\/h2>\n                            <\/div>\n                            <div class=\"w-full space-y-4\">\n                                <details\n                                    class=\"group bg-slate-50 dark:bg-navy-custom\/50 rounded-2xl transition-all\">\n                                    <summary\n                                        class=\"list-none cursor-pointer p-6 flex justify-between items-center font-bold hover:text-primary transition-colors text-slate-900 dark:text-white\">\n                                        Wie l\u00e4uft die Zusammenarbeit ab?\n                                        <svg\n                                            class=\"w-6 h-6 inline-block group-open:rotate-180 transition-transform\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M19 9l-7 7-7-7\"><\/path>\n                                        <\/svg>\n                                    <\/summary>\n                                    <div class=\"px-6 pb-6 text-slate-600 dark:text-slate-400 space-y-2 text-lg\">\n                                        <ul class=\"list-disc pl-5 space-y-2\">\n                                            <li>Kostenloses Strategiegespr\u00e4ch (30 Min)<\/li>\n                                            <li>Individuelle Analyse & Angebot<\/li>\n                                            <li>Schrittweise Umsetzung in 4-8 Wochen<\/li>\n                                            <li>Schulung & \u00dcbergabe<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                <\/details>\n                                <details\n                                    class=\"group bg-slate-50 dark:bg-navy-custom\/50 rounded-2xl transition-all\">\n                                    <summary\n                                        class=\"list-none cursor-pointer p-6 flex justify-between items-center font-bold hover:text-primary transition-colors text-slate-900 dark:text-white\">\n                                        Was kostet ein Projekt?\n                                        <svg\n                                            class=\"w-6 h-6 inline-block group-open:rotate-180 transition-transform\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M19 9l-7 7-7-7\"><\/path>\n                                        <\/svg>\n                                    <\/summary>\n                                    <div class=\"px-6 pb-6 text-slate-600 dark:text-slate-400 text-lg\">\n                                        Typische Projekte liegen zwischen 3.000-15.000\u20ac. Der genaue Preis h\u00e4ngt vom\n                                        Umfang ab. Ratenzahlung m\u00f6glich.\n                                    <\/div>\n                                <\/details>\n                                <details\n                                    class=\"group bg-slate-50 dark:bg-navy-custom\/50 rounded-2xl transition-all\">\n                                    <summary\n                                        class=\"list-none cursor-pointer p-6 flex justify-between items-center font-bold hover:text-primary transition-colors text-slate-900 dark:text-white\">\n                                        Wie schnell sind Ergebnisse sichtbar?\n                                        <svg\n                                            class=\"w-6 h-6 inline-block group-open:rotate-180 transition-transform\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M19 9l-7 7-7-7\"><\/path>\n                                        <\/svg>\n                                    <\/summary>\n                                    <div class=\"px-6 pb-6 text-slate-600 dark:text-slate-400 text-lg\">\n                                        Erste Quick Wins oft nach 1-2 Wochen. Signifikante Verbesserungen nach 4-8\n                                        Wochen. ROI typischerweise nach 3-6 Monaten.\n                                    <\/div>\n                                <\/details>\n                                <details\n                                    class=\"group bg-slate-50 dark:bg-navy-custom\/50 rounded-2xl transition-all\">\n                                    <summary\n                                        class=\"list-none cursor-pointer p-6 flex justify-between items-center font-bold hover:text-primary transition-colors text-slate-900 dark:text-white\">\n                                        Datenschutz?\n                                        <svg\n                                            class=\"w-6 h-6 inline-block group-open:rotate-180 transition-transform\"\n                                            fill=\"none\"\n                                            stroke=\"currentColor\"\n                                            viewBox=\"0 0 24 24\">\n                                            <path\n                                                stroke-linecap=\"round\"\n                                                stroke-linejoin=\"round\"\n                                                stroke-width=\"2\"\n                                                d=\"M19 9l-7 7-7-7\"><\/path>\n                                        <\/svg>\n                                    <\/summary>\n                                    <div class=\"px-6 pb-6 text-slate-600 dark:text-slate-400 text-lg\">\n                                        Alles 100% DSGVO-konform. Ich arbeite nur mit gepr\u00fcften Tools, die europ\u00e4ische\n                                        Standards erf\u00fcllen. Auf Wunsch mit Datenschutz-Audit.\n                                    <\/div>\n                                <\/details>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- PROCESS SECTION -->\n                    <section class=\"py-24 bg-[#F8FAFC] dark:bg-navy-custom\/30\" id=\"process\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"mb-16 text-center\">\n                                <span\n                                    class=\"section-label text-accent-blue font-bold uppercase tracking-widest text-sm mb-3 block\">IN 3 SCHRITTEN ZUM ZIEL<\/span>\n                                <h2\n                                    class=\"section-headline text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight !mb-0\">\n                                    So funktioniert's<\/h2>\n                            <\/div>\n                            <div class=\"relative\">\n                                <div\n                                    class=\"hidden lg:block absolute top-[60px] left-[15%] right-[15%] h-px bg-slate-200 dark:bg-navy-custom z-0\"><\/div>\n                                <div class=\"grid lg:grid-cols-3 gap-12 relative z-10\">\n                                    <div class=\"flex flex-col items-center text-center group\">\n                                        <div\n                                            class=\"w-[120px] h-[120px] rounded-full bg-white dark:bg-navy-custom border border-slate-100 dark:border-slate-800 shadow-lg flex items-center justify-center mb-8 transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-10 h-10 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <h3 class=\"text-[16px] font-bold text-slate-900 dark:text-white mb-4\">Kostenloses Erstberatung Buchen<\/h3>\n                                        <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed max-w-[280px]\">\n                                            30-min\u00fctiges Strategiegespr\u00e4ch zur Analyse deiner Situation.<\/p>\n                                    <\/div>\n                                    <div class=\"flex flex-col items-center text-center group\">\n                                        <div\n                                            class=\"w-[120px] h-[120px] rounded-full bg-white dark:bg-navy-custom border border-slate-100 dark:border-slate-800 shadow-lg flex items-center justify-center mb-8 transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-10 h-10 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <h3 class=\"text-[16px] font-bold text-slate-900 dark:text-white mb-4\">KI-Audit & Strategie<\/h3>\n                                        <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed max-w-[280px]\">\n                                            Detaillierte Analyse deines Shops und Entwicklung einer Roadmap.<\/p>\n                                    <\/div>\n                                    <div class=\"flex flex-col items-center text-center group\">\n                                        <div\n                                            class=\"w-[120px] h-[120px] rounded-full bg-white dark:bg-navy-custom border border-slate-100 dark:border-slate-800 shadow-lg flex items-center justify-center mb-8 transition-transform group-hover:scale-110\">\n                                            <svg\n                                                class=\"w-10 h-10 inline-block text-accent-blue\"\n                                                fill=\"none\"\n                                                stroke=\"currentColor\"\n                                                viewBox=\"0 0 24 24\">\n                                                <path\n                                                    stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\"\n                                                    stroke-width=\"2\"\n                                                    d=\"M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\"><\/path>\n                                            <\/svg>\n                                        <\/div>\n                                        <h3 class=\"text-[16px] font-bold text-slate-900 dark:text-white mb-4\">Umsetzung & Wachstum<\/h3>\n                                        <p class=\"text-slate-600 dark:text-slate-400 leading-relaxed max-w-[280px]\">\n                                            Integration der KI-L\u00f6sungen und gemeinsamer Start ins n\u00e4chste Level.<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"mt-16 text-center\">\n                                <a\n                                    class=\"btn-primary py-4 px-10 text-base cursor-pointer\"\n                                    onclick=\"openCalendly(); return false;\">Kostenlose Erstberatung<\/a>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- CONTACT SECTION -->\n                    <section class=\"py-24 bg-slate-50 dark:bg-navy-custom\/50\" id=\"contact\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"grid lg:grid-cols-2 gap-16 items-start\">\n                                <div>\n                                    <span\n                                        class=\"section-label text-accent-blue font-bold uppercase tracking-widest text-sm mb-3 block\">KONTAKT<\/span>\n                                    <h2\n                                        class=\"section-headline text-[24px] md:text-[40px] font-display font-bold text-deep-navy dark:text-white leading-tight !mb-0\">\n                                        Bereit f\u00fcr das n\u00e4chste\n                                        <span class=\"text-primary\">Level?<\/span>\n                                    <\/h2>\n                                    <p class=\"text-lg text-slate-600 dark:text-slate-400 mb-8 leading-relaxed\">\n                                        Kontaktiere deinen Freelance Shopify Developer f\u00fcr ein kostenloses Erstgespr\u00e4ch. Wir analysieren gemeinsam Optimierungspotenziale.\n                                    <\/p>\n                                    <div class=\"space-y-6 mb-10 text-slate-700 dark:text-slate-300\">\n\n                                        <div class=\"flex items-start gap-4 group\">\n                                            <div\n                                                class=\"flex-shrink-0 w-6 h-6 rounded-full bg-green-500\/10 flex items-center justify-center mt-1\">\n                                                <svg\n                                                    class=\"w-4 h-4 text-green-500\"\n                                                    fill=\"none\"\n                                                    stroke=\"currentColor\"\n                                                    viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\"\n                                                        stroke-width=\"3\"\n                                                        d=\"M5 13l4 4L19 7\"><\/path>\n                                                <\/svg>\n                                            <\/div>\n                                            <div>\n                                                <p class=\"text-lg font-medium leading-tight\">Konkrete Ma\u00dfnahmen f\u00fcr Shopify Optimierung & KI-gest\u00fctzte Conversion-Optimierung<\/p>\n                                            <\/div>\n                                        <\/div>\n                                        <div class=\"flex items-start gap-4 group\">\n                                            <div\n                                                class=\"flex-shrink-0 w-6 h-6 rounded-full bg-green-500\/10 flex items-center justify-center mt-1\">\n                                                <svg\n                                                    class=\"w-4 h-4 text-green-500\"\n                                                    fill=\"none\"\n                                                    stroke=\"currentColor\"\n                                                    viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\"\n                                                        stroke-width=\"3\"\n                                                        d=\"M5 13l4 4L19 7\"><\/path>\n                                                <\/svg>\n                                            <\/div>\n                                            <div>\n                                                <p class=\"text-lg font-medium leading-tight\">Grobe ROI-Absch\u00e4tzung: Umsatzpotenzial vs. Implementierungsaufwand<\/p>\n                                            <\/div>\n                                        <\/div>\n                                        <div class=\"flex items-start gap-4 group\">\n                                            <div\n                                                class=\"flex-shrink-0 w-6 h-6 rounded-full bg-green-500\/10 flex items-center justify-center mt-1\">\n                                                <svg\n                                                    class=\"w-4 h-4 text-green-500\"\n                                                    fill=\"none\"\n                                                    stroke=\"currentColor\"\n                                                    viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\"\n                                                        stroke-width=\"3\"\n                                                        d=\"M5 13l4 4L19 7\"><\/path>\n                                                <\/svg>\n                                            <\/div>\n                                            <div>\n                                                <p class=\"text-lg font-medium leading-tight\">100% kostenfrei. 100% unverbindlich. 100% Mehrwert f\u00fcr dein Business.<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"flex flex-col sm:flex-row gap-4\">\n                                        <button\n                                            class=\"py-4 px-8 text-base w-full sm:w-auto rounded-xl cursor-pointer font-bold text-white transition-all duration-300 hover:-translate-y-0.5\"\n                                            style=\"background-color: #119eda; box-shadow: 0 4px 12px rgba(17, 158, 218, 0.3);\"\n                                            onclick=\"openCalendly(); return false;\">\n                                            Kostenlose Erstberatung\n                                        <\/button>\n                                        <a\n                                            href=\"mailto:info@boraoenal.com?subject=Website%20Kommunikation\"\n                                            class=\"py-4 px-8 text-base w-full sm:w-auto rounded-xl cursor-pointer font-bold text-slate-900 dark:text-white bg-white dark:bg-navy-custom border-2 border-slate-200 dark:border-slate-700 hover:border-primary dark:hover:border-primary transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg text-center inline-flex items-center justify-center\">\n                                            E-Mail Kontakt\n                                        <\/a>\n                                    <\/div>\n                                <\/div>\n                                <div\n                                    class=\"bg-white dark:bg-navy-custom rounded-[2rem] shadow-2xl overflow-hidden border border-slate-200 dark:border-slate-800 min-h-[600px]\">\n                                    <div\n                                        class=\"calendly-inline-widget\"\n                                        data-url=\"https:\/\/calendly.com\/bora_oenal\/30min\"\n                                        style=\"min-width:320px;height:600px;\"><\/div>\n                                    <script\n                                        data-cfasync=\"false\"\n                                        src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script>\n                                    <script\n                                        type=\"text\/javascript\"\n                                        src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\"\n                                        async><\/script>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n\n                    <!-- FOOTER -->\n                    <!-- FOOTER -->\n                    <footer class=\"bg-navy-custom text-slate-400 py-20\">\n                        <div class=\"w-full px-[5%]\">\n                            <div class=\"grid md:grid-cols-4 gap-12 mb-16\">\n                                <div class=\"col-span-1 md:col-span-2\">\n                                    <div class=\"logo-container mb-6 flex items-center gap-2 ml-[-12px]\">\n                                        <a href=\"https:\/\/boraoenal.com\/\" class=\"block flex-shrink-0\">\n                                            <img decoding=\"async\"\n                                                src=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2026\/01\/logo-boraoenal-transp-footer.png\"\n                                                alt=\"Bora Oenal Logo\"\n                                                class=\"h-14 w-auto object-contain transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95\"\/>\n                                        <\/a>\n                                    <\/div>\n                                    <p class=\"max-w-sm mb-6 text-slate-400\">KI-Commerce & intelligente Automatisierung f\u00fcr leistungsstarke Shopify-Shops.<\/p>\n                                <\/div>\n                                <div>\n                                    <h4 class=\"text-white font-bold mb-4\">Rechtliches<\/h4>\n                                    <ul class=\"space-y-4\">\n                                        <li>\n                                            <a\n                                                class=\"text-slate-400 hover:text-white transition-colors\"\n                                                href=\"https:\/\/boraoenal.com\/impressum\">\n                                                Impressum\n                                            <\/a>\n                                        <\/li>\n                                        <li>\n                                            <a\n                                                class=\"text-slate-400 hover:text-white transition-colors\"\n                                                href=\"https:\/\/boraoenal.com\/datenschutz\">\n                                                Datenschutz\n                                            <\/a>\n                                        <\/li>\n                                    <\/ul>\n                                <\/div>\n                                <div>\n                                    <h4 class=\"text-white font-bold mb-4\">Kontakt & Anfrage<\/h4>\n\n                                    <p class=\"text-slate-400 text-sm mb-6 leading-relaxed\">\n                                        Direkter Austausch zu Shopify, KI im E-Commerce und skalierbarem Wachstum.\n                                    <\/p>\n\n                                    <ul class=\"space-y-3 text-sm\">\n                                        <li>\n                                            <a\n                                                href=\"https:\/\/www.linkedin.com\/in\/boraoenal\/\"\n                                                target=\"_blank\"\n                                                rel=\"noopener noreferrer\"\n                                                class=\"inline-flex items-center gap-3 px-5 py-2.5 bg-white rounded-lg text-gray-900 text-sm font-semibold transition-all hover:-translate-y-0.5 hover:shadow-lg\">\n                                                <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                                    <path\n                                                        d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/>\n                                                <\/svg>\n                                                Connect on LinkedIn\n                                            <\/a>\n                                        <\/li>\n                                        <br>\n                                        <li>\n                                            <button\n                                                type=\"button\"\n                                                onclick=\"openCalendly(); return false;\"\n                                                class=\"inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-semibold transition-all hover:-translate-y-0.5\"\n                                                style=\"background-color:#FF8E53; box-shadow:0 4px 12px rgba(17,158,218,.3);\">\n                                                Strategiegespr\u00e4ch buchen\n                                            <\/button>\n                                        <\/li>\n                                    <\/ul>\n                                <\/div>\n                            <\/div>\n                            <div\n                                class=\"pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs uppercase tracking-widest\">\n                                <p>\u00a9 2026 Bora Oenal. All rights reserved.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/footer>\n\n                    <!-- SCRIPTS at end of Content Wrapper -->\n                    <script>\n                        function scrollToSlide(index) {\n                            const slider = document.getElementById('portfolio-slider');\n                            if (!slider) \n                                return;\n                            const dots = document.querySelectorAll('#pagination-container .pagination-dot');\n                            const slideWidth = slider.offsetWidth;\n                            slider.scrollTo({\n                                left: index * slideWidth,\n                                behavior: 'smooth'\n                            });\n                            dots.forEach((dot, idx) => {\n                                if (idx === index) {\n                                    dot\n                                        .classList\n                                        .add('active');\n                                } else {\n                                    dot\n                                        .classList\n                                        .remove('active');\n                                }\n                            });\n                        }\n                        function scrollToTestimonial(index) {\n                            const slider = document.getElementById('testimonial-slider');\n                            if (!slider) \n                                return;\n                            const dots = document.querySelectorAll('#testimonial-pagination .pagination-dot');\n                            const cards = slider.children;\n                            if (cards.length > 0) {\n                                const cardWidth = cards[0].offsetWidth + 24; \/\/ Width + gap\n                                slider.scrollTo({\n                                    left: index * cardWidth,\n                                    behavior: 'smooth'\n                                });\n                            }\n                            dots.forEach((dot, idx) => {\n                                if (idx === index) {\n                                    dot\n                                        .classList\n                                        .add('active');\n                                } else {\n                                    dot\n                                        .classList\n                                        .remove('active');\n                                }\n                            });\n                        }\n\n                        \/\/ Init Listeners if elements exist\n                        const pSlider = document.getElementById('portfolio-slider');\n                        if (pSlider) {\n                            pSlider\n                                .addEventListener('scroll', function () {\n                                    const slider = this;\n                                    const dots = document.querySelectorAll('#pagination-container .pagination-dot');\n                                    const slideWidth = slider.offsetWidth;\n                                    const scrollPosition = slider.scrollLeft;\n                                    const activeIndex = Math.round(scrollPosition \/ slideWidth);\n                                    dots.forEach((dot, idx) => {\n                                        if (idx === activeIndex) {\n                                            dot\n                                                .classList\n                                                .add('active');\n                                        } else {\n                                            dot\n                                                .classList\n                                                .remove('active');\n                                        }\n                                    });\n                                });\n                        }\n\n                        const tSlider = document.getElementById('testimonial-slider');\n                        if (tSlider) {\n                            tSlider\n                                .addEventListener('scroll', function () {\n                                    const slider = this;\n                                    const dots = document.querySelectorAll('#testimonial-pagination .pagination-dot');\n                                    cards = slider.children;\n                                    if (cards.length > 0) {\n                                        const cardWidth = cards[0].offsetWidth + 24;\n                                        const scrollPosition = slider.scrollLeft;\n                                        const activeIndex = Math.round(scrollPosition \/ cardWidth);\n                                        dots.forEach((dot, idx) => {\n                                            if (idx === activeIndex) {\n                                                dot\n                                                    .classList\n                                                    .add('active');\n                                            } else {\n                                                dot\n                                                    .classList\n                                                    .remove('active');\n                                            }\n                                        });\n                                    }\n                                });\n                        }\n\n                        \/\/ Calendly Popup Function\n                        window.openCalendly = function () {\n                            Calendly.initPopupWidget({url: 'https:\/\/calendly.com\/bora_oenal\/30min'});\n                            return false;\n                        }\n\n                        \/\/ Mobile Menu Toggle Function\n                        window.toggleMobileMenu = function () {\n                            const mobileMenu = document.getElementById('mobile-menu');\n                            const hamburger = document.querySelector('.hamburger');\n                            if (mobileMenu && hamburger) {\n                                mobileMenu\n                                    .classList\n                                    .toggle('active');\n                                hamburger\n                                    .classList\n                                    .toggle('active');\n                            }\n                        }\n                    <\/script>\n\n                <\/div>\n                <!-- End Content Root -->\n            <\/div>\n            <!-- End Dark Toggle -->\n        <\/div>\n        <!-- End Wrapper -->\n    <\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2715 \ud83d\udc4b Hallo! Ich bin Diego, Boras KI-Assistent. Wie kann ich helfen? Bora \u00d6nal \u00b7 KI-Assistent Shopify &#038; KI-Experte Datenschutzhinweis Dieser Chatbot nutzt KI zur Beantwortung Ihrer Fragen. Ihre Nachrichten werden zur Verarbeitung an einen KI-Dienst gesendet und nicht dauerhaft gespeichert. Durch Klick auf \u201eChat starten&#8220; stimmen Sie der Verarbeitung zu. \ud83d\udcac Chat starten KI-Assistent [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17120","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Freelance Shopify Developer | AI &amp; E-Commerce Expert<\/title>\n<meta name=\"description\" content=\"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\/2026. Jetzt kontaktieren!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/boraoenal.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Freelance Shopify Developer | AI &amp; E-Commerce Expert\" \/>\n<meta property=\"og:description\" content=\"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\/2026. Jetzt kontaktieren!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/boraoenal.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify &amp; KI im E-Commerce \u2013 Beratung, Entwicklung &amp; Automatisierung\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T03:12:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/boraoenal.com\/wp-content\/uploads\/2025\/07\/boraoenal-ai-commerce.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/boraoenal.com\\\/\",\"url\":\"https:\\\/\\\/boraoenal.com\\\/\",\"name\":\"Freelance Shopify Developer | AI & E-Commerce Expert\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#website\"},\"datePublished\":\"2026-01-16T18:41:18+00:00\",\"dateModified\":\"2026-04-09T03:12:21+00:00\",\"description\":\"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\\\/2026. Jetzt kontaktieren!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/boraoenal.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/boraoenal.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shopify &#038; KI im E-Commerce \u2013 Beratung, Entwicklung &#038; Automatisierungen &#8211; 2026\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#website\",\"url\":\"https:\\\/\\\/boraoenal.com\\\/\",\"name\":\"Shopify & KI im E-Commerce \u2013 Beratung, Entwicklung & Automatisierungen\",\"description\":\"Shopify-Entwicklung &amp; KI-Automatisierung f\u00fcr mehr Umsatz und weniger Aufwand\",\"publisher\":{\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#organization\"},\"alternateName\":\"Shopify & KI-Commerce | Beratung, Entwicklung & Automatisierung\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/boraoenal.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#organization\",\"name\":\"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com\",\"alternateName\":\"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com\",\"url\":\"https:\\\/\\\/boraoenal.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/boraoenal.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/boraoenal-wordpress-shopify-developer-logo.png\",\"contentUrl\":\"https:\\\/\\\/boraoenal.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/boraoenal-wordpress-shopify-developer-logo.png\",\"width\":270,\"height\":150,\"caption\":\"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com\"},\"image\":{\"@id\":\"https:\\\/\\\/boraoenal.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/bora-nal-5a596813\\\/\",\"https:\\\/\\\/www.xing.com\\\/profile\\\/Bora_Oenal\\\/cv\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Freelance Shopify Developer | AI & E-Commerce Expert","description":"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\/2026. Jetzt kontaktieren!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/boraoenal.com\/en\/","og_locale":"en_US","og_type":"article","og_title":"Freelance Shopify Developer | AI & E-Commerce Expert","og_description":"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\/2026. Jetzt kontaktieren!","og_url":"https:\/\/boraoenal.com\/en\/","og_site_name":"Shopify &amp; KI im E-Commerce \u2013 Beratung, Entwicklung &amp; Automatisierung","article_modified_time":"2026-04-09T03:12:21+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/boraoenal.com\/wp-content\/uploads\/2025\/07\/boraoenal-ai-commerce.webp","type":"image\/webp"}],"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/boraoenal.com\/","url":"https:\/\/boraoenal.com\/","name":"Freelance Shopify Developer | AI & E-Commerce Expert","isPartOf":{"@id":"https:\/\/boraoenal.com\/#website"},"datePublished":"2026-01-16T18:41:18+00:00","dateModified":"2026-04-09T03:12:21+00:00","description":"Freelance Shopify Developer: KI-Integration, Custom E-Commerce-L\u00f6sungen. 10+ Jahre Erfahrung. DSGVO-konform. Verf\u00fcgbar Q2\/2026. Jetzt kontaktieren!","breadcrumb":{"@id":"https:\/\/boraoenal.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/boraoenal.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/boraoenal.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/boraoenal.com\/"},{"@type":"ListItem","position":2,"name":"Shopify &#038; KI im E-Commerce \u2013 Beratung, Entwicklung &#038; Automatisierungen &#8211; 2026"}]},{"@type":"WebSite","@id":"https:\/\/boraoenal.com\/#website","url":"https:\/\/boraoenal.com\/","name":"Shopify & KI im E-Commerce \u2013 Beratung, Entwicklung & Automatisierungen","description":"Shopify-Entwicklung &amp; KI-Automatisierung f\u00fcr mehr Umsatz und weniger Aufwand","publisher":{"@id":"https:\/\/boraoenal.com\/#organization"},"alternateName":"Shopify & KI-Commerce | Beratung, Entwicklung & Automatisierung","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/boraoenal.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/boraoenal.com\/#organization","name":"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com","alternateName":"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com","url":"https:\/\/boraoenal.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boraoenal.com\/#\/schema\/logo\/image\/","url":"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/03\/boraoenal-wordpress-shopify-developer-logo.png","contentUrl":"https:\/\/boraoenal.com\/wp-content\/uploads\/2022\/03\/boraoenal-wordpress-shopify-developer-logo.png","width":270,"height":150,"caption":"WordPress-, WooCommerce- & Shopify- Developer - boraoenal.com"},"image":{"@id":"https:\/\/boraoenal.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/bora-nal-5a596813\/","https:\/\/www.xing.com\/profile\/Bora_Oenal\/cv"]}]}},"_links":{"self":[{"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/pages\/17120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/comments?post=17120"}],"version-history":[{"count":10,"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/pages\/17120\/revisions"}],"predecessor-version":[{"id":17512,"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/pages\/17120\/revisions\/17512"}],"wp:attachment":[{"href":"https:\/\/boraoenal.com\/en\/wp-json\/wp\/v2\/media?parent=17120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}