{"id":114,"date":"2026-05-26T11:54:00","date_gmt":"2026-05-26T11:54:00","guid":{"rendered":"https:\/\/synext-it.de\/?page_id=114"},"modified":"2026-06-04T07:51:36","modified_gmt":"2026-06-04T07:51:36","slug":"graphicdesign","status":"publish","type":"page","link":"https:\/\/synext-it.de\/en\/services\/grafikdesign\/","title":{"rendered":"Branding &amp; Corporate Design | Synext IT"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"114\" class=\"elementor elementor-114\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8e7071 e-con-full graphic-cont e-flex elementor-invisible e-con e-child\" data-id=\"c8e7071\" 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-7ab7303 elementor-widget elementor-widget-html\" data-id=\"7ab7303\" 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\">BRANDING & CORPORATE DESIGN<\/p>\r\n\r\n    <h1 class=\"sx-title sx-animate-words\" id=\"sx-title-id\">\r\n      Designs, die f\u00fcr Ihre Marke sprechen\r\n    <\/h1>\r\n\r\n    <p class=\"sx-subtitle\">\r\n      Heben Sie sich mit starken Visuals von Synext IT ab \u2013 von Logos bis Social Media gestalten wir mit Wirkung und Identit\u00e4t.\r\n    <\/p>\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#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>\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  document.querySelectorAll('#synext-fast-hero a[href]').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 class=\"elementor-element elementor-element-2901c1e elementor-widget elementor-widget-html\" data-id=\"2901c1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.graphic-cont{\r\n  position: relative;\r\n  overflow: hidden;\r\n  \/*background:*\/\r\n  \/*  radial-gradient(circle at 18% 22%, rgba(0,255,87,0.08), transparent 28%),*\/\r\n  \/*  radial-gradient(circle at 82% 18%, rgba(255,255,255,0.05), transparent 24%),*\/\r\n  \/*  linear-gradient(180deg, #03110a 0%, #04150d 45%, #020906 100%);*\/\r\n}\r\n\r\n.graphic-cont .graphic-logo-canvas{\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.graphic-cont::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:1;\r\n  pointer-events:none;\r\n  \/*background:*\/\r\n  \/*  linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.18)),*\/\r\n  \/*  radial-gradient(circle at center, transparent 38%, rgba(0,0,0,0.16) 100%);*\/\r\n}\r\n\r\n.graphic-cont > *{\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .graphic-cont .graphic-logo-canvas{\r\n    display:none;\r\n  }\r\n}\r\n<\/style>\r\n<script>\r\n(function () {\r\n  const container = document.querySelector('.graphic-cont');\r\n  if (!container) return;\r\n\r\n  const oldCanvas = container.querySelector('.graphic-logo-canvas');\r\n  if (oldCanvas) oldCanvas.remove();\r\n\r\n  const canvas = document.createElement('canvas');\r\n  canvas.className = 'graphic-logo-canvas';\r\n  container.prepend(canvas);\r\n\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  let dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n  let w = 0;\r\n  let h = 0;\r\n  let t = 0;\r\n  let rafId = null;\r\n\r\n  const orbitDots = [];\r\n  const floatDots = [];\r\n  const rings = [];\r\n  const guideLines = [];\r\n\r\n  function rand(min, max) {\r\n    return Math.random() * (max - min) + min;\r\n  }\r\n\r\n  function resize() {\r\n    const rect = container.getBoundingClientRect();\r\n    w = Math.max(320, Math.floor(rect.width));\r\n    h = Math.max(380, Math.floor(rect.height));\r\n\r\n    canvas.width = Math.floor(w * dpr);\r\n    canvas.height = Math.floor(h * dpr);\r\n    canvas.style.width = w + 'px';\r\n    canvas.style.height = h + 'px';\r\n\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n  }\r\n\r\n  function createScene() {\r\n    orbitDots.length = 0;\r\n    floatDots.length = 0;\r\n    rings.length = 0;\r\n    guideLines.length = 0;\r\n\r\n    const cx = w \/ 2;\r\n    const cy = h \/ 2;\r\n\r\n    rings.push(\r\n      { x: cx - w * 0.16, y: cy - h * 0.08, r: Math.min(w, h) * 0.11, a: 0.08, speed: 0.0007 },\r\n      { x: cx + w * 0.12, y: cy - h * 0.14, r: Math.min(w, h) * 0.16, a: 0.07, speed: -0.0005 },\r\n      { x: cx + w * 0.02, y: cy + h * 0.12, r: Math.min(w, h) * 0.13, a: 0.06, speed: 0.0006 },\r\n      { x: cx - w * 0.06, y: cy + h * 0.02, r: Math.min(w, h) * 0.22, a: 0.045, speed: -0.00035 }\r\n    );\r\n\r\n    for (let i = 0; i < 14; i++) {\r\n      orbitDots.push({\r\n        centerX: cx + rand(-w * 0.18, w * 0.18),\r\n        centerY: cy + rand(-h * 0.16, h * 0.16),\r\n        orbitR: rand(30, 90),\r\n        angle: rand(0, Math.PI * 2),\r\n        speed: rand(0.0015, 0.0032),\r\n        dotR: rand(1.5, 3),\r\n        alpha: rand(0.16, 0.34)\r\n      });\r\n    }\r\n\r\n    for (let i = 0; i < 24; i++) {\r\n      floatDots.push({\r\n        x: rand(0, w),\r\n        y: rand(0, h),\r\n        r: rand(0.8, 2),\r\n        dx: rand(-0.04, 0.04),\r\n        dy: rand(-0.03, 0.03),\r\n        a: rand(0.04, 0.12)\r\n      });\r\n    }\r\n\r\n    const verticalCount = 7;\r\n    const horizontalCount = 5;\r\n\r\n    for (let i = 1; i < verticalCount; i++) {\r\n      guideLines.push({\r\n        type: 'v',\r\n        pos: (w \/ verticalCount) * i\r\n      });\r\n    }\r\n\r\n    for (let i = 1; i < horizontalCount; i++) {\r\n      guideLines.push({\r\n        type: 'h',\r\n        pos: (h \/ horizontalCount) * i\r\n      });\r\n    }\r\n  }\r\n\r\n  function drawBackgroundGlow() {\r\n    const g = ctx.createRadialGradient(\r\n      w * 0.52, h * 0.42, 0,\r\n      w * 0.52, h * 0.42, Math.max(w, h) * 0.52\r\n    );\r\n    g.addColorStop(0, 'rgba(255,255,255,0.03)');\r\n    g.addColorStop(0.25, 'rgba(0,255,87,0.04)');\r\n    g.addColorStop(1, 'rgba(0,0,0,0)');\r\n    ctx.fillStyle = g;\r\n    ctx.fillRect(0, 0, w, h);\r\n  }\r\n\r\n  function drawGuides() {\r\n    ctx.save();\r\n    ctx.lineWidth = 1;\r\n    ctx.strokeStyle = 'rgba(255,255,255,0.04)';\r\n\r\n    guideLines.forEach(line => {\r\n      ctx.beginPath();\r\n      if (line.type === 'v') {\r\n        ctx.moveTo(line.pos, 0);\r\n        ctx.lineTo(line.pos, h);\r\n      } else {\r\n        ctx.moveTo(0, line.pos);\r\n        ctx.lineTo(w, line.pos);\r\n      }\r\n      ctx.stroke();\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawCrosshair(x, y, size, alpha) {\r\n    ctx.save();\r\n    ctx.strokeStyle = `rgba(255,255,255,${alpha})`;\r\n    ctx.lineWidth = 1;\r\n\r\n    ctx.beginPath();\r\n    ctx.moveTo(x - size, y);\r\n    ctx.lineTo(x + size, y);\r\n    ctx.moveTo(x, y - size);\r\n    ctx.lineTo(x, y + size);\r\n    ctx.stroke();\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawRingSet() {\r\n    ctx.save();\r\n\r\n    rings.forEach((ring, i) => {\r\n      const pulse = Math.sin(t * 0.0012 + i) * 0.5 + 0.5;\r\n      const rr = ring.r * (0.985 + pulse * 0.03);\r\n\r\n      ctx.beginPath();\r\n      ctx.lineWidth = 1;\r\n      ctx.strokeStyle = `rgba(255,255,255,${ring.a})`;\r\n      ctx.arc(ring.x, ring.y, rr, 0, Math.PI * 2);\r\n      ctx.stroke();\r\n\r\n      ctx.beginPath();\r\n      ctx.strokeStyle = `rgba(110,231,183,${ring.a * 0.9})`;\r\n      ctx.arc(ring.x, ring.y, rr * 0.62, 0, Math.PI * 1.25);\r\n      ctx.stroke();\r\n\r\n      drawCrosshair(ring.x, ring.y, 7, ring.a * 1.3);\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawBezierConstruction() {\r\n    const p1 = { x: w * 0.18, y: h * 0.68 };\r\n    const p2 = { x: w * 0.36, y: h * 0.36 };\r\n    const p3 = { x: w * 0.58, y: h * 0.58 };\r\n    const p4 = { x: w * 0.78, y: h * 0.26 };\r\n\r\n    ctx.save();\r\n\r\n    ctx.beginPath();\r\n    ctx.moveTo(p1.x, p1.y);\r\n    ctx.bezierCurveTo(\r\n      p2.x, p2.y,\r\n      p3.x, p3.y,\r\n      p4.x, p4.y\r\n    );\r\n\r\n    ctx.lineWidth = 1.3;\r\n    ctx.strokeStyle = 'rgba(110,231,183,0.11)';\r\n    ctx.stroke();\r\n\r\n    ctx.setLineDash([4, 7]);\r\n    ctx.strokeStyle = 'rgba(255,255,255,0.06)';\r\n    ctx.beginPath();\r\n    ctx.moveTo(p1.x, p1.y);\r\n    ctx.lineTo(p2.x, p2.y);\r\n    ctx.lineTo(p3.x, p3.y);\r\n    ctx.lineTo(p4.x, p4.y);\r\n    ctx.stroke();\r\n    ctx.setLineDash([]);\r\n\r\n    [p1, p2, p3, p4].forEach((p, i) => {\r\n      const pulse = Math.sin(t * 0.002 + i) * 0.5 + 0.5;\r\n      const r = 2.6 + pulse * 1.2;\r\n\r\n      ctx.beginPath();\r\n      ctx.fillStyle = 'rgba(255,255,255,0.92)';\r\n      ctx.arc(p.x, p.y, r, 0, Math.PI * 2);\r\n      ctx.fill();\r\n\r\n      ctx.beginPath();\r\n      ctx.fillStyle = 'rgba(110,231,183,0.14)';\r\n      ctx.arc(p.x, p.y, r + 5 + pulse * 2, 0, Math.PI * 2);\r\n      ctx.fill();\r\n\r\n      drawCrosshair(p.x, p.y, 6, 0.08);\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawOrbitDots() {\r\n    ctx.save();\r\n\r\n    orbitDots.forEach((d, i) => {\r\n      d.angle += d.speed;\r\n      const x = d.centerX + Math.cos(d.angle + t * 0.0002) * d.orbitR;\r\n      const y = d.centerY + Math.sin(d.angle + t * 0.00015) * d.orbitR * 0.7;\r\n\r\n      ctx.beginPath();\r\n      ctx.fillStyle = `rgba(209,250,229,${d.alpha})`;\r\n      ctx.arc(x, y, d.dotR, 0, Math.PI * 2);\r\n      ctx.fill();\r\n\r\n      if (i % 3 === 0) {\r\n        ctx.beginPath();\r\n        ctx.strokeStyle = 'rgba(255,255,255,0.035)';\r\n        ctx.lineWidth = 1;\r\n        ctx.arc(d.centerX, d.centerY, d.orbitR, 0, Math.PI * 2);\r\n        ctx.stroke();\r\n      }\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawFloatDots() {\r\n    ctx.save();\r\n\r\n    floatDots.forEach(d => {\r\n      d.x += d.dx;\r\n      d.y += d.dy;\r\n\r\n      if (d.x < -8) d.x = w + 8;\r\n      if (d.x > w + 8) d.x = -8;\r\n      if (d.y < -8) d.y = h + 8;\r\n      if (d.y > h + 8) d.y = -8;\r\n\r\n      ctx.beginPath();\r\n      ctx.fillStyle = `rgba(255,255,255,${d.a})`;\r\n      ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawArcDetails() {\r\n    ctx.save();\r\n\r\n    const arcSets = [\r\n      { x: w * 0.24, y: h * 0.28, r: 56, start: 0.3, end: 2.2 },\r\n      { x: w * 0.72, y: h * 0.70, r: 74, start: 3.8, end: 5.7 },\r\n      { x: w * 0.62, y: h * 0.22, r: 44, start: 1.2, end: 3.3 }\r\n    ];\r\n\r\n    arcSets.forEach((a, i) => {\r\n      const shift = Math.sin(t * 0.001 + i) * 0.12;\r\n\r\n      ctx.beginPath();\r\n      ctx.lineWidth = 1.1;\r\n      ctx.strokeStyle = 'rgba(110,231,183,0.09)';\r\n      ctx.arc(a.x, a.y, a.r, a.start + shift, a.end + shift);\r\n      ctx.stroke();\r\n\r\n      ctx.beginPath();\r\n      ctx.lineWidth = 1;\r\n      ctx.strokeStyle = 'rgba(255,255,255,0.06)';\r\n      ctx.arc(a.x, a.y, a.r * 0.72, a.start - 0.2, a.end - 0.2);\r\n      ctx.stroke();\r\n    });\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function drawCenterBrandShape() {\r\n    const cx = w * 0.5;\r\n    const cy = h * 0.49;\r\n    const size = Math.min(w, h) * 0.09;\r\n    const rotate = Math.sin(t * 0.00055) * 0.1;\r\n\r\n    ctx.save();\r\n    ctx.translate(cx, cy);\r\n    ctx.rotate(rotate);\r\n\r\n    ctx.beginPath();\r\n    ctx.moveTo(-size, 0);\r\n    ctx.quadraticCurveTo(0, -size * 0.95, size, 0);\r\n    ctx.quadraticCurveTo(0, size * 0.95, -size, 0);\r\n    ctx.closePath();\r\n\r\n    const grad = ctx.createLinearGradient(-size, -size, size, size);\r\n    grad.addColorStop(0, 'rgba(255,255,255,0.045)');\r\n    grad.addColorStop(0.5, 'rgba(110,231,183,0.075)');\r\n    grad.addColorStop(1, 'rgba(255,255,255,0.02)');\r\n\r\n    ctx.fillStyle = grad;\r\n    ctx.fill();\r\n\r\n    ctx.lineWidth = 1.2;\r\n    ctx.strokeStyle = 'rgba(255,255,255,0.08)';\r\n    ctx.stroke();\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  function draw() {\r\n    t += 16;\r\n    ctx.clearRect(0, 0, w, h);\r\n\r\n    \/\/ drawBackgroundGlow();\r\n    drawGuides();\r\n    drawRingSet();\r\n    drawArcDetails();\r\n    drawBezierConstruction();\r\n    drawCenterBrandShape();\r\n    drawOrbitDots();\r\n    drawFloatDots();\r\n\r\n    rafId = requestAnimationFrame(draw);\r\n  }\r\n\r\n  let resizeTimer;\r\n  function handleResize() {\r\n    clearTimeout(resizeTimer);\r\n    resizeTimer = setTimeout(() => {\r\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n      resize();\r\n      createScene();\r\n    }, 120);\r\n  }\r\n\r\n  resize();\r\n  createScene();\r\n  draw();\r\n\r\n  window.addEventListener('resize', handleResize);\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-7af0b7c e-con-full e-flex e-con e-parent\" data-id=\"7af0b7c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ff3398 elementor-widget elementor-widget-html\" data-id=\"5ff3398\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"gd-page\">\r\n\r\n  <section class=\"gd-row gd-row-print\">\r\n    <div class=\"gd-text\">\r\n      <h2>Print Design<\/h2>\r\n      <p class=\"gd-sub\">KREATIVE & WIRKUNGSVOLLE MARKETINGMATERIALIEN<\/p>\r\n      <p>\r\n        Hinterlassen Sie einen bleibenden Eindruck mit professionell gestalteten Flyern, die perfekt zu Ihrer Marke passen. Ob f\u00fcr Werbeaktionen, Events oder Unternehmensmarketing \u2013 unsere individuellen Flyer-Designs im Grafikdesign sorgen daf\u00fcr, dass Ihre Botschaft auff\u00e4llt. Hochwertige Grafiken, ansprechende Layouts und strategisches Branding \u2013 steigern Sie Ihr Marketing mit Synext-IT.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"gd-collage gd-print-collage\">\r\n  <!-- Top 2 images: static grid -->\r\n  <!-- Top: slider showing 2 at a time -->\r\n<div class=\"gd-poster-slider\" id=\"print-slider-top\">\r\n  <div class=\"gd-poster-track\">\r\n    <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Flyer-design-img2.webp\" alt=\"Flyer Design\"><\/div>\r\n    <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Flyer-design-img1.webp\" alt=\"Flyer Design\"><\/div>\r\n    <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Flyer-design-img4.webp\" alt=\"Flyer Design\"><\/div>\r\n    <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Flyer-design-img3.webp\" alt=\"Visitenkarten Design\"><\/div>\r\n    <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/600-x-600.webp\" alt=\"Visitenkarten Design\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n  <!-- Bottom: slider -->\r\n  <div class=\"gd-collage-slider\">\r\n    <div class=\"gd-slider-track\">\r\n      <div class=\"gd-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Untitled-200-x-200-px.webp\" style=\"width:80%\" alt=\"Flyer Design\"><\/div>\r\n      <div class=\"gd-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Visitenkartendesign-in-Deutschland-new.webp\" alt=\"Visitenkarten Design\"><\/div>\r\n      <div class=\"gd-slide\"><img decoding=\"async\" src=\"https:\/\/test.synext-it.de\/wp-content\/uploads\/2026\/05\/Restaurant-Menu-Flyer-Design-Services-German-new-img-scaled-1.webp\" alt=\"Visitenkarten Design\"><\/div>\r\n    <\/div>\r\n    \r\n  <\/div>\r\n<\/div>\r\n  <\/section>\r\n\r\n  <section class=\"gd-row gd-row-logo\">\r\n    <div class=\"gd-image\">\r\n      <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/logos-img-1-1.webp\" alt=\"Logo Design\">\r\n    <\/div>\r\n\r\n    <div class=\"gd-text\">\r\n      <h2>Logo Design<\/h2>\r\n      <p class=\"gd-sub\">MARKANTE MARKENIDENTIT\u00c4T F\u00dcR EINEN STARKEN AUFTRITT<\/p>\r\n      <p>\r\n        Ihr Logo ist das Gesicht Ihrer Marke \u2013 machen Sie es unvergesslich! Wir entwerfen einzigartige, hochwertige Logos, die die Essenz Ihrer Marke einfangen und Sie von der Konkurrenz abheben. Ob modern, minimalistisch oder auff\u00e4llig \u2013 Synext IT sorgt mit unserem Grafikdesign f\u00fcr ein professionelles und wirkungsvolles Logo, das perfekt auf Ihre Vision zugeschnitten ist.\r\n      <\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"gd-row gd-row-social\">\r\n  <div class=\"gd-text\">\r\n    <h2>Social Media Post<\/h2>\r\n    <p class=\"gd-sub\">FESSELNDER & TRENDIGER CONTENT F\u00dcR IHRE MARKE<\/p>\r\n    <p>\r\n      Steigern Sie Ihre Online-Pr\u00e4senz mit visuell ansprechenden und strategisch gestalteten Social-Media-Posts.\r\n      Ob Werbeaktionen oder Markengeschichten \u2013 wir erstellen Inhalte, die Ihre Zielgruppe ansprechen und Interaktionen f\u00f6rdern. Lassen Sie Synext IT hochwertige Grafikdesign-Elemente gestalten, die Ihren Social-Media-Erfolg unterst\u00fctzen.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"gd-social-images\">\r\n    <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/selected-4.webp\"\r\n         alt=\"Social Media Posts\" class=\"gd-social-top\">\r\n    <img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Purple-Product-Release-Gradient-Mobile-Virtual-Reality-Technology-Video-3.png\"\r\n         alt=\"Social Media Phone\" class=\"gd-social-bottom\">\r\n  <\/div>\r\n<\/section>\r\n\r\n  <section class=\"gd-row gd-row-poster\">\r\n  <div class=\"gd-poster-sliders\">\r\n\r\n    <!-- Top slider: 2 images visible at a time -->\r\n    <div class=\"gd-poster-slider\" id=\"poster-slider-top\">\r\n      <div class=\"gd-poster-track\">\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/poster-img-new.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-img-2.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Untitled-design-27-1.webp\" alt=\"Poster\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bottom slider: 3 images visible at a time -->\r\n    <div class=\"gd-poster-slider\" id=\"poster-slider-bottom\">\r\n      <div class=\"gd-poster-track\">\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Maxim-Pizza-Doner-Deutschland.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Maxim-Pizza-Doner-Germany.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Services-Prime-Beef-Bowls.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Services-Prime-Beef-Bowls-Menu.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Horizontal-boards-Marmaris-Menu.webp\" alt=\"Poster\"><\/div>\r\n        <div class=\"gd-poster-slide\"><img decoding=\"async\" src=\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Poster-Design-Services-Pizza-Prinz-.webp\" alt=\"Poster\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"gd-text\">\r\n    <h2>Poster & Katalog Design<\/h2>\r\n    <p class=\"gd-sub\">AUFF\u00c4LLIGE POSTER F\u00dcR MAXIMALE WIRKUNG<\/p>\r\n    <p>\r\n      Setzen Sie ein starkes Statement mit professionell gestalteten Postern, die fesseln und begeistern. Ob f\u00fcr Events, Werbeaktionen oder Branding \u2013 unsere individuellen Posterdesigns im Grafikdesign \u00fcberzeugen mit eindrucksvollen Grafiken und ansprechenden Layouts, die Aufmerksamkeit erregen. Lassen Sie Synext IT Ihre Ideen mit hochwertigen, druckfertigen Designs zum Leben erwecken und einen bleibenden Eindruck hinterlassen.\r\n    <\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.gd-page{\r\n  --gd-green:#19be00;\r\n  --gd-soft:#2ecc71;\r\n  --gd-text:#ffffff;\r\n  --gd-muted:#d9d9d9;\r\n\r\n  font-family:'Poppins',Arial,sans-serif;\r\n  color:var(--gd-text);\r\n  padding:90px 18px 120px;\r\n}\r\n\r\n.gd-page *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.gd-row{\r\n  max-width:1300px;\r\n  margin:0 auto 150px;\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  align-items:center;\r\n  gap:80px;\r\n}\r\n\r\n.gd-text h2{\r\n  color:#fff;\r\n  font-size:clamp(34px,4vw,52px);\r\n  font-weight:600;\r\n  line-height:1.1;\r\n  margin:0 0 8px;\r\n  font-family: 'Roboto';\r\n}\r\n\r\n.gd-sub{\r\n  color:var(--gd-green);\r\n  font-size:19px;\r\n  font-weight:300 !important;\r\n  text-transform:uppercase;\r\n  margin:0 0 22px;\r\n  letter-spacing:.02em;\r\n  font-family: 'Poppins';\r\n}\r\n\r\n.gd-text p:not(.gd-sub){\r\n  color:var(--gd-muted);\r\n  font-size:21px;\r\n  line-height:1.8;\r\n  margin:0;\r\n  max-width:560px;\r\n  font-family: 'Roboto';\r\n}\r\n\r\n.gd-image img{\r\n  width:100%;\r\n  max-width:520px;\r\n  display:block;\r\n  margin:0 auto;\r\n  filter:drop-shadow(0 25px 45px rgba(0,0,0,.35));\r\n}\r\n\r\n.gd-collage{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:24px;\r\n  align-items:center;\r\n}\r\n\r\n.gd-collage img{\r\n  width:100%;\r\n  border-radius:10px;\r\n  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));\r\n  transition:.35s ease;\r\n}\r\n\r\n.gd-collage img:nth-child(2),\r\n.gd-collage img:nth-child(4){\r\n  transform:translateY(35px);\r\n}\r\n\r\n.gd-collage img:hover{\r\n  transform:translateY(-6px) scale(1.03);\r\n}\r\n\r\n.gd-row-logo{\r\n  position:relative;\r\n}\r\n\r\n\/* \u2500\u2500 Logo row \u2013 single clean block, no duplicates \u2500\u2500 *\/\r\n.gd-row-logo {\r\n  position: relative;\r\n  overflow: visible;        \/* must be visible or 3D gets clipped *\/\r\n  padding: 70px 0;\r\n}\r\n\r\n.gd-row-logo::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -10% 0;\r\n  background-image: url(\"https:\/\/synext-it.de\/wp-content\/uploads\/2026\/05\/Synext_IT_Favicon-1-1.webp\");\r\n  background-repeat: no-repeat;\r\n  background-position: 50% center;\r\n  background-size: 600px auto;\r\n  opacity: .22;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.gd-row-logo::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(ellipse at 72% center, rgba(25,190,0,.0), transparent 60%);\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.gd-row-logo > * {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* ONLY rule for the logo image \u2013 no second rule anywhere below *\/\r\n.gd-row-logo .gd-image img {\r\n  transform: perspective(500px) rotateY(18deg) rotateX(2deg) rotateZ(0deg);\r\n  filter: drop-shadow(-30px 50px 70px rgba(0,0,0,.85));\r\n}\r\n\r\n\r\n.gd-row-social .gd-image img{\r\n  max-width:430px;\r\n}\r\n\r\n.gd-poster-img img{\r\n  max-width:300px;\r\n}\r\n\r\n.gd-row-poster{\r\n  margin-bottom:40px;\r\n}\r\n\r\n@media(max-width:900px){\r\n  .gd-page{\r\n    padding:70px 16px 90px;\r\n  }\r\n\r\n  .gd-row{\r\n    grid-template-columns:1fr;\r\n    gap:40px;\r\n    margin-bottom:90px;\r\n    text-align:center;\r\n  }\r\n\r\n  .gd-row-logo .gd-image,\r\n  .gd-row-poster .gd-image{\r\n    order:-1;\r\n  }\r\n\r\n  .gd-text p:not(.gd-sub){\r\n    margin:0 auto;\r\n    font-size:15px;\r\n    line-height:1.75;\r\n  }\r\n\r\n  .gd-collage{\r\n    max-width:420px;\r\n    margin:0 auto;\r\n    gap:14px;\r\n  }\r\n\r\n  .gd-collage img:nth-child(2),\r\n  .gd-collage img:nth-child(4){\r\n    transform:none;\r\n  }\r\n}\r\n\r\n@media(max-width:520px){\r\n  .gd-page{\r\n    padding:50px 14px 70px;\r\n  }\r\n\r\n  .gd-row{\r\n    gap:28px;\r\n    margin-bottom:70px;\r\n  }\r\n\r\n  .gd-text h2{\r\n    font-size:30px;\r\n  }\r\n\r\n  .gd-sub{\r\n    font-size:12px;\r\n    margin-bottom:14px;\r\n  }\r\n\r\n  .gd-text p:not(.gd-sub){\r\n    font-size:14px;\r\n  }\r\n\r\n  .gd-collage{\r\n    grid-template-columns:1fr 1fr;\r\n  }\r\n\r\n  .gd-image img{\r\n    max-width:300px;\r\n  }\r\n}\r\n\r\n\r\n.gd-print-collage {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n}\r\n\r\n.gd-collage-top {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 24px;\r\n}\r\n\r\n.gd-collage-top img {\r\n  width: 100%;\r\n  border-radius: 10px;\r\n  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));\r\n  transition: .35s ease;\r\n}\r\n\r\n.gd-collage-top img:nth-child(2) {\r\n  transform: translateY(35px);\r\n}\r\n\r\n.gd-collage-top img:hover {\r\n  transform: translateY(-6px) scale(1.03);\r\n}\r\n\r\n\/* Slider *\/\r\n.gd-collage-slider {\r\n  overflow: hidden;\r\n  border-radius: 10px;\r\n  position: relative;\r\n}\r\n\r\n.gd-slider-track {\r\n  display: flex;\r\n  transition: transform 0.6s cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n.gd-slide {\r\n  min-width: 50%;\r\n}\r\n\r\n.gd-slide img {\r\n  width: 100%;\r\n  border-radius: 10px;\r\n  \/*filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));*\/\r\n  filter: none;\r\n  display: block;\r\n}\r\n\r\n.gd-slider-dots {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  margin-top: 14px;\r\n}\r\n\r\n.gd-dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,0.3);\r\n  cursor: pointer;\r\n  transition: background .3s, transform .3s;\r\n}\r\n\r\n.gd-dot.active {\r\n  background: #19be00;\r\n  transform: scale(1.3);\r\n}\r\n\r\n\/* Mobile override *\/\r\n@media(max-width: 900px) {\r\n  .gd-collage-top img:nth-child(2) {\r\n    transform: none;\r\n  }\r\n}\r\n\r\n\/* Social media \u2013 two stacked images *\/\r\n.gd-social-images {\r\n  position: relative;\r\n  height: 600px;\r\n}\r\n\r\n.gd-social-top {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 100%;\r\n  border-radius: 12px;\r\n  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));\r\n  z-index: 2;\r\n}\r\n\r\n.gd-social-bottom {\r\n    \r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  border-radius: 12px;\r\n  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));\r\n  z-index: 1;\r\n   top: 50%; \r\n\r\n}\r\n\/* Give images column more width *\/\r\n.gd-row-social {\r\n  grid-template-columns: 1fr 1.5fr;\r\n}\r\n\r\n\/* Bigger container *\/\r\n.gd-social-images {\r\n  height: 720px;\r\n}\r\n\r\n\/* Allow top image to slightly overflow for more impact *\/\r\n.gd-social-top {\r\n  width: 115%;\r\n  right: -30px;\r\n}\r\n\r\n.gd-social-bottom {\r\n  width: 105%;\r\n}\r\n\r\n\/* Remove old single-image rule *\/\r\n.gd-row-social .gd-image img {\r\n  max-width: unset;\r\n}\r\n\r\n@media(max-width: 900px) {\r\n  .gd-row-social {\r\n    grid-template-columns: 1fr; \/* reset to single column on mobile *\/\r\n  }\r\n  .gd-social-images {\r\n    order: -1;       \/* move above text *\/\r\n    height: 380px;\r\n    max-width: 100%;\r\n  }\r\n\r\n  .gd-social-top {\r\n    width: 100%;\r\n    right: 0;\r\n  }\r\n\r\n  .gd-social-bottom {\r\n     \r\n    width: 100%;\r\n    top:55%;\r\n  }\r\n\r\n  .gd-social-images {\r\n    height: 380px;\r\n    max-width: 100%;\r\n  }\r\n}\r\n\r\n@media(max-width: 520px) {\r\n  .gd-social-images {\r\n    height: 280px;\r\n  }\r\n}\r\n\r\n\/* Poster dual-slider layout *\/\r\n.gd-row-poster {\r\n  margin-bottom: 40px;\r\n  align-items: center;\r\n}\r\n\r\n.gd-poster-sliders {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 20px;\r\n}\r\n\r\n.gd-poster-slider {\r\n  overflow: hidden;\r\n  border-radius: 10px;\r\n  width: 100%;\r\n}\r\n\r\n.gd-poster-track {\r\n  display: flex;\r\n  transition: transform 0.6s cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n\/* Top slider: 2 visible *\/\r\n#poster-slider-top .gd-poster-slide {\r\n  min-width: 50%;\r\n  padding: 0 6px;\r\n}\r\n\r\n\/* Bottom slider: 3 visible *\/\r\n#poster-slider-bottom .gd-poster-slide {\r\n  min-width: 33.333%;\r\n  padding: 0 6px;\r\n}\r\n\r\n.gd-poster-slide img {\r\n  width: 100%;\r\n  border-radius: 10px;\r\n  display: block;\r\n  filter: drop-shadow(0 15px 30px rgba(0,0,0,.4));\r\n}\r\n\r\n\/* Remove old single poster image rule *\/\r\n.gd-poster-img img {\r\n  max-width: unset;\r\n}\r\n\r\n@media(max-width: 900px) {\r\n  .gd-poster-sliders {\r\n    max-width: 420px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  #poster-slider-top .gd-poster-slide {\r\n    min-width: 100%;\r\n  }\r\n\r\n  #poster-slider-bottom .gd-poster-slide {\r\n    min-width: 50%;\r\n  }\r\n}\r\n\r\n#print-slider-top .gd-poster-slide {\r\n  min-width: 50%;\r\n  padding: 0 6px;\r\n}\r\n\r\n#print-slider-top .gd-poster-slide img {\r\n  height: 350px;        \/* controls how tall\/big the images appear *\/\r\n  object-fit: cover;\r\n  object-position: center;\r\n  filter: none;\r\n}\r\n@media(max-width: 900px) {\r\n    \/* Move the whole collage block above the text *\/\r\n  .gd-print-collage {\r\n    order: -1;\r\n  }\r\n\r\n  \/* Show 1 image at a time in print top slider on mobile *\/\r\n  #print-slider-top .gd-poster-slide {\r\n    min-width: 100% !important;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* Hide the bottom slider on mobile *\/\r\n  .gd-collage-slider {\r\n    display: none;\r\n  }\r\n\r\n}\r\n@media(max-width: 900px) {\r\n  #poster-slider-bottom {\r\n    display: none;\r\n  }\r\n   \/* Hide background watermark on mobile *\/\r\n  .gd-row-logo::before {\r\n    display: none;\r\n  }\r\n\r\n  \/* Remove 3D tilt and reduce image size on mobile *\/\r\n  .gd-row-logo .gd-image img {\r\n    transform: perspective(500px) rotateX(-8deg) rotateY(1deg);\r\n    filter: drop-shadow(0 15px 30px rgba(0,0,0,.5));\r\n    max-width: 340px;\r\n  }\r\n\r\n  \/* Reduce padding on logo row *\/\r\n  .gd-row-logo {\r\n    padding: 30px 20px;\r\n  }\r\n\r\n}\r\n\r\n\/* \u2500\u2500 Tablet only: Social Media section fix \u2500\u2500 *\/\r\n@media(min-width: 521px) and (max-width: 900px) {\r\n\r\n  .gd-row-social {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .gd-social-images {\r\n    order: -1;\r\n    height: 460px;\r\n    max-width: 100%;\r\n    overflow: hidden;  \/* prevent overflow from bleeding into text *\/\r\n    \r\n  }\r\n\r\n  .gd-social-top {\r\n    width: 58%;        \/* smaller so it doesn't dominate *\/\r\n    right: 20%;\r\n    top: 0;\r\n  }\r\n\r\n  .gd-social-bottom {\r\n    width: 65%;\r\n    left: 20%;\r\n    top: 47%;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media (max-width: 520px) {\r\n  .gd-social-images {\r\n    position: static;\r\n    height: auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 16px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .gd-social-top,\r\n  .gd-social-bottom {\r\n    position: static;\r\n    width: 85%;\r\n    transform: none;\r\n    left: auto;\r\n    right: auto;\r\n    top: auto;\r\n  }\r\n}\r\n#print-slider-top .gd-poster-slide img {\r\n  height: auto;\r\n  object-fit: unset;\r\n  object-position: unset;\r\n  filter: none;\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function(){\r\n  const gdItems = document.querySelectorAll(\".gd-row, .gd-collage img\");\r\n\r\n  const gdObserver = new IntersectionObserver((entries)=>{\r\n    entries.forEach(entry=>{\r\n      if(entry.isIntersecting){\r\n        entry.target.classList.add(\"gd-visible\");\r\n      }\r\n    });\r\n  },{threshold:0.15});\r\n\r\n  gdItems.forEach(item=>{\r\n    item.classList.add(\"gd-animate\");\r\n    gdObserver.observe(item);\r\n  });\r\n\r\n  const style = document.createElement(\"style\");\r\n  style.innerHTML = `\r\n    .gd-animate{\r\n      opacity:0;\r\n      transform:translateY(35px);\r\n      transition:opacity .7s ease, transform .7s ease;\r\n    }\r\n    .gd-visible{\r\n      opacity:1!important;\r\n      transform:translateY(0)!important;\r\n    }\r\n  `;\r\n  document.head.appendChild(style);\r\n});\r\n\/\/ Slider logic\r\n\/\/ Slider logic \u2014 infinite, 1 slide at a time, 2 visible\r\n(function(){\r\n  const track = document.querySelector('.gd-slider-track');\r\n  if(!track) return;\r\n\r\n  const slides = Array.from(track.querySelectorAll('.gd-slide'));\r\n  const total = slides.length; \/\/ 3\r\n\r\n  \/\/ Clone all slides and append for seamless infinite loop\r\n  slides.forEach(slide => track.appendChild(slide.cloneNode(true)));\r\n\r\n  let current = 0;\r\n\r\n  function goTo(index, animate) {\r\n    track.style.transition = animate === false\r\n      ? 'none'\r\n      : 'transform 0.6s cubic-bezier(.4,0,.2,1)';\r\n    \/\/ Each slide is 50% wide, so move by 50% per step\r\n    track.style.transform = `translateX(-${index * 50}%)`;\r\n  }\r\n\r\n  function advance() {\r\n    current++;\r\n    goTo(current);\r\n\r\n    \/\/ Once we've scrolled through all originals, silently jump back\r\n    if(current >= total) {\r\n      setTimeout(() => {\r\n        current = 0;\r\n        goTo(0, false);\r\n      }, 650); \/\/ wait for transition to finish\r\n    }\r\n  }\r\n\r\n  goTo(0, false);\r\n  setInterval(advance, 3000);\r\n})();\r\n\/\/ Poster dual-slider logic\r\n(function(){\r\n  function initPosterSlider(sliderId, visibleCount) {\r\n    const slider = document.getElementById(sliderId);\r\n    if(!slider) return;\r\n\r\n    const track = slider.querySelector('.gd-poster-track');\r\n    const slides = Array.from(track.querySelectorAll('.gd-poster-slide'));\r\n    const total = slides.length;\r\n\r\n    slides.forEach(s => track.appendChild(s.cloneNode(true)));\r\n\r\n    let current = 0;\r\n\r\n    \/\/ Read actual rendered width instead of using fixed visibleCount\r\n    function getSlideWidthPct() {\r\n      const slide = track.querySelector('.gd-poster-slide');\r\n      return slide ? (slide.offsetWidth \/ track.offsetWidth) * 100 : (100 \/ visibleCount);\r\n    }\r\n\r\n    function goTo(index, animate) {\r\n      track.style.transition = animate === false\r\n        ? 'none'\r\n        : 'transform 0.6s cubic-bezier(.4,0,.2,1)';\r\n      track.style.transform = `translateX(-${index * getSlideWidthPct()}%)`;\r\n    }\r\n\r\n    function advance() {\r\n      current++;\r\n      goTo(current);\r\n      if(current >= total) {\r\n        setTimeout(() => { current = 0; goTo(0, false); }, 650);\r\n      }\r\n    }\r\n\r\n    goTo(0, false);\r\n    setInterval(advance, 3000);\r\n  }\r\n\r\n  initPosterSlider('poster-slider-top', 2);\r\n  initPosterSlider('poster-slider-bottom', 3);\r\n  initPosterSlider('print-slider-top', 2);\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>BRANDING &#038; CORPORATE DESIGN Designs, die f\u00fcr Ihre Marke sprechen Heben Sie sich mit starken Visuals von Synext IT ab \u2013 von Logos bis Social Media gestalten wir mit Wirkung und Identit\u00e4t. Angebot anfragen Print Design KREATIVE &#038; WIRKUNGSVOLLE MARKETINGMATERIALIEN Hinterlassen Sie einen bleibenden Eindruck mit professionell gestalteten Flyern, die perfekt zu Ihrer Marke passen. [&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-114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/114","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=114"}],"version-history":[{"count":10,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/synext-it.de\/en\/wp-json\/wp\/v2\/pages\/114\/revisions\/340"}],"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=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}