{"id":2168,"date":"2026-04-20T17:45:32","date_gmt":"2026-04-20T15:45:32","guid":{"rendered":"https:\/\/zulumaps.com\/sternzeichen\/"},"modified":"2026-08-05T20:12:00","modified_gmt":"2026-08-05T18:12:00","slug":"sternzeichen","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/sternzeichen\/","title":{"rendered":"Sternzeichen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2168\" class=\"elementor elementor-2168 elementor-898\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c12dd84 e-con-full e-flex e-con e-parent\" data-id=\"c12dd84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27482f3 elementor-widget elementor-widget-shortcode\" data-id=\"27482f3\" 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=\"zodiac\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\/><\/svg>Zeichen\n    <\/button>\n    <button class=\"pme-nav-btn\" 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=\"zodiac\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\/><\/svg>Zeichen<\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"labels\"><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<\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"style\"><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<\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"size\"><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<\/button>\n  <\/div>\n\n  <div class=\"pme-panel\">\n    \n    <div class=\"pme-section active\" id=\"sec-zodiac\">\n      <div class=\"pme-title\">Sternzeichen<\/div>\n      <div class=\"pme-desc\">Gib dein Geburtsdatum ein, um dein Sternzeichen zu finden.<\/div>\n      \n      <span class=\"pme-lbl\">Geburtsdatum<\/span>\n      <div class=\"pme-field\"><input type=\"date\" id=\"inp-bday\" \/><\/div>\n\n      <span class=\"pme-lbl\">Sternzeichen<\/span>\n      <div id=\"zodiac-dropdown\">\n        <div class=\"dd-selected\" id=\"zodiac-selected\">\n          <span id=\"zodiac-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 class=\"dd-options\" id=\"zodiac-options\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"pme-section\" id=\"sec-labels\">\n      <div class=\"pme-title\">Texte<\/div>\n      <div class=\"pme-desc\">Passe den Text auf deinem Poster an.<\/div>\n      <span class=\"pme-lbl\">\u00dcberschrift<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-h\" value=\"WIDDER\"\/><\/div>\n      <span class=\"pme-lbl\">Eigenschaften<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-t\" value=\"DURCHSETZUNGSF\u00c4HIG - ENERGISCH - IMPULSIV\"\/><\/div>\n      <span class=\"pme-lbl\">Zeitraum<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-d\" value=\"21. M\u00c4RZ - 20. APRIL\"\/><\/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 ein Farbdesign f\u00fcr dein Poster.<\/div>\n      <span class=\"pme-lbl\">Design<\/span>\n      <div id=\"theme-pins\" class=\"theme-pins\"><\/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      <div id=\"mat-dropdown\">\n        <div class=\"dd-selected\" id=\"mat-selected\"><span id=\"mat-selected-text\">Poster<\/span><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><\/div>\n        <div class=\"dd-options\" id=\"mat-options\"><\/div>\n      <\/div>\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\">\n        <div class=\"dd-selected\" id=\"size-selected\"><span id=\"size-selected-text\">30x40cm<\/span><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><\/div>\n        <div class=\"dd-options\" id=\"size-options\"><\/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  <\/div>\n\n  <div class=\"pme-canvas\" id=\"pme-canvas\">\n    <div class=\"pme-outer\" id=\"pme-outer\">\n      <div class=\"pme-poster zodiac-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\n        <div class=\"pme-poster-inner\" id=\"pme-poster-inner\">\n          <div id=\"zodiac-wrap\">\n            <img decoding=\"async\" id=\"zodiac-img\" src=\"\" alt=\"Zodiac Poster\" \/>\n          <\/div>\n          \n          <div class=\"pme-footer\" id=\"pme-footer\">\n            <div class=\"pme-h\" id=\"out-h\">WIDDER<\/div>\n            <div class=\"pme-tg\" id=\"out-t\">DURCHSETZUNGSF\u00c4HIG - ENERGISCH - IMPULSIV<\/div>\n            <div class=\"pme-dt\" id=\"out-d\">21. M\u00c4RZ - 20. APRIL<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\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 THEMES = [\n  { id:'Standard', name:'Standard', posterBg:'#ffffff', textCol:'#1a1a1a' },\n  { id:'Sand',     name:'Sand',     posterBg:'#FCF9E5', textCol:'#1a1a1a' },\n  { id:'Night',    name:'Night',    posterBg:'#14181f', textCol:'#ffffff' },\n  { id:'Dark',     name:'Dark',     posterBg:'#1a1a1a', textCol:'#ffffff' },\n  { id:'Cloud',    name:'Cloud',    posterBg:'#a3b1b5', textCol:'#ffffff' },\n  { id:'Modern',   name:'Modern',   posterBg:'#ffffff', textCol:'#1a1a1a' }\n];\n\nvar ZODIACS = [\n  { id:'aries',        icon:'\u2648\\uFE0E', title:'Aries',       name:'WIDDER',       dates:'21. M\u00c4RZ - 20. APRIL', traits:'DURCHSETZUNGSF\u00c4HIG - ENERGISCH - IMPULSIV' },\n  { id:'taurus',       icon:'\u2649\\uFE0E', title:'Taurus',      name:'STIER',        dates:'21. APRIL - 21. MAI',  traits:'GEDULDIG - SINNLICH - ZUVERL\u00c4SSIG' },\n  { id:'gemini',       icon:'\u264a\\uFE0E', title:'Gemini',      name:'ZWILLINGE',    dates:'22. MAI - 21. JUNI',   traits:'ANPASSUNGSF\u00c4HIG - KONTAKTFREUDIG - INTELLIGENT' },\n  { id:'cancer',       icon:'\u264b\\uFE0E', title:'Cancer',      name:'KREBS',        dates:'22. JUNI - 22. JULI',  traits:'EMOTIONAL - F\u00dcRSORGLICH - INTUITIV' },\n  { id:'leo',          icon:'\u264c\\uFE0E', title:'Leo',         name:'L\u00d6WE',         dates:'23. JULI - 22. AUGUST', traits:'CHARISMATISCH - SELBSTBEWUSST - GROSSZ\u00dcGIG' },\n  { id:'virgo',        icon:'\u264d\\uFE0E', title:'Virgo',       name:'JUNGFRAU',     dates:'23. AUGUST - 22. SEPTEMBER', traits:'ANALYTISCH - ORGANISIERT - BESCHEIDEN' },\n  { id:'libra',        icon:'\u264e\\uFE0E', title:'Libra',       name:'WAAGE',        dates:'23. SEPTEMBER - 23. OKTOBER', traits:'HARMONISCH - DIPLOMATISCH - \u00c4STHETISCH' },\n  { id:'scorpio',      icon:'\u264f\\uFE0E', title:'Scorpio',     name:'SKORPION',     dates:'24. OKTOBER - 22. NOVEMBER', traits:'LEIDENSCHAFTLICH - TIEFGR\u00dcNDIG - ENERGISCH' },\n  { id:'sagittarius',  icon:'\u2650\\uFE0E', title:'Sagittarius', name:'SCH\u00dcTZE',      dates:'23. NOVEMBER - 21. DEZEMBER', traits:'ABENTEUERLUSTIG - OPTIMISTISCH - LUSTIG' },\n  { id:'capricorn',    icon:'\u2651\\uFE0E', title:'Capricorn',   name:'STEINBOCK',    dates:'22. DEZEMBER - 20. JANUAR', traits:'EHRGEIZIG - VERANTWORTUNGSBEWUSST - DISZIPLINIERT' },\n  { id:'aquarius',     icon:'\u2652\\uFE0E', title:'Aquarius',    name:'WASSERMANN',   dates:'21. JANUAR - 19. FEBRUAR', traits:'UNKONVENTIONELL - INTELLEKTUELL - HUMANIT\u00c4R' },\n  { id:'pisces',       icon:'\u2653\\uFE0E', title:'Pisces',      name:'FISCHE',       dates:'20. FEBRUAR - 20. M\u00c4RZ', traits:'EMPATHISCH - VERTR\u00c4UMT - MITGEF\u00dcHLEND' }\n];\n\nvar BASE_URL = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/';\nZODIACS.forEach(function(z) {\n    z.images = {};\n    THEMES.forEach(function(t) {\n        z.images[t.id] = BASE_URL + z.title + '-' + t.id + '.png';\n    });\n});\n\nvar SIZES = window.UWA_GLOBAL_SIZES;\nvar MATS = ['poster','framed','canvas'];\nvar MAT_LABELS = {poster:'Poster',framed:'Gerahmtes Poster',canvas:'Leinwand'};\n\nvar S = {\n  zodiac: 'aries', mat: 'poster', sizeIdx: 1, themeId: 'Night', frame: 'black'\n};\n\nfunction getTheme(){ return THEMES.find(function(t){ return t.id===S.themeId; })||THEMES[0]; }\nfunction getZodiac(){ return ZODIACS.find(function(z){ return z.id===S.zodiac; })||ZODIACS[0]; }\n\n(function(){\n  var p = new URLSearchParams(window.location.search);\n  if(p.get('zodiac')) S.zodiac = p.get('zodiac');\n  if(p.get('mat')) S.mat = p.get('mat');\n  if(p.get('size')) S.sizeIdx = parseInt(p.get('size'));\n  if(p.get('theme')) S.themeId = p.get('theme');\n  if(p.get('frame')) S.frame = p.get('frame');\n  if(p.get('h')) document.getElementById('inp-h').value=decodeURIComponent(p.get('h'));\n  if(p.get('d')) document.getElementById('inp-d').value=decodeURIComponent(p.get('d'));\n  if(p.get('t')) document.getElementById('inp-t').value=decodeURIComponent(p.get('t'));\n})();\n\nfunction updateURL(){\n  var p = new URLSearchParams();\n  p.set('zodiac',S.zodiac); p.set('mat',S.mat); p.set('size',S.sizeIdx); p.set('theme',S.themeId);\n  if(S.mat === 'framed') p.set('frame', S.frame);\n  p.set('h',encodeURIComponent(document.getElementById('inp-h').value));\n  p.set('d',encodeURIComponent(document.getElementById('inp-d').value));\n  p.set('t',encodeURIComponent(document.getElementById('inp-t').value));\n  history.replaceState(null,'','?'+p.toString());\n}\n\nfunction fitText() {\n  var hOut = document.getElementById('out-h');\n  var dOut = document.getElementById('out-d');\n  var tOut = document.getElementById('out-t');\n  var footer = document.querySelector('.pme-footer');\n  if (!footer || !hOut || !dOut || !tOut) return;\n  \n  hOut.style.fontSize = ''; dOut.style.fontSize = ''; tOut.style.fontSize = '';\n  \n  var maxWidth = footer.clientWidth - 24; \n  if (maxWidth <= 0) return;\n  \n  [hOut, dOut, tOut].forEach(function(el) {\n    if (el.scrollWidth > maxWidth) {\n      var currentSize = parseFloat(window.getComputedStyle(el).fontSize);\n      el.style.fontSize = ((currentSize * maxWidth \/ el.scrollWidth) * 0.95) + 'px';\n    }\n  });\n}\n\nfunction updateImageDisplay(){\n  var z = getZodiac();\n  var imgEl = document.getElementById('zodiac-img');\n  var targetSrc = z.images[S.themeId] || z.images['Standard'] || '';\n  \n  if(targetSrc) {\n      imgEl.src = targetSrc;\n      imgEl.style.display = 'block';\n  } else {\n      imgEl.style.display = 'none'; \n  }\n}\n\nfunction updatePosterBg(){\n  var t = getTheme();\n  document.getElementById('pme-poster-inner').style.backgroundColor = t.posterBg;\n  ['out-h','out-d','out-t'].forEach(function(id){\n    var el = document.getElementById(id);\n    if(el) el.style.color = t.textCol;\n  });\n  updateImageDisplay();\n}\n\nfunction updateText(){\n  document.getElementById('out-h').textContent = document.getElementById('inp-h').value.toUpperCase();\n  document.getElementById('out-t').textContent = document.getElementById('inp-t').value.toUpperCase();\n  document.getElementById('out-d').textContent = document.getElementById('inp-d').value.toUpperCase();\n  fitText();\n  updateURL();\n}\n\nfunction getZodiacFromDate(dateString) {\n  if (!dateString) return 'aries';\n  var d = new Date(dateString);\n  if (isNaN(d)) return 'aries';\n  \n  var m = d.getMonth() + 1;\n  var day = d.getDate();\n\n  if ((m === 3 && day >= 21) || (m === 4 && day <= 20)) return 'aries';\n  if ((m === 4 && day >= 21) || (m === 5 && day <= 21)) return 'taurus';\n  if ((m === 5 && day >= 22) || (m === 6 && day <= 21)) return 'gemini';\n  if ((m === 6 && day >= 22) || (m === 7 && day <= 22)) return 'cancer';\n  if ((m === 7 && day >= 23) || (m === 8 && day <= 22)) return 'leo';\n  if ((m === 8 && day >= 23) || (m === 9 && day <= 22)) return 'virgo';\n  if ((m === 9 && day >= 23) || (m === 10 && day <= 23)) return 'libra';\n  if ((m === 10 && day >= 24) || (m === 11 && day <= 22)) return 'scorpio';\n  if ((m === 11 && day >= 23) || (m === 12 && day <= 20)) return 'sagittarius';\n  if ((m === 12 && day >= 21) || (m === 1 && day <= 19)) return 'capricorn';\n  if ((m === 1 && day >= 20) || (m === 2 && day <= 18)) return 'aquarius';\n  if ((m === 2 && day >= 19) || (m === 3 && day <= 20)) return 'pisces';\n  return 'aries';\n}\n\nfunction renderZodiacDropdown(){\n  var optsDiv = document.getElementById('zodiac-options');\n  var selText = document.getElementById('zodiac-selected-text');\n  var selDiv  = document.getElementById('zodiac-selected');\n\n  optsDiv.innerHTML = ZODIACS.map(function(z) {\n    return '<div class=\"size-opt\" data-zodiac=\"'+z.id+'\" style=\"display:flex; justify-content:space-between; align-items:center;\">' +\n           '<span><span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name + '<\/span>' +\n           '<span style=\"color:#999; font-size:11px;\">' + z.dates + '<\/span>' +\n           '<\/div>';\n  }).join('');\n\n  function selectZodiac(id) {\n     S.zodiac = id;\n     var z = getZodiac();\n     selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name;\n     document.getElementById('inp-h').value = z.name;\n     document.getElementById('inp-t').value = z.traits;\n     document.getElementById('inp-d').value = z.dates;\n     optsDiv.style.display = 'none';\n     updateText(); updateImageDisplay(); renderThemePins(); updateURL();\n  }\n\n  optsDiv.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(){ selectZodiac(this.getAttribute('data-zodiac')); });\n  });\n\n  selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\n  document.addEventListener('click',function(){ optsDiv.style.display='none'; });\n  \n  var curZ = getZodiac();\n  selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + curZ.icon + '<\/span> ' + curZ.name;\n}\n\ndocument.getElementById('inp-bday').addEventListener('input', function() {\n  var zId = getZodiacFromDate(this.value);\n  var opt = document.querySelector('.size-opt[data-zodiac=\"'+zId+'\"]');\n  if (opt) opt.click();\n});\n\nfunction renderThemePins(){\n  var c = document.getElementById('theme-pins');\n  var currentZodiac = getZodiac();\n  \n  c.innerHTML = THEMES.map(function(t){\n    var active = t.id===S.themeId?' active':'';\n    var previewImg = currentZodiac.images[t.id]; \n    \n    return '<button class=\"pme-thm'+active+'\" data-id=\"'+t.id+'\">'\n      +'<div class=\"pme-thm-circle\" style=\"background-image:url(\\''+previewImg+'\\');\"><\/div>'\n      +'<span>'+t.name+'<\/span>'\n      +'<\/button>';\n  }).join('');\n  \n  c.querySelectorAll('.pme-thm').forEach(function(pin){\n    pin.addEventListener('click', function(){\n      c.querySelectorAll('.pme-thm').forEach(function(p){ p.classList.remove('active'); });\n      this.classList.add('active');\n      S.themeId = this.getAttribute('data-id');\n      updatePosterBg(); updateURL();\n    });\n  });\n}\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,.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\n['inp-h','inp-d','inp-t'].forEach(function(id){\n  document.getElementById(id).addEventListener('input', updateText);\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 renderMaterials(){\n  var optsDiv = document.getElementById('mat-options');\n  var selText = document.getElementById('mat-selected-text');\n  var selDiv  = document.getElementById('mat-selected');\n  function selectMat(mat){\n    S.mat=mat;\n    \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    \n    selText.textContent = MAT_LABELS[mat];\n    optsDiv.style.display='none';\n    renderSizes(); updateURL();\n  }\n  optsDiv.innerHTML = MATS.map(function(m){\n    return '<div class=\"size-opt\" data-mat=\"'+m+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'Poppins\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+MAT_LABELS[m]+'<\/div>';\n  }).join('');\n  optsDiv.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(){ selectMat(this.getAttribute('data-mat')); });\n  });\n  selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\n  document.addEventListener('click',function(){ optsDiv.style.display='none'; });\n  selText.textContent = MAT_LABELS[S.mat];\n}\n\nfunction 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}\nfunction renderSizes(){\n  var sizes=SIZES[S.mat]||[];\n  var optsDiv=document.getElementById('size-options');\n  var selText=document.getElementById('size-selected-text');\n  var selDiv=document.getElementById('size-selected');\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 selectIdx(i){\n    S.sizeIdx=i; selText.innerHTML=buildLabel(sizes[i]);\n    optsDiv.style.display='none';\n    updatePrice(); updateDims(); updateURL();\n  }\n  optsDiv.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  optsDiv.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  selDiv.onclick=function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\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  \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;\n  var 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(){ fitText(); fitPoster(); },60);\n}\n\nfunction fitPoster(){\n  var outer=document.getElementById('pme-outer');\n  var poster=document.getElementById('pme-poster');\n  var container = document.getElementById('pme-canvas');\n  if(!container||!poster.offsetWidth) return;\n  \n  var isMob = window.innerWidth <= 768;\n  \n  var aH = container.clientHeight - (isMob ? 50 : 60);\n  var aW = container.clientWidth - (isMob ? 50 : 80);\n  \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  \n  var isMob = window.innerWidth <= 768;\n\n  if (isMob) {\n    el.style.height = 'auto'; \n    var panel = document.querySelector('.pme-panel');\n    var nav = document.querySelector('.pme-nav');\n    var canvasContainer = document.getElementById('pme-canvas');\n    if (panel) panel.style.height = '';\n    if (nav) nav.style.height = '';\n    if (canvasContainer) canvasContainer.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 canvasContainer = document.getElementById('pme-canvas');\n    if(panel) panel.style.height=h+'px';\n    if(nav) nav.style.height=h+'px';\n    if(canvasContainer) canvasContainer.style.height=h+'px';\n  }\n  \n  setTimeout(function(){ fitPoster(); },100);\n}\n\nwindow.addEventListener('load',setHeight);\nwindow.addEventListener('resize',function(){ setHeight(); });\nsetTimeout(setHeight,300);\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  var t=getTheme();\n  \n  var cartData={\n    action:'uwa_add_to_cart',\n    product_id:'1528',\n    poster_title:document.getElementById('out-h').textContent,\n    poster_subtitle:document.getElementById('out-d').textContent,\n    poster_coordinates:document.getElementById('out-t').textContent,\n    poster_lat: '',\n    poster_lng: '',\n    poster_zoom: '',\n    poster_shape: '',\n    poster_zodiac:S.zodiac,\n    poster_style:S.themeId,\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 poster=document.getElementById('pme-poster');\n  var imgEl = document.getElementById('zodiac-img');\n  var W=poster.clientWidth, H=poster.clientHeight;\n  \n  var dprOut = 2;\n  var out=document.createElement('canvas');\n  out.width=W * dprOut; \n  out.height=H * dprOut;\n  var ctx2=out.getContext('2d');\n  ctx2.scale(dprOut, dprOut);\n  ctx2.imageSmoothingEnabled = true;\n  ctx2.imageSmoothingQuality = 'high';\n  \n  ctx2.fillStyle = '#ffffff';\n  ctx2.fillRect(0,0,W,H);\n  \n  var pad=14; \n  ctx2.fillStyle=t.posterBg;\n  ctx2.fillRect(pad,pad,W-2*pad,H-2*pad);\n  \n  var innerW = W - 2*pad;\n  var innerH = H - 2*pad;\n  \n  if(imgEl && imgEl.src && imgEl.complete) {\n      var zoom = 0.85; \n      var scale = Math.max(innerW \/ imgEl.naturalWidth, innerH \/ imgEl.naturalHeight);\n      var w = imgEl.naturalWidth * scale * zoom;\n      var h = imgEl.naturalHeight * scale * zoom;\n      \n      var x = pad + (innerW - w) \/ 2;\n      var y = pad + (innerH - h) \/ 2 + (innerH * 0.02); \n      \n      ctx2.save();\n      ctx2.beginPath();\n      ctx2.rect(pad, pad, innerW, innerH);\n      ctx2.clip();\n      ctx2.drawImage(imgEl, x, y, w, h);\n      ctx2.restore();\n  }\n  \n  ctx2.fillStyle=t.textCol;\n  ctx2.textAlign='center';\n  \n  var bY = H - pad - 12; \n  ctx2.font='400 9px \"Inter\",sans-serif'; \n  ctx2.letterSpacing='0.05em';\n  ctx2.fillText(document.getElementById('out-d').textContent,W\/2,bY);\n  \n  ctx2.font='400 9px \"Inter\",sans-serif'; \n  ctx2.letterSpacing='0.05em';\n  ctx2.fillText(document.getElementById('out-t').textContent,W\/2,bY-12);\n  \n  ctx2.font='400 34px \"Inter\",sans-serif';\n  ctx2.letterSpacing='0.02em';\n  ctx2.fillText(document.getElementById('out-h').textContent,W\/2,bY-34);\n\n  cartData.poster_thumbnail=out.toDataURL('image\/jpeg',0.92);\n\n  function sendToCart(data){\n    var body=Object.keys(data).map(function(k){ return encodeURIComponent(k)+'='+encodeURIComponent(data[k]); }).join('&');\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    })\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  sendToCart(cartData);\n});\n\n\/\/ INITIALISIERUNG\nrenderZodiacDropdown();\nrenderThemePins();\nrenderMaterials();\nrenderSizes();\nupdateText();\nupdatePosterBg();\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\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-2168","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168","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=2168"}],"version-history":[{"count":10,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions"}],"predecessor-version":[{"id":3050,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions\/3050"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}