{"id":2172,"date":"2026-04-22T19:02:12","date_gmt":"2026-04-22T17:02:12","guid":{"rendered":"https:\/\/zulumaps.com\/family-home\/"},"modified":"2026-08-05T20:19:15","modified_gmt":"2026-08-05T18:19:15","slug":"family-home","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/family-home\/","title":{"rendered":"Family Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2172\" class=\"elementor elementor-2172 elementor-1351\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fed387e e-con-full e-flex e-con e-parent\" data-id=\"fed387e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4debfd7 elementor-widget elementor-widget-shortcode\" data-id=\"4debfd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n<div class=\"pme\" id=\"pme-root\">\n  <nav class=\"pme-nav\">\n    <button class=\"pme-nav-btn active\" data-panel=\"labels\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\n    <\/button>\n    <button class=\"pme-nav-btn\" data-panel=\"style\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\n    <\/button>\n    <button class=\"pme-nav-btn\" data-panel=\"size\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\n    <\/button>\n  <\/nav>\n\n  <div class=\"pme-mobnav\">\n    <button class=\"pme-mobbtn active\" data-panel=\"labels\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\n    <\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"style\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\n    <\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"size\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\n    <\/button>\n  <\/div>\n\n  <div class=\"pme-panel\">\n    \n    <div class=\"pme-section active\" id=\"sec-labels\">\n      <div class=\"pme-title\">Haus Details<\/div>\n      <div class=\"pme-desc\">Personalisiere dein Family Home Poster.<\/div>\n      \n      <span class=\"pme-lbl\">Namen<\/span>\n      <div class=\"pme-field\" id=\"names-wrap\" style=\"display:flex; flex-direction:column; gap:8px;\">\n        <input type=\"text\" id=\"inp-name-0\" placeholder=\"Name 1\" \/>\n        <input type=\"text\" id=\"inp-name-1\" placeholder=\"Name 2\" \/>\n        <input type=\"text\" id=\"inp-name-2\" placeholder=\"Name 3\" \/>\n        <input type=\"text\" id=\"inp-name-3\" placeholder=\"Name 4\" \/>\n        \n        <div id=\"extra-names-wrap\" style=\"display:none; flex-direction:column; gap:8px;\">\n          <input type=\"text\" id=\"inp-name-4\" placeholder=\"Name 5\" \/>\n          <input type=\"text\" id=\"inp-name-5\" placeholder=\"Name 6\" \/>\n          <input type=\"text\" id=\"inp-name-6\" placeholder=\"Name 7\" \/>\n          <input type=\"text\" id=\"inp-name-7\" placeholder=\"Name 8\" \/>\n        <\/div>\n        \n        <div id=\"btn-more-names\" style=\"font-size:13px; color:#1a1a1a; text-decoration:underline; cursor:pointer; margin-top:2px; font-weight:500;\">Mehr Namen<\/div>\n      <\/div>\n      \n      <span class=\"pme-lbl\">Ort<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"M\u00dcNCHEN\" placeholder=\"Stadt\"\/><\/div>\n    <\/div>\n\n    <div class=\"pme-section\" id=\"sec-style\">\n      <div class=\"pme-title\">Stil<\/div>\n      <div class=\"pme-desc\">W\u00e4hle eine Farbvariante f\u00fcr dein Poster.<\/div>\n\n      <span class=\"pme-lbl\">Design<\/span>\n      <div class=\"theme-pins\">\n        <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"transparent\" data-hs=\"#1a1a1a\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #ffffff; border-color: #e0e0e0; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\n          <span>Minimal<br>White<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-hf=\"transparent\" data-hs=\"#fcf9e5\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #e0ceb8; border-color: #e0ceb8; box-shadow: inset 0 0 0 2px #fcf9e5;\"><\/div>\n          <span>Sahara<br>Sands<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-hf=\"transparent\" data-hs=\"#f7285a\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #f7bf3d; border-color: #f7bf3d; box-shadow: inset 0 0 0 2px #f7285a;\"><\/div>\n          <span>Retro<br>Sunset<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-hf=\"transparent\" data-hs=\"#f7e946\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #42c053; border-color: #42c053; box-shadow: inset 0 0 0 2px #f7e946;\"><\/div>\n          <span>Evergreen<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-hf=\"transparent\" data-hs=\"#ffffff\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #000000; border-color: #000000; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\n          <span>Midnight<br>Express<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#fdf7ef\" data-fg=\"#cf8a7c\" data-hf=\"#c8e2d5\" data-hs=\"transparent\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #c8e2d5; border-color: #c8e2d5; box-shadow: inset 0 0 0 2px #cf8a7c;\"><\/div>\n          <span>Nautica<\/span>\n        <\/button>\n        <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"#b2b2b2\" data-hs=\"transparent\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #b2b2b2; border-color: #b2b2b2; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\n          <span>Stone<\/span>\n        <\/button>\n        <button class=\"pme-thm active\" data-bg=\"#f6eee3\" data-fg=\"#ffffff\" data-hf=\"#d6b6a0\" data-hs=\"transparent\">\n          <div class=\"pme-thm-circle\" style=\"background-color: #d6b6a0; border-color: #d6b6a0; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\n          <span>Warm<br>Sand<\/span>\n        <\/button>\n      <\/div>\n\n      <span class=\"pme-lbl\" style=\"margin-top:24px;\">Optionen<\/span>\n      <div class=\"pme-field\">\n        <label style=\"display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#1a1a1a; font-weight:500; text-transform:none;\">\n          <input type=\"checkbox\" id=\"inp-heart\" checked style=\"width:18px; height:18px; cursor:pointer; accent-color:#1a1a1a;\">\n          Herz anzeigen\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"pme-section\" id=\"sec-size\">\n      <div class=\"pme-title\">Gr\u00f6\u00dfe<\/div>\n      <div class=\"pme-desc\">W\u00e4hle Material und Gr\u00f6\u00dfe.<\/div>\n      <span class=\"pme-lbl\">Material<\/span>\n      <select id=\"sel-mat\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'Poppins',sans-serif;outline:none;background:#fafafa;margin-bottom:14px;cursor:pointer;appearance:auto;\">\n        <option value=\"poster\" selected>Poster<\/option>\n        <option value=\"framed\">Gerahmtes Poster<\/option>\n        <option value=\"canvas\">Leinwand<\/option>\n      <\/select>\n      \n      <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\n        <span class=\"pme-lbl\">Rahmenfarbe<\/span>\n        <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\n          <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\n          <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\n          <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\n        <\/div>\n      <\/div>\n\n      <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\n      <div id=\"size-dropdown\" style=\"position:relative;margin-bottom:14px;\">\n        <div id=\"size-selected\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'Poppins',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;\">\n          <span id=\"size-selected-text\"><\/span>\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 4l4 4 4-4\" stroke=\"#888\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n        <\/div>\n        <div id=\"size-options\" style=\"display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"pme-bar\">\n      <div class=\"pme-prices\">\n        <span class=\"pme-old\" id=\"p-old\"><\/span>\n        <span class=\"pme-new\" id=\"p-new\"><\/span>\n      <\/div>\n      <button class=\"pme-cart\" id=\"btn-cart\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 001.99 1.61h9.72a2 2 0 001.99-1.61L23 6H6\"\/><\/svg>\n        In den Warenkorb\n      <\/button>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"pme-canvas\" id=\"pme-canvas\">\n    <div class=\"pme-outer\" id=\"pme-outer\">\n        \n      <div class=\"pme-poster family-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\n        <div class=\"pme-poster-inner home-wrap\" id=\"home-wrap\">\n            <svg id=\"homePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n                <path d=\"M 70 435 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 435 Z\" fill=\"var(--house-fill)\" \/>\n\n                <path id=\"svg-heart\" d=\"M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z\" fill=\"#ff0000\" \/>\n                \n                <path d=\"M 70 190 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 420\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                \n                <path d=\"M 70 360 L 70 435 L 180 435\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                \n                <g id=\"svg-names\" font-family=\"'Montserrat', sans-serif\" font-weight=\"300\" fill=\"currentColor\"><\/g>\n                \n                <text id=\"svg-loc\" x=\"282\" y=\"425\" text-anchor=\"end\" font-family=\"'Montserrat', sans-serif\" font-weight=\"400\" fill=\"currentColor\">M\u00dcNCHEN<\/text>\n            <\/svg>\n        <\/div>\n      <\/div>\n      \n      <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\n      <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n\nvar SIZES = window.UWA_GLOBAL_SIZES;\n\nvar S = {\n  names: ['ANDREA', 'THOMAS', 'HANNAH', 'DAVID', '', '', '', ''],\n  loc: 'M\u00dcNCHEN',\n  showHeart: true,\n  mat: 'poster', \n  sizeIdx: 1, \n  styleIndex: 7, \n  frame: 'black'\n};\n\nfunction updateURL() {\n  var p = new URLSearchParams();\n  p.set('mat', S.mat);\n  p.set('size', S.sizeIdx);\n  p.set('style', S.styleIndex);\n  if (S.mat === 'framed') p.set('frame', S.frame);\n  p.set('names', S.names.join('|'));\n  p.set('loc', S.loc);\n  p.set('heart', S.showHeart);\n  history.replaceState(null, '', '?' + p.toString());\n}\n\nfunction renderPoster() {\n  var heart = document.getElementById('svg-heart');\n  if (heart) heart.style.display = S.showHeart ? 'block' : 'none';\n\n  var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\n  var svgNames = document.getElementById('svg-names');\n  if (svgNames) {\n      svgNames.innerHTML = '';\n      var N = validNames.length;\n      if (N > 0) {\n          var fs = 28; \n          var lh = 38; \n          var maxH = 160; \n          \n          var textHeight = (N - 1) * lh + fs;\n\n          if (textHeight > maxH) {\n              var scaleH = maxH \/ textHeight;\n              fs = fs * scaleH;\n              lh = lh * scaleH;\n          }\n\n          var testCanvas = document.createElement('canvas');\n          var testCtx = testCanvas.getContext('2d');\n          testCtx.font = '300 ' + fs + 'px \"Montserrat\", sans-serif';\n          var maxNameW = 0;\n          for (var i = 0; i < N; i++) {\n              var nw = testCtx.measureText(validNames[i].toUpperCase()).width;\n              if (nw > maxNameW) maxNameW = nw;\n          }\n          \n          var maxAllowedW = 190; \n          if (maxNameW > maxAllowedW) {\n              var scaleW = maxAllowedW \/ maxNameW;\n              fs = fs * scaleW;\n              lh = lh * scaleW;\n          }\n\n          var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\n\n          for(var i=0; i<N; i++) {\n              var textEl = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n              textEl.setAttribute('x', '85'); \n              textEl.setAttribute('y', startY + (i * lh));\n              textEl.setAttribute('font-size', fs);\n              textEl.textContent = validNames[i].toUpperCase();\n              svgNames.appendChild(textEl);\n          }\n      }\n  }\n\n  var svgLoc = document.getElementById('svg-loc');\n  if (svgLoc) {\n      var locTxt = S.loc.toUpperCase();\n      svgLoc.textContent = locTxt;\n\n      var tCtx = document.createElement('canvas').getContext('2d');\n      tCtx.font = '400 16px \"Montserrat\", sans-serif';\n      if (tCtx.letterSpacing !== undefined) { tCtx.letterSpacing = \"1.28px\"; } \n\n      var w5 = tCtx.measureText(\"PARIS\").width || 45;\n      var targetW = 102; \n      var maxFs = (targetW \/ w5) * 16;\n\n      var wReal = tCtx.measureText(locTxt).width || 45;\n      var desiredFs = (targetW \/ wReal) * 16;\n\n      var finalFs = Math.min(desiredFs, maxFs);\n      svgLoc.setAttribute('font-size', finalFs);\n  }\n}\n\nfunction initEvents() {\n\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn) {\n  btn.addEventListener('click', function() {\n    var panel = this.getAttribute('data-panel');\n    document.querySelectorAll('.pme-section').forEach(function(s) { s.classList.remove('active'); });\n    document.querySelectorAll('.pme-nav-btn').forEach(function(b) { b.classList.remove('active'); });\n    document.querySelectorAll('.pme-mobbtn').forEach(function(b) { b.classList.remove('active'); });\n    document.getElementById('sec-' + panel).classList.add('active');\n    document.querySelectorAll('[data-panel=\"' + panel + '\"]').forEach(function(b) { b.classList.add('active'); });\n  });\n});\n\ndocument.querySelectorAll('.pme-thm').forEach(function(pin, index) {\n  pin.addEventListener('click', function() {\n    document.querySelectorAll('.pme-thm').forEach(function(p) { p.classList.remove('active'); });\n    this.classList.add('active');\n    var wrap = document.getElementById('home-wrap');\n    if(wrap) {\n        wrap.style.setProperty('--tag-bg', this.getAttribute('data-bg'));\n        wrap.style.setProperty('--tag-fg', this.getAttribute('data-fg'));\n        wrap.style.setProperty('--house-fill', this.getAttribute('data-hf'));\n        wrap.style.setProperty('--house-stroke', this.getAttribute('data-hs'));\n    }\n    S.styleIndex = index;\n    updateURL();\n  });\n});\n\nfor (let i = 0; i < 8; i++) {\n  let inp = document.getElementById('inp-name-' + i);\n  if (inp) {\n    inp.addEventListener('input', function() {\n      S.names[i] = this.value;\n      renderPoster();\n      updateURL();\n    });\n  }\n}\n\ndocument.getElementById('btn-more-names').addEventListener('click', function() {\n  var extraWrap = document.getElementById('extra-names-wrap');\n  if (extraWrap.style.display === 'none') {\n    extraWrap.style.display = 'flex';\n    this.textContent = 'Weniger Namen';\n  } else {\n    extraWrap.style.display = 'none';\n    this.textContent = 'Mehr Namen';\n  }\n});\n\ndocument.getElementById('inp-loc').addEventListener('input', function() {\n  S.loc = this.value;\n  renderPoster();\n  updateURL();\n});\n\ndocument.getElementById('inp-heart').addEventListener('change', function() {\n  S.showHeart = this.checked;\n  renderPoster();\n  updateURL();\n});\n\ndocument.getElementById('sel-mat').addEventListener('change', function() {\n  S.mat = this.value;\n  var sizes = SIZES[S.mat] || [];\n  S.sizeIdx = 0;\n  for (var i = 0; i < sizes.length; i++) {\n    if (sizes[i].l.includes('30x40cm')) {\n      S.sizeIdx = i;\n      break;\n    }\n  }\n  renderSizes();\n  updateURL();\n});\n\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\n  btn.addEventListener('click', function() {\n    document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\n    this.classList.add('active');\n    S.frame = this.getAttribute('data-frame');\n    updateDims();\n    updateURL();\n  });\n});\n\nfunction renderSizes() {\n  var sizes = SIZES[S.mat] || [];\n  var opts = document.getElementById('size-options');\n  var selText = document.getElementById('size-selected-text');\n  var selDiv = document.getElementById('size-selected');\n  var optsDiv = document.getElementById('size-options');\n  \n  var frameWrap = document.getElementById('frame-opt-wrap');\n  if (frameWrap) {\n    frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\n  }\n\n  function buildLabel(s) {\n    return s.l + '\\u00a0\\u00a0<s style=\"color:#999\">' + s.orig.toFixed(2) + '\\u00a0\\u20ac<\/s>\\u00a0\\u00a0<span style=\"color:#e00\">' + s.p.toFixed(2) + '\\u00a0\\u20ac<\/span>';\n  }\n\n  function selectIdx(i) {\n    S.sizeIdx = i;\n    selText.innerHTML = buildLabel(sizes[i]);\n    optsDiv.style.display = 'none';\n    updatePrice(); updateDims(); updateURL();\n  }\n\n  opts.innerHTML = sizes.map(function(s, i) {\n    return '<div class=\"size-opt\" data-idx=\"' + i + '\" style=\"padding:10px 12px;font-size:14px;font-family:\\'Poppins\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">' + buildLabel(s) + '<\/div>';\n  }).join('');\n\n  opts.querySelectorAll('.size-opt').forEach(function(el) {\n    el.addEventListener('mouseenter', function() { this.style.background='#f5f5f5'; });\n    el.addEventListener('mouseleave', function() { this.style.background=''; });\n    el.addEventListener('click', function() { selectIdx(parseInt(this.getAttribute('data-idx'))); });\n  });\n\n  selDiv.onclick = function(e) {\n    e.stopPropagation();\n    optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\n  };\n\n  document.addEventListener('click', function() { optsDiv.style.display = 'none'; });\n  selectIdx(S.sizeIdx < sizes.length ? S.sizeIdx : 0);\n}\n\nfunction updatePrice() {\n  var s = (SIZES[S.mat] || [])[S.sizeIdx];\n  if (!s) return;\n  document.getElementById('p-old').textContent = s.orig.toFixed(2).replace('.', ',') + ' EUR';\n  document.getElementById('p-new').textContent = s.p.toFixed(2).replace('.', ',') + ' EUR';\n}\n\nfunction updateDims() {\n  var s = (SIZES[S.mat] || [])[S.sizeIdx];\n  if (!s) return;\n  document.getElementById('dim-w').textContent = s.w + ' cm';\n  document.getElementById('dim-h').textContent = s.h + ' cm';\n  var BASE = 504;\n  var pw = s.w, ph = s.h;\n  var longer = Math.max(pw, ph), shorter = Math.min(pw, ph);\n  var baseW = Math.round(BASE * shorter \/ longer);\n  var baseH = BASE;\n  var poster = document.getElementById('pme-poster');\n\n  if (S.mat === 'framed') {\n    var thicknessMm = s.l.includes('13x18cm') ? 10 : 14;\n    var framePx = thicknessMm * (BASE \/ (longer * 10));\n\n    poster.style.borderWidth = framePx + 'px';\n    poster.style.borderStyle = 'solid';\n\n    if (S.frame === 'wood') {\n      poster.style.borderColor = '#d7c5b3';\n      poster.style.borderImage = \"url(\\\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.4' numOctaves='2' result='noise'\/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0 0 0 0.15 0' in='noise'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' fill='%23d7c5b3'\/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\\\") 10 stretch\";\n    } else if (S.frame === 'white') {\n      poster.style.borderImage = \"\";\n      poster.style.borderColor = '#ffffff';\n    } else { \n      poster.style.borderImage = \"\";\n      poster.style.borderColor = '#1a1a1a';\n    }\n    \n    poster.style.width = (baseW - 2 + framePx * 2) + 'px';\n    poster.style.height = (baseH - 2 + framePx * 2) + 'px';\n    poster.classList.add('is-framed');\n  } else {\n    poster.style.border = '';\n    poster.style.borderImage = '';\n    poster.style.width = baseW + 'px';\n    poster.style.height = baseH + 'px';\n    poster.classList.remove('is-framed');\n  }\n\n  setTimeout(function(){ renderPoster(); fitPoster(); }, 60);\n}\n\ndocument.getElementById('btn-cart').addEventListener('click', function() {\n  var btn = this;\n  var originalHTML = btn.innerHTML;\n  btn.innerHTML = 'L\u00e4dt...';\n  btn.style.pointerEvents = 'none';\n\n  var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\n\n  var cartData = {\n    action:            'uwa_add_to_cart',\n    product_id:        '1529', \n    poster_title:      'Family Home',\n    poster_subtitle:   S.loc,\n    poster_names:      S.names.join(','),\n    poster_heart:      S.showHeart ? 'Yes' : 'No',\n    poster_lat:        '',\n    poster_lng:        '',\n    poster_zoom:       '',\n    poster_shape:      '',\n    poster_zodiac:     '',\n    poster_coordinates:'',\n    poster_style:      S.styleIndex,\n    poster_material:   S.mat,\n    poster_frame:      (S.mat === 'framed') ? S.frame : '',\n    poster_size:       s.l || '',\n    poster_orientation: 'portrait',\n    poster_price:      s.p || '',\n    poster_original_price: s.orig || '',\n    poster_url: window.location.href\n  };\n\n  var wrap = document.getElementById('home-wrap');\n  var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-bg').trim() : '#ffffff';\n  var fg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-fg').trim() : '#1a1a1a';\n  var hf = wrap ? getComputedStyle(wrap).getPropertyValue('--house-fill').trim() : 'transparent';\n  var hs = wrap ? getComputedStyle(wrap).getPropertyValue('--house-stroke').trim() : '#1a1a1a';\n\n  var W = 360, H = 504;\n  var pad = 14; \n  var innerW = W - pad * 2;\n  var innerH = H - pad * 2;\n\n  var cnv = document.createElement('canvas');\n  cnv.width = W; cnv.height = H;\n  var ctx = cnv.getContext('2d');\n\n  ctx.fillStyle = '#ffffff';\n  ctx.fillRect(0, 0, W, H);\n\n  ctx.fillStyle = bg;\n  ctx.fillRect(pad, pad, innerW, innerH);\n\n  var scale = Math.min(innerW \/ 360, innerH \/ 504);\n  var drawW = 360 * scale;\n  var drawH = 504 * scale;\n  var offsetX = pad + (innerW - drawW) \/ 2;\n  var offsetY = pad + (innerH - drawH) \/ 2;\n\n  ctx.save();\n  ctx.translate(offsetX, offsetY);\n  ctx.scale(scale, scale);\n\n  if (hf !== 'transparent' && hf !== 'rgba(0, 0, 0, 0)') {\n      ctx.fillStyle = hf;\n      ctx.beginPath();\n      ctx.moveTo(70, 435); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\n      ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\n      ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 435);\n      ctx.closePath();\n      ctx.fill();\n  }\n\n  if (hs !== 'transparent' && hs !== 'rgba(0, 0, 0, 0)') {\n      ctx.strokeStyle = hs;\n      ctx.lineWidth = 2.5;\n      ctx.lineCap = 'round';\n      ctx.lineJoin = 'round';\n      \n      ctx.beginPath();\n      ctx.moveTo(70, 190); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\n      ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\n      ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 420);\n      ctx.stroke();\n\n      ctx.beginPath();\n      ctx.moveTo(70, 360); ctx.lineTo(70, 435); ctx.lineTo(180, 435);\n      ctx.stroke();\n  }\n\n  if (S.showHeart) {\n      var heartPath = new Path2D('M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z');\n      ctx.fillStyle = '#ff0000';\n      ctx.fill(heartPath);\n  }\n\n  ctx.fillStyle = fg;\n  ctx.textAlign = 'left';\n  ctx.textBaseline = 'alphabetic';\n  \n  var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\n  var N = validNames.length;\n  if (N > 0) {\n      var fs = 28;\n      var lh = 38;\n      var maxH = 160;\n      var textHeight = (N - 1) * lh + fs;\n\n      if (textHeight > maxH) {\n          var scaleNamesH = maxH \/ textHeight;\n          fs = fs * scaleNamesH;\n          lh = lh * scaleNamesH;\n      }\n\n      ctx.font = '300 ' + fs + 'px \"Montserrat\", sans-serif';\n      var maxNameW = 0;\n      for (var i = 0; i < N; i++) {\n          var nw = ctx.measureText(validNames[i].toUpperCase()).width;\n          if (nw > maxNameW) maxNameW = nw;\n      }\n      var maxAllowedW = 190;\n      if (maxNameW > maxAllowedW) {\n          var scaleNamesW = maxAllowedW \/ maxNameW;\n          fs = fs * scaleNamesW;\n          lh = lh * scaleNamesW;\n      }\n\n      var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\n      ctx.font = '300 ' + fs + 'px \"Montserrat\", sans-serif';\n\n      for(var i=0; i<N; i++) {\n          ctx.fillText(validNames[i].toUpperCase(), 85, startY + (i * lh));\n      }\n  }\n\n  var locTxt = S.loc.toUpperCase();\n  var targetW = 102;\n  var testFs = 16;\n  \n  ctx.font = '400 ' + testFs + 'px \"Montserrat\", sans-serif';\n  if (ctx.letterSpacing !== undefined) { ctx.letterSpacing = \"1.28px\"; }\n  \n  var w5 = ctx.measureText(\"PARIS\").width || 45;\n  var maxFs = (targetW \/ w5) * testFs;\n  \n  var wReal = ctx.measureText(locTxt).width || 45;\n  var desiredFs = (targetW \/ wReal) * testFs;\n  \n  var finalFs = Math.min(desiredFs, maxFs);\n  \n  ctx.font = '400 ' + finalFs + 'px \"Montserrat\", sans-serif';\n  if (ctx.letterSpacing !== undefined) { ctx.letterSpacing = (finalFs * 0.08) + \"px\"; }\n  ctx.textAlign = 'right';\n  ctx.fillText(locTxt, 282, 425);\n\n  ctx.restore(); \n\n  cartData.poster_thumbnail = cnv.toDataURL('image\/jpeg', 0.92) || '';\n\n  var body = Object.keys(cartData).map(function(k) {\n    return encodeURIComponent(k) + '=' + encodeURIComponent(cartData[k]);\n  }).join('&');\n\n  fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php', {\n    method: 'POST',\n    headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\n    body: body\n  }).then(function(r) { return r.json(); })\n  .then(function(res) {\n    if (res.success) { \n        window.location.href = 'https:\/\/zulumaps.com\/cart\/'; \n    } else {\n        console.error(\"Cart Error:\", res); \n        alert(\"Fehler beim Hinzuf\u00fcgen zum Warenkorb.\");\n        btn.innerHTML = originalHTML;\n        btn.style.pointerEvents = 'auto';\n    }\n  }).catch(function(err) {\n    console.error(\"Fetch Error:\", err);\n    alert(\"Es gab einen Verbindungsfehler.\");\n    btn.innerHTML = originalHTML;\n    btn.style.pointerEvents = 'auto';\n  });\n});\n\nfunction fitPoster() {\n  var canvas = document.getElementById('pme-canvas');\n  var outer = document.getElementById('pme-outer');\n  var poster = document.getElementById('pme-poster');\n  if (!canvas || !poster.offsetWidth) return;\n  var isMob = window.innerWidth <= 768;\n  \n  var aH = canvas.clientHeight - (isMob ? 50 : 60);\n  var aW = canvas.clientWidth - (isMob ? 50 : 80);\n  var scale = Math.min(aH \/ poster.offsetHeight, aW \/ poster.offsetWidth, isMob ? 2.5 : 1.4);\n  outer.style.transform = 'scale(' + scale + ')';\n  outer.style.transformOrigin = 'center center';\n}\n\nfunction setHeight() {\n  var el = document.getElementById('pme-root');\n  if (!el) return;\n  var isMob = window.innerWidth <= 768;\n  if (isMob) {\n    el.style.height = 'auto'; \n    var panel = document.querySelector('.pme-panel');\n    var nav = document.querySelector('.pme-nav');\n    var canvas = document.getElementById('pme-canvas');\n    if (panel) panel.style.height = '';\n    if (nav) nav.style.height = '';\n    if (canvas) canvas.style.height = '';\n  } else {\n    var r = el.getBoundingClientRect();\n    var h = Math.max(window.innerHeight - r.top, 500);\n    el.style.height = h + 'px';\n    var panel = document.querySelector('.pme-panel');\n    var nav = document.querySelector('.pme-nav');\n    var canvas = document.getElementById('pme-canvas');\n    if (panel) panel.style.height = h + 'px';\n    if (nav) nav.style.height = h + 'px';\n    if (canvas) canvas.style.height = h + 'px';\n  }\n  setTimeout(fitPoster, 100);\n}\n\ndocument.fonts.ready.then(function() { renderPoster(); });\n\nwindow.addEventListener('load', setHeight);\nwindow.addEventListener('resize', setHeight);\nsetTimeout(setHeight, 300);\n\nvar p = new URLSearchParams(window.location.search);\nif (p.has('mat'))   S.mat = p.get('mat');\nif (p.has('size'))  S.sizeIdx = parseInt(p.get('size')) || 0;\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 7;\nif (p.has('frame')) S.frame = p.get('frame');\nif (p.has('loc'))   S.loc = p.get('loc');\nif (p.has('heart')) S.showHeart = p.get('heart') === 'true';\n\nif (p.has('names')) {\n    var nms = p.get('names').split('|');\n    for (var i = 0; i < 8; i++) {\n        S.names[i] = nms[i] || '';\n    }\n}\n\nvar ms = document.getElementById('sel-mat');\nif (ms) ms.value = S.mat;\n\nfor (var i = 0; i < 8; i++) {\n    var inp = document.getElementById('inp-name-' + i);\n    if (inp) inp.value = S.names[i];\n}\n\ndocument.getElementById('inp-loc').value = S.loc;\ndocument.getElementById('inp-heart').checked = S.showHeart;\n\nrenderPoster();\n\nvar pins = document.querySelectorAll('.pme-thm');\nif (pins.length > S.styleIndex) {\n  var activePin = pins[S.styleIndex];\n  pins.forEach(function(p) { p.classList.remove('active'); });\n  activePin.classList.add('active');\n  var wrap = document.getElementById('home-wrap');\n  if (wrap) {\n      wrap.style.setProperty('--tag-bg', activePin.getAttribute('data-bg'));\n      wrap.style.setProperty('--tag-fg', activePin.getAttribute('data-fg'));\n      wrap.style.setProperty('--house-fill', activePin.getAttribute('data-hf'));\n      wrap.style.setProperty('--house-stroke', activePin.getAttribute('data-hs'));\n  }\n}\n\nif (S.frame) {\n  document.querySelectorAll('.pme-frame').forEach(function(btn) {\n    btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\n  });\n}\nif (S.mat === 'framed') {\n  document.getElementById('pme-poster').classList.add('is-framed');\n}\n\nrenderSizes();\n\n} \/\/ end initEvents\n\ninitEvents();\n\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":10,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions"}],"predecessor-version":[{"id":3056,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions\/3056"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}