{"id":5122,"date":"2025-07-15T09:18:46","date_gmt":"2025-07-15T09:18:46","guid":{"rendered":"https:\/\/visionbridge.eu\/?page_id=5122"},"modified":"2026-02-18T11:19:26","modified_gmt":"2026-02-18T11:19:26","slug":"contact","status":"publish","type":"page","link":"https:\/\/visionbridge.eu\/?page_id=5122","title":{"rendered":"contact-ai"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5122\" class=\"elementor elementor-5122\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98f7e60 elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"98f7e60\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6a25494 e-con-full e-flex e-con e-child\" data-id=\"6a25494\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e2c1df elementor-invisible elementor-widget elementor-widget-image\" data-id=\"0e2c1df\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:1000}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/visionbridge.eu\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1523\" height=\"211\" src=\"https:\/\/visionbridge.eu\/wp-content\/uploads\/2024\/09\/white_version2_150.png\" class=\"attachment-large size-large wp-image-4830\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d1c3636 e-con-full e-grid e-con e-child\" data-id=\"d1c3636\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7908274 animated-fast desk-links elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7908274\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"\/services\">services<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a221701 animated-fast desk-links elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"a221701\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"\/work\">work<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7131f81 animated-fast desk-links elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7131f81\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"\/apps\">apps<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-038e7bb animated-fast desk-links elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"038e7bb\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"\/contact\">contact<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e175519 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"e175519\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-413ee03 elementor-widget elementor-widget-html\" data-id=\"413ee03\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<head>\n    <script>\n        if ('scrollRestoration' in history) {\n            history.scrollRestoration = 'manual';\n        }\n\n        window.addEventListener('beforeunload', function () {\n            window.scrollTo(0, 0);\n        });\n    <\/script>\n<\/head>\n\n<div class=\"selector-top\"><\/div> <!-- Dieser Abschnitt schrumpft von oben nach unten -->\n<header class=\"header\" id=\"header\" class=\"visible\"> <!-- Added visible class initially -->\n    <div class=\"nav-content\" id=\"nav-content\">\n        <div class=\"logo\">\n            <img decoding=\"async\" src=\"https:\/\/visionbridge.eu\/wp-content\/uploads\/2024\/09\/logo_browser.png\" alt=\"Visionbridge Logo\" class=\"logo-img\">\n            <a href=\"\/\" class='vb_text'>\n                visionbridge\n            <\/a>\n        <\/div>\n        <div class=\"menu\">\n            <a href=\"#\" id=\"menu-toggle\" class=\"heading-menu\">menu<\/a>\n        <\/div>\n    <\/div>\n    <div class=\"menu-items\" id=\"menu-items\">\n        <ul>\n            <li><a href=\"\/services\">services<\/a><\/li>\n            <li><a href=\"\/work\">work<\/a><\/li>\n            <li><a href=\"\/apps\">apps<\/a><\/li>\n            <li><a href=\"\/contact\">contact<\/a><\/li>\n        <\/ul>\n        <div class=\"close\">\n            <a href=\"#\" id=\"close-toggle\">close<\/a>\n        <\/div>\n    <\/div>\n<\/header>\n<div class=\"selector\"><\/div> <!-- Dieser Abschnitt schrumpft von unten nach oben -->\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const header      = document.getElementById('header');\n        const menuToggle  = document.getElementById('menu-toggle');\n        const closeToggle = document.getElementById('close-toggle');\n        const navContent  = document.getElementById('nav-content');\n        const menuItems   = document.getElementById('menu-items');\n\n        \/\/ Header is already visible by default\n        header.classList.add('visible');\n\n        \/\/ Simulate menu open\/close instantly on load to prime the animation\n        menuToggle.click();\n        setTimeout(() => {\n            closeToggle.click();\n        }, 0); \/\/ Minimal delay to allow open animation to start before closing\n\n        \/\/ Men\u00fc-Open\/Close Logik\n        function simulateMenuClicks() {\n            menuToggle.addEventListener('click', (e) => {\n                e.preventDefault();\n                header.classList.add('is-open');\n                setTimeout(() => {\n                    navContent.style.display = 'none';\n                    menuItems.style.display  = 'flex';\n                }, 500);\n            });\n            closeToggle.addEventListener('click', (e) => {\n                e.preventDefault();\n                menuItems.style.display  = 'none';\n                navContent.style.display = 'flex';\n                setTimeout(() => {\n                    header.classList.remove('is-open');\n                }, 50);\n            });\n        }\n        simulateMenuClicks();\n\n        \/\/ Scroll-Handler (only hide when scrolling down, keep visible at top)\n        let lastY = window.pageYOffset;\n        window.addEventListener('scroll', () => {\n            const currentY = window.pageYOffset;\n            if (currentY < lastY) {\n                header.classList.add('visible');\n            } else if (currentY > 0) {\n                header.classList.remove('visible');\n            }\n            lastY = currentY;\n        });\n\n        \/\/ Ensure header stays visible at top on load\n        if (window.pageYOffset === 0) {\n            header.classList.add('visible');\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96d1c3d e-con-full e-flex e-con e-parent\" data-id=\"96d1c3d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57e8f3c elementor-widget elementor-widget-html\" data-id=\"57e8f3c\" data-element_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<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Kontakt - KI-Agentur<\/title>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" integrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n    body {\n      font-family: 'Montserrat', sans-serif;\n      background: linear-gradient(135deg, #390879, #000000);\n      color: #ffffff;\n      overflow-x: hidden;\n    }\n    h1, h2, h3 {\n      font-family: 'Playfair Display', sans-serif;\n    }\n    \/* Hero Section *\/\n    #hero {\n      height: 100vh;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n      overflow: hidden;\n    }\n    #hero h1 {\n      font-size: 4rem;\n      color: #B8DF10;\n      text-shadow: 0 0 20px rgba(184, 223, 16, 0.7);\n      z-index: 2;\n      animation: glow 2s ease-in-out infinite alternate;\n    }\n    #hero p {\n      font-size: 1.5rem;\n      color: #ffffff;\n      max-width: 600px;\n      text-align: center;\n      margin-top: 1rem;\n      z-index: 2;\n    }\n    h2 {\n      font-weight: bold;\n    }\n    #canvas-container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 1;\n    }\n    @keyframes glow {\n      0% { text-shadow: 0 0 10px rgba(184, 223, 16, 0.7); }\n      100% { text-shadow: 0 0 30px rgba(184, 223, 16, 1); }\n    }\n    \/* Contact Form Section *\/\n    #contact-form {\n      padding: 5rem 2rem;\n      background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><g stroke=\"%23B8DF10\" stroke-width=\"0.5\" opacity=\"0.2\"><line x1=\"0\" y1=\"0\" x2=\"100\" y2=\"0\" \/><line x1=\"0\" y1=\"20\" x2=\"100\" y2=\"20\" \/><line x1=\"0\" y1=\"40\" x2=\"100\" y2=\"40\" \/><line x1=\"0\" y1=\"60\" x2=\"100\" y2=\"60\" \/><line x1=\"0\" y1=\"80\" x2=\"100\" y2=\"80\" \/><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100\" \/><line x1=\"20\" y1=\"0\" x2=\"20\" y2=\"100\" \/><line x1=\"40\" y1=\"0\" x2=\"40\" y2=\"100\" \/><line x1=\"60\" y1=\"0\" x2=\"60\" y2=\"100\" \/><line x1=\"80\" y1=\"0\" x2=\"80\" y2=\"100\" \/><\/g><\/svg>') repeat;\n      background-color: rgba(57, 8, 121, 0.8);\n      backdrop-filter: blur(10px);\n      display: flex;\n      justify-content: center;\n      position: relative;\n    }\n    \/* Selector & Buttons *\/\n    .selector {\n      font-family: 'Montserrat', sans-serif;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      color: #390879;\n      margin-bottom: 2rem;\n    }\n    .button-container {\n      display: flex;\n      gap: 20px;\n      margin-bottom: 2rem;\n    }\n    .button {\n      background-color: transparent;\n      border: 2px solid #390879;\n      color: #390879;\n      cursor: pointer;\n      padding: 10px 28px;\n      font-size: 1rem;\n      text-align: center;\n      border-radius: 8px;\n      transition: background-color .3s, color .3s;\n    }\n    .button.active {\n      background-color: #B8DF10; \/* Gr\u00fcn f\u00fcr aktiven Button *\/\n      color: #390879 !important; \/* Dunkelviolett auf gr\u00fcnem Hintergrund *\/\n    }\n    .button.inactive {\n      background-color: transparent;\n      border: 2px solid white;\n      color: white !important;\n      cursor: pointer;\n      padding: 10px 28px;\n      font-size: 1rem;\n      text-align: center;\n      border-radius: 8px;\n      transition: background-color .3s, color .3s;\n    }\n    \/* Form-Container *\/\n    .form-container {\n      max-width: 600px;\n      width: 100%;\n      display: none; \/* Standardm\u00e4\u00dfig ausgeblendet *\/\n      opacity: 0;\n      transform: translateY(50px);\n      transition: all .6s ease-out;\n    }\n    .form-container.active {\n      display: block; \/* Nur das aktive Formular wird sichtbar *\/\n      opacity: 1;\n      transform: translateY(0);\n    }\n    .form-container h2 {\n      font-size: 2.5rem;\n      color: #B8DF10;\n      margin-bottom: 2rem;\n      text-align: center;\n      text-shadow: 0 0 15px rgba(184, 223, 16, 0.7);\n    }\n    .form-group {\n      margin-bottom: 1.5rem;\n      position: relative;\n      opacity: 0;\n      transform: translateX(-50px);\n    }\n    .form-group select,\n    .form-group input,\n    .form-group textarea {\n      width: 100%;\n      padding: 1rem;\n      background: rgba(255, 255, 255, 0.1);\n      border: 2px solid #B8DF10;\n      border-radius: 8px;\n      color: #ffffff;\n      font-family: 'Montserrat', sans-serif;\n      font-size: 1rem;\n      transition: all 0.3s ease;\n      animation: pulse 3s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0% { box-shadow: 0 0 5px rgba(184, 223, 16, 0.3); }\n      50% { box-shadow: 0 0 15px rgba(184, 223, 16, 0.7); }\n      100% { box-shadow: 0 0 5px rgba(184, 223, 16, 0.3); }\n    }\n    .form-group select:focus,\n    .form-group input:focus,\n    .form-group textarea:focus {\n      outline: none;\n      box-shadow: 0 0 20px rgba(184, 223, 16, 0.8);\n      background: rgba(255, 255, 255, 0.2);\n      transform: scale(1.02);\n    }\n    .form-group label {\n      position: absolute;\n      top: -0.75rem;\n      left: 1rem;\n      background: #390879;\n      padding: 0 0.5rem;\n      color: #B8DF10;\n      font-size: 0.9rem;\n      transition: all 0.3s ease;\n    }\n    .form-group select:valid + label,\n    .form-group input:valid + label,\n    .form-group textarea:valid + label {\n      color: #ffffff;\n    }\n    .submit-btn {\n      display: block;\n      width: 100%;\n      padding: 1rem;\n      background: linear-gradient(45deg, #B8DF10, #ffffff) !important;\n      color: #390879 !important;\n      font-family: 'Montserrat', sans-serif;\n      font-size: 1.2rem;\n      border: none;\n      border-radius: 8px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      transition: all 0.3s ease;\n    }\n    .submit-btn::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 0;\n      height: 0;\n      background: rgba(255, 255, 255, 0.3);\n      border-radius: 50%;\n      transform: translate(-50%, -50%);\n      transition: width 0.6s ease, height 0.6s ease;\n    }\n    .submit-btn:hover::before {\n      width: 300px;\n      height: 300px;\n    }\n    .submit-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 0 20px rgba(184, 223, 16, 0.7);\n    }\n    \n    \/* Overlay mit Spinner *\/\n#loadingOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease;\n}\n#loadingOverlay.visible {\n  visibility: visible;\n  opacity: 1;\n}\n    .spinner {\n      margin: 0 auto;\n      width: 80px;\n      height: 80px;\n      border: 8px solid rgba(184,223,16,0.3);\n      border-top: 8px solid #B8DF10;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n      box-shadow: 0 0 20px rgba(184,223,16,0.7);\n    }\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n.loading-text {\n  margin-top: 1rem;\n  color: #B8DF10;\n  font-size: 1rem;\n  text-shadow: 0 0 5px rgba(184, 223, 16, 0.7);\n}\n    \n    \/* Particle Effect for Submit Button *\/\n    #particle-canvas {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n    \/* Base Section *\/\n    #base {\n          position: relative;\n  z-index: 5;\n      padding: 3rem 2rem;\n      text-align: center;\n      background: #390879;\n    }\n    #base .base-social-icons {\n      display: flex;\n      justify-content: center;\n      gap: 1.5rem;\n      margin-top: 1rem;\n    }\n    #base .base-social-icons a {\n      color: #B8DF10;\n      font-size: 1.5rem;\n      transition: all 0.3s ease;\n    }\n    #base .base-social-icons a:hover {\n      color: #ffffff;\n      transform: scale(1.2);\n      text-shadow: 0 0 10px rgba(184, 223, 16, 0.7);\n    }\n    \/* Responsive Design *\/\n    @media (max-width: 1024px) {\n      #hero h1 {\n        font-size: 2.5rem;\n        text-align: center;\n        padding: 0 1rem;\n      }\n      #hero p {\n        font-size: 1.2rem;\n        max-width: 90%;\n        padding: 0 1rem;\n      }\n      .form-container h2 {\n        font-size: 2rem;\n      }\n    }\n  <\/style>\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Kontakt - KI-Agentur<\/title>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" integrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n  <style>\n    \/* [Existing styles remain unchanged] *\/\n  <\/style>\n<\/head>\n<body>\n   <!-- Hero -->\n  <section id=\"hero\">\n    <div id=\"canvas-container\"><\/div>\n    <h1 data-i18n-key=\"heroTitle\">Entfessle die Zukunft mit unserer KI-Expertise<\/h1>\n    <p data-i18n-key=\"heroText\">\n      \u00d6sterreichs f\u00fchrender Partner f\u00fcr innovative KI-L\u00f6sungen und Automatisierung.<br>\n      Gemeinsam entwickeln wir ma\u00dfgeschneiderte Apps und Programme \u2013 direkt aus Wien, f\u00fcr die Welt von morgen!\n    <\/p>\n  <\/section>\n\n  <!-- Loading Overlay -->\n  <div id=\"loadingOverlay\">\n    <div style=\"text-align:center\">\n      <div class=\"spinner\"><\/div>\n      <div class=\"loading-text\" data-i18n-key=\"loading\">Verarbeitung l\u00e4uft\u2026<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Kontakt-Form -->\n  <section id=\"contact-form\">\n    <div class=\"selector\">\n      <div class=\"button-container\">\n        <a class=\"button\" id=\"videocallButton\" data-i18n-key=\"btnVideo\">Videocall<\/a>\n        <a class=\"button inactive\" id=\"messageButton\" data-i18n-key=\"btnMsg\">Nachricht<\/a>\n      <\/div>\n\n      <!-- Videocall -->\n      <div class=\"form-container\" id=\"videocallForm\">\n        <h2 data-i18n-key=\"vcHeading\">Videoanruf planen<\/h2>\n        <form id=\"videocallFormInner\">\n          <div class=\"form-group\">\n            <input type=\"text\" id=\"vc-name\" required \/>\n            <label for=\"vc-name\" data-i18n-key=\"labelName\">Dein Name<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <input type=\"email\" id=\"vc-email\" required \/>\n            <label for=\"vc-email\" data-i18n-key=\"labelEmail\">Deine E-Mail<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <input type=\"datetime-local\" id=\"vc-date\" required \/>\n            <label for=\"vc-date\" data-i18n-key=\"labelDate\">Datum und Uhrzeit<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <select id=\"vc-category\" required>\n              <option value=\"\" disabled selected><\/option>\n              <option value=\"apps\" data-i18n-key=\"optApps\">Apps<\/option>\n              <option value=\"automation\" data-i18n-key=\"optAuto\">Automatisierung<\/option>\n              <option value=\"ai\" data-i18n-key=\"optAI\">K\u00fcnstliche Intelligenz<\/option>\n              <option value=\"dev\" data-i18n-key=\"optDev\">Programmierung<\/option>\n            <\/select>\n            <label for=\"vc-category\" data-i18n-key=\"labelCat\">Rubrik<\/label>\n          <\/div>\n          <button type=\"submit\" class=\"submit-btn\" data-i18n-key=\"submitVc\">Anruf planen<\/button>\n        <\/form>\n      <\/div>\n\n      <!-- Nachricht -->\n      <div class=\"form-container active\" id=\"messageForm\">\n        <h2 data-i18n-key=\"msgHeading\">Kontakt aufnehmen<\/h2>\n        <form id=\"contactForm\">\n          <div class=\"form-group\">\n            <input type=\"text\" id=\"msg-name\" required \/>\n            <label for=\"msg-name\" data-i18n-key=\"labelName\">Dein Name<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <input type=\"email\" id=\"msg-email\" required \/>\n            <label for=\"msg-email\" data-i18n-key=\"labelEmail\">Deine E-Mail<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <textarea id=\"msg-text\" rows=\"5\" required><\/textarea>\n            <label for=\"msg-text\" data-i18n-key=\"labelMsg\">Deine Nachricht<\/label>\n          <\/div>\n          <div class=\"form-group\">\n            <select id=\"msg-category\" required>\n              <option value=\"\" disabled selected><\/option>\n              <option value=\"apps\" data-i18n-key=\"optApps\">Apps<\/option>\n              <option value=\"automation\" data-i18n-key=\"optAuto\">Automatisierung<\/option>\n              <option value=\"ai\" data-i18n-key=\"optAI\">K\u00fcnstliche Intelligenz<\/option>\n              <option value=\"dev\" data-i18n-key=\"optDev\">Programmierung<\/option>\n            <\/select>\n            <label for=\"msg-category\" data-i18n-key=\"labelCat\">Rubrik<\/label>\n          <\/div>\n          <button type=\"submit\" class=\"submit-btn\" data-i18n-key=\"submitMsg\">Nachricht senden<\/button>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- Base Section -->\n  <section id=\"base\">\n    <p>Follow us for the latest AI innovations<\/p>\n    <div class=\"base-social-icons\">\n      <a href=\"https:\/\/twitter.com\" target=\"_blank\"><i class=\"fab fa-twitter\"><\/i><\/a>\n      <a href=\"https:\/\/linkedin.com\" target=\"_blank\"><i class=\"fab fa-linkedin\"><\/i><\/a>\n      <a href=\"https:\/\/github.com\" target=\"_blank\"><i class=\"fab fa-github\"><\/i><\/a>\n    <\/div>\n  <\/section>\n\n <script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  \/\/ -------------------------\n  \/\/ 1) THREE.js Szene Setup\n  \/\/ -------------------------\n  let scene, camera, renderer, particlesMesh, sphere, velocities;\n  let isMobileOrTablet = window.innerWidth <= 1024;\n\n  function initScene() {\n    if (renderer) renderer.dispose();\n    if (particlesMesh) scene.remove(particlesMesh);\n    if (sphere) scene.remove(sphere);\n    const container = document.getElementById('canvas-container');\n    if (container) container.innerHTML = '';\n\n    scene = new THREE.Scene();\n    camera = new THREE.PerspectiveCamera(75, window.innerWidth\/window.innerHeight, 0.1, 1000);\n    renderer = new THREE.WebGLRenderer({ alpha: true });\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    container.appendChild(renderer.domElement);\n\n    if (isMobileOrTablet) {\n      const geo = new THREE.BufferGeometry();\n      const count = 800;\n      const pos = new Float32Array(count*3);\n      velocities = new Float32Array(count*3);\n      for (let i=0;i<count;i++){\n        pos[i*3]   = (Math.random()-0.5)*15;\n        pos[i*3+1] = (Math.random()-0.5)*15;\n        pos[i*3+2] = (Math.random()-0.5)*15;\n        velocities[i*3]   = (Math.random()-0.5)*0.03;\n        velocities[i*3+1] = (Math.random()-0.5)*0.03;\n        velocities[i*3+2] = (Math.random()-0.5)*0.03;\n      }\n      geo.setAttribute('position', new THREE.BufferAttribute(pos,3));\n      const mat = new THREE.PointsMaterial({ size:0.12, color:0xB8DF10, transparent:true, opacity:0.6, blending:THREE.AdditiveBlending });\n      particlesMesh = new THREE.Points(geo, mat);\n      scene.add(particlesMesh);\n      camera.position.z = 20;\n    } else {\n      sphere = new THREE.Mesh(\n        new THREE.SphereGeometry(5,32,32),\n        new THREE.MeshBasicMaterial({ color:0xB8DF10, wireframe:true, transparent:true, opacity:0.5 })\n      );\n      scene.add(sphere);\n\n      const geo = new THREE.BufferGeometry();\n      const count = 1000;\n      const pos = new Float32Array(count*3);\n      for (let i=0;i<count*3;i++){\n        pos[i] = (Math.random()-0.5)*20;\n      }\n      geo.setAttribute('position', new THREE.BufferAttribute(pos,3));\n      particlesMesh = new THREE.Points(\n        geo,\n        new THREE.PointsMaterial({ size:0.05, color:0xB8DF10, transparent:true, opacity:0.8 })\n      );\n      scene.add(particlesMesh);\n      camera.position.z = 10;\n    }\n  }\n\n  let mouseX=0, mouseY=0;\n  document.addEventListener('mousemove', e => {\n    mouseX = (e.clientX\/window.innerWidth)*2-1;\n    mouseY = -(e.clientY\/window.innerHeight)*2+1;\n  });\n  document.addEventListener('touchmove', e => {\n    const t = e.touches[0];\n    mouseX = (t.clientX\/window.innerWidth)*2-1;\n    mouseY = -(t.clientY\/window.innerHeight)*2+1;\n  },{passive:true});\n\n  function animate() {\n    requestAnimationFrame(animate);\n    if (isMobileOrTablet && particlesMesh) {\n      const pos = particlesMesh.geometry.attributes.position.array;\n      const t = Date.now()*0.001;\n      for (let i=0;i<pos.length\/3;i++){\n        pos[i*3]   += velocities[i*3]   + Math.sin(t + i*0.1)*0.01*mouseX;\n        pos[i*3+1] += velocities[i*3+1] + Math.cos(t + i*0.1)*0.01*mouseY;\n        pos[i*3+2] += velocities[i*3+2];\n        if (Math.abs(pos[i*3])>10)   velocities[i*3]   *= -0.9;\n        if (Math.abs(pos[i*3+1])>10) velocities[i*3+1] *= -0.9;\n        if (Math.abs(pos[i*3+2])>10) velocities[i*3+2] *= -0.9;\n      }\n      particlesMesh.geometry.attributes.position.needsUpdate = true;\n      particlesMesh.rotation.z += 0.002;\n    } else if (sphere && particlesMesh) {\n      sphere.rotation.y += 0.002 + mouseX*0.01;\n      sphere.rotation.x += mouseY*0.01;\n      particlesMesh.rotation.y += 0.001;\n    }\n    renderer.render(scene, camera);\n  }\n\n  initScene();\n  animate();\n\n  window.addEventListener('resize', () => {\n    const old = isMobileOrTablet;\n    camera.aspect = window.innerWidth\/window.innerHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    isMobileOrTablet = window.innerWidth<=1024;\n    if (old!==isMobileOrTablet) initScene();\n  });\n\n  gsap.from(\"#hero h1\",{ opacity:0, y:100, duration:1.5, ease:\"power3.out\" });\n  gsap.from(\"#hero p\",{ opacity:0, y:50, duration:1.5, delay:0.5, ease:\"power3.out\" });\n  gsap.to(\".form-container\", {\n    scrollTrigger:{ trigger:\"#contact-form\", start:\"top 80%\", toggleActions:\"play none none none\" },\n    opacity:1, y:0, duration:1, ease:\"power3.out\"\n  });\n  gsap.to(\".form-group\", {\n    scrollTrigger:{ trigger:\"#contact-form\", start:\"top 80%\", toggleActions:\"play none none none\" },\n    opacity:1, x:0, duration:0.8, stagger:0.2, ease:\"power3.out\"\n  });\n  gsap.to(\".submit-btn\", {\n    scrollTrigger:{ trigger:\"#contact-form\", start:\"top 80%\", toggleActions:\"play none none none\" },\n    opacity:1, scale:1, duration:0.8, delay:0.6, ease:\"power3.out\"\n  });\n\n\n  \/\/ -------------------------\n  \/\/ 2) Particle-Cursor for Submit\n  \/\/ -------------------------\n  const particleCanvas = document.getElementById('particle-canvas');\n  if (particleCanvas) {\n    const ctx = particleCanvas.getContext('2d');\n    particleCanvas.width  = particleCanvas.offsetWidth;\n    particleCanvas.height = particleCanvas.offsetHeight;\n    const particlesArray = [];\n    class Particle {\n      constructor(x,y){\n        this.x=x; this.y=y;\n        this.size=Math.random()*5+2;\n        this.speedX=Math.random()*3-1.5;\n        this.speedY=Math.random()*3-1.5;\n        this.opacity=1;\n      }\n      update(){ this.x+=this.speedX; this.y+=this.speedY; this.opacity-=0.02; this.size-=0.1; }\n      draw(){\n        ctx.beginPath();\n        ctx.arc(this.x,this.y,this.size,0,Math.PI*2);\n        ctx.fillStyle = `rgba(184,223,16,${this.opacity})`;\n        ctx.fill();\n      }\n    }\n    function createParticles(e){\n      const rect=particleCanvas.getBoundingClientRect();\n      const x=e.clientX-rect.left, y=e.clientY-rect.top;\n      for(let i=0;i<20;i++) particlesArray.push(new Particle(x,y));\n    }\n    (function animateParticles(){\n      ctx.clearRect(0,0,particleCanvas.width,particleCanvas.height);\n      for(let i=0;i<particlesArray.length;i++){\n        particlesArray[i].update();\n        particlesArray[i].draw();\n        if(particlesArray[i].size<=0.2||particlesArray[i].opacity<=0) {\n          particlesArray.splice(i,1); i--;\n        }\n      }\n      requestAnimationFrame(animateParticles);\n    })();\n  }\n\n  \/\/ -------------------------\n  \/\/ 3) showLoading Overlay\n  \/\/ -------------------------\n  function showLoading(show) {\n    let overlay = document.getElementById('loadingOverlay');\n    if (!overlay) {\n      overlay = document.createElement('div');\n      overlay.id = 'loadingOverlay';\n      overlay.innerHTML = '<div style=\"text-align:center\"><div class=\"spinner\"><\/div><div class=\"loading-text\">Verarbeitung l\u00e4uft\u2026<\/div><\/div>';\n      Object.assign(overlay.style, {\n        position:'fixed', top:0,left:0,width:'100%',height:'100%',\n        background:'rgba(0,0,0,0.7)', display:'flex',\n        alignItems:'center',justifyContent:'center',\n        visibility:'hidden',opacity:0,transition:'opacity .3s ease',zIndex:9999\n      });\n      document.body.appendChild(overlay);\n    }\n    if (show) {\n      overlay.style.visibility = 'visible';\n      overlay.style.opacity    = '1';\n    } else {\n      overlay.style.opacity    = '0';\n      setTimeout(()=>overlay.style.visibility='hidden',300);\n    }\n  }\n\n  \/\/ -------------------------\n  \/\/ 4) Form-Toggle & Submit\n  \/\/ -------------------------\n  const forms = {\n    videocall: { container: document.getElementById('videocallForm'), form: document.getElementById('videocallFormInner') },\n    message:   { container: document.getElementById('messageForm'),  form: document.getElementById('contactForm') }\n  };\n  const btnVC = document.getElementById('videocallButton');\n  const btnMsg= document.getElementById('messageButton');\n\n  \/\/ Initial: Nachricht aktiv\n  forms.message.container.classList.add('active');\n  btnMsg.classList.add('active');\n  btnVC.classList.add('inactive');\n\n  [btnVC, btnMsg].forEach(btn=>{\n    btn.addEventListener('click', ()=>{\n      [btnVC,btnMsg].forEach(b=>b.classList.remove('active','inactive'));\n      btn.classList.add('active');\n      const other = btn===btnVC?btnMsg:btnVC;\n      other.classList.add('inactive');\n\n      Object.values(forms).forEach(f=>f.container.classList.remove('active'));\n      const key = btn===btnVC?'videocall':'message';\n      forms[key].container.classList.add('active');\n    });\n  });\n\n  \/\/ Morgen 09:00 vorbesetzen\n  const dInput = document.getElementById('vc-date');\n  if(dInput){\n    const t=new Date(); t.setDate(t.getDate()+1);\n    const y=t.getFullYear(),mo=String(t.getMonth()+1).padStart(2,'0'),da=String(t.getDate()).padStart(2,'0');\n    dInput.value = `${y}-${mo}-${da}T09:00`;\n  }\n\n  \/\/ Submit beider Forms\n  Object.values(forms).forEach(({ form })=>{\n    form.addEventListener('submit', async e=>{\n      e.preventDefault();\n      showLoading(true);\n      if (typeof createParticles==='function') createParticles(e);\n\n      let name,email,msgOrDate,cat,type;\n      if(form.id==='contactForm'){\n        type = 'message';\n        name = document.getElementById('msg-name').value.trim();\n        email= document.getElementById('msg-email').value.trim();\n        msgOrDate = document.getElementById('msg-text').value.trim();\n        cat = document.getElementById('msg-category').value;\n      } else {\n        type = 'videocall';\n        name = document.getElementById('vc-name').value.trim();\n        email= document.getElementById('vc-email').value.trim();\n        msgOrDate = document.getElementById('vc-date').value;\n        cat = document.getElementById('vc-category').value;\n      }\n\n      if(!name||!email||!msgOrDate||!cat){\n        showLoading(false);\n        alert('Bitte f\u00fclle alle Felder aus, einschlie\u00dflich der Rubrik.');\n        return;\n      }\n      if(!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)){\n        showLoading(false);\n        alert('Bitte gib eine g\u00fcltige E-Mail-Adresse ein.');\n        return;\n      }\n\n      const payload = { name, email, category:cat, type,\n                        message: type==='message'?msgOrDate:null,\n                        dateTime: type==='videocall'?msgOrDate:null };\n\n      try {\n        const res = await fetch('\/api\/contact', {\n          method:'POST',\n          headers:{'Content-Type':'application\/json'},\n          body:JSON.stringify(payload)\n        });\n        if(res.ok){\n          const ovl = document.getElementById('loadingOverlay');\n          ovl.querySelector('.loading-text').textContent='Erfolgreich gesendet!';\n          setTimeout(()=>{ showLoading(false); form.reset(); },2000);\n        } else {\n          showLoading(false);\n          alert('Fehler beim Senden. Bitte sp\u00e4ter erneut versuchen.');\n        }\n      } catch(err){\n        console.error(err);\n        showLoading(false);\n        alert('Netzwerkfehler. Bitte sp\u00e4ter erneut versuchen.');\n      }\n    });\n  });\n\n  \/\/ Canvas resize\n  window.addEventListener('resize', ()=>{\n    if (particleCanvas){\n      particleCanvas.width  = particleCanvas.offsetWidth;\n      particleCanvas.height = particleCanvas.offsetHeight;\n    }\n  });\n});\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-563db78 e-con-full e-flex e-con e-parent\" data-id=\"563db78\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c37ffe2 elementor-widget elementor-widget-html\" data-id=\"c37ffe2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t  <!-- Sprache wechseln -->\n  <div id=\"language-switcher\"><i class=\"fas fa-globe\"><\/i><\/div>\n\n<div class=\"visionbridge-footer\">\n  <div class=\"footer-grid\">\n    <div class=\"footer-logo\">\n      <img decoding=\"async\" src=\"https:\/\/visionbridge.eu\/wp-content\/uploads\/2024\/09\/white_version2_150.png\" alt=\"VisionBridge Logo\" class=\"footer-logo-img\">\n    <\/div>\n    <div class=\"footer-info\">\n      <h3>Kontakt<\/h3>\n      <p><a href=\"mailto:connect@visionbridge.eu\">connect@visionbridge.eu<\/a><\/p>\n<p>Tel: <a href=\"tel:+436648342424\">+43 664 8342424<\/a><\/p>\n      <p>Klagenfurt, \u00d6sterreich<\/p>\n    <\/div>\n    <div class=\"footer-links\">\n      <h3>Navigation<\/h3>\n      <ul>\n        <li><a href=\"\/apps\">Apps<\/a><\/li>\n        <li><a href=\"\/contact\">Kontakt<\/a><\/li>\n        <li><a href=\"\/services\">Services<\/a><\/li>\n        <li><a href=\"\/work\">Work<\/a><\/li>\n        <li><a href=\"\/playground\">Playground \ud83c\udfa1<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"footer-legal\">\n      <h3>Rechtliches<\/h3>\n      <ul>\n        <li><a href=\"\/impressum\">Impressum<\/a><\/li>\n        <li><a href=\"\/datenschutz\">Datenschutz<\/a><\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n  <div class=\"footer-bottom\">\n    <p>\u00a9 2025 VisionBridge. Alle Rechte vorbehalten. <br>Programmiert von <a href=\"mailto:dev@stefane9.pro\">stefane9 \ud83e\udd77<\/a><\/p>\n  <\/div>\n<\/div>\n<style>\n         #language-switcher {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: linear-gradient(135deg, #B8DF10, #ffffff) !important;\n  color: #390879 !important;\n  font-size: 1.5rem;\n  padding: 12px 16px;\n  border-radius: 50px;\n  box-shadow: 0 0 15px rgba(184, 223, 16, 0.5) !important;\n  cursor: pointer;\n  z-index: 99999;\n  transition: all 0.3s ease-in-out;\n  animation: pulseLangBtn 3s infinite ease-in-out;\n}\n#language-switcher:hover {\n  transform: scale(1.1);\n  box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);\n}\n\n@keyframes pulseLangBtn {\n  0% { box-shadow: 0 0 5px rgba(184,223,16,0.3); }\n  50% { box-shadow: 0 0 20px rgba(184,223,16,0.9); }\n  100% { box-shadow: 0 0 5px rgba(184,223,16,0.3); }\n}\n\n\n  .footer-legal {\n    text-align: center;\n  }\n  .footer-legal h3 {\n    font-family: 'Playfair Display', sans-serif;\n    color: #B8DF10;\n    font-size: 1.3rem;\n    margin-bottom: 0.6rem;\n    text-shadow: 0 0 10px rgba(184, 223, 16, 0.6);\n  }\n  .footer-legal ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n  .footer-legal ul li {\n    padding: 0.3rem 0;\n    opacity: 0.8;\n    transition: opacity 0.3s ease;\n    display: block; \/* \u00c4nderung: Untereinander statt nebeneinander *\/\n  }\n  .footer-legal ul li a {\n    color: #ffffff;\n    text-decoration: none;\n  }\n  .footer-legal ul li:hover {\n    opacity: 1;\n  }\n  .footer-legal ul li a:hover {\n    color: #B8DF10;\n    text-shadow: 0 0 8px rgba(184, 223, 16, 0.5);\n  }\n  .visionbridge-footer {\n    background: linear-gradient(135deg, #2a065e, #390879);\n    color: #ffffff;\n    padding: 2rem 1rem;\n    font-family: 'Montserrat', sans-serif;\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);\n  }\n  .footer-grid {\n    display: grid;\n    grid-template-columns: minmax(150px, auto) repeat(3, 1fr); \/* Logo etwas kleiner *\/\n    gap: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n    text-align: center;\n    padding: 2rem 0;\n    align-items: start; \/* Alle Inhalte beginnen auf der gleichen H\u00f6he *\/\n  }\n  .footer-logo {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 1rem 0;\n  }\n  .footer-logo-img {\n    max-height: 40px; \/* Logo verkleinert f\u00fcr besseren Abstand *\/\n    width: auto;\n    transition: transform 0.3s ease;\n  }\n  .footer-logo-img:hover {\n    transform: scale(1.1);\n  }\n  .footer-info h3, .footer-links h3, .footer-legal h3 {\n    font-family: 'Playfair Display', sans-serif;\n    color: #B8DF10;\n    font-size: 1.4rem;\n    margin-bottom: 0.8rem;\n    text-shadow: 0 0 12px rgba(184, 223, 16, 0.7);\n    text-align: center; \/* Mittige Ausrichtung der \u00dcberschriften *\/\n  }\n  .footer-info p {\n    margin: 0.5rem 0;\n    font-size: 0.9rem;\n    opacity: 0.9;\n    transition: opacity 0.3s ease;\n    text-align: center; \/* Mittige Ausrichtung des Textes *\/\n  }\n  .footer-info p:hover {\n    opacity: 1;\n    color: #B8DF10;\n  }\n  .footer-info p a {\n    color: #B8DF10;\n    text-decoration: none;\n  }\n  .footer-info p a:hover {\n    color: #ffffff;\n    text-shadow: 0 0 10px rgba(184, 223, 16, 0.7);\n  }\n  .footer-links ul, .footer-legal ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    text-align: center; \/* Mittige Ausrichtung der Listen *\/\n  }\n  .footer-links ul li, .footer-legal ul li {\n    padding: 0.4rem 0;\n    opacity: 0.8;\n    transition: opacity 0.3s ease;\n    display: block; \/* \u00c4nderung: Untereinander statt nebeneinander *\/\n  }\n  .footer-links ul li a, .footer-legal ul li a {\n    color: #ffffff;\n    text-decoration: none;\n  }\n  .footer-links ul li:hover, .footer-legal ul li:hover {\n    opacity: 1;\n  }\n  .footer-links ul li a:hover, .footer-legal ul li a:hover {\n    color: #B8DF10;\n    text-shadow: 0 0 10px rgba(184, 223, 16, 0.6);\n  }\n  .footer-bottom {\n    text-align: center;\n    margin-top: 1.5rem;\n    font-size: 0.75rem;\n    opacity: 0.7;\n    padding-top: 0.7rem;\n    border-top: 1px solid rgba(184, 223, 16, 0.3);\n    transition: opacity 0.3s ease;\n  }\n  .footer-bottom:hover {\n    opacity: 1;\n  }\n  .footer-bottom a {\n    color: #B8DF10;\n    text-decoration: none;\n  }\n  .footer-bottom a:hover {\n    color: #ffffff;\n    text-shadow: 0 0 12px rgba(184, 223, 16, 0.8);\n  }\n  \n  #footer-glow {\n      display:none;\n  }\n\n  \/* Responsive Design *\/\n  @media (max-width: 768px) {\n    .footer-grid {\n      grid-template-columns: 1fr;\n    }\n    .footer-info h3, .footer-links h3, .footer-legal h3 {\n      font-size: 1.1rem;\n    }\n    .footer-info p {\n      font-size: 0.8rem;\n    }\n    .footer-links ul li, .footer-legal ul li {\n      font-size: 0.75rem;\n      display: block; \/* Auf Mobile bleibt es untereinander *\/\n    }\n    .footer-logo-img {\n      max-height: 30px;\n    }\n    .footer-grid {\n      padding: 1rem 0;\n    }\n    \n        \n              #language-switcher {\n        top: auto;          \/* oben zur\u00fccksetzen *\/\n        right: auto;        \/* rechts zur\u00fccksetzen *\/\n        bottom: 20px;       \/* 20px vom unteren Rand *\/\n        left: 50%;          \/* genau in der Mitte *\/\n        transform: translateX(-50%);  \/* zentrieren *\/\n        font-size: 1.2rem;  \/* evtl. etwas kleiner *\/\n        padding: 8px 12px;  \/* kompakter *\/\n        opacity: 0.85;      \/* leicht transparent, damit es weniger aufdringlich wirkt *\/\n        transition: transform 0.3s ease, opacity 0.3s ease;\n          background: linear-gradient(135deg, #B8DF10, #ffffff) !important;\n        z-index;9999 !important\n  }\n  \n    #language-switcher.hidden {\n    transform: translate(-50%, 100%);\n    opacity: 0;\n  }\n  \n    \/* und null Hover *\/\n  #language-switcher:hover {\n    transform: translateX(-50%); \/* nur zentriert, keine Skalierung *\/\n    box-shadow: 0 0 15px rgba(184,223,16,0.5);\n  }\n     }\n     \n  @media (min-width: 769px) and (max-width: 1024px) {\n    .footer-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n    .footer-info h3, .footer-links h3, .footer-legal h3 {\n      font-size: 1.2rem;\n    }\n    .footer-info p {\n      font-size: 0.85rem;\n    }\n    .footer-links ul li, .footer-legal ul li {\n      font-size: 0.8rem;\n      display: block; \/* Auf Tablet auch untereinander *\/\n    }\n    .footer-logo-img {\n      max-height: 35px;\n    }\n  }\n  @media (min-width: 1025px) {\n    .footer-grid {\n      grid-template-columns: minmax(150px, auto) repeat(3, 1fr); \/* Logo angepasst *\/\n    }\n    .footer-logo {\n      padding: 1rem 0;\n    }\n    .footer-logo-img {\n      max-height: 50px; \/* Verkleinertes Logo auf Desktop *\/\n    }\n  }\n<\/style>\n<script>\n    \/\/ 1) Sprache merken \/ default\n    let currentLang = localStorage.getItem('lang') || 'de';\n\n    \/\/ 2) \u00dcbersetzungen\n    const translations = {\n      de:{\n        pageTitle:'Kontakt - KI-Agentur',\n        heroTitle:'Entfessle die Zukunft mit unserer KI-Expertise',\n        heroText:'\u00d6sterreichs f\u00fchrender Partner f\u00fcr innovative KI-L\u00f6sungen und Automatisierung.<br>Gemeinsam entwickeln wir ma\u00dfgeschneiderte Apps und Programme \u2013 direkt aus Wien, f\u00fcr die Welt von morgen!',\n        loading:'Verarbeitung l\u00e4uft\u2026',\n        btnVideo:'Videocall', btnMsg:'Nachricht',\n        vcHeading:'Videoanruf planen', msgHeading:'Kontakt aufnehmen',\n        labelName:'Dein Name', labelEmail:'Deine E-Mail',\n        labelDate:'Datum und Uhrzeit', labelCat:'Rubrik',\n        optApps:'Apps', optAuto:'Automatisierung',\n        optAI:'K\u00fcnstliche Intelligenz', optDev:'Programmierung',\n        submitVc:'Anruf planen', submitMsg:'Nachricht senden'\n      },\n      en:{\n        pageTitle:'Contact - AI Agency',\n        heroTitle:'Unleash the Future with Our AI Expertise',\n        heroText:'Austria\u2019s premier partner for innovative AI solutions & automation.<br>Together we build bespoke apps and programs\u2014straight from Vienna, for tomorrow\u2019s world!',\n        loading:'Processing\u2026',\n        btnVideo:'Video Call', btnMsg:'Message',\n        vcHeading:'Schedule Video Call', msgHeading:'Send Us a Message',\n        labelName:'Your Name', labelEmail:'Your Email',\n        labelDate:'Date & Time', labelCat:'Category',\n        optApps:'Apps', optAuto:'Automation',\n        optAI:'Artificial Intelligence', optDev:'Development',\n        submitVc:'Schedule Call', submitMsg:'Send Message'\n      }\n    };\n\n    \/\/ 3) Apply\n    function applyLanguage(){\n      document.documentElement.lang = currentLang;\n      for(const [key,val] of Object.entries(translations[currentLang])){\n        document.querySelectorAll(`[data-i18n-key=\"${key}\"]`)\n          .forEach(el=>{\n            el.innerHTML = val;\n          });\n      }\n      localStorage.setItem('lang', currentLang);\n    }\n    document.getElementById('language-switcher').onclick = ()=>{\n      currentLang = currentLang==='de'?'en':'de';\n      applyLanguage();\n    };\n    document.addEventListener('DOMContentLoaded',applyLanguage);\n\n\n  \/\/ Subtle Glow Animation for Footer Background\n  const footer = document.querySelector('.visionbridge-footer');\n  const canvas = document.createElement('canvas');\n  canvas.id = 'footer-glow';\n  footer.insertBefore(canvas, footer.firstChild);\n  const ctx = canvas.getContext('2d');\n\n  function resizeCanvas() {\n    canvas.width = footer.offsetWidth;\n    canvas.height = footer.offsetHeight;\n  }\n  window.addEventListener('resize', resizeCanvas);\n  resizeCanvas();\n\n  function drawGlow() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    const gradient = ctx.createRadialGradient(\n      canvas.width \/ 2, canvas.height \/ 2, 0,\n      canvas.width \/ 2, canvas.height \/ 2, canvas.width \/ 2\n    );\n    gradient.addColorStop(0, 'rgba(184, 223, 16, 0.15)');\n    gradient.addColorStop(1, 'rgba(57, 8, 121, 0)');\n    ctx.fillStyle = gradient;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    requestAnimationFrame(drawGlow);\n  }\n  drawGlow();\n<\/script>\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>services work apps contact visionbridge menu services work apps contact close Kontakt &#8211; KI-Agentur Kontakt &#8211; KI-Agentur Entfessle die Zukunft mit unserer KI-Expertise \u00d6sterreichs f\u00fchrender Partner f\u00fcr innovative KI-L\u00f6sungen und Automatisierung. Gemeinsam entwickeln wir ma\u00dfgeschneiderte Apps und Programme \u2013 direkt aus Wien, f\u00fcr die Welt von morgen! Verarbeitung l\u00e4uft\u2026 Videocall Nachricht Videoanruf planen Dein Name [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5122","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/pages\/5122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionbridge.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5122"}],"version-history":[{"count":346,"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/pages\/5122\/revisions"}],"predecessor-version":[{"id":7642,"href":"https:\/\/visionbridge.eu\/index.php?rest_route=\/wp\/v2\/pages\/5122\/revisions\/7642"}],"wp:attachment":[{"href":"https:\/\/visionbridge.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}