{"id":143,"date":"2025-10-09T21:42:53","date_gmt":"2025-10-09T21:42:53","guid":{"rendered":"https:\/\/webpointagency.de\/?page_id=143"},"modified":"2025-11-24T23:43:09","modified_gmt":"2025-11-24T23:43:09","slug":"kontakt","status":"publish","type":"page","link":"https:\/\/webpointagency.de\/en\/kontakt\/","title":{"rendered":"Contact us"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"143\" class=\"elementor elementor-143\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9144d07 e-flex e-con-boxed e-con e-parent\" data-id=\"9144d07\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a91d04f jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"a91d04f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.webdesign-quiz-container * {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.webdesign-quiz-container {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  color: #e0e0e0;\n  padding: 20px;\n}\n\n.webdesign-quiz-container .quiz-inner {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.webdesign-quiz-container h2 {\n  font-size: 32px;\n  color: #ffffff;\n  margin-bottom: 10px;\n  text-align: center;\n}\n\n.webdesign-quiz-container #question-number {\n  text-align: center;\n  margin: 20px 0;\n  font-weight: 600;\n  color: #B46FFF;\n  font-size: 16px;\n}\n\n.webdesign-quiz-container #progress-bar-container {\n  height: 8px;\n  background: rgba(255, 255, 255, 0.1);\n  margin: 30px 0;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.webdesign-quiz-container #progress-bar {\n  height: 100%;\n  background: linear-gradient(90deg, #B46FFF 0%, #5000A8 100%);\n  width: 0%;\n  transition: width 0.3s ease-in-out;\n  box-shadow: 0 0 10px rgba(180, 111, 255, 0.5);\n}\n\n.webdesign-quiz-container .question {\n  font-size: 24px;\n  margin-bottom: 30px;\n  color: #ffffff;\n  text-align: center;\n  font-weight: 300;\n}\n\n.webdesign-quiz-container .answers {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.webdesign-quiz-container .answer {\n  background: rgba(255, 255, 255, 0.05);\n  padding: 30px 20px;\n  border-radius: 15px;\n  cursor: pointer;\n  text-align: center;\n  transition: all 0.3s ease;\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  position: relative;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  backdrop-filter: blur(10px);\n}\n\n.webdesign-quiz-container .answer:hover {\n  background: rgba(180, 111, 255, 0.15);\n  border-color: #B46FFF;\n  transform: translateY(-5px);\n  box-shadow: 0 10px 25px rgba(180, 111, 255, 0.2);\n}\n\n.webdesign-quiz-container .answer.selected {\n  background: linear-gradient(135deg, #B46FFF 0%, #5000A8 100%);\n  color: #ffffff;\n  border-color: #B46FFF;\n  box-shadow: 0 10px 30px rgba(180, 111, 255, 0.4);\n}\n\n.webdesign-quiz-container .answer::after {\n  content: \"\u2713\";\n  position: absolute;\n  top: 15px;\n  right: 15px;\n  font-size: 20px;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: 5px;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n.webdesign-quiz-container .answer.selected::after {\n  opacity: 1;\n}\n\n.webdesign-quiz-container .nav-buttons {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 40px;\n  gap: 20px;\n}\n\n.webdesign-quiz-container button {\n  padding: 14px 30px;\n  font-size: 16px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n.webdesign-quiz-container #backBtn {\n  background: rgba(255, 255, 255, 0.1);\n  color: #ffffff;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.webdesign-quiz-container #backBtn:hover {\n  background: rgba(255, 255, 255, 0.15);\n  transform: translateX(-3px);\n}\n\n.webdesign-quiz-container #nextBtn {\n  background: linear-gradient(135deg, #B46FFF 0%, #5000A8 100%);\n  color: #ffffff;\n  flex: 1;\n  box-shadow: 0 5px 15px rgba(180, 111, 255, 0.3);\n}\n\n.webdesign-quiz-container #nextBtn:hover {\n  box-shadow: 0 7px 20px rgba(180, 111, 255, 0.5);\n  transform: translateY(-2px);\n}\n\n.webdesign-quiz-container .form-container {\n  background: rgba(255, 255, 255, 0.05);\n  padding: 40px;\n  border-radius: 5px;\n  margin-top: 30px;\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(10px);\n}\n\n.webdesign-quiz-container .form-container h3 {\n  color: #ffffff;\n  margin-bottom: 10px;\n  font-size: 28px;\n}\n\n.webdesign-quiz-container .form-container p {\n  color: #b0b0b0;\n  margin-bottom: 30px;\n}\n\n.webdesign-quiz-container .form-group {\n  margin-bottom: 25px;\n}\n\n.webdesign-quiz-container .form-group label {\n  display: block;\n  margin-bottom: 8px;\n  color: #e0e0e0;\n  font-weight: 500;\n}\n\n.webdesign-quiz-container .form-group input,\n.webdesign-quiz-container .form-group textarea {\n  width: 100%;\n  padding: 14px;\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.05);\n  color: #ffffff;\n  font-size: 16px;\n  transition: all 0.3s ease;\n  font-family: inherit;\n}\n\n.webdesign-quiz-container .form-group input:focus,\n.webdesign-quiz-container .form-group textarea:focus {\n  outline: none;\n  border-color: #B46FFF;\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: 0 0 10px rgba(180, 111, 255, 0.2);\n}\n\n.webdesign-quiz-container .form-group input::placeholder,\n.webdesign-quiz-container .form-group textarea::placeholder {\n  color: rgba(255, 255, 255, 0.3);\n}\n\n.webdesign-quiz-container #submitBtn {\n  background: linear-gradient(135deg, #B46FFF 0%, #5000A8 100%);\n  color: #ffffff;\n  padding: 16px 40px;\n  font-size: 18px;\n  width: 100%;\n  box-shadow: 0 5px 15px rgba(180, 111, 255, 0.3);\n}\n\n.webdesign-quiz-container #submitBtn:hover {\n  box-shadow: 0 7px 20px rgba(180, 111, 255, 0.5);\n  transform: translateY(-2px);\n}\n\n.webdesign-quiz-container #submitBtn:disabled {\n  background: rgba(255, 255, 255, 0.1);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.webdesign-quiz-container .success-message {\n  background: rgba(180, 111, 255, 0.15);\n  padding: 30px;\n  border-radius: 5px;\n  text-align: center;\n  border: 2px solid #B46FFF;\n}\n\n.webdesign-quiz-container .success-message h3 {\n  color: #B46FFF;\n  margin-bottom: 15px;\n  font-size: 28px;\n}\n\n.webdesign-quiz-container .success-message p {\n  color: #e0e0e0;\n  line-height: 1.6;\n}\n\n.webdesign-quiz-container .fade-out-left,\n.webdesign-quiz-container .fade-out-right {\n  animation: fadeOut 0.3s ease forwards;\n}\n\n.webdesign-quiz-container .fade-in {\n  animation: fadeIn 0.5s ease forwards;\n}\n\n@keyframes fadeOut {\n  from {opacity: 1;}\n  to {opacity: 0;}\n}\n\n@keyframes fadeIn {\n  from {opacity: 0; transform: translateY(20px);}\n  to {opacity: 1; transform: translateY(0);}\n}\n<\/style>\n\n<div class=\"webdesign-quiz-container\">\n  <div class=\"quiz-inner\">\n    <h2>Finde dein perfektes Web-Projekt<\/h2>\n    <div id=\"question-number\"><\/div>\n    <div id=\"quiz\"><\/div>\n    <div id=\"progress-bar-container\"><div id=\"progress-bar\"><\/div><\/div>\n    <div class=\"nav-buttons\">\n      <button id=\"backBtn\">\u2190 Zur\u00fcck<\/button>\n      <button id=\"nextBtn\" style=\"display: none;\">Weiter<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst questions = [\n  {\n    question: \"Welchen Service ben\u00f6tigen Sie?\",\n    answers: [\n      { text: \"Website \/ Webshop\" },\n      { text: \"Social Media Management\" },\n      { text: \"SEO & Online Marketing\" },\n      { text: \"Branding & Design\" }\n    ]\n  },\n  {\n    question: \"Was ist Ihr Hauptziel?\",\n    answers: [\n      { text: \"Neue Kunden gewinnen\" },\n      { text: \"Online-Pr\u00e4senz aufbauen\" },\n      { text: \"Verk\u00e4ufe steigern\" },\n      { text: \"Markenbekanntheit erh\u00f6hen\" }\n    ]\n  },\n  {\n    question: \"Wie gro\u00df ist Ihr Unternehmen?\",\n    answers: [\n      { text: \"Startup \/ Einzelunternehmer\" },\n      { text: \"Kleines Unternehmen (2-10 MA)\" },\n      { text: \"Mittelst\u00e4ndisches Unternehmen (11-50 MA)\" },\n      { text: \"Gro\u00dfunternehmen (50+ MA)\" }\n    ]\n  },\n  {\n    question: \"In welcher Branche sind Sie t\u00e4tig?\",\n    answers: [\n      { text: \"E-Commerce \/ Handel\" },\n      { text: \"Dienstleistungen\" },\n      { text: \"Gastronomie \/ Hotel\" },\n      { text: \"Handwerk \/ Produktion\" },\n      { text: \"Gesundheit \/ Wellness\" },\n      { text: \"Sonstige\" }\n    ]\n  },\n  {\n    question: \"Wann soll das Projekt starten?\",\n    answers: [\n      { text: \"So schnell wie m\u00f6glich\" },\n      { text: \"In den n\u00e4chsten 4 Wochen\" },\n      { text: \"In 1-3 Monaten\" },\n      { text: \"Ich plane nur\" }\n    ]\n  },\n  {\n    question: \"Was ist Ihr Budget?\",\n    answers: [\n      { text: \"Unter 2.000\u20ac\" },\n      { text: \"2.000\u20ac - 5.000\u20ac\" },\n      { text: \"5.000\u20ac - 10.000\u20ac\" },\n      { text: \"\u00dcber 10.000\u20ac\" }\n    ]\n  }\n];\n\nlet currentQuestion = 0;\nconst answersGiven = [];\n\nconst quizEl = document.getElementById(\"quiz\");\nconst backBtn = document.getElementById(\"backBtn\");\nconst nextBtn = document.getElementById(\"nextBtn\");\nconst progressBar = document.getElementById(\"progress-bar\");\nconst questionNumber = document.getElementById(\"question-number\");\n\nfunction renderQuestion(direction = \"forward\") {\n  const q = questions[currentQuestion];\n  questionNumber.innerText = `Frage ${currentQuestion + 1} von ${questions.length}`;\n  const previous = quizEl.querySelector(\".answers\");\n  if (previous) {\n    previous.classList.add(direction === \"forward\" ? \"fade-out-left\" : \"fade-out-right\");\n    setTimeout(() => loadQuestionHTML(q), 300);\n  } else {\n    loadQuestionHTML(q);\n  }\n  updateProgress();\n}\n\nfunction loadQuestionHTML(q) {\n  const previousAnswer = answersGiven[currentQuestion];\n  quizEl.innerHTML = `\n    <div class=\"question fade-in\">${q.question}<\/div>\n    <div class=\"answers fade-in\">\n      ${q.answers.map((a, i) => `\n        <div class=\"answer ${previousAnswer === a.text ? \"selected\" : \"\"}\" onclick=\"selectAnswer(${i})\">\n          <div>${a.text}<\/div>\n        <\/div>\n      `).join('')}\n    <\/div>\n  `;\n}\n\nfunction selectAnswer(index) {\n  const q = questions[currentQuestion];\n  answersGiven[currentQuestion] = q.answers[index].text;\n  document.querySelectorAll(\".answer\").forEach((el, i) => {\n    el.classList.toggle(\"selected\", i === index);\n  });\n  setTimeout(() => {\n    if (currentQuestion < questions.length - 1) {\n      currentQuestion++;\n      renderQuestion(\"forward\");\n    } else {\n      showForm();\n    }\n  }, 300);\n}\n\nfunction updateProgress() {\n  const percent = ((currentQuestion) \/ questions.length) * 100;\n  progressBar.style.width = `${percent}%`;\n}\n\nbackBtn.onclick = () => {\n  if (currentQuestion >= questions.length) {\n    currentQuestion = questions.length - 1;\n    renderQuestion(\"backward\");\n  } else if (currentQuestion > 0) {\n    currentQuestion--;\n    renderQuestion(\"backward\");\n  } else {\n    location.reload();\n  }\n};\n\nfunction showForm() {\n  questionNumber.innerText = \"Fast geschafft!\";\n  progressBar.style.width = \"100%\";\n\n  quizEl.innerHTML = `\n    <div class=\"form-container fade-in\">\n      <h3>Ihre Anfrage<\/h3>\n      <p>Wir haben Ihre Angaben gespeichert. Hinterlassen Sie uns Ihre Kontaktdaten und wir melden uns innerhalb von 24 Stunden bei Ihnen.<\/p>\n\n      <form id=\"contactForm\">\n        <div class=\"form-group\">\n          <label for=\"name\">Name *<\/label>\n          <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Max Mustermann\">\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"email\">E-Mail *<\/label>\n          <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"max@beispiel.de\">\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"phone\">Telefonnummer *<\/label>\n          <input type=\"tel\" id=\"phone\" name=\"phone\" required placeholder=\"+49 123 456789\">\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"message\">Nachricht (optional)<\/label>\n          <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Haben Sie noch weitere W\u00fcnsche oder Anmerkungen?\"><\/textarea>\n        <\/div>\n        \n        <button type=\"submit\" id=\"submitBtn\">Anfrage absenden<\/button>\n      <\/form>\n    <\/div>\n  `;\n\n  document.getElementById('contactForm').addEventListener('submit', handleSubmit);\n}\n\n\/\/ >>> NEUE handleSubmit-FUNKTION MIT AJAX & MAIL <<<\nasync function handleSubmit(e) {\n  e.preventDefault();\n  \n  const submitBtn = document.getElementById('submitBtn');\n  submitBtn.disabled = true;\n  submitBtn.textContent = 'Wird gesendet...';\n  \n  const formData = {\n    name: document.getElementById('name').value,\n    email: document.getElementById('email').value,\n    phone: document.getElementById('phone').value,\n    message: document.getElementById('message').value,\n    answers: {\n      service: answersGiven[0],\n      ziel: answersGiven[1],\n      groesse: answersGiven[2],\n      branche: answersGiven[3],\n      start: answersGiven[4],\n      budget: answersGiven[5]\n    }\n  };\n\n  const ajaxData = new FormData();\n  ajaxData.append('action', 'send_webdesign_quiz_email'); \/\/ muss zu PHP-Action passen!\n  ajaxData.append('name', formData.name);\n  ajaxData.append('email', formData.email);\n  ajaxData.append('phone', formData.phone);\n  ajaxData.append('message', formData.message);\n\n  ajaxData.append('service', formData.answers.service);\n  ajaxData.append('ziel', formData.answers.ziel);\n  ajaxData.append('groesse', formData.answers.groesse);\n  ajaxData.append('branche', formData.answers.branche);\n  ajaxData.append('start', formData.answers.start);\n  ajaxData.append('budget', formData.answers.budget);\n\n  try {\n    \/\/ Falls WordPress in einem Unterordner installiert ist,\n    \/\/ ggf. die URL anpassen, z.B. '\/unterordner\/wp-admin\/admin-ajax.php'\n    const response = await fetch('\/wp-admin\/admin-ajax.php', {\n      method: 'POST',\n      body: ajaxData\n    });\n\n    const result = await response.json();\n\n    if (result.success) {\n      showSuccess();\n    } else {\n      alert('Es ist ein Fehler aufgetreten: ' + (result.data?.message || 'Unbekannter Fehler'));\n      submitBtn.disabled = false;\n      submitBtn.textContent = 'Anfrage absenden';\n    }\n  } catch (error) {\n    console.error('AJAX Fehler:', error);\n    alert('Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es sp\u00e4ter erneut.');\n    submitBtn.disabled = false;\n    submitBtn.textContent = 'Anfrage absenden';\n  }\n}\n\nfunction showSuccess() {\n  quizEl.innerHTML = `\n    <div class=\"success-message fade-in\">\n      <h3>\u2713 Vielen Dank f\u00fcr Ihre Anfrage!<\/h3>\n      <p>Wir haben Ihre Nachricht erhalten und melden uns innerhalb von 24 Stunden bei Ihnen.<\/p>\n      <p style=\"margin-top: 20px; color: #B46FFF;\">Unser Team pr\u00fcft bereits Ihre Anfrage und bereitet ein individuelles Angebot f\u00fcr Sie vor.<\/p>\n    <\/div>\n  `;\n  backBtn.style.display = 'none';\n}\n\nrenderQuestion();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Finde dein perfektes Web-Projekt \u2190 Zur\u00fcck Weiter<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":49,"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":1539,"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/pages\/143\/revisions\/1539"}],"wp:attachment":[{"href":"https:\/\/webpointagency.de\/en\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}