Zodiac Editor<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Rubik:wght@300;400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{overflow-x:hidden;}\r\n.pme{display:flex;width:100vw;height:100%;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:64px;min-width:64px;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;}\r\n.pme-nav-btn{width:52px;height:56px;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#888;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}\r\n.pme-nav-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}\r\n.pme-nav-btn.active{color:#fff;background:rgba(255,255,255,0.12);}\r\n.pme-nav-btn svg{width:20px;height:20px;}\r\n.pme-panel{width:416px;min-width:416px;background:#e7e7e7;border-right:1px solid #e8e8e8;overflow-y:auto;display:flex;flex-direction:column;}\r\n.pme-section{display:none;padding:24px 24px 32px;}\r\n.pme-section.active{display:block;}\r\n.pme-title{font-size:22px;font-weight:600;margin-bottom:6px;}\r\n.pme-desc{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5;}\r\n.pme-lbl{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;margin-top:20px;display:block;}\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;background:#fff;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n\r\n.pme-frame{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px 4px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff;font-family:'DM Sans',sans-serif;color:#1a1a1a;transition:border 0.15s;}\r\n.pme-frame:hover,.pme-frame.active{border:2.5px solid #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\r\n\r\n#size-dropdown,#mat-dropdown,#zodiac-dropdown{position:relative;margin-bottom:14px;}\r\n.dd-selected{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}\r\n.dd-options{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); max-height:250px; overflow-y:auto;}\r\n.size-opt{padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;}\r\n.size-opt:hover{background:#f5f5f5;}\r\n.zodiac-icon-drop {font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; margin-right: 6px;}\r\n\r\n\/* OVERRIDE F\u00dcR WP BUTTON STYLES (Pinker Hintergrund entfernt) *\/\r\n.theme-pins { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; justify-content: flex-start; }\r\n.pme-thm { border: none !important; border-radius: 0 !important; padding: 0 !important; cursor: pointer !important; background: transparent !important; background-color: transparent !important; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 68px; outline: none !important; box-shadow: none !important;}\r\n.pme-thm:hover, .pme-thm:focus, .pme-thm:active, .pme-thm.active { background: transparent !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; }\r\n.pme-thm-circle { width: 60px; height: 60px; border-radius: 50%; background-size: cover; background-position: center 10%; border: 3px solid #e0e0e0; transition: border-color 0.2s; background-color: #fff; box-shadow: inset 0 0 0 2px #fff; }\r\n.pme-thm:hover .pme-thm-circle { border-color: #a0a0a0; }\r\n.pme-thm.active .pme-thm-circle { border-color: #3b4654; }\r\n.pme-thm span { font-size: 12px; color: #1a1a1a; font-weight: 500; font-family:'DM Sans',sans-serif;}\r\n\r\n.pme-canvas{flex:1;min-width:0;min-height:0;background:#F9F6F0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;align-self:stretch;}\r\n.pme-outer{position:relative;}\r\n\r\n.pme-poster{background:#fff;padding:14px;position:relative;display:flex;flex-direction:column;border:1px solid hsl(0,0%,85%);box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); box-sizing:border-box;}\r\n.pme-poster.is-framed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 3px 18px rgba(0,0,0,0.25);pointer-events:none;z-index:20;}\r\n.pme-poster-inner{flex:1;background:#ffffff;position:relative;width:100%;height:100%;overflow:hidden;}\r\n\r\n\/* CONTAIN: Verhindert, dass das Bild bei Formaten wie 40x60cm abgeschnitten wird! *\/\r\n.star-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1;}\r\n.star-wrap img{display:block; width:100%; height:100%; object-fit:contain; object-position:center; margin:0;}\r\n\r\n.pme-footer{position:absolute;bottom:24px;left:0;right:0;display:flex;flex-direction:column;align-items:center;font-family:'DM Sans',sans-serif;z-index:10;}\r\n.pme-h{font-size:36px;font-weight:400;letter-spacing:0.02em;text-align:center;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;white-space:nowrap;}\r\n.pme-tg{font-size:9px;font-weight:400;letter-spacing:0.05em;text-align:center;text-transform:uppercase;color:#1a1a1a;margin-bottom:6px;white-space:nowrap;}\r\n.pme-dt{font-size:9px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:#1a1a1a;white-space:nowrap;}\r\n\r\n.pme-dimr{position:absolute;right:-22px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}\r\n.pme-dimr span{writing-mode:vertical-rl;font-size:11px;color:#aaa;white-space:nowrap;}\r\n.pme-dimb{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}\r\n.pme-dimb span{font-size:11px;color:#aaa;}\r\n.pme-bar{background:#1a1a1a;display:flex;align-items:center;padding:16px 24px;gap:12px;margin-top:auto;}\r\n.pme-prices{display:flex;align-items:baseline;gap:6px;}\r\n.pme-old{font-size:12px;color:#888;text-decoration:line-through;}\r\n.pme-new{font-size:17px;font-weight:600;color:#fff;}\r\n.pme-cart{background:#7E5AF0;color:#ffffff;border:none;border-radius:25px;padding:10px 14px;font-size:18px;font-weight:400;font-family:'Poppins',sans-serif;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.15s,color 0.15s,border-color 0.15s;}\r\n.pme-cart:hover{background:#632ED3!important;color:#ffffff!important;border:none!important;}\r\n\r\n@media(max-width:768px){\r\n .pme{flex-direction:column; height:auto!important; min-height:100vh;}\r\n .pme-nav{display:none;}\r\n .pme-panel{width:100%!important; min-width:0!important; border-right:none; border-top:1px solid #e8e8e8; max-height:none!important; height:auto!important; overflow-y:visible!important; order:3;}\r\n .pme-canvas{order:1; flex:none!important; height:65vh!important; min-height:380px;}\r\n .pme-mobnav{display:flex!important; order:2; height:71px!important; flex:0 0 71px!important;}\r\n .pme-section{padding:16px 16px 24px;}\r\n}\r\n.pme-mobnav{display:none;width:100%;background:#1a1a1a;overflow-x:auto;scrollbar-width:none;}\r\n.pme-mobnav::-webkit-scrollbar{display:none;}\r\n.pme-mobbtn{flex:1;min-width:60px;height:71px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#888;font-size:14px;font-family:'DM Sans',sans-serif;}\r\n.pme-mobbtn.active{color:#fff;}\r\n.pme-mobbtn svg{width:24px;height:24px;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pme\" id=\"pme-root\">\r\n <nav class=\"pme-nav\">\r\n <button class=\"pme-nav-btn active\" data-panel=\"zodiac\">\r\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>Sternzeichen\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"labels\">\r\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\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"style\">\r\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\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"size\">\r\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\r\n <\/button>\r\n <\/nav>\r\n\r\n <div class=\"pme-mobnav\">\r\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>\r\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>\r\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>\r\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>\r\n <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-zodiac\">\r\n <div class=\"pme-title\">Sternzeichen<\/div>\r\n <div class=\"pme-desc\">Gib dein Geburtsdatum ein, um dein Sternzeichen zu finden.<\/div>\r\n \r\n <span class=\"pme-lbl\">Geburtsdatum<\/span>\r\n <div class=\"pme-field\"><input type=\"date\" id=\"inp-bday\" \/><\/div>\r\n\r\n <span class=\"pme-lbl\">Sternzeichen<\/span>\r\n <div id=\"zodiac-dropdown\">\r\n <div class=\"dd-selected\" id=\"zodiac-selected\">\r\n <span id=\"zodiac-selected-text\"><\/span>\r\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>\r\n <\/div>\r\n <div class=\"dd-options\" id=\"zodiac-options\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Texte<\/div>\r\n <div class=\"pme-desc\">Passe den Text auf deinem Sternzeichen-Poster an.<\/div>\r\n <span class=\"pme-lbl\">\u00dcberschrift<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-h\" value=\"WIDDER\"\/><\/div>\r\n <span class=\"pme-lbl\">Eigenschaften<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-t\" value=\"SELBSTBEWUSST - ENERGISCH - IMPULSIV\"\/><\/div>\r\n <span class=\"pme-lbl\">Datum<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-d\" value=\"21. M\u00c4R - 20. APR\"\/><\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-style\">\r\n <div class=\"pme-title\">Stil<\/div>\r\n <div class=\"pme-desc\">W\u00e4hle ein Farbschema f\u00fcr dein Poster.<\/div>\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div id=\"theme-pins\" class=\"theme-pins\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-size\">\r\n <div class=\"pme-title\">Gr\u00f6\u00dfe<\/div>\r\n <div class=\"pme-desc\">W\u00e4hle Material und Gr\u00f6\u00dfe.<\/div>\r\n <span class=\"pme-lbl\">Material<\/span>\r\n <div id=\"mat-dropdown\">\r\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>\r\n <div class=\"dd-options\" id=\"mat-options\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\r\n <span class=\"pme-lbl\">Rahmenfarbe<\/span>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\r\n <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\r\n <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\r\n <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\r\n <div id=\"size-dropdown\">\r\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>\r\n <div class=\"dd-options\" id=\"size-options\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-bar\">\r\n <div class=\"pme-prices\">\r\n <span class=\"pme-old\" id=\"p-old\"><\/span>\r\n <span class=\"pme-new\" id=\"p-new\"><\/span>\r\n <\/div>\r\n <button class=\"pme-cart\" id=\"btn-cart\">\r\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>\r\n In den Warenkorb\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n <div class=\"pme-outer\" id=\"pme-outer\">\r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"pme-poster-inner\" id=\"pme-poster-inner\">\r\n <div class=\"star-wrap\" id=\"zodiac-wrap\">\r\n <img decoding=\"async\" id=\"zodiac-img\" src=\"\" alt=\"Zodiac Poster\" \/>\r\n <\/div>\r\n <div class=\"pme-footer\" id=\"pme-footer\">\r\n <div class=\"pme-h\" id=\"out-h\">WIDDER<\/div>\r\n <div class=\"pme-tg\" id=\"out-t\">SELBSTBEWUSST - ENERGISCH - IMPULSIV<\/div>\r\n <div class=\"pme-dt\" id=\"out-d\">21. M\u00c4R - 20. APR<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ --- 1. THEMES DEFINIEREN ---\r\nvar THEMES = [\r\n { id:'Standard', name:'Standard', posterBg:'#ffffff', textCol:'#1a1a1a' },\r\n { id:'Sand', name:'Sand', posterBg:'#f3ebe1', textCol:'#1a1a1a' },\r\n { id:'Night', name:'Night', posterBg:'#14181f', textCol:'#ffffff' },\r\n { id:'Dark', name:'Dark', posterBg:'#1a1a1a', textCol:'#ffffff' },\r\n { id:'Cloud', name:'Cloud', posterBg:'#a3b1b5', textCol:'#ffffff' },\r\n { id:'Modern', name:'Modern', posterBg:'#ffffff', textCol:'#1a1a1a' }\r\n];\r\n\r\n\/\/ --- 2. STERNZEICHEN DEFINIEREN (DEUTSCH LOKALISIERT) ---\r\nvar ZODIACS = [\r\n { id:'aries', icon:'\u2648\\uFE0E', imgName:'Aries', name:'WIDDER', dates:'21. M\u00c4R - 20. APR', traits:'SELBSTBEWUSST - ENERGISCH - IMPULSIV' },\r\n { id:'taurus', icon:'\u2649\\uFE0E', imgName:'Taurus', name:'STIER', dates:'21. APR - 20. MAI', traits:'GEDULDIG - SINNLICH - ZUVERL\u00c4SSIG' },\r\n { id:'gemini', icon:'\u264a\\uFE0E', imgName:'Gemini', name:'ZWILLINGE', dates:'21. MAI - 21. JUN', traits:'ANPASSUNGSF\u00c4HIG - KONTAKTFREUDIG - INTELLIGENT' },\r\n { id:'cancer', icon:'\u264b\\uFE0E', imgName:'Cancer', name:'KREBS', dates:'22. JUN - 22. JUL', traits:'EMOTIONAL - F\u00dcRSORGLICH - INTUITIV' },\r\n { id:'leo', icon:'\u264c\\uFE0E', imgName:'Leo', name:'L\u00d6WE', dates:'23. JUL - 22. AUG', traits:'CHARISMATISCH - SELBSTBEWUSST - GROSSZ\u00dcGIG' },\r\n { id:'virgo', icon:'\u264d\\uFE0E', imgName:'Virgo', name:'JUNGFRAU', dates:'23. AUG - 22. SEP', traits:'ANALYTISCH - ORGANISIERT - BESCHEIDEN' },\r\n { id:'libra', icon:'\u264e\\uFE0E', imgName:'Libra', name:'WAAGE', dates:'23. SEP - 23. OKT', traits:'HARMONISCH - DIPLOMATISCH - \u00c4STHETISCH' },\r\n { id:'scorpio', icon:'\u264f\\uFE0E', imgName:'Scorpio', name:'SKORPION', dates:'24. OKT - 22. NOV', traits:'LEIDENSCHAFTLICH - TIEFGR\u00dcNDIG - DURCHSETZUNGSSTARK' },\r\n { id:'sagittarius', icon:'\u2650\\uFE0E', imgName:'Sagittarius', name:'SCH\u00dcTZE', dates:'23. NOV - 21. DEZ', traits:'ABENTEUERLUSTIG - OPTIMISTISCH - HUMORVOLL' },\r\n { id:'capricorn', icon:'\u2651\\uFE0E', imgName:'Capricorn', name:'STEINBOCK', dates:'22. DEZ - 20. JAN', traits:'EHRGEIZIG - VERANTWORTUNGSBEWUSST - DISZIPLINIERT' },\r\n { id:'aquarius', icon:'\u2652\\uFE0E', imgName:'Aquarius', name:'WASSERMANN', dates:'21. JAN - 19. FEB', traits:'UNKONVENTIONELL - INTELLEKTUELL - HUMANIT\u00c4R' },\r\n { id:'pisces', icon:'\u2653\\uFE0E', imgName:'Pisces', name:'FISCHE', dates:'20. FEB - 20. M\u00c4R', traits:'EMPATHISCH - VERTR\u00c4UMT - MITF\u00dcHLEND' }\r\n];\r\n\r\n\/\/ --- 3. URLS AUTOMATISCH GENERIEREN (Verwendet interne englische imgName f\u00fcr den Pfad) ---\r\nvar BASE_URL = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/';\r\nZODIACS.forEach(function(z) {\r\n z.images = {};\r\n THEMES.forEach(function(t) {\r\n z.images[t.id] = BASE_URL + z.imgName + '-' + t.id + '.png';\r\n });\r\n});\r\n\r\nvar SIZES = {\r\n postcard:[{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n poster:[{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n framed:[{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n canvas:[{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\nvar MATS = ['postcard','poster','framed','canvas'];\r\nvar MAT_LABELS = {postcard:'Postkarte',poster:'Poster',framed:'Gerahmtes Poster',canvas:'Leinwand'};\r\n\r\nvar S = {\r\n zodiac: 'aries', mat: 'poster', sizeIdx: 2, themeId: 'Night', frame: 'black'\r\n};\r\n\r\nfunction getTheme(){ return THEMES.find(function(t){ return t.id===S.themeId; })||THEMES[0]; }\r\nfunction getZodiac(){ return ZODIACS.find(function(z){ return z.id===S.zodiac; })||ZODIACS[0]; }\r\n\r\n(function(){\r\n var p = new URLSearchParams(window.location.search);\r\n if(p.get('zodiac')) S.zodiac = p.get('zodiac');\r\n if(p.get('mat')) S.mat = p.get('mat');\r\n if(p.get('size')) S.sizeIdx = parseInt(p.get('size'));\r\n if(p.get('theme')) S.themeId = p.get('theme');\r\n if(p.get('frame')) S.frame = p.get('frame');\r\n if(p.get('h')) document.getElementById('inp-h').value=decodeURIComponent(p.get('h'));\r\n if(p.get('d')) document.getElementById('inp-d').value=decodeURIComponent(p.get('d'));\r\n if(p.get('t')) document.getElementById('inp-t').value=decodeURIComponent(p.get('t'));\r\n})();\r\n\r\nfunction updateURL(){\r\n var p = new URLSearchParams();\r\n p.set('zodiac',S.zodiac); p.set('mat',S.mat); p.set('size',S.sizeIdx); p.set('theme',S.themeId);\r\n if(S.mat === 'framed') p.set('frame', S.frame);\r\n p.set('h',encodeURIComponent(document.getElementById('inp-h').value));\r\n p.set('d',encodeURIComponent(document.getElementById('inp-d').value));\r\n p.set('t',encodeURIComponent(document.getElementById('inp-t').value));\r\n history.replaceState(null,'','?'+p.toString());\r\n}\r\n\r\nfunction fitText() {\r\n var hOut = document.getElementById('out-h');\r\n var dOut = document.getElementById('out-d');\r\n var tOut = document.getElementById('out-t');\r\n var footer = document.querySelector('.pme-footer');\r\n if (!footer || !hOut || !dOut || !tOut) return;\r\n \r\n hOut.style.fontSize = ''; dOut.style.fontSize = ''; tOut.style.fontSize = '';\r\n \r\n var maxWidth = footer.clientWidth - 24; \r\n if (maxWidth <= 0) return;\r\n \r\n [hOut, dOut, tOut].forEach(function(el) {\r\n if (el.scrollWidth > maxWidth) {\r\n var currentSize = parseFloat(window.getComputedStyle(el).fontSize);\r\n el.style.fontSize = ((currentSize * maxWidth \/ el.scrollWidth) * 0.95) + 'px';\r\n }\r\n });\r\n}\r\n\r\nfunction updateImageDisplay(){\r\n var z = getZodiac();\r\n var imgEl = document.getElementById('zodiac-img');\r\n var targetSrc = z.images[S.themeId] || z.images['Standard'] || '';\r\n \r\n if(targetSrc) {\r\n imgEl.src = targetSrc;\r\n imgEl.style.display = 'block';\r\n } else {\r\n imgEl.style.display = 'none'; \r\n }\r\n}\r\n\r\nfunction updatePosterBg(){\r\n var t = getTheme();\r\n document.getElementById('pme-poster-inner').style.background = t.posterBg;\r\n ['out-h','out-d','out-t'].forEach(function(id){\r\n var el = document.getElementById(id);\r\n if(el) el.style.color = t.textCol;\r\n });\r\n updateImageDisplay();\r\n}\r\n\r\nfunction updateText(){\r\n document.getElementById('out-h').textContent = document.getElementById('inp-h').value.toUpperCase();\r\n document.getElementById('out-t').textContent = document.getElementById('inp-t').value.toUpperCase();\r\n document.getElementById('out-d').textContent = document.getElementById('inp-d').value.toUpperCase();\r\n fitText();\r\n updateURL();\r\n}\r\n\r\nfunction getZodiacFromDate(dateString) {\r\n if (!dateString) return 'aries';\r\n var d = new Date(dateString);\r\n if (isNaN(d)) return 'aries';\r\n \r\n var m = d.getMonth() + 1;\r\n var day = d.getDate();\r\n\r\n if ((m === 3 && day >= 21) || (m === 4 && day <= 20)) return 'aries';\r\n if ((m === 4 && day >= 21) || (m === 5 && day <= 21)) return 'taurus';\r\n if ((m === 5 && day >= 22) || (m === 6 && day <= 21)) return 'gemini';\r\n if ((m === 6 && day >= 22) || (m === 7 && day <= 22)) return 'cancer';\r\n if ((m === 7 && day >= 23) || (m === 8 && day <= 22)) return 'leo';\r\n if ((m === 8 && day >= 23) || (m === 9 && day <= 22)) return 'virgo';\r\n if ((m === 9 && day >= 23) || (m === 10 && day <= 23)) return 'libra';\r\n if ((m === 10 && day >= 24) || (m === 11 && day <= 22)) return 'scorpio';\r\n if ((m === 11 && day >= 23) || (m === 12 && day <= 20)) return 'sagittarius';\r\n if ((m === 12 && day >= 21) || (m === 1 && day <= 19)) return 'capricorn';\r\n if ((m === 1 && day >= 20) || (m === 2 && day <= 18)) return 'aquarius';\r\n if ((m === 2 && day >= 19) || (m === 3 && day <= 20)) return 'pisces';\r\n return 'aries';\r\n}\r\n\r\nfunction renderZodiacDropdown(){\r\n var optsDiv = document.getElementById('zodiac-options');\r\n var selText = document.getElementById('zodiac-selected-text');\r\n var selDiv = document.getElementById('zodiac-selected');\r\n\r\n optsDiv.innerHTML = ZODIACS.map(function(z) {\r\n return '<div class=\"size-opt\" data-zodiac=\"'+z.id+'\" style=\"display:flex; justify-content:space-between; align-items:center;\">' +\r\n '<span><span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name + '<\/span>' +\r\n '<span style=\"color:#999; font-size:11px;\">' + z.dates + '<\/span>' +\r\n '<\/div>';\r\n }).join('');\r\n\r\n function selectZodiac(id) {\r\n S.zodiac = id;\r\n var z = getZodiac();\r\n selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name;\r\n document.getElementById('inp-h').value = z.name;\r\n document.getElementById('inp-t').value = z.traits;\r\n document.getElementById('inp-d').value = z.dates;\r\n optsDiv.style.display = 'none';\r\n updateText(); updateImageDisplay(); renderThemePins(); updateURL();\r\n }\r\n\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectZodiac(this.getAttribute('data-zodiac')); });\r\n });\r\n\r\n selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n \r\n var curZ = getZodiac();\r\n selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + curZ.icon + '<\/span> ' + curZ.name;\r\n}\r\n\r\ndocument.getElementById('inp-bday').addEventListener('input', function() {\r\n var zId = getZodiacFromDate(this.value);\r\n var opt = document.querySelector('.size-opt[data-zodiac=\"'+zId+'\"]');\r\n if (opt) opt.click();\r\n});\r\n\r\nfunction renderThemePins(){\r\n var c = document.getElementById('theme-pins');\r\n var currentZodiac = getZodiac();\r\n \r\n c.innerHTML = THEMES.map(function(t){\r\n var active = t.id===S.themeId?' active':'';\r\n var previewImg = currentZodiac.images[t.id]; \r\n \r\n return '<button class=\"pme-thm'+active+'\" data-id=\"'+t.id+'\">'\r\n +'<div class=\"pme-thm-circle\" style=\"background-image:url(\\''+previewImg+'\\');\"><\/div>'\r\n +'<span>'+t.name+'<\/span>'\r\n +'<\/button>';\r\n }).join('');\r\n \r\n c.querySelectorAll('.pme-thm').forEach(function(pin){\r\n pin.addEventListener('click', function(){\r\n c.querySelectorAll('.pme-thm').forEach(function(p){ p.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.themeId = this.getAttribute('data-id');\r\n updatePosterBg(); updateURL();\r\n });\r\n });\r\n}\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn){\r\n btn.addEventListener('click', function(){\r\n var panel = this.getAttribute('data-panel');\r\n document.querySelectorAll('.pme-section').forEach(function(s){ s.classList.remove('active'); });\r\n document.querySelectorAll('.pme-nav-btn,.pme-mobbtn').forEach(function(b){ b.classList.remove('active'); });\r\n document.getElementById('sec-'+panel).classList.add('active');\r\n document.querySelectorAll('[data-panel=\"'+panel+'\"]').forEach(function(b){ b.classList.add('active'); });\r\n });\r\n});\r\n\r\n['inp-h','inp-d','inp-t'].forEach(function(id){\r\n document.getElementById(id).addEventListener('input', updateText);\r\n});\r\n\r\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.frame = this.getAttribute('data-frame');\r\n updateDims();\r\n updateURL();\r\n });\r\n});\r\n\r\nfunction renderMaterials(){\r\n var optsDiv = document.getElementById('mat-options');\r\n var selText = document.getElementById('mat-selected-text');\r\n var selDiv = document.getElementById('mat-selected');\r\n function selectMat(mat){\r\n S.mat=mat;\r\n \r\n var sizes = SIZES[S.mat] || [];\r\n S.sizeIdx = 0;\r\n for (var i = 0; i < sizes.length; i++) {\r\n if (sizes[i].l === '40x60cm') { \/\/ Default zu 40x60cm, wenn vorhanden\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n \r\n selText.textContent = MAT_LABELS[mat];\r\n optsDiv.style.display='none';\r\n renderSizes(); updateURL();\r\n }\r\n optsDiv.innerHTML = MATS.map(function(m){\r\n return '<div class=\"size-opt\" data-mat=\"'+m+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+MAT_LABELS[m]+'<\/div>';\r\n }).join('');\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectMat(this.getAttribute('data-mat')); });\r\n });\r\n selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n selText.textContent = MAT_LABELS[S.mat];\r\n}\r\n\r\nfunction buildLabel(s){\r\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>';\r\n}\r\nfunction renderSizes(){\r\n var sizes=SIZES[S.mat]||[];\r\n var optsDiv=document.getElementById('size-options');\r\n var selText=document.getElementById('size-selected-text');\r\n var selDiv=document.getElementById('size-selected');\r\n \r\n var frameWrap = document.getElementById('frame-opt-wrap');\r\n if (frameWrap) {\r\n frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\r\n }\r\n \r\n function selectIdx(i){\r\n S.sizeIdx=i; selText.innerHTML=buildLabel(sizes[i]);\r\n optsDiv.style.display='none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n optsDiv.innerHTML=sizes.map(function(s,i){\r\n return '<div class=\"size-opt\" data-idx=\"'+i+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+buildLabel(s)+'<\/div>';\r\n }).join('');\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectIdx(parseInt(this.getAttribute('data-idx'))); });\r\n });\r\n selDiv.onclick=function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n selectIdx(S.sizeIdx<sizes.length?S.sizeIdx:0);\r\n}\r\n\r\nfunction updatePrice(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n if(!s) return;\r\n document.getElementById('p-old').textContent=s.orig.toFixed(2).replace('.',',')+' EUR';\r\n document.getElementById('p-new').textContent=s.p.toFixed(2).replace('.',',')+' EUR';\r\n}\r\n\r\nfunction updateDims(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n if(!s) return;\r\n \r\n document.getElementById('dim-w').textContent= s.w + ' cm';\r\n document.getElementById('dim-h').textContent= s.h + ' cm';\r\n var BASE=504;\r\n var pw= s.w;\r\n var ph= s.h;\r\n var longer=Math.max(pw,ph), shorter=Math.min(pw,ph);\r\n var baseW = Math.round(BASE*shorter\/longer);\r\n var baseH = BASE;\r\n var poster=document.getElementById('pme-poster');\r\n\r\n if (S.mat === 'framed') {\r\n var thicknessMm = (s.l === '13x18cm') ? 10 : 14;\r\n var framePx = thicknessMm * (BASE \/ (longer * 10));\r\n\r\n poster.style.borderWidth = framePx + 'px';\r\n poster.style.borderStyle = 'solid';\r\n\r\n if (S.frame === 'wood') {\r\n poster.style.borderColor = '#d7c5b3';\r\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\";\r\n } else if (S.frame === 'white') {\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#ffffff';\r\n } else { \/\/ black\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#1a1a1a';\r\n }\r\n \r\n poster.style.width = (baseW + framePx * 2) + 'px';\r\n poster.style.height = (baseH + framePx * 2) + 'px';\r\n poster.classList.add('is-framed');\r\n } else {\r\n poster.style.border = '';\r\n poster.style.borderImage = '';\r\n poster.style.width = baseW + 'px';\r\n poster.style.height = baseH + 'px';\r\n poster.classList.remove('is-framed');\r\n }\r\n\r\n setTimeout(function(){ fitText(); fitPoster(); },60);\r\n}\r\n\r\nfunction fitPoster(){\r\n var outer=document.getElementById('pme-outer');\r\n var poster=document.getElementById('pme-poster');\r\n var container = document.getElementById('pme-canvas');\r\n if(!container||!poster.offsetWidth) return;\r\n \r\n var isMob = window.innerWidth <= 768;\r\n var aH = container.clientHeight - (isMob ? 16 : 60);\r\n var aW = container.clientWidth - (isMob ? 24 : 80);\r\n \r\n var scale = Math.min(aH \/ poster.offsetHeight, aW \/ poster.offsetWidth, isMob ? 2.5 : 1.4);\r\n outer.style.transform='scale('+scale+')';\r\n outer.style.transformOrigin='center center';\r\n}\r\n\r\nfunction setHeight(){\r\n var el=document.getElementById('pme-root');\r\n if(!el) return;\r\n \r\n var isMob = window.innerWidth <= 768;\r\n\r\n if (isMob) {\r\n el.style.height = 'auto'; \r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvasContainer = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvasContainer) canvasContainer.style.height = '';\r\n } else {\r\n var r=el.getBoundingClientRect();\r\n var h=Math.max(window.innerHeight-r.top,500);\r\n el.style.height=h+'px';\r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvasContainer = document.getElementById('pme-canvas');\r\n if(panel) panel.style.height=h+'px';\r\n if(nav) nav.style.height=h+'px';\r\n if(canvasContainer) canvasContainer.style.height=h+'px';\r\n }\r\n \r\n setTimeout(function(){ fitPoster(); },100);\r\n}\r\n\r\nwindow.addEventListener('load',setHeight);\r\nwindow.addEventListener('resize',function(){ setHeight(); });\r\nsetTimeout(setHeight,300);\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click', function(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx]||{};\r\n var t=getTheme();\r\n \r\n var cartData={\r\n action:'uwa_add_to_cart',\r\n \r\n \/\/ HIER DIE NEUE DEUTSCHE PRODUKT-ID:\r\n product_id:'2219',\r\n \r\n poster_title:document.getElementById('out-h').textContent,\r\n poster_subtitle:document.getElementById('out-d').textContent,\r\n poster_coordinates:document.getElementById('out-t').textContent,\r\n poster_lat: '',\r\n poster_lng: '',\r\n poster_zoom: '',\r\n poster_shape: '',\r\n poster_zodiac:S.zodiac,\r\n poster_style:S.themeId,\r\n poster_material:S.mat,\r\n poster_frame:(S.mat === 'framed') ? S.frame : '',\r\n poster_size:s.l||'',\r\n poster_orientation: 'portrait',\r\n poster_price:s.p||'',\r\n poster_original_price:s.orig||''\r\n };\r\n \r\n var poster=document.getElementById('pme-poster');\r\n var imgEl = document.getElementById('zodiac-img');\r\n var W=poster.clientWidth, H=poster.clientHeight;\r\n \r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n \r\n var dprOut = 2;\r\n var out=document.createElement('canvas');\r\n out.width=W * dprOut; \r\n out.height=H * dprOut;\r\n var ctx2=out.getContext('2d');\r\n ctx2.scale(dprOut, dprOut);\r\n ctx2.imageSmoothingEnabled = true;\r\n ctx2.imageSmoothingQuality = 'high';\r\n \r\n ctx2.fillStyle='#ffffff';\r\n ctx2.fillRect(0,0,W,H);\r\n \r\n var pad=14; \r\n ctx2.fillStyle=t.posterBg;\r\n ctx2.fillRect(pad,pad,W-2*pad,H-2*pad);\r\n \r\n var innerW = W - 2*pad;\r\n var innerH = H - 2*pad;\r\n \r\n \/\/ Bild exakt ins Raster exportieren, als \"contain\" statt \"cover\"\r\n if(imgEl && imgEl.src && imgEl.complete) {\r\n \/\/ Contain Logic f\u00fcr den Export\r\n var scale = Math.min(innerW \/ imgEl.naturalWidth, innerH \/ imgEl.naturalHeight);\r\n var w = imgEl.naturalWidth * scale;\r\n var h = imgEl.naturalHeight * scale;\r\n var x = pad + (innerW - w) \/ 2;\r\n var y = pad + (innerH - h) \/ 2;\r\n \r\n ctx2.save();\r\n ctx2.beginPath();\r\n ctx2.rect(pad, pad, innerW, innerH);\r\n ctx2.clip();\r\n ctx2.drawImage(imgEl, x, y, w, h);\r\n ctx2.restore();\r\n }\r\n \r\n ctx2.fillStyle=t.textCol;\r\n ctx2.textAlign='center';\r\n \r\n \/\/ Text im Export-Canvas exakt wie in der Vorschau dar\u00fcberlegen\r\n var bY = H - pad - 24; \r\n ctx2.font='400 10px \"DM Sans\",sans-serif'; \r\n ctx2.letterSpacing='0.05em';\r\n ctx2.fillText(document.getElementById('out-d').textContent,W\/2,bY);\r\n \r\n ctx2.font='400 10px \"DM Sans\",sans-serif'; \r\n ctx2.letterSpacing='0.05em';\r\n ctx2.fillText(document.getElementById('out-t').textContent,W\/2,bY-18);\r\n \r\n ctx2.font='400 36px \"DM Sans\",sans-serif';\r\n ctx2.letterSpacing='0.02em';\r\n ctx2.fillText(document.getElementById('out-h').textContent,W\/2,bY-46);\r\n\r\n cartData.poster_thumbnail=out.toDataURL('image\/jpeg',0.92);\r\n\r\n function sendToCart(data){\r\n var body=Object.keys(data).map(function(k){ return encodeURIComponent(k)+'='+encodeURIComponent(data[k]); }).join('&');\r\n fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php',{\r\n method:'POST',\r\n headers:{'Content-Type':'application\/x-www-form-urlencoded'},\r\n body:body\r\n }).then(function(r){ return r.json(); })\r\n .then(function(res){ \r\n if(!res.success) {\r\n btn.innerHTML = originalHTML;\r\n console.error(\"Cart Error:\", res);\r\n alert(\"Konnte nicht in den Warenkorb gelegt werden. Hast du die richtige deutsche Produkt-ID hinterlegt?\");\r\n } else {\r\n window.location.href='https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n }\r\n })\r\n .catch(function(err){ \r\n btn.innerHTML = originalHTML;\r\n console.error(\"Fetch Error:\", err);\r\n alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n });\r\n }\r\n sendToCart(cartData);\r\n});\r\n\r\n\/\/ INITIALISIERUNG\r\nrenderZodiacDropdown();\r\nrenderThemePins();\r\nrenderMaterials();\r\nrenderSizes();\r\nupdateText();\r\nupdatePosterBg();\r\n\r\nif (S.frame) {\r\n document.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\r\n });\r\n}\r\nif (S.mat === 'framed') {\r\n document.getElementById('pme-poster').classList.add('is-framed');\r\n}\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Zodiac Editor Sternzeichen Texte Stil Gr\u00f6\u00dfe Zeichen Texte Stil Gr\u00f6\u00dfe Sternzeichen Gib dein Geburtsdatum ein, um dein Sternzeichen zu finden. Geburtsdatum Sternzeichen Texte Passe den Text auf deinem Sternzeichen-Poster an. \u00dcberschrift Eigenschaften Datum Stil W\u00e4hle ein Farbschema f\u00fcr dein Poster. Design Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material Poster Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 30x40cm In […]<\/p>\n","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":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions"}],"predecessor-version":[{"id":2252,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions\/2252"}],"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}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nZodiac Editor<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Rubik:wght@300;400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{overflow-x:hidden;}\r\n.pme{display:flex;width:100vw;height:100%;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:64px;min-width:64px;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;}\r\n.pme-nav-btn{width:52px;height:56px;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#888;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}\r\n.pme-nav-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}\r\n.pme-nav-btn.active{color:#fff;background:rgba(255,255,255,0.12);}\r\n.pme-nav-btn svg{width:20px;height:20px;}\r\n.pme-panel{width:416px;min-width:416px;background:#e7e7e7;border-right:1px solid #e8e8e8;overflow-y:auto;display:flex;flex-direction:column;}\r\n.pme-section{display:none;padding:24px 24px 32px;}\r\n.pme-section.active{display:block;}\r\n.pme-title{font-size:22px;font-weight:600;margin-bottom:6px;}\r\n.pme-desc{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5;}\r\n.pme-lbl{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;margin-top:20px;display:block;}\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;background:#fff;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n\r\n.pme-frame{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px 4px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff;font-family:'DM Sans',sans-serif;color:#1a1a1a;transition:border 0.15s;}\r\n.pme-frame:hover,.pme-frame.active{border:2.5px solid #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\r\n\r\n#size-dropdown,#mat-dropdown,#zodiac-dropdown{position:relative;margin-bottom:14px;}\r\n.dd-selected{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}\r\n.dd-options{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); max-height:250px; overflow-y:auto;}\r\n.size-opt{padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;}\r\n.size-opt:hover{background:#f5f5f5;}\r\n.zodiac-icon-drop {font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; margin-right: 6px;}\r\n\r\n\/* OVERRIDE F\u00dcR WP BUTTON STYLES (Pinker Hintergrund entfernt) *\/\r\n.theme-pins { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; justify-content: flex-start; }\r\n.pme-thm { border: none !important; border-radius: 0 !important; padding: 0 !important; cursor: pointer !important; background: transparent !important; background-color: transparent !important; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 68px; outline: none !important; box-shadow: none !important;}\r\n.pme-thm:hover, .pme-thm:focus, .pme-thm:active, .pme-thm.active { background: transparent !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; }\r\n.pme-thm-circle { width: 60px; height: 60px; border-radius: 50%; background-size: cover; background-position: center 10%; border: 3px solid #e0e0e0; transition: border-color 0.2s; background-color: #fff; box-shadow: inset 0 0 0 2px #fff; }\r\n.pme-thm:hover .pme-thm-circle { border-color: #a0a0a0; }\r\n.pme-thm.active .pme-thm-circle { border-color: #3b4654; }\r\n.pme-thm span { font-size: 12px; color: #1a1a1a; font-weight: 500; font-family:'DM Sans',sans-serif;}\r\n\r\n.pme-canvas{flex:1;min-width:0;min-height:0;background:#F9F6F0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;align-self:stretch;}\r\n.pme-outer{position:relative;}\r\n\r\n.pme-poster{background:#fff;padding:14px;position:relative;display:flex;flex-direction:column;border:1px solid hsl(0,0%,85%);box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); box-sizing:border-box;}\r\n.pme-poster.is-framed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 3px 18px rgba(0,0,0,0.25);pointer-events:none;z-index:20;}\r\n.pme-poster-inner{flex:1;background:#ffffff;position:relative;width:100%;height:100%;overflow:hidden;}\r\n\r\n\/* CONTAIN: Verhindert, dass das Bild bei Formaten wie 40x60cm abgeschnitten wird! *\/\r\n.star-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1;}\r\n.star-wrap img{display:block; width:100%; height:100%; object-fit:contain; object-position:center; margin:0;}\r\n\r\n.pme-footer{position:absolute;bottom:24px;left:0;right:0;display:flex;flex-direction:column;align-items:center;font-family:'DM Sans',sans-serif;z-index:10;}\r\n.pme-h{font-size:36px;font-weight:400;letter-spacing:0.02em;text-align:center;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;white-space:nowrap;}\r\n.pme-tg{font-size:9px;font-weight:400;letter-spacing:0.05em;text-align:center;text-transform:uppercase;color:#1a1a1a;margin-bottom:6px;white-space:nowrap;}\r\n.pme-dt{font-size:9px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:#1a1a1a;white-space:nowrap;}\r\n\r\n.pme-dimr{position:absolute;right:-22px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}\r\n.pme-dimr span{writing-mode:vertical-rl;font-size:11px;color:#aaa;white-space:nowrap;}\r\n.pme-dimb{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}\r\n.pme-dimb span{font-size:11px;color:#aaa;}\r\n.pme-bar{background:#1a1a1a;display:flex;align-items:center;padding:16px 24px;gap:12px;margin-top:auto;}\r\n.pme-prices{display:flex;align-items:baseline;gap:6px;}\r\n.pme-old{font-size:12px;color:#888;text-decoration:line-through;}\r\n.pme-new{font-size:17px;font-weight:600;color:#fff;}\r\n.pme-cart{background:#7E5AF0;color:#ffffff;border:none;border-radius:25px;padding:10px 14px;font-size:18px;font-weight:400;font-family:'Poppins',sans-serif;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.15s,color 0.15s,border-color 0.15s;}\r\n.pme-cart:hover{background:#632ED3!important;color:#ffffff!important;border:none!important;}\r\n\r\n@media(max-width:768px){\r\n .pme{flex-direction:column; height:auto!important; min-height:100vh;}\r\n .pme-nav{display:none;}\r\n .pme-panel{width:100%!important; min-width:0!important; border-right:none; border-top:1px solid #e8e8e8; max-height:none!important; height:auto!important; overflow-y:visible!important; order:3;}\r\n .pme-canvas{order:1; flex:none!important; height:65vh!important; min-height:380px;}\r\n .pme-mobnav{display:flex!important; order:2; height:71px!important; flex:0 0 71px!important;}\r\n .pme-section{padding:16px 16px 24px;}\r\n}\r\n.pme-mobnav{display:none;width:100%;background:#1a1a1a;overflow-x:auto;scrollbar-width:none;}\r\n.pme-mobnav::-webkit-scrollbar{display:none;}\r\n.pme-mobbtn{flex:1;min-width:60px;height:71px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#888;font-size:14px;font-family:'DM Sans',sans-serif;}\r\n.pme-mobbtn.active{color:#fff;}\r\n.pme-mobbtn svg{width:24px;height:24px;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pme\" id=\"pme-root\">\r\n <nav class=\"pme-nav\">\r\n <button class=\"pme-nav-btn active\" data-panel=\"zodiac\">\r\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>Sternzeichen\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"labels\">\r\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\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"style\">\r\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\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"size\">\r\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\r\n <\/button>\r\n <\/nav>\r\n\r\n <div class=\"pme-mobnav\">\r\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>\r\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>\r\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>\r\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>\r\n <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-zodiac\">\r\n <div class=\"pme-title\">Sternzeichen<\/div>\r\n <div class=\"pme-desc\">Gib dein Geburtsdatum ein, um dein Sternzeichen zu finden.<\/div>\r\n \r\n <span class=\"pme-lbl\">Geburtsdatum<\/span>\r\n <div class=\"pme-field\"><input type=\"date\" id=\"inp-bday\" \/><\/div>\r\n\r\n <span class=\"pme-lbl\">Sternzeichen<\/span>\r\n <div id=\"zodiac-dropdown\">\r\n <div class=\"dd-selected\" id=\"zodiac-selected\">\r\n <span id=\"zodiac-selected-text\"><\/span>\r\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>\r\n <\/div>\r\n <div class=\"dd-options\" id=\"zodiac-options\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Texte<\/div>\r\n <div class=\"pme-desc\">Passe den Text auf deinem Sternzeichen-Poster an.<\/div>\r\n <span class=\"pme-lbl\">\u00dcberschrift<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-h\" value=\"WIDDER\"\/><\/div>\r\n <span class=\"pme-lbl\">Eigenschaften<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-t\" value=\"SELBSTBEWUSST - ENERGISCH - IMPULSIV\"\/><\/div>\r\n <span class=\"pme-lbl\">Datum<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-d\" value=\"21. M\u00c4R - 20. APR\"\/><\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-style\">\r\n <div class=\"pme-title\">Stil<\/div>\r\n <div class=\"pme-desc\">W\u00e4hle ein Farbschema f\u00fcr dein Poster.<\/div>\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div id=\"theme-pins\" class=\"theme-pins\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-section\" id=\"sec-size\">\r\n <div class=\"pme-title\">Gr\u00f6\u00dfe<\/div>\r\n <div class=\"pme-desc\">W\u00e4hle Material und Gr\u00f6\u00dfe.<\/div>\r\n <span class=\"pme-lbl\">Material<\/span>\r\n <div id=\"mat-dropdown\">\r\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>\r\n <div class=\"dd-options\" id=\"mat-options\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\r\n <span class=\"pme-lbl\">Rahmenfarbe<\/span>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\r\n <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\r\n <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\r\n <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\r\n <div id=\"size-dropdown\">\r\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>\r\n <div class=\"dd-options\" id=\"size-options\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-bar\">\r\n <div class=\"pme-prices\">\r\n <span class=\"pme-old\" id=\"p-old\"><\/span>\r\n <span class=\"pme-new\" id=\"p-new\"><\/span>\r\n <\/div>\r\n <button class=\"pme-cart\" id=\"btn-cart\">\r\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>\r\n In den Warenkorb\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n <div class=\"pme-outer\" id=\"pme-outer\">\r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"pme-poster-inner\" id=\"pme-poster-inner\">\r\n <div class=\"star-wrap\" id=\"zodiac-wrap\">\r\n <img decoding=\"async\" id=\"zodiac-img\" src=\"\" alt=\"Zodiac Poster\" \/>\r\n <\/div>\r\n <div class=\"pme-footer\" id=\"pme-footer\">\r\n <div class=\"pme-h\" id=\"out-h\">WIDDER<\/div>\r\n <div class=\"pme-tg\" id=\"out-t\">SELBSTBEWUSST - ENERGISCH - IMPULSIV<\/div>\r\n <div class=\"pme-dt\" id=\"out-d\">21. M\u00c4R - 20. APR<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ --- 1. THEMES DEFINIEREN ---\r\nvar THEMES = [\r\n { id:'Standard', name:'Standard', posterBg:'#ffffff', textCol:'#1a1a1a' },\r\n { id:'Sand', name:'Sand', posterBg:'#f3ebe1', textCol:'#1a1a1a' },\r\n { id:'Night', name:'Night', posterBg:'#14181f', textCol:'#ffffff' },\r\n { id:'Dark', name:'Dark', posterBg:'#1a1a1a', textCol:'#ffffff' },\r\n { id:'Cloud', name:'Cloud', posterBg:'#a3b1b5', textCol:'#ffffff' },\r\n { id:'Modern', name:'Modern', posterBg:'#ffffff', textCol:'#1a1a1a' }\r\n];\r\n\r\n\/\/ --- 2. STERNZEICHEN DEFINIEREN (DEUTSCH LOKALISIERT) ---\r\nvar ZODIACS = [\r\n { id:'aries', icon:'\u2648\\uFE0E', imgName:'Aries', name:'WIDDER', dates:'21. M\u00c4R - 20. APR', traits:'SELBSTBEWUSST - ENERGISCH - IMPULSIV' },\r\n { id:'taurus', icon:'\u2649\\uFE0E', imgName:'Taurus', name:'STIER', dates:'21. APR - 20. MAI', traits:'GEDULDIG - SINNLICH - ZUVERL\u00c4SSIG' },\r\n { id:'gemini', icon:'\u264a\\uFE0E', imgName:'Gemini', name:'ZWILLINGE', dates:'21. MAI - 21. JUN', traits:'ANPASSUNGSF\u00c4HIG - KONTAKTFREUDIG - INTELLIGENT' },\r\n { id:'cancer', icon:'\u264b\\uFE0E', imgName:'Cancer', name:'KREBS', dates:'22. JUN - 22. JUL', traits:'EMOTIONAL - F\u00dcRSORGLICH - INTUITIV' },\r\n { id:'leo', icon:'\u264c\\uFE0E', imgName:'Leo', name:'L\u00d6WE', dates:'23. JUL - 22. AUG', traits:'CHARISMATISCH - SELBSTBEWUSST - GROSSZ\u00dcGIG' },\r\n { id:'virgo', icon:'\u264d\\uFE0E', imgName:'Virgo', name:'JUNGFRAU', dates:'23. AUG - 22. SEP', traits:'ANALYTISCH - ORGANISIERT - BESCHEIDEN' },\r\n { id:'libra', icon:'\u264e\\uFE0E', imgName:'Libra', name:'WAAGE', dates:'23. SEP - 23. OKT', traits:'HARMONISCH - DIPLOMATISCH - \u00c4STHETISCH' },\r\n { id:'scorpio', icon:'\u264f\\uFE0E', imgName:'Scorpio', name:'SKORPION', dates:'24. OKT - 22. NOV', traits:'LEIDENSCHAFTLICH - TIEFGR\u00dcNDIG - DURCHSETZUNGSSTARK' },\r\n { id:'sagittarius', icon:'\u2650\\uFE0E', imgName:'Sagittarius', name:'SCH\u00dcTZE', dates:'23. NOV - 21. DEZ', traits:'ABENTEUERLUSTIG - OPTIMISTISCH - HUMORVOLL' },\r\n { id:'capricorn', icon:'\u2651\\uFE0E', imgName:'Capricorn', name:'STEINBOCK', dates:'22. DEZ - 20. JAN', traits:'EHRGEIZIG - VERANTWORTUNGSBEWUSST - DISZIPLINIERT' },\r\n { id:'aquarius', icon:'\u2652\\uFE0E', imgName:'Aquarius', name:'WASSERMANN', dates:'21. JAN - 19. FEB', traits:'UNKONVENTIONELL - INTELLEKTUELL - HUMANIT\u00c4R' },\r\n { id:'pisces', icon:'\u2653\\uFE0E', imgName:'Pisces', name:'FISCHE', dates:'20. FEB - 20. M\u00c4R', traits:'EMPATHISCH - VERTR\u00c4UMT - MITF\u00dcHLEND' }\r\n];\r\n\r\n\/\/ --- 3. URLS AUTOMATISCH GENERIEREN (Verwendet interne englische imgName f\u00fcr den Pfad) ---\r\nvar BASE_URL = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/';\r\nZODIACS.forEach(function(z) {\r\n z.images = {};\r\n THEMES.forEach(function(t) {\r\n z.images[t.id] = BASE_URL + z.imgName + '-' + t.id + '.png';\r\n });\r\n});\r\n\r\nvar SIZES = {\r\n postcard:[{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n poster:[{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n framed:[{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n canvas:[{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\nvar MATS = ['postcard','poster','framed','canvas'];\r\nvar MAT_LABELS = {postcard:'Postkarte',poster:'Poster',framed:'Gerahmtes Poster',canvas:'Leinwand'};\r\n\r\nvar S = {\r\n zodiac: 'aries', mat: 'poster', sizeIdx: 2, themeId: 'Night', frame: 'black'\r\n};\r\n\r\nfunction getTheme(){ return THEMES.find(function(t){ return t.id===S.themeId; })||THEMES[0]; }\r\nfunction getZodiac(){ return ZODIACS.find(function(z){ return z.id===S.zodiac; })||ZODIACS[0]; }\r\n\r\n(function(){\r\n var p = new URLSearchParams(window.location.search);\r\n if(p.get('zodiac')) S.zodiac = p.get('zodiac');\r\n if(p.get('mat')) S.mat = p.get('mat');\r\n if(p.get('size')) S.sizeIdx = parseInt(p.get('size'));\r\n if(p.get('theme')) S.themeId = p.get('theme');\r\n if(p.get('frame')) S.frame = p.get('frame');\r\n if(p.get('h')) document.getElementById('inp-h').value=decodeURIComponent(p.get('h'));\r\n if(p.get('d')) document.getElementById('inp-d').value=decodeURIComponent(p.get('d'));\r\n if(p.get('t')) document.getElementById('inp-t').value=decodeURIComponent(p.get('t'));\r\n})();\r\n\r\nfunction updateURL(){\r\n var p = new URLSearchParams();\r\n p.set('zodiac',S.zodiac); p.set('mat',S.mat); p.set('size',S.sizeIdx); p.set('theme',S.themeId);\r\n if(S.mat === 'framed') p.set('frame', S.frame);\r\n p.set('h',encodeURIComponent(document.getElementById('inp-h').value));\r\n p.set('d',encodeURIComponent(document.getElementById('inp-d').value));\r\n p.set('t',encodeURIComponent(document.getElementById('inp-t').value));\r\n history.replaceState(null,'','?'+p.toString());\r\n}\r\n\r\nfunction fitText() {\r\n var hOut = document.getElementById('out-h');\r\n var dOut = document.getElementById('out-d');\r\n var tOut = document.getElementById('out-t');\r\n var footer = document.querySelector('.pme-footer');\r\n if (!footer || !hOut || !dOut || !tOut) return;\r\n \r\n hOut.style.fontSize = ''; dOut.style.fontSize = ''; tOut.style.fontSize = '';\r\n \r\n var maxWidth = footer.clientWidth - 24; \r\n if (maxWidth <= 0) return;\r\n \r\n [hOut, dOut, tOut].forEach(function(el) {\r\n if (el.scrollWidth > maxWidth) {\r\n var currentSize = parseFloat(window.getComputedStyle(el).fontSize);\r\n el.style.fontSize = ((currentSize * maxWidth \/ el.scrollWidth) * 0.95) + 'px';\r\n }\r\n });\r\n}\r\n\r\nfunction updateImageDisplay(){\r\n var z = getZodiac();\r\n var imgEl = document.getElementById('zodiac-img');\r\n var targetSrc = z.images[S.themeId] || z.images['Standard'] || '';\r\n \r\n if(targetSrc) {\r\n imgEl.src = targetSrc;\r\n imgEl.style.display = 'block';\r\n } else {\r\n imgEl.style.display = 'none'; \r\n }\r\n}\r\n\r\nfunction updatePosterBg(){\r\n var t = getTheme();\r\n document.getElementById('pme-poster-inner').style.background = t.posterBg;\r\n ['out-h','out-d','out-t'].forEach(function(id){\r\n var el = document.getElementById(id);\r\n if(el) el.style.color = t.textCol;\r\n });\r\n updateImageDisplay();\r\n}\r\n\r\nfunction updateText(){\r\n document.getElementById('out-h').textContent = document.getElementById('inp-h').value.toUpperCase();\r\n document.getElementById('out-t').textContent = document.getElementById('inp-t').value.toUpperCase();\r\n document.getElementById('out-d').textContent = document.getElementById('inp-d').value.toUpperCase();\r\n fitText();\r\n updateURL();\r\n}\r\n\r\nfunction getZodiacFromDate(dateString) {\r\n if (!dateString) return 'aries';\r\n var d = new Date(dateString);\r\n if (isNaN(d)) return 'aries';\r\n \r\n var m = d.getMonth() + 1;\r\n var day = d.getDate();\r\n\r\n if ((m === 3 && day >= 21) || (m === 4 && day <= 20)) return 'aries';\r\n if ((m === 4 && day >= 21) || (m === 5 && day <= 21)) return 'taurus';\r\n if ((m === 5 && day >= 22) || (m === 6 && day <= 21)) return 'gemini';\r\n if ((m === 6 && day >= 22) || (m === 7 && day <= 22)) return 'cancer';\r\n if ((m === 7 && day >= 23) || (m === 8 && day <= 22)) return 'leo';\r\n if ((m === 8 && day >= 23) || (m === 9 && day <= 22)) return 'virgo';\r\n if ((m === 9 && day >= 23) || (m === 10 && day <= 23)) return 'libra';\r\n if ((m === 10 && day >= 24) || (m === 11 && day <= 22)) return 'scorpio';\r\n if ((m === 11 && day >= 23) || (m === 12 && day <= 20)) return 'sagittarius';\r\n if ((m === 12 && day >= 21) || (m === 1 && day <= 19)) return 'capricorn';\r\n if ((m === 1 && day >= 20) || (m === 2 && day <= 18)) return 'aquarius';\r\n if ((m === 2 && day >= 19) || (m === 3 && day <= 20)) return 'pisces';\r\n return 'aries';\r\n}\r\n\r\nfunction renderZodiacDropdown(){\r\n var optsDiv = document.getElementById('zodiac-options');\r\n var selText = document.getElementById('zodiac-selected-text');\r\n var selDiv = document.getElementById('zodiac-selected');\r\n\r\n optsDiv.innerHTML = ZODIACS.map(function(z) {\r\n return '<div class=\"size-opt\" data-zodiac=\"'+z.id+'\" style=\"display:flex; justify-content:space-between; align-items:center;\">' +\r\n '<span><span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name + '<\/span>' +\r\n '<span style=\"color:#999; font-size:11px;\">' + z.dates + '<\/span>' +\r\n '<\/div>';\r\n }).join('');\r\n\r\n function selectZodiac(id) {\r\n S.zodiac = id;\r\n var z = getZodiac();\r\n selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + z.icon + '<\/span> ' + z.name;\r\n document.getElementById('inp-h').value = z.name;\r\n document.getElementById('inp-t').value = z.traits;\r\n document.getElementById('inp-d').value = z.dates;\r\n optsDiv.style.display = 'none';\r\n updateText(); updateImageDisplay(); renderThemePins(); updateURL();\r\n }\r\n\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectZodiac(this.getAttribute('data-zodiac')); });\r\n });\r\n\r\n selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n \r\n var curZ = getZodiac();\r\n selText.innerHTML = '<span class=\"zodiac-icon-drop\">' + curZ.icon + '<\/span> ' + curZ.name;\r\n}\r\n\r\ndocument.getElementById('inp-bday').addEventListener('input', function() {\r\n var zId = getZodiacFromDate(this.value);\r\n var opt = document.querySelector('.size-opt[data-zodiac=\"'+zId+'\"]');\r\n if (opt) opt.click();\r\n});\r\n\r\nfunction renderThemePins(){\r\n var c = document.getElementById('theme-pins');\r\n var currentZodiac = getZodiac();\r\n \r\n c.innerHTML = THEMES.map(function(t){\r\n var active = t.id===S.themeId?' active':'';\r\n var previewImg = currentZodiac.images[t.id]; \r\n \r\n return '<button class=\"pme-thm'+active+'\" data-id=\"'+t.id+'\">'\r\n +'<div class=\"pme-thm-circle\" style=\"background-image:url(\\''+previewImg+'\\');\"><\/div>'\r\n +'<span>'+t.name+'<\/span>'\r\n +'<\/button>';\r\n }).join('');\r\n \r\n c.querySelectorAll('.pme-thm').forEach(function(pin){\r\n pin.addEventListener('click', function(){\r\n c.querySelectorAll('.pme-thm').forEach(function(p){ p.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.themeId = this.getAttribute('data-id');\r\n updatePosterBg(); updateURL();\r\n });\r\n });\r\n}\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn){\r\n btn.addEventListener('click', function(){\r\n var panel = this.getAttribute('data-panel');\r\n document.querySelectorAll('.pme-section').forEach(function(s){ s.classList.remove('active'); });\r\n document.querySelectorAll('.pme-nav-btn,.pme-mobbtn').forEach(function(b){ b.classList.remove('active'); });\r\n document.getElementById('sec-'+panel).classList.add('active');\r\n document.querySelectorAll('[data-panel=\"'+panel+'\"]').forEach(function(b){ b.classList.add('active'); });\r\n });\r\n});\r\n\r\n['inp-h','inp-d','inp-t'].forEach(function(id){\r\n document.getElementById(id).addEventListener('input', updateText);\r\n});\r\n\r\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.frame = this.getAttribute('data-frame');\r\n updateDims();\r\n updateURL();\r\n });\r\n});\r\n\r\nfunction renderMaterials(){\r\n var optsDiv = document.getElementById('mat-options');\r\n var selText = document.getElementById('mat-selected-text');\r\n var selDiv = document.getElementById('mat-selected');\r\n function selectMat(mat){\r\n S.mat=mat;\r\n \r\n var sizes = SIZES[S.mat] || [];\r\n S.sizeIdx = 0;\r\n for (var i = 0; i < sizes.length; i++) {\r\n if (sizes[i].l === '40x60cm') { \/\/ Default zu 40x60cm, wenn vorhanden\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n \r\n selText.textContent = MAT_LABELS[mat];\r\n optsDiv.style.display='none';\r\n renderSizes(); updateURL();\r\n }\r\n optsDiv.innerHTML = MATS.map(function(m){\r\n return '<div class=\"size-opt\" data-mat=\"'+m+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+MAT_LABELS[m]+'<\/div>';\r\n }).join('');\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectMat(this.getAttribute('data-mat')); });\r\n });\r\n selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n selText.textContent = MAT_LABELS[S.mat];\r\n}\r\n\r\nfunction buildLabel(s){\r\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>';\r\n}\r\nfunction renderSizes(){\r\n var sizes=SIZES[S.mat]||[];\r\n var optsDiv=document.getElementById('size-options');\r\n var selText=document.getElementById('size-selected-text');\r\n var selDiv=document.getElementById('size-selected');\r\n \r\n var frameWrap = document.getElementById('frame-opt-wrap');\r\n if (frameWrap) {\r\n frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\r\n }\r\n \r\n function selectIdx(i){\r\n S.sizeIdx=i; selText.innerHTML=buildLabel(sizes[i]);\r\n optsDiv.style.display='none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n optsDiv.innerHTML=sizes.map(function(s,i){\r\n return '<div class=\"size-opt\" data-idx=\"'+i+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+buildLabel(s)+'<\/div>';\r\n }).join('');\r\n optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n el.addEventListener('click',function(){ selectIdx(parseInt(this.getAttribute('data-idx'))); });\r\n });\r\n selDiv.onclick=function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n selectIdx(S.sizeIdx<sizes.length?S.sizeIdx:0);\r\n}\r\n\r\nfunction updatePrice(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n if(!s) return;\r\n document.getElementById('p-old').textContent=s.orig.toFixed(2).replace('.',',')+' EUR';\r\n document.getElementById('p-new').textContent=s.p.toFixed(2).replace('.',',')+' EUR';\r\n}\r\n\r\nfunction updateDims(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n if(!s) return;\r\n \r\n document.getElementById('dim-w').textContent= s.w + ' cm';\r\n document.getElementById('dim-h').textContent= s.h + ' cm';\r\n var BASE=504;\r\n var pw= s.w;\r\n var ph= s.h;\r\n var longer=Math.max(pw,ph), shorter=Math.min(pw,ph);\r\n var baseW = Math.round(BASE*shorter\/longer);\r\n var baseH = BASE;\r\n var poster=document.getElementById('pme-poster');\r\n\r\n if (S.mat === 'framed') {\r\n var thicknessMm = (s.l === '13x18cm') ? 10 : 14;\r\n var framePx = thicknessMm * (BASE \/ (longer * 10));\r\n\r\n poster.style.borderWidth = framePx + 'px';\r\n poster.style.borderStyle = 'solid';\r\n\r\n if (S.frame === 'wood') {\r\n poster.style.borderColor = '#d7c5b3';\r\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\";\r\n } else if (S.frame === 'white') {\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#ffffff';\r\n } else { \/\/ black\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#1a1a1a';\r\n }\r\n \r\n poster.style.width = (baseW + framePx * 2) + 'px';\r\n poster.style.height = (baseH + framePx * 2) + 'px';\r\n poster.classList.add('is-framed');\r\n } else {\r\n poster.style.border = '';\r\n poster.style.borderImage = '';\r\n poster.style.width = baseW + 'px';\r\n poster.style.height = baseH + 'px';\r\n poster.classList.remove('is-framed');\r\n }\r\n\r\n setTimeout(function(){ fitText(); fitPoster(); },60);\r\n}\r\n\r\nfunction fitPoster(){\r\n var outer=document.getElementById('pme-outer');\r\n var poster=document.getElementById('pme-poster');\r\n var container = document.getElementById('pme-canvas');\r\n if(!container||!poster.offsetWidth) return;\r\n \r\n var isMob = window.innerWidth <= 768;\r\n var aH = container.clientHeight - (isMob ? 16 : 60);\r\n var aW = container.clientWidth - (isMob ? 24 : 80);\r\n \r\n var scale = Math.min(aH \/ poster.offsetHeight, aW \/ poster.offsetWidth, isMob ? 2.5 : 1.4);\r\n outer.style.transform='scale('+scale+')';\r\n outer.style.transformOrigin='center center';\r\n}\r\n\r\nfunction setHeight(){\r\n var el=document.getElementById('pme-root');\r\n if(!el) return;\r\n \r\n var isMob = window.innerWidth <= 768;\r\n\r\n if (isMob) {\r\n el.style.height = 'auto'; \r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvasContainer = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvasContainer) canvasContainer.style.height = '';\r\n } else {\r\n var r=el.getBoundingClientRect();\r\n var h=Math.max(window.innerHeight-r.top,500);\r\n el.style.height=h+'px';\r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvasContainer = document.getElementById('pme-canvas');\r\n if(panel) panel.style.height=h+'px';\r\n if(nav) nav.style.height=h+'px';\r\n if(canvasContainer) canvasContainer.style.height=h+'px';\r\n }\r\n \r\n setTimeout(function(){ fitPoster(); },100);\r\n}\r\n\r\nwindow.addEventListener('load',setHeight);\r\nwindow.addEventListener('resize',function(){ setHeight(); });\r\nsetTimeout(setHeight,300);\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click', function(){\r\n var s=(SIZES[S.mat]||[])[S.sizeIdx]||{};\r\n var t=getTheme();\r\n \r\n var cartData={\r\n action:'uwa_add_to_cart',\r\n \r\n \/\/ HIER DIE NEUE DEUTSCHE PRODUKT-ID:\r\n product_id:'2219',\r\n \r\n poster_title:document.getElementById('out-h').textContent,\r\n poster_subtitle:document.getElementById('out-d').textContent,\r\n poster_coordinates:document.getElementById('out-t').textContent,\r\n poster_lat: '',\r\n poster_lng: '',\r\n poster_zoom: '',\r\n poster_shape: '',\r\n poster_zodiac:S.zodiac,\r\n poster_style:S.themeId,\r\n poster_material:S.mat,\r\n poster_frame:(S.mat === 'framed') ? S.frame : '',\r\n poster_size:s.l||'',\r\n poster_orientation: 'portrait',\r\n poster_price:s.p||'',\r\n poster_original_price:s.orig||''\r\n };\r\n \r\n var poster=document.getElementById('pme-poster');\r\n var imgEl = document.getElementById('zodiac-img');\r\n var W=poster.clientWidth, H=poster.clientHeight;\r\n \r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n \r\n var dprOut = 2;\r\n var out=document.createElement('canvas');\r\n out.width=W * dprOut; \r\n out.height=H * dprOut;\r\n var ctx2=out.getContext('2d');\r\n ctx2.scale(dprOut, dprOut);\r\n ctx2.imageSmoothingEnabled = true;\r\n ctx2.imageSmoothingQuality = 'high';\r\n \r\n ctx2.fillStyle='#ffffff';\r\n ctx2.fillRect(0,0,W,H);\r\n \r\n var pad=14; \r\n ctx2.fillStyle=t.posterBg;\r\n ctx2.fillRect(pad,pad,W-2*pad,H-2*pad);\r\n \r\n var innerW = W - 2*pad;\r\n var innerH = H - 2*pad;\r\n \r\n \/\/ Bild exakt ins Raster exportieren, als \"contain\" statt \"cover\"\r\n if(imgEl && imgEl.src && imgEl.complete) {\r\n \/\/ Contain Logic f\u00fcr den Export\r\n var scale = Math.min(innerW \/ imgEl.naturalWidth, innerH \/ imgEl.naturalHeight);\r\n var w = imgEl.naturalWidth * scale;\r\n var h = imgEl.naturalHeight * scale;\r\n var x = pad + (innerW - w) \/ 2;\r\n var y = pad + (innerH - h) \/ 2;\r\n \r\n ctx2.save();\r\n ctx2.beginPath();\r\n ctx2.rect(pad, pad, innerW, innerH);\r\n ctx2.clip();\r\n ctx2.drawImage(imgEl, x, y, w, h);\r\n ctx2.restore();\r\n }\r\n \r\n ctx2.fillStyle=t.textCol;\r\n ctx2.textAlign='center';\r\n \r\n \/\/ Text im Export-Canvas exakt wie in der Vorschau dar\u00fcberlegen\r\n var bY = H - pad - 24; \r\n ctx2.font='400 10px \"DM Sans\",sans-serif'; \r\n ctx2.letterSpacing='0.05em';\r\n ctx2.fillText(document.getElementById('out-d').textContent,W\/2,bY);\r\n \r\n ctx2.font='400 10px \"DM Sans\",sans-serif'; \r\n ctx2.letterSpacing='0.05em';\r\n ctx2.fillText(document.getElementById('out-t').textContent,W\/2,bY-18);\r\n \r\n ctx2.font='400 36px \"DM Sans\",sans-serif';\r\n ctx2.letterSpacing='0.02em';\r\n ctx2.fillText(document.getElementById('out-h').textContent,W\/2,bY-46);\r\n\r\n cartData.poster_thumbnail=out.toDataURL('image\/jpeg',0.92);\r\n\r\n function sendToCart(data){\r\n var body=Object.keys(data).map(function(k){ return encodeURIComponent(k)+'='+encodeURIComponent(data[k]); }).join('&');\r\n fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php',{\r\n method:'POST',\r\n headers:{'Content-Type':'application\/x-www-form-urlencoded'},\r\n body:body\r\n }).then(function(r){ return r.json(); })\r\n .then(function(res){ \r\n if(!res.success) {\r\n btn.innerHTML = originalHTML;\r\n console.error(\"Cart Error:\", res);\r\n alert(\"Konnte nicht in den Warenkorb gelegt werden. Hast du die richtige deutsche Produkt-ID hinterlegt?\");\r\n } else {\r\n window.location.href='https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n }\r\n })\r\n .catch(function(err){ \r\n btn.innerHTML = originalHTML;\r\n console.error(\"Fetch Error:\", err);\r\n alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n });\r\n }\r\n sendToCart(cartData);\r\n});\r\n\r\n\/\/ INITIALISIERUNG\r\nrenderZodiacDropdown();\r\nrenderThemePins();\r\nrenderMaterials();\r\nrenderSizes();\r\nupdateText();\r\nupdatePosterBg();\r\n\r\nif (S.frame) {\r\n document.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\r\n });\r\n}\r\nif (S.mat === 'framed') {\r\n document.getElementById('pme-poster').classList.add('is-framed');\r\n}\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Zodiac Editor Sternzeichen Texte Stil Gr\u00f6\u00dfe Zeichen Texte Stil Gr\u00f6\u00dfe Sternzeichen Gib dein Geburtsdatum ein, um dein Sternzeichen zu finden. Geburtsdatum Sternzeichen Texte Passe den Text auf deinem Sternzeichen-Poster an. \u00dcberschrift Eigenschaften Datum Stil W\u00e4hle ein Farbschema f\u00fcr dein Poster. Design Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material Poster Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 30x40cm In […]<\/p>\n","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":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions"}],"predecessor-version":[{"id":2252,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2168\/revisions\/2252"}],"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}]}}