{"id":92,"date":"2026-05-26T11:25:20","date_gmt":"2026-05-26T11:25:20","guid":{"rendered":"https:\/\/synext-it.de\/?page_id=92"},"modified":"2026-06-04T06:58:40","modified_gmt":"2026-06-04T06:58:40","slug":"webdesign","status":"publish","type":"page","link":"https:\/\/synext-it.de\/en\/services\/website-erstellen\/","title":{"rendered":"Webdesign &amp; Development"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"92\" class=\"elementor elementor-92\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cbd0e69 e-con-full webdesign-cont-3 e-flex elementor-invisible e-con e-child\" data-id=\"cbd0e69\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf70628 elementor-widget elementor-widget-html\" data-id=\"bf70628\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"synext-fast-hero\">\r\n  <div class=\"sx-hero-inner\">\r\n\r\n    <p class=\"sx-kicker\">WEBDESIGN & ENTWICKLUNG<\/p>\r\n\r\n    <h1 class=\"sx-title sx-animate-words\">\r\n      WEBDESIGN, DAS NICHT NUR GROSS AUSSIEHT, SONDERN AUCH HERVORRAGEND FUNKTIONIERT.\r\n    <\/h1>\r\n\r\n    \r\n\r\n    <a href=\"https:\/\/connect.synext-it.de\/terminbuchung\/\" class=\"sx-cta\">Angebot anfragen<\/a>\r\n    \r\n    \r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\r\n#synext-fast-hero{\r\n  --sx-green:#00ff57;\r\n  --sx-subtitle:#2ECC71;\r\n  --sx-white:#ffffff;\r\n\r\n  position:relative;\r\n  width:100%;\r\n  min-height:70svh;\r\n  min-height:70vh;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-align:center;\r\n  overflow:hidden;\r\n  padding:110px 20px 48px;\r\n  box-sizing:border-box;\r\n}\r\n\r\n#synext-fast-hero .sx-hero-inner{\r\n  width:100%;\r\n  max-width:1040px;\r\n  margin:0 auto;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  background: transparent;\r\n}\r\n\r\n#synext-fast-hero .sx-kicker{\r\n  margin:0 0 20px;\r\n  color:#f4f4f4;\r\n  font-size:clamp(15px,1.1vw,20px);\r\n  line-height:1.35;\r\n  font-weight:600;\r\n  letter-spacing:.01em;\r\n}\r\n\r\n#synext-fast-hero .sx-title{\r\n  margin:0;\r\n  color:var(--sx-white);\r\n  font-size:clamp(32px,4.4vw,78px);\r\n  line-height:1.08;\r\n  font-weight:800;\r\n  letter-spacing:-0.03em;\r\n  text-wrap:balance;\r\n}\r\n\r\n#synext-fast-hero .sx-subtitle{\r\n  margin:24px 0 0;\r\n  color:var(--sx-subtitle);\r\n  font-size:clamp(17px,1.55vw,25px);\r\n  line-height:1.45;\r\n  font-weight:600;\r\n  max-width:920px;\r\n}\r\n\r\n#synext-fast-hero .sx-cta{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  min-width:290px;\r\n  min-height:56px;\r\n  margin-top:32px;\r\n  padding:12px 28px;\r\n  border:1.5px solid var(--sx-green);\r\n  border-radius:15px;\r\n  background:rgba(0,0,0,.16);\r\n  color:#f7f7f7;\r\n  text-decoration:none;\r\n  font-weight:800;\r\n  font-size: clamp(15px, 1vw, 18px);\r\n  letter-spacing:.01em;\r\n  box-sizing:border-box;\r\n  transition:box-shadow .2s ease, transform .2s ease;\r\n}\r\n\r\n#synext-fast-hero .sx-cta:hover,\r\n#synext-fast-hero .sx-cta:focus-visible{\r\n  transform:translateY(-1px);\r\n  box-shadow:0 0 0 1px rgba(0,255,87,.10), 0 0 16px rgba(0,255,87,.07);\r\n}\r\n\r\n#synext-fast-hero .sx-google-proof{\r\n  margin-top:16px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:10px;\r\n  padding:10px 14px;\r\n  border-radius:999px;\r\n  text-decoration:none;\r\n  color:#ffffff;\r\n  background:rgba(255,255,255,.035);\r\n  border:1px solid rgba(255,255,255,.08);\r\n  box-shadow:\r\n    0 0 0 1px rgba(255,255,255,.02),\r\n    0 8px 20px rgba(0,0,0,.12);\r\n      \r\n  -webkit-backdrop-filter:blur(4px);\r\n  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;\r\n}\r\n@supports (backdrop-filter: blur(4px)) {\r\n      .sx-google-proof{\r\n        backdrop-filter:blur(4px);\r\n      }\r\n    }\r\n#synext-fast-hero .sx-google-proof:hover,\r\n#synext-fast-hero .sx-google-proof:focus-visible{\r\n  transform:translateY(-1px);\r\n  border-color:rgba(255,255,255,.12);\r\n  box-shadow:\r\n    0 0 0 1px rgba(255,255,255,.025),\r\n    0 10px 22px rgba(0,0,0,.16);\r\n}\r\n\r\n#synext-fast-hero .sx-google-icon{\r\n  width:18px;\r\n  height:18px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  flex-shrink:0;\r\n}\r\n\r\n#synext-fast-hero .sx-google-icon svg{\r\n  width:100%;\r\n  height:100%;\r\n  display:block;\r\n}\r\n\r\n#synext-fast-hero .sx-google-text-wrap{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n}\r\n\r\n#synext-fast-hero .sx-stars{\r\n  color:#FFC107;\r\n  letter-spacing:1px;\r\n  font-size:14px;\r\n  line-height:1;\r\n}\r\n\r\n#synext-fast-hero .sx-google-text{\r\n  font-size:13px;\r\n  line-height:1.2;\r\n  color:rgba(255,255,255,.92);\r\n}\r\n\r\n#synext-fast-hero .sx-google-text strong{\r\n  color:#ffffff;\r\n  font-weight:800;\r\n}\r\n\r\n#synext-fast-hero .sx-br-desktop{\r\n  display:block;\r\n}\r\n\r\n@media (max-width:767px){\r\n  #synext-fast-hero{\r\n    padding:92px 20px 40px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-kicker{\r\n    margin-bottom:16px;\r\n    font-size:11px;\r\n    line-height:1.35;\r\n  }\r\n\r\n  #synext-fast-hero .sx-title{\r\n    font-size:35px;\r\n    line-height:1.14;\r\n  }\r\n\r\n  #synext-fast-hero .sx-subtitle{\r\n    margin-top:20px;\r\n    font-size:12px;\r\n    line-height:1.5;\r\n    max-width:340px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-cta{\r\n    width:min(80%, 320px);\r\n    min-width:0;\r\n    min-height:20px;\r\n    margin-top:24px;\r\n    padding:12px 14px;\r\n    font-size:14px;\r\n    border-radius:14px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-google-proof{\r\n    margin-top:12px;\r\n    gap:8px;\r\n    padding:8px 12px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-google-icon{\r\n    width:16px;\r\n    height:16px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-stars{\r\n    font-size:12px;\r\n    letter-spacing:.8px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-google-text{\r\n    font-size:11px;\r\n  }\r\n\r\n  #synext-fast-hero .sx-br-desktop{\r\n    display:none;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  #synext-fast-hero .sx-cta,\r\n  #synext-fast-hero .sx-google-proof{\r\n    transition:none !important;\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-394b3c9 elementor-widget elementor-widget-html\" data-id=\"394b3c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.webdesign-cont-3{\r\n  position: relative;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  background: none;\r\n}\r\n\r\n.webdesign-cont-3 > *{\r\n  position: relative;\r\n  z-index: 3;\r\n}\r\n\r\n.webdesign-cont-3 .wd-wave-mesh-canvas{\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  display: block;\r\n  opacity: .96;\r\n  transform: translateZ(0);\r\n}\r\n\r\n.webdesign-cont-3::before{\r\n  content: none;\r\n}\r\n\r\n.webdesign-cont-3::after{\r\n  content: none;\r\n}\r\n\r\n@media (max-width: 767px){\r\n  .webdesign-cont-3 .wd-wave-mesh-canvas{\r\n    opacity: .84;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .webdesign-cont-3 .wd-wave-mesh-canvas{\r\n    opacity: .45;\r\n  }\r\n}\r\n\r\n.webdesign-cont-3{\r\n  position: relative;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  background: transparent !important;\r\n}\r\n\r\n.webdesign-cont-3::before,\r\n.webdesign-cont-3::after{\r\n  display: none !important;\r\n}\r\n\r\n#synext-fast-hero{\r\n  background: transparent !important;\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const containers = document.querySelectorAll('.webdesign-cont-3');\r\n  if (!containers.length) return;\r\n\r\n  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  containers.forEach((container) => {\r\n    if (container.dataset.waveMeshInit === 'true') return;\r\n    container.dataset.waveMeshInit = 'true';\r\n\r\n    if (getComputedStyle(container).position === 'static') {\r\n      container.style.position = 'relative';\r\n    }\r\n    container.style.overflow = 'hidden';\r\n\r\n    const canvas = document.createElement('canvas');\r\n    canvas.className = 'wd-wave-mesh-canvas';\r\n    container.prepend(canvas);\r\n\r\n    const ctx = canvas.getContext('2d', {\r\n      alpha: true,\r\n      desynchronized: true\r\n    });\r\n\r\n    let width = 0;\r\n    let height = 0;\r\n    let dpr = Math.min(window.devicePixelRatio || 1, 1.5);\r\n    let time = 0;\r\n\r\n    let mouseX = 0.5;\r\n    let mouseY = 0.5;\r\n    let targetMouseX = 0.5;\r\n    let targetMouseY = 0.5;\r\n\r\n    let cols = 0;\r\n    let rows = 0;\r\n    let spacingX = 0;\r\n    let spacingY = 0;\r\n    let pointCount = 0;\r\n\r\n    let baseX = null;\r\n    let baseY = null;\r\n    let normX = null;\r\n    let normY = null;\r\n    let baseBand = null;\r\n\r\n    let posX = null;\r\n    let posY = null;\r\n    let posBand = null;\r\n    let posAlpha = null;\r\n\r\n    let animationId = null;\r\n    let isVisible = true;\r\n    let isPageVisible = !document.hidden;\r\n    let lastFrameTime = 0;\r\n    const fps = prefersReducedMotion ? 24 : 26;\r\n    const frameInterval = 1000 \/ fps;\r\n\r\n    function setup() {\r\n      const rect = container.getBoundingClientRect();\r\n      width = Math.max(320, Math.floor(rect.width));\r\n      height = Math.max(320, Math.floor(rect.height));\r\n\r\n      dpr = Math.min(window.devicePixelRatio || 1, 1.5);\r\n      canvas.width = Math.floor(width * dpr);\r\n      canvas.height = Math.floor(height * dpr);\r\n      canvas.style.width = width + 'px';\r\n      canvas.style.height = height + 'px';\r\n\r\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n\r\n      const density = width < 768 ? 34 : 42;\r\n      spacingX = density;\r\n      spacingY = density * 0.84;\r\n\r\n      cols = Math.ceil(width \/ spacingX) + 8;\r\n      rows = Math.ceil(height \/ spacingY) + 8;\r\n      pointCount = cols * rows;\r\n\r\n      const offsetX = -spacingX * 3;\r\n      const offsetY = -spacingY * 3;\r\n\r\n      baseX = new Float32Array(pointCount);\r\n      baseY = new Float32Array(pointCount);\r\n      normX = new Float32Array(pointCount);\r\n      normY = new Float32Array(pointCount);\r\n      baseBand = new Float32Array(pointCount);\r\n\r\n      posX = new Float32Array(pointCount);\r\n      posY = new Float32Array(pointCount);\r\n      posBand = new Float32Array(pointCount);\r\n      posAlpha = new Float32Array(pointCount);\r\n\r\n      let i = 0;\r\n      for (let y = 0; y < rows; y++) {\r\n        for (let x = 0; x < cols; x++) {\r\n          const px = offsetX + x * spacingX;\r\n          const py = offsetY + y * spacingY;\r\n\r\n          const nx = px \/ Math.max(width, 1);\r\n          const ny = py \/ Math.max(height, 1);\r\n\r\n          const diagonalCenter = 0.10 + nx * 0.72;\r\n          const dist = Math.abs(ny - diagonalCenter);\r\n          const widthBand = 0.24;\r\n          const s = Math.max(0, 1 - dist \/ widthBand);\r\n          const band = s * s;\r\n\r\n          baseX[i] = px;\r\n          baseY[i] = py;\r\n          normX[i] = nx;\r\n          normY[i] = ny;\r\n          baseBand[i] = band;\r\n          i++;\r\n        }\r\n      }\r\n    }\r\n\r\n    function waveX(px, py, t) {\r\n      return (\r\n        Math.sin(py * 0.014 + t * 1.18) * 24 +\r\n        Math.cos((px + py) * 0.005 + t * 0.62) * 12\r\n      );\r\n    }\r\n\r\n    function waveY(px, py, t) {\r\n      return (\r\n        Math.sin(px * 0.010 + t * 0.98) * 28 +\r\n        Math.cos(py * 0.008 - t * 0.56) * 14\r\n      );\r\n    }\r\n\r\n    function mouseInfluenceSquared(px, py) {\r\n      const dx = px - mouseX * width;\r\n      const dy = py - mouseY * height;\r\n      const distSq = dx * dx + dy * dy;\r\n      const radius = Math.min(width, height) * 0.26;\r\n      const radiusSq = radius * radius;\r\n\r\n      if (distSq >= radiusSq) return 0;\r\n\r\n      const force = 1 - distSq \/ radiusSq;\r\n      return force * force;\r\n    }\r\n\r\n    function drawFrame() {\r\n      ctx.clearRect(0, 0, width, height);\r\n\r\n      mouseX += (targetMouseX - mouseX) * 0.06;\r\n      mouseY += (targetMouseY - mouseY) * 0.06;\r\n\r\n      for (let i = 0; i < pointCount; i++) {\r\n        const nx = normX[i];\r\n        const ny = normY[i];\r\n        const band = baseBand[i];\r\n\r\n        let x = baseX[i];\r\n        let y = baseY[i];\r\n\r\n        x += waveX(x, y, time) * (0.48 + band * 1.35);\r\n        y += waveY(x, y, time) * (0.48 + band * 1.55);\r\n\r\n        const sweep =\r\n          Math.sin((nx * 4.0 - ny * 2.2) + time * 1.12) * 15 * band +\r\n          Math.cos((nx * 2.6 + ny * 3.4) - time * 0.70) * 11 * band;\r\n\r\n        x += sweep * 1.08;\r\n        y += sweep * 1.34;\r\n\r\n        x += ny * width * 0.32;\r\n        y += nx * height * 0.17;\r\n\r\n        x -= (1 - nx) * (1 - ny) * 100 * band;\r\n        y -= (1 - nx) * (1 - ny) * 72 * band;\r\n\r\n        x += nx * ny * 56 * band;\r\n        y += nx * ny * 82 * band;\r\n\r\n        if (!prefersReducedMotion) {\r\n          const influence = mouseInfluenceSquared(x, y) * band;\r\n          x += (mouseX - 0.5) * 26 * influence;\r\n          y += (mouseY - 0.5) * 22 * influence;\r\n        }\r\n\r\n        posX[i] = x;\r\n        posY[i] = y;\r\n        posBand[i] = band;\r\n        posAlpha[i] = 0.07 + band * 0.24;\r\n      }\r\n\r\n      ctx.shadowColor = 'rgba(0,255,110,0.18)';\r\n      ctx.shadowBlur = 5;\r\n\r\n      for (let row = 0; row < rows; row++) {\r\n        const rowOffset = row * cols;\r\n\r\n        for (let col = 0; col < cols; col++) {\r\n          const i = rowOffset + col;\r\n          const band = posBand[i];\r\n          if (band < 0.02) continue;\r\n\r\n          if (col < cols - 1) {\r\n            const i2 = i + 1;\r\n            const band2 = posBand[i2];\r\n\r\n            if (band > 0.02 || band2 > 0.02) {\r\n              const avgBand = (band + band2) * 0.5;\r\n              const a = Math.min(0.48, ((posAlpha[i] + posAlpha[i2]) * 0.5) * 0.50);\r\n\r\n              ctx.beginPath();\r\n              ctx.moveTo(posX[i], posY[i]);\r\n              ctx.lineTo(posX[i2], posY[i2]);\r\n              ctx.strokeStyle = `rgba(0,255,110,${a})`;\r\n              ctx.lineWidth = 1.0 + avgBand * 1.05;\r\n              ctx.stroke();\r\n            }\r\n          }\r\n\r\n          if (row < rows - 1) {\r\n            const i3 = i + cols;\r\n            const band3 = posBand[i3];\r\n\r\n            if (band > 0.02 || band3 > 0.02) {\r\n              const avgBand = (band + band3) * 0.5;\r\n              const a = Math.min(0.42, ((posAlpha[i] + posAlpha[i3]) * 0.5) * 0.43);\r\n\r\n              ctx.beginPath();\r\n              ctx.moveTo(posX[i], posY[i]);\r\n              ctx.lineTo(posX[i3], posY[i3]);\r\n              ctx.strokeStyle = `rgba(0,255,110,${a})`;\r\n              ctx.lineWidth = 0.95 + avgBand * 0.95;\r\n              ctx.stroke();\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      ctx.shadowBlur = 0;\r\n\r\n      for (let i = 0; i < pointCount; i++) {\r\n        const band = posBand[i];\r\n        if (band < 0.03) continue;\r\n\r\n        const size = 1.2 + band * 1.15;\r\n\r\n        ctx.beginPath();\r\n        ctx.arc(posX[i], posY[i], size, 0, Math.PI * 2);\r\n        ctx.fillStyle = `rgba(0,255,110,${0.07 + band * 0.18})`;\r\n        ctx.fill();\r\n      }\r\n\r\n      time += prefersReducedMotion ? 0.004 : 0.0105;\r\n    }\r\n\r\n    function shouldRun() {\r\n      return isVisible && isPageVisible;\r\n    }\r\n\r\n    function animate(now) {\r\n      if (!shouldRun()) {\r\n        animationId = null;\r\n        return;\r\n      }\r\n\r\n      if (!lastFrameTime || now - lastFrameTime >= frameInterval) {\r\n        lastFrameTime = now;\r\n        drawFrame();\r\n      }\r\n\r\n      animationId = requestAnimationFrame(animate);\r\n    }\r\n\r\n    function startAnimation() {\r\n      if (!animationId && shouldRun()) {\r\n        lastFrameTime = 0;\r\n        animationId = requestAnimationFrame(animate);\r\n      }\r\n    }\r\n\r\n    function stopAnimation() {\r\n      if (animationId) {\r\n        cancelAnimationFrame(animationId);\r\n        animationId = null;\r\n      }\r\n    }\r\n\r\n    function onPointerMove(e) {\r\n      const rect = container.getBoundingClientRect();\r\n      targetMouseX = Math.max(0, Math.min(1, (e.clientX - rect.left) \/ rect.width));\r\n      targetMouseY = Math.max(0, Math.min(1, (e.clientY - rect.top) \/ rect.height));\r\n    }\r\n\r\n    function onPointerLeave() {\r\n      targetMouseX = 0.5;\r\n      targetMouseY = 0.5;\r\n    }\r\n\r\n    let resizeTimer = null;\r\n    function onResize() {\r\n      clearTimeout(resizeTimer);\r\n      resizeTimer = setTimeout(() => {\r\n        setup();\r\n      }, 120);\r\n    }\r\n\r\n    function onVisibilityChange() {\r\n      isPageVisible = !document.hidden;\r\n      if (shouldRun()) {\r\n        startAnimation();\r\n      } else {\r\n        stopAnimation();\r\n      }\r\n    }\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach((entry) => {\r\n        isVisible = entry.isIntersecting;\r\n        if (shouldRun()) {\r\n          startAnimation();\r\n        } else {\r\n          stopAnimation();\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.08,\r\n      rootMargin: '120px 0px 120px 0px'\r\n    });\r\n\r\n    observer.observe(container);\r\n\r\n    container.addEventListener('pointermove', onPointerMove, { passive: true });\r\n    container.addEventListener('pointerleave', onPointerLeave, { passive: true });\r\n    window.addEventListener('resize', onResize, { passive: true });\r\n    document.addEventListener('visibilitychange', onVisibilityChange, { passive: true });\r\n\r\n    setup();\r\n    startAnimation();\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b7add9 e-con-full e-flex e-con e-parent\" data-id=\"3b7add9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5d4eee elementor-widget elementor-widget-html\" data-id=\"b5d4eee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     SYNEXT IT \u2014 Webdesign page sections (BELOW the hero)\r\n     Paste this whole block inside an Elementor HTML widget.\r\n     Hero stays as it is; this picks up right after.\r\n============================================================ -->\r\n\r\n<link rel=\"stylesheet\" href=\"\/wp-content\/uploads\/fonts\/all.min.css\">\r\n\r\n<div class=\"synx-page\">\r\n\r\n  <!-- ============== SERVICES ============== -->\r\n  <section class=\"synx-services-wrap\">\r\n  <div class=\"synx-services\">\r\n\r\n    <!-- 1. Unternehmenswebsite -->\r\n    <article class=\"synx-card\">\r\n      <div class=\"synx-card__text\">\r\n        <h3 class=\"synx-card__title synx-aw\">Unternehmens website<\/h3>\r\n        <p class=\"synx-card__tag\">Atemberaubendes Design, nahtlose Leistung \u2013 entwickelt f\u00fcr Wachstum<\/p>\r\n        <ul class=\"synx-list\">\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Vollst\u00e4ndige Unternehmenswebsite mit allen wichtigen Bereichen auf separaten Seiten<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Datenschutz\u00aderkl\u00e4rung &amp; Impressum<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>DSGVO-konformes Cookie-System<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Hosting &amp; technische Einrichtung<\/span><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"synx-card__media\">\r\n        <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Synext-IT-Portfolio-Bernhard-Lohaus-Lawyer-in-deutschland-1.webp\" alt=\"Unternehmenswebsite Portfolio\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 2. Onepager -->\r\n    <article class=\"synx-card\">\r\n      <div class=\"synx-card__text\">\r\n        <h3 class=\"synx-card__title synx-aw\">Onepager<\/h3>\r\n        <p class=\"synx-card__tag\">Modernes Design, starke Ergebnisse \u2013 entwickelt, um Ihr Business voranzubringen<\/p>\r\n        <ul class=\"synx-list\">\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Kompletter Onepager mit allen wichtigen Gesch\u00e4ftsbereichen integriert<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Rechtliche Seiten (Datenschutz &amp; Impressum)<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>DSGVO-konformes Cookie-System<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Hosting &amp; technische Einrichtung<\/span><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"synx-card__media\">\r\n        <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/KFZ-Sachverstaendigenbuero-Engelskamp-portfolio-img.webp\" alt=\"Onepager Portfolio\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 3. Onlineshop -->\r\n    <article class=\"synx-card\">\r\n      <div class=\"synx-card__text\">\r\n        <h3 class=\"synx-card__title synx-aw\">Onlineshop<\/h3>\r\n        <p class=\"synx-card__tag\">Professionell verkaufen \u2013 sicher, modern &amp; effizient<\/p>\r\n        <ul class=\"synx-list\">\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Individuell designter Online-Shop mit bis zu 10 Produkten<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>PayPal, Kreditkarte &amp; Sofort\u00fcberweisung integriert<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Automatische DHL-Label &amp; Lagerverwaltung<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Grundlegendes SEO &amp; rechtssichere Seiten<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>DSGVO-konformes Cookie-System<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Hosting &amp; technische Einrichtung<\/span><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"synx-card__media\">\r\n        <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/AS-Activewear-portfolio-img-1.webp\" alt=\"Onlineshop Portfolio\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 4. Terminbuchungssystem -->\r\n    <article class=\"synx-card\">\r\n      <div class=\"synx-card__text\">\r\n        <h3 class=\"synx-card__title synx-aw\">Terminbuchungs system<\/h3>\r\n        <p class=\"synx-card__tag\">Elegantes Design, h\u00f6chste Performance \u2013 f\u00fcr nachhaltiges Wachstum geschaffen<\/p>\r\n        <ul class=\"synx-list\">\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Alle Funktionen der Unternehmenswebsite \u2013 erg\u00e4nzt durch ein integriertes Buchungssystem<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Intelligente Kalenderintegration f\u00fcr verf\u00fcgbare Termine in Echtzeit<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Online-Zahlungen f\u00fcr sofort best\u00e4tigte Termine<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Automatische Benachrichtigungen per E-Mail &amp; WhatsApp<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Intuitive Verwaltung von Kunden, Mitarbeitern &amp; Services<\/span><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"synx-card__media\">\r\n          \r\n        <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Terminbuchungssystem-img.webp\" alt=\"Terminbuchungssystem\" loading=\"lazy\">\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 5. Plugin Development -->\r\n    <article class=\"synx-card\">\r\n      <div class=\"synx-card__text\">\r\n        <h3 class=\"synx-card__title synx-aw\">Plugin Development<\/h3>\r\n        <p class=\"synx-card__tag\">Individuelle Funktionen, maximale Flexibilit\u00e4t \u2013 entwickelt f\u00fcr Ihr Wachstum<\/p>\r\n        <ul class=\"synx-list\">\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Ma\u00dfgeschneiderte WordPress-Plugins<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Sichere &amp; skalierbare Architektur<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>API-Integrationen &amp; Automatisierungen<\/span><\/li>\r\n          <li><i class=\"fas fa-arrow-right\"><\/i><span>Performance-optimierte L\u00f6sungen<\/span><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"synx-card__media\">\r\n          \r\n        <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Plugin-Developement-img.webp\" alt=\"Plugin Development\" loading=\"lazy\">\r\n        \r\n      <\/div>\r\n    <\/article>\r\n\r\n  <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============== WER WIR SIND ============== -->\r\n  <section class=\"synx-who\">\r\n    <div class=\"synx-who__media\">\r\n      <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Customer-Benefits-Synext-IT-mobile-friendly-webdesign.webp\" alt=\"Synext IT Team\" loading=\"lazy\">\r\n    <\/div>\r\n    <div class=\"synx-who__text\">\r\n      <h2 class=\"synx-aw\">WER WIR SIND<\/h2>\r\n      <p>Bei Synext IT, Ihrer Webdesign Agentur, sind wir Experten im Website erstellen und bieten ma\u00dfgeschneiderte Webdesign-L\u00f6sungen f\u00fcr Unternehmen jeder Gr\u00f6\u00dfe \u2013 von kleinen Startups bis hin zu gro\u00dfen, etablierten Firmen. Unser erfahrenes Team von Webdesignern ist darauf spezialisiert, einzigartige und mehrsprachige Websites zu entwickeln, die sowohl visuell beeindrucken als auch technisch \u00fcberzeugen.<\/p>\r\n      <a href=\"https:\/\/connect.synext-it.de\/terminbuchung\/\" class=\"synx-btn\">JETZT ONLINE TERMIN BUCHEN<\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============== WAS MACHEN WIR ============== -->\r\n  <section class=\"synx-what\">\r\n    <div class=\"synx-what__top\">\r\n      <div class=\"synx-what__intro\">\r\n        <p class=\"synx-what__pre\">Lass uns sprechen<\/p>\r\n        <h2 class=\"synx-aw\">WAS MACHEN WIR<\/h2>\r\n        <p class=\"synx-what__lead\">\r\n          Unser Studio ist spezialisiert auf ma\u00dfgeschneiderte digitale L\u00f6sungen \u2013 mit einem klaren Fokus auf innovatives Webdesign und wirkungsstarkes Branding. Dabei verfolgen wir ein zentrales Prinzip:\r\n          WEBDESIGN, DAS NICHT NUR GROSS AUSSIEHT, SONDERN AUCH HERVORRAGEND FUNKTIONIERT.\r\n          <br><br>\r\n          Wir verwandeln Visionen in funktionale, visuell \u00fcberzeugende Markenerlebnisse im digitalen Raum. Jedes Projekt wird individuell auf die Ziele und Identit\u00e4t unserer Kunden abgestimmt \u2013 f\u00fcr Auftritte, die nicht nur \u00e4sthetisch beeindrucken, sondern auch nachhaltig wirken. Statt leerer Versprechen setzen wir auf echte Sicherheit: Wenn Sie nicht \u00fcberzeugt sind, erhalten Sie Ihr Geld zur\u00fcck.\r\n        <\/p>\r\n      <\/div>\r\n      \r\n      \r\n      \r\n    <\/div>\r\n    <div class=\"synx-skill-bars\">\r\n  <div class=\"synx-skill-bar\">WEB ENTWICKLUNG<\/div>\r\n  <div class=\"synx-skill-bar\">WEB DESIGN<\/div>\r\n  <div class=\"synx-skill-bar\">SEO OPTIMIERUNG<\/div>\r\n  <div class=\"synx-skill-bar\">UX \/ UI DESIGN<\/div>\r\n  <div class=\"synx-skill-bar\">E-COMMERCE<\/div>\r\n<\/div>\r\n\r\n    <div class=\"synx-icons\">\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"far fa-handshake\"><\/i><\/span>\r\n        <h4>DSGVO Konform<\/h4>\r\n      <\/div>\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"fas fa-laptop-code\"><\/i><\/span>\r\n        <h4>Responsive Design<\/h4>\r\n      <\/div>\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"far fa-compass\"><\/i><\/span>\r\n        <h4>Benutzerfreundliche Navigation<\/h4>\r\n      <\/div>\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"fab fa-searchengin\"><\/i><\/span>\r\n        <h4>Suchmaschinenoptimiert<\/h4>\r\n      <\/div>\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"fas fa-dna\"><\/i><\/span>\r\n        <h4>Modernes Design<\/h4>\r\n      <\/div>\r\n      <div class=\"synx-icon\">\r\n        <span class=\"synx-icon__circle\"><i class=\"far fa-thumbs-up\"><\/i><\/span>\r\n        <h4>100&nbsp;% Geld-zur\u00fcck-Garantie<\/h4>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============== CTA ============== -->\r\n  <section class=\"synx-cta\">\r\n    <p class=\"synx-cta__pre\">Lass uns sprechen<\/p>\r\n    <h2 class=\"synx-aw\">BUCHE JETZT EINEN KOSTENLOSEN BERATUNGSTERMIN<\/h2>\r\n    <a href=\"https:\/\/connect.synext-it.de\/terminbuchung\/\" class=\"synx-btn synx-btn--lg\">Termin buchen<\/a>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ============== STYLES ============== -->\r\n<style>\r\n  .synx-page{\r\n    --synx-green:#19BE00;\r\n    --synx-green-soft:#2ECC71;\r\n    --synx-green-glow:rgba(25,190,0,.18);\r\n    --synx-card-bg:rgba(14,18,15,.55);\r\n    --synx-card-border:rgba(25,190,0,.18);\r\n    --synx-text:#f4f4f4;\r\n    --synx-text-dim:#bdbdbd;\r\n    --synx-radius:18px;\r\n\r\n    font-family:'Poppins','Helvetica Neue',Arial,sans-serif;\r\n    color:var(--synx-text);\r\n    width:100%;\r\n    max-width:1240px;\r\n    margin:0 auto;\r\n    padding:40px 20px 80px;\r\n    box-sizing:border-box;\r\n  }\r\n  .synx-page *,\r\n  .synx-page *::before,\r\n  .synx-page *::after{ box-sizing:border-box; }\r\n\r\n  .synx-page h2,\r\n  .synx-page h3,\r\n  .synx-page h4{ margin:0; line-height:1.2; color:#fff; }\r\n  .synx-page p{ margin:0; line-height:1.65; color:var(--synx-text-dim); }\r\n\r\n  \/* ---------- Word animation ---------- *\/\r\n  .synx-aw .synx-word{\r\n    display:inline-block;\r\n    opacity:0;\r\n    transform:translateX(-28px);\r\n    filter:blur(6px);\r\n    will-change:transform,opacity,filter;\r\n  }\r\n  .synx-aw.synx-inview .synx-word{\r\n    animation:synxWordIn 1s cubic-bezier(.22,1,.36,1) forwards;\r\n  }\r\n  @keyframes synxWordIn{\r\n    to{ opacity:1; transform:translateX(0); filter:blur(0); }\r\n  }\r\n  @media (prefers-reduced-motion:reduce){\r\n    .synx-aw .synx-word{\r\n      opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;\r\n    }\r\n  }\r\n\r\n  \/* ---------- Buttons ---------- *\/\r\n  .synx-btn{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    padding:14px 28px;\r\n    border:1.5px solid var(--synx-green);\r\n    border-radius:12px;\r\n    background:linear-gradient(180deg,#0f0f0f 0%,#1d1d1d 100%);\r\n    color:#fff;\r\n    font-weight:700;\r\n    font-size:14px;\r\n    letter-spacing:.04em;\r\n    text-decoration:none;\r\n    transition:transform .2s ease,box-shadow .2s ease,background .25s ease;\r\n  }\r\n  .synx-btn:hover,.synx-btn:focus-visible{\r\n    transform:translateY(-2px);\r\n    box-shadow:0 0 0 1px var(--synx-green-glow),0 10px 30px rgba(25,190,0,.18);\r\n    color:#fff;\r\n  }\r\n  .synx-btn--lg{ padding:16px 36px; font-size:15px; }\r\n\r\n  \/* ============================================================\r\n     SERVICES\r\n  ============================================================ *\/\r\n  .synx-services-wrap{\r\n    background:#081a14;\r\n    border-radius:24px;\r\n    padding:32px;\r\n    margin-bottom:90px;\r\n    box-shadow:0 25px 60px rgba(0,0,0,.35);\r\n  }\r\n  .synx-services{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:24px;\r\n  }\r\n  .synx-card{\r\n    display:grid;\r\n    grid-template-columns:1.05fr 1fr;\r\n    gap:36px;\r\n    align-items:center;\r\n    padding:40px 44px;\r\n    background:#172722;\r\n    border:1px solid rgba(255,255,255,.04);\r\n    border-radius:var(--synx-radius);\r\n    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;\r\n  }\r\n  .synx-card:hover{\r\n    transform:translateY(-3px);\r\n    border-color:rgba(25,190,0,.45);\r\n    box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 1px rgba(25,190,0,.08);\r\n  }\r\n  .synx-card__title{\r\n    font-size:clamp(24px,2.4vw,40px);\r\n    font-weight:700;\r\n    letter-spacing:-.01em;\r\n    margin-bottom:20px !important;\r\n  }\r\n  .synx-card__tag{\r\n    color:var(--synx-green-soft);\r\n    font-weight:500;\r\n    font-size:18px;\r\n    margin-bottom:15px!important ;\r\n  }\r\n  .synx-list{\r\n    list-style:none;\r\n    padding:0;\r\n    margin:0;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:12px;\r\n  }\r\n  .synx-list li{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    gap:12px;\r\n    color:#e8e8e8;\r\n    font-size:15px;\r\n    line-height:1.5;\r\n  }\r\n  .synx-list li i{\r\n    color:var(--synx-green);\r\n    font-size:13px;\r\n    margin-top:6px;\r\n    flex-shrink:0;\r\n  }\r\n  .synx-card__media{\r\n    width:100%;\r\n    \/*border-radius:14px;*\/\r\n    \/*overflow:hidden;*\/\r\n    \/*box-shadow:0 14px 35px rgba(0,0,0,.45);*\/\r\n  }\r\n  .synx-card__media img{\r\n    width:100%;\r\n    height:auto;\r\n    display:block;\r\n    transition:transform .6s ease;\r\n  }\r\n  .synx-card:hover .synx-card__media img{ transform:scale(1.03); }\r\n\r\n  \/* ============================================================\r\n     WER WIR SIND\r\n  ============================================================ *\/\r\n  .synx-who{\r\n    display:grid;\r\n    grid-template-columns:1fr 1.15fr;\r\n    gap:60px;\r\n    align-items:center;\r\n    margin-bottom:100px;\r\n  }\r\n  .synx-who__media img{\r\n    width:100%;\r\n    max-width:480px;\r\n    height:auto;\r\n    display:block;\r\n    border-radius:50%;\r\n    margin:0 auto;\r\n    box-shadow:0 0 0 1px rgba(25,190,0,.18),0 25px 60px rgba(0,0,0,.45);\r\n  }\r\n  .synx-who__text h2{\r\n    font-size:clamp(30px,3.4vw,48px);\r\n    font-weight:800;\r\n    letter-spacing:-.01em;\r\n    margin-bottom:22px;\r\n  }\r\n  .synx-who__text p{\r\n    color:#dcdcdc;\r\n    font-size:16px;\r\n    margin-bottom:28px;\r\n  }\r\n\r\n  \/* ============================================================\r\n     WAS MACHEN WIR\r\n  ============================================================ *\/\r\n .synx-what{\r\n  margin-bottom:100px;\r\n  text-align:center;\r\n}\r\n\r\n.synx-what__top{\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n}\r\n\r\n.synx-what__intro{\r\n  max-width:1200px;\r\n  margin:0 auto;\r\n}\r\n\r\n.synx-what__pre{\r\n  color:var(--synx-green-soft);\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.18em;\r\n  text-transform:uppercase;\r\n  margin-bottom:18px;\r\n  text-align:center;\r\n}\r\n\r\n.synx-what__intro h2{\r\n  font-size:clamp(42px,4vw,90px);\r\n  font-weight:700;\r\n  letter-spacing:-.03em;\r\n  line-height:1;\r\n  margin-bottom:34px;\r\n  text-align:center;\r\n}\r\n\r\n.synx-what__lead{\r\n  color:#f2f2f2;\r\n  font-size:clamp(18px,1vw,24px);\r\n  line-height:1.9;\r\n  text-align:center;\r\n  max-width:1400px;\r\n  margin:0 auto 20px !important;\r\n}\r\n\r\n.synx-what__lead strong{\r\n  color:#fff;\r\n  font-weight:800;\r\n}\r\n.synx-skill-bars{\r\n  width:100%;\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:20px;\r\n  margin:60px 0 50px;\r\n}\r\n\r\n.synx-skill-bar{\r\n  width:100%;\r\n  padding:18px 24px;\r\n  background:#152820;\r\n  border:1px solid rgba(255,255,255,.18);\r\n  border-radius:8px;\r\n  color:#fff;\r\n  font-size:clamp(26px,3.2vw,42px);\r\n  font-weight:800;\r\n  line-height:1.2;\r\n  text-align:center;\r\n  letter-spacing:-.02em;\r\n}\r\n\r\n@media (max-width: 600px){\r\n\r\n  .synx-what__intro h2{\r\n    font-size:30px;\r\n    line-height:1.05;\r\n    margin-bottom:24px;\r\n  }\r\n\r\n  .synx-what__lead{\r\n    font-size:17px;\r\n    line-height:1.8;\r\n  }\r\n\r\n  .synx-what__pre{\r\n    font-size:12px;\r\n    margin-bottom:14px;\r\n  }\r\n\r\n}\r\n\r\n\r\n  \/* ---- icon grid ---- *\/\r\n  .synx-icons{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:28px;\r\n  }\r\n  .synx-icon{\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    text-align:center;\r\n    padding:28px 18px;\r\n    background:var(--synx-card-bg);\r\n    border:1px solid var(--synx-card-border);\r\n    border-radius:var(--synx-radius);\r\n    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;\r\n  }\r\n  .synx-icon:hover{\r\n    transform:translateY(-4px);\r\n    border-color:rgba(25,190,0,.5);\r\n    box-shadow:0 14px 30px rgba(0,0,0,.35);\r\n  }\r\n  .synx-icon__circle{\r\n    width:64px;\r\n    height:64px;\r\n    border-radius:50%;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    margin-bottom:16px;\r\n    background:radial-gradient(circle at 30% 30%,rgba(25,190,0,.22),rgba(25,190,0,.05) 70%);\r\n    border:1px solid rgba(25,190,0,.25);\r\n    color:var(--synx-green);\r\n    font-size:24px;\r\n  }\r\n  .synx-icon h4{\r\n    font-size:15px;\r\n    font-weight:600;\r\n    color:#fff;\r\n    line-height:1.35;\r\n  }\r\n\r\n  \/* ============================================================\r\n     CTA\r\n  ============================================================ *\/\r\n  .synx-cta{\r\n    text-align:center;\r\n    padding:60px 30px;\r\n    border:1px solid var(--synx-card-border);\r\n    border-radius:24px;\r\n    background:\r\n      radial-gradient(120% 80% at 50% 0%,rgba(25,190,0,.10) 0%,transparent 60%),\r\n      var(--synx-card-bg);\r\n  }\r\n  .synx-cta__pre{\r\n    color:var(--synx-green-soft);\r\n    font-weight:600;\r\n    font-size:14px;\r\n    letter-spacing:.18em;\r\n    text-transform:uppercase;\r\n    margin-bottom:14px;\r\n  }\r\n  .synx-cta h2{\r\n    font-size:clamp(26px,3.4vw,46px);\r\n    font-weight:800;\r\n    letter-spacing:-.01em;\r\n    margin-bottom:28px;\r\n    max-width:880px;\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n    line-height:1.15;\r\n  }\r\n\r\n  \/* ============================================================\r\n     RESPONSIVE\r\n  ============================================================ *\/\r\n  @media (max-width: 1024px){\r\n    .synx-services-wrap{ padding:20px; }\r\n    .synx-card{ grid-template-columns:1fr; padding:28px; }\r\n    .synx-card__media{ order:-1; }\r\n    .synx-who{ grid-template-columns:1fr; gap:30px; }\r\n    .synx-who__media img{ max-width:320px; }\r\n    .synx-what__top{ grid-template-columns:1fr; gap:30px; }\r\n    .synx-icons{ grid-template-columns:repeat(2,1fr); }\r\n  }\r\n  @media (max-width: 600px){\r\n    .synx-page{ padding:20px 14px 60px; }\r\n    .synx-services-wrap{ padding:14px; border-radius:18px; margin-bottom:60px; }\r\n    .synx-services{ gap:14px; }\r\n    .synx-card{ padding:22px; gap:20px; }\r\n    .synx-card__title{ font-size:24px; }\r\n    .synx-list li{ font-size:14px; }\r\n    .synx-who{ margin-bottom:60px; }\r\n    .synx-who__media img{ max-width:240px; }\r\n    .synx-what{ margin-bottom:60px; }\r\n    .synx-icons{ grid-template-columns:1fr 1fr; gap:14px; }\r\n    .synx-icon{ padding:22px 12px; }\r\n    .synx-icon h4{ font-size:13px; }\r\n    .synx-cta{ padding:40px 20px; }\r\n    .synx-btn{ width:100%; }\r\n  }\r\n  \r\n  @media (max-width: 600px){\r\n  .synx-page{\r\n    padding:20px 14px 60px;\r\n    text-align:center;\r\n  }\r\n\r\n  .synx-services-wrap{\r\n    padding:14px;\r\n    border-radius:18px;\r\n    margin-bottom:60px;\r\n  }\r\n\r\n  .synx-services{\r\n    gap:14px;\r\n  }\r\n\r\n  .synx-card{\r\n    display:flex;\r\n    flex-direction:column;\r\n    padding:22px;\r\n    gap:20px;\r\n    text-align:center;\r\n    align-items:center;\r\n  }\r\n\r\n  .synx-card__media{\r\n    order:-1;\r\n    width:100%;\r\n    max-width:280px;\r\n    margin:0 auto;\r\n  }\r\n\r\n  .synx-card__media img{\r\n    width:100%;\r\n    height:auto;\r\n    display:block;\r\n  }\r\n\r\n  .synx-card__text{\r\n    text-align:center;\r\n    width:100%;\r\n  }\r\n\r\n  .synx-card__title{\r\n    font-size:24px;\r\n    text-align:center;\r\n  }\r\n\r\n  .synx-card__tag{\r\n    text-align:center;\r\n  }\r\n\r\n  .synx-list{\r\n    align-items:center;\r\n  }\r\n\r\n  .synx-list li{\r\n    justify-content:center;\r\n    text-align:left;\r\n    font-size:14px;\r\n    max-width:300px;\r\n  }\r\n\r\n  .synx-who,\r\n  .synx-what,\r\n  .synx-what__intro,\r\n  .synx-what__list,\r\n  .synx-cta{\r\n    text-align:center;\r\n  }\r\n\r\n  .synx-who{\r\n    margin-bottom:60px;\r\n  }\r\n\r\n  .synx-who__media img{\r\n    max-width:240px;\r\n  }\r\n\r\n  .synx-what{\r\n    margin-bottom:60px;\r\n  }\r\n\r\n  .synx-icons{\r\n    grid-template-columns:1fr 1fr;\r\n    gap:14px;\r\n  }\r\n\r\n  .synx-icon{\r\n    padding:22px 12px;\r\n  }\r\n\r\n  .synx-icon h4{\r\n    font-size:13px;\r\n  }\r\n\r\n  .synx-cta{\r\n    padding:40px 20px;\r\n  }\r\n\r\n  .synx-btn{\r\n    width:auto;\r\n    padding:12px 22px;\r\n    font-size:13px;\r\n  }\r\n}\r\n\r\n@media (max-width: 600px){\r\n\r\n  .synx-icons{\r\n    grid-template-columns:1fr;\r\n    gap:18px;\r\n  }\r\n\r\n  .synx-icon{\r\n    width:100%;\r\n    padding:28px 20px;\r\n    border-radius:20px;\r\n  }\r\n\r\n  .synx-icon__circle{\r\n    width:72px;\r\n    height:72px;\r\n    margin-bottom:18px;\r\n    font-size:28px;\r\n  }\r\n\r\n  .synx-icon h4{\r\n    font-size:18px;\r\n    line-height:1.5;\r\n    max-width:220px;\r\n    margin:0 auto;\r\n    text-align:center;\r\n  }\r\n\r\n}\r\n@media (max-width: 600px) {\r\n  .synx-list {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .synx-list li {\r\n    justify-content: flex-start;\r\n    text-align: left;\r\n    max-width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- ============== SCRIPTS ============== -->\r\n<script>\r\n(function(){\r\n  'use strict';\r\n\r\n  function splitWords(root){\r\n    var els = root.querySelectorAll('.synx-aw');\r\n    els.forEach(function(el){\r\n      if (el.dataset.synxPrepared === 'true') return;\r\n      el.dataset.synxPrepared = 'true';\r\n\r\n      var temp = document.createElement('div');\r\n      temp.innerHTML = el.innerHTML;\r\n      var frag = document.createDocumentFragment();\r\n      var delay = 0;\r\n\r\n      function walk(node, parent){\r\n        if (node.nodeType === Node.TEXT_NODE){\r\n          var parts = node.textContent.split(\/(\\s+)\/);\r\n          parts.forEach(function(p){\r\n            if (!p) return;\r\n            if (\/^\\s+$\/.test(p)){\r\n              parent.appendChild(document.createTextNode(p));\r\n            } else {\r\n              var span = document.createElement('span');\r\n              span.className = 'synx-word';\r\n              span.textContent = p;\r\n              span.style.animationDelay = delay.toFixed(2) + 's';\r\n              delay += 0.08;\r\n              parent.appendChild(span);\r\n            }\r\n          });\r\n        } else if (node.nodeType === Node.ELEMENT_NODE){\r\n          if (node.tagName === 'BR'){\r\n            parent.appendChild(document.createElement('br'));\r\n          } else {\r\n            var clone = document.createElement(node.tagName.toLowerCase());\r\n            for (var i = 0; i < node.attributes.length; i++){\r\n              clone.setAttribute(node.attributes[i].name, node.attributes[i].value);\r\n            }\r\n            node.childNodes.forEach(function(child){ walk(child, clone); });\r\n            parent.appendChild(clone);\r\n          }\r\n        }\r\n      }\r\n\r\n      temp.childNodes.forEach(function(n){ walk(n, frag); });\r\n      el.innerHTML = '';\r\n      el.appendChild(frag);\r\n    });\r\n  }\r\n\r\n  function init(){\r\n    var root = document.querySelector('.synx-page');\r\n    if (!root) return;\r\n    splitWords(root);\r\n\r\n    if ('IntersectionObserver' in window){\r\n      var io = new IntersectionObserver(function(entries, obs){\r\n        entries.forEach(function(entry){\r\n          if (entry.isIntersecting){\r\n            entry.target.classList.add('synx-inview');\r\n            obs.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.2, rootMargin: '0px 0px -8% 0px' });\r\n\r\n      root.querySelectorAll('.synx-aw').forEach(function(el){ io.observe(el); });\r\n    } else {\r\n      root.querySelectorAll('.synx-aw').forEach(function(el){ el.classList.add('synx-inview'); });\r\n    }\r\n  }\r\n\r\n  if (document.readyState === 'loading'){\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n})();\r\n<\/script>\r\n<script>\r\n(function () {\r\n  const URL_MAP = {\r\n    \"https:\/\/connect.synext-it.de\/terminbuchung\/\": \"https:\/\/connect.synext-it.de\/en\/terminbuchung\/\",\r\n  };\r\n\r\n  function isEnglishPage() {\r\n    const path     = window.location.pathname;\r\n    const hostname = window.location.hostname;\r\n    if (\r\n      hostname === \"synext-it.de\"         ||\r\n      hostname === \"www.synext-it.de\"     ||\r\n      hostname === \"connect.synext-it.de\"\r\n    ) {\r\n      return path.startsWith(\"\/en\/\") || path === \"\/en\";\r\n    }\r\n    return false;\r\n  }\r\n\r\n  function resolveUrl(url) {\r\n    return (isEnglishPage() && URL_MAP[url]) ? URL_MAP[url] : url;\r\n  }\r\n\r\n  \/* Rewrite terminbuchung links in both widgets *\/\r\n  document.querySelectorAll(\r\n    '#synext-fast-hero a[href], .synx-page a[href]'\r\n  ).forEach(function (el) {\r\n    el.href = resolveUrl(el.href);\r\n  });\r\n})();\r\n<\/script>\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>WEBDESIGN &#038; ENTWICKLUNG WEBDESIGN, DAS NICHT NUR GROSS AUSSIEHT, SONDERN AUCH HERVORRAGEND FUNKTIONIERT. Angebot anfragen Unternehmens website Atemberaubendes Design, nahtlose Leistung \u2013 entwickelt f\u00fcr Wachstum Vollst\u00e4ndige Unternehmenswebsite mit allen wichtigen Bereichen auf separaten Seiten Datenschutz\u00aderkl\u00e4rung &amp; Impressum DSGVO-konformes Cookie-System Hosting &amp; technische Einrichtung Onepager Modernes Design, starke Ergebnisse \u2013 entwickelt, um Ihr Business voranzubringen Kompletter [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":77,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-92","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":13,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/92\/revisions\/333"}],"up":[{"embeddable":true,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/77"}],"wp:attachment":[{"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/media?parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}