Family Home Editor<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\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\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:#999;margin-bottom:6px;}\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;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n\r\n.theme-pins { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; justify-content: flex-start; }\r\n.pme-thm { border: none !important; border-radius: 0 !important; padding: 0 !important; cursor: pointer !important; background: 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-circle { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #e0e0e0; transition: border-color 0.2s; }\r\n.pme-thm:hover .pme-thm-circle { border-color: #a0a0a0; }\r\n.pme-thm.active .pme-thm-circle { border-color: #1a1a1a; }\r\n.pme-thm span { font-size: 11px; color: #1a1a1a; font-weight: 500; font-family:'DM Sans',sans-serif; text-align: center; line-height: 1.2;}\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:12px;position:relative;display:flex;flex-direction:column;border:1px solid hsl(0,0%,78%);box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); overflow:hidden;}\r\n.home-wrap { --tag-bg: #ffffff; --tag-fg: #1a1a1a; --house-fill: transparent; --house-stroke: #1a1a1a; flex: 1; min-height: 0; position: relative; background: var(--tag-bg); color: var(--tag-fg); transition: background 0.3s, color 0.3s;}\r\n.home-wrap svg { display: block; }\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\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#size-dropdown,#mat-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);}\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.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\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\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=\"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=\"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-mobbtn\" 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-mobbtn\" 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 <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Home Details<\/div>\r\n <div class=\"pme-desc\">Personalisiere deinen Family Home Print.<\/div>\r\n \r\n <span class=\"pme-lbl\">Namen<\/span>\r\n <div class=\"pme-field\" id=\"names-wrap\" style=\"display:flex; flex-direction:column; gap:8px;\">\r\n <input type=\"text\" id=\"inp-name-0\" placeholder=\"Name 1\" \/>\r\n <input type=\"text\" id=\"inp-name-1\" placeholder=\"Name 2\" \/>\r\n <input type=\"text\" id=\"inp-name-2\" placeholder=\"Name 3\" \/>\r\n <input type=\"text\" id=\"inp-name-3\" placeholder=\"Name 4\" \/>\r\n \r\n <div id=\"extra-names-wrap\" style=\"display:none; flex-direction:column; gap:8px;\">\r\n <input type=\"text\" id=\"inp-name-4\" placeholder=\"Name 5\" \/>\r\n <input type=\"text\" id=\"inp-name-5\" placeholder=\"Name 6\" \/>\r\n <input type=\"text\" id=\"inp-name-6\" placeholder=\"Name 7\" \/>\r\n <input type=\"text\" id=\"inp-name-7\" placeholder=\"Name 8\" \/>\r\n <\/div>\r\n \r\n <div id=\"btn-more-names\" style=\"font-size:13px; color:#1a1a1a; text-decoration:underline; cursor:pointer; margin-top:2px; font-weight:500;\">Mehr Namen<\/div>\r\n <\/div>\r\n \r\n <span class=\"pme-lbl\">Ort<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"LONDON\" placeholder=\"Stadt\"\/><\/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 eine Farbvariante f\u00fcr deinen Print.<\/div>\r\n\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div class=\"theme-pins\">\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"transparent\" data-hs=\"#1a1a1a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #ffffff; border-color: #e0e0e0; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Minimal<br>White<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-hf=\"transparent\" data-hs=\"#fcf9e5\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #e0ceb8; border-color: #e0ceb8; box-shadow: inset 0 0 0 2px #fcf9e5;\"><\/div>\r\n <span>Sahara<br>Sands<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-hf=\"transparent\" data-hs=\"#f7285a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f7bf3d; border-color: #f7bf3d; box-shadow: inset 0 0 0 2px #f7285a;\"><\/div>\r\n <span>Retro<br>Sunset<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-hf=\"transparent\" data-hs=\"#f7e946\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #42c053; border-color: #42c053; box-shadow: inset 0 0 0 2px #f7e946;\"><\/div>\r\n <span>Evergreen<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-hf=\"transparent\" data-hs=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #000000; border-color: #000000; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Midnight<br>Express<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#fdf7ef\" data-fg=\"#cf8a7c\" data-hf=\"#c8e2d5\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #c8e2d5; border-color: #c8e2d5; box-shadow: inset 0 0 0 2px #cf8a7c;\"><\/div>\r\n <span>Nautica<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"#b2b2b2\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #b2b2b2; border-color: #b2b2b2; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Stone<\/span>\r\n <\/button>\r\n <button class=\"pme-thm active\" data-bg=\"#f6eee3\" data-fg=\"#ffffff\" data-hf=\"#d6b6a0\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #d6b6a0; border-color: #d6b6a0; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Warm<br>Sand<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\" style=\"margin-top:24px;\">Optionen<\/span>\r\n <div class=\"pme-field\">\r\n <label style=\"display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#1a1a1a; font-weight:500; text-transform:none;\">\r\n <input type=\"checkbox\" id=\"inp-heart\" checked style=\"width:18px; height:18px; cursor:pointer; accent-color:#1a1a1a;\">\r\n Herz anzeigen\r\n <\/label>\r\n <\/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 <select id=\"sel-mat\" style=\"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:#fafafa;margin-bottom:14px;cursor:pointer;appearance:auto;\">\r\n <option value=\"postcard\">Postkarte<\/option>\r\n <option value=\"poster\" selected>Poster<\/option>\r\n <option value=\"framed\">Gerahmtes Poster<\/option>\r\n <option value=\"canvas\">Leinwand<\/option>\r\n <\/select>\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\" style=\"position:relative;margin-bottom:14px;\">\r\n <div id=\"size-selected\" style=\"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 <span id=\"size-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 id=\"size-options\" style=\"display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);\"><\/div>\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\">29,99 \u20ac<\/span>\r\n <span class=\"pme-new\" id=\"p-new\">14,99 \u20ac<\/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\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 \r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"home-wrap\" id=\"home-wrap\">\r\n <svg id=\"homePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 70 435 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 435 Z\" fill=\"var(--house-fill)\" \/>\r\n\r\n <path id=\"svg-heart\" d=\"M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z\" fill=\"#ff0000\" \/>\r\n \r\n <path d=\"M 70 190 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 420\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n \r\n <path d=\"M 70 360 L 70 435 L 180 435\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n \r\n <g id=\"svg-names\" font-family=\"'DM Sans', sans-serif\" font-weight=\"300\" fill=\"currentColor\"><\/g>\r\n \r\n <text id=\"svg-loc\" x=\"275\" y=\"420\" text-anchor=\"end\" font-family=\"'DM Sans', sans-serif\" font-weight=\"400\" font-size=\"16\" letter-spacing=\"0.08em\" fill=\"currentColor\">LONDON<\/text>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n \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\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 S = {\r\n names: ['ANDREA', 'THOMAS', 'HANNAH', 'DAVID', '', '', '', ''],\r\n loc: 'LONDON',\r\n showHeart: true,\r\n mat: 'poster', \r\n sizeIdx: 1, \/\/ Setzt Default auf 30x40cm\r\n styleIndex: 7, \r\n frame: 'black'\r\n};\r\n\r\nfunction updateURL() {\r\n var p = new URLSearchParams();\r\n p.set('mat', S.mat);\r\n p.set('size', S.sizeIdx);\r\n p.set('style', S.styleIndex);\r\n if (S.mat === 'framed') p.set('frame', S.frame);\r\n p.set('names', S.names.join('|'));\r\n p.set('loc', S.loc);\r\n p.set('heart', S.showHeart);\r\n history.replaceState(null, '', '?' + p.toString());\r\n}\r\n\r\nfunction renderPoster() {\r\n var heart = document.getElementById('svg-heart');\r\n if (heart) heart.style.display = S.showHeart ? 'block' : 'none';\r\n\r\n var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\r\n var svgNames = document.getElementById('svg-names');\r\n if (svgNames) {\r\n svgNames.innerHTML = '';\r\n var N = validNames.length;\r\n if (N > 0) {\r\n var fs = 28; \r\n var lh = 38; \r\n var maxH = 160; \r\n \r\n var textHeight = (N - 1) * lh + fs;\r\n\r\n \/\/ Vertikale Skalierung\r\n if (textHeight > maxH) {\r\n var scaleH = maxH \/ textHeight;\r\n fs = fs * scaleH;\r\n lh = lh * scaleH;\r\n }\r\n\r\n \/\/ Horizontale Skalierung um \u00dcberlappen zu verhindern\r\n var testCanvas = document.createElement('canvas');\r\n var testCtx = testCanvas.getContext('2d');\r\n testCtx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n var maxNameW = 0;\r\n for (var i = 0; i < N; i++) {\r\n var nw = testCtx.measureText(validNames[i].toUpperCase()).width;\r\n if (nw > maxNameW) maxNameW = nw;\r\n }\r\n \r\n var maxAllowedW = 190; \/\/ (290 Right Edge - 85 Start X - 15 Padding)\r\n if (maxNameW > maxAllowedW) {\r\n var scaleW = maxAllowedW \/ maxNameW;\r\n fs = fs * scaleW;\r\n lh = lh * scaleW;\r\n }\r\n\r\n var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\r\n\r\n for(var i=0; i<N; i++) {\r\n var textEl = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\r\n textEl.setAttribute('x', '85'); \/\/ leicht nach rechts verschoben\r\n textEl.setAttribute('y', startY + (i * lh));\r\n textEl.setAttribute('font-size', fs);\r\n textEl.textContent = validNames[i].toUpperCase();\r\n svgNames.appendChild(textEl);\r\n }\r\n }\r\n }\r\n\r\n var svgLoc = document.getElementById('svg-loc');\r\n if (svgLoc) {\r\n svgLoc.textContent = S.loc.toUpperCase();\r\n svgLoc.setAttribute('font-size', '16'); \r\n \r\n var w = 0;\r\n try { w = svgLoc.getComputedTextLength(); } catch(e){}\r\n \r\n if (w > 120 && w > 0) {\r\n var newSize = (120 \/ w) * 16;\r\n svgLoc.setAttribute('font-size', newSize);\r\n }\r\n }\r\n}\r\n\r\nfunction initEvents() {\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').forEach(function(b) { b.classList.remove('active'); });\r\n document.querySelectorAll('.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\ndocument.querySelectorAll('.pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('home-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--tag-bg', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--tag-fg', this.getAttribute('data-fg'));\r\n wrap.style.setProperty('--house-fill', this.getAttribute('data-hf'));\r\n wrap.style.setProperty('--house-stroke', this.getAttribute('data-hs'));\r\n }\r\n S.styleIndex = index;\r\n updateURL();\r\n });\r\n});\r\n\r\nfor (let i = 0; i < 8; i++) {\r\n let inp = document.getElementById('inp-name-' + i);\r\n if (inp) {\r\n inp.addEventListener('input', function() {\r\n S.names[i] = this.value;\r\n renderPoster();\r\n updateURL();\r\n });\r\n }\r\n}\r\n\r\ndocument.getElementById('btn-more-names').addEventListener('click', function() {\r\n var extraWrap = document.getElementById('extra-names-wrap');\r\n if (extraWrap.style.display === 'none') {\r\n extraWrap.style.display = 'flex';\r\n this.textContent = 'Weniger Namen';\r\n } else {\r\n extraWrap.style.display = 'none';\r\n this.textContent = 'Mehr Namen';\r\n }\r\n});\r\n\r\ndocument.getElementById('inp-loc').addEventListener('input', function() {\r\n S.loc = this.value;\r\n renderPoster();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('inp-heart').addEventListener('change', function() {\r\n S.showHeart = this.checked;\r\n renderPoster();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('sel-mat').addEventListener('change', function() {\r\n S.mat = this.value;\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 === '30x40cm') {\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n renderSizes();\r\n updateURL();\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 renderSizes() {\r\n var sizes = SIZES[S.mat] || [];\r\n var opts = document.getElementById('size-options');\r\n var selText = document.getElementById('size-selected-text');\r\n var selDiv = document.getElementById('size-selected');\r\n var optsDiv = document.getElementById('size-options');\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 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\n\r\n function selectIdx(i) {\r\n S.sizeIdx = i;\r\n selText.innerHTML = buildLabel(sizes[i]);\r\n optsDiv.style.display = 'none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n\r\n opts.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\r\n opts.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\r\n selDiv.onclick = function(e) {\r\n e.stopPropagation();\r\n optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\r\n };\r\n\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 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, 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 { \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 = '1px solid hsl(0,0%,78%)';\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(){ fitPoster(); }, 60);\r\n}\r\n\r\n\/\/ Add to Cart Funktionalit\u00e4t \r\ndocument.getElementById('btn-cart').addEventListener('click', function() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart',\r\n \/\/ DEUTSCHE PRODUKT-ID:\r\n product_id: '2220', \r\n poster_title: 'Family Home',\r\n poster_subtitle: S.loc,\r\n poster_names: S.names.join(','),\r\n poster_heart: S.showHeart ? 'Yes' : 'No',\r\n poster_lat: '',\r\n poster_lng: '',\r\n poster_zoom: '',\r\n poster_shape: '',\r\n poster_zodiac: '',\r\n poster_coordinates:'',\r\n poster_style: S.styleIndex,\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 wrap = document.getElementById('home-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-bg').trim() : '#ffffff';\r\n var fg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-fg').trim() : '#1a1a1a';\r\n var hf = wrap ? getComputedStyle(wrap).getPropertyValue('--house-fill').trim() : 'transparent';\r\n var hs = wrap ? getComputedStyle(wrap).getPropertyValue('--house-stroke').trim() : '#1a1a1a';\r\n\r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n\r\n var W = 360, H = 504;\r\n var pad = 12; \r\n var innerW = W - pad * 2;\r\n var innerH = H - pad * 2;\r\n\r\n var cnv = document.createElement('canvas');\r\n cnv.width = W; cnv.height = H;\r\n var ctx = cnv.getContext('2d');\r\n\r\n ctx.fillStyle = '#ffffff';\r\n ctx.fillRect(0, 0, W, H);\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(pad, pad, innerW, innerH);\r\n\r\n var scale = Math.min(innerW \/ 360, innerH \/ 504);\r\n var drawW = 360 * scale;\r\n var drawH = 504 * scale;\r\n var offsetX = pad + (innerW - drawW) \/ 2;\r\n var offsetY = pad + (innerH - drawH) \/ 2;\r\n\r\n ctx.save();\r\n ctx.translate(offsetX, offsetY);\r\n ctx.scale(scale, scale);\r\n\r\n if (hf !== 'transparent' && hf !== 'rgba(0, 0, 0, 0)') {\r\n ctx.fillStyle = hf;\r\n ctx.beginPath();\r\n ctx.moveTo(70, 435); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\r\n ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\r\n ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 435);\r\n ctx.closePath();\r\n ctx.fill();\r\n }\r\n\r\n if (hs !== 'transparent' && hs !== 'rgba(0, 0, 0, 0)') {\r\n ctx.strokeStyle = hs;\r\n ctx.lineWidth = 2.5;\r\n ctx.lineCap = 'round';\r\n ctx.lineJoin = 'round';\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(70, 190); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\r\n ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\r\n ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 420);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(70, 360); ctx.lineTo(70, 435); ctx.lineTo(180, 435);\r\n ctx.stroke();\r\n }\r\n\r\n if (S.showHeart) {\r\n var heartPath = new Path2D('M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z');\r\n ctx.fillStyle = '#ff0000';\r\n ctx.fill(heartPath);\r\n }\r\n\r\n ctx.fillStyle = fg;\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\r\n var N = validNames.length;\r\n if (N > 0) {\r\n var fs = 28;\r\n var lh = 38;\r\n var maxH = 160;\r\n var textHeight = (N - 1) * lh + fs;\r\n\r\n if (textHeight > maxH) {\r\n var scaleNamesH = maxH \/ textHeight;\r\n fs = fs * scaleNamesH;\r\n lh = lh * scaleNamesH;\r\n }\r\n\r\n ctx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n var maxNameW = 0;\r\n for (var i = 0; i < N; i++) {\r\n var nw = ctx.measureText(validNames[i].toUpperCase()).width;\r\n if (nw > maxNameW) maxNameW = nw;\r\n }\r\n var maxAllowedW = 190;\r\n if (maxNameW > maxAllowedW) {\r\n var scaleNamesW = maxAllowedW \/ maxNameW;\r\n fs = fs * scaleNamesW;\r\n lh = lh * scaleNamesW;\r\n }\r\n\r\n var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\r\n ctx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n\r\n for(var i=0; i<N; i++) {\r\n ctx.fillText(validNames[i].toUpperCase(), 85, startY + (i * lh));\r\n }\r\n }\r\n\r\n var baseLocFs = 16;\r\n ctx.font = '400 ' + baseLocFs + 'px \"DM Sans\", sans-serif';\r\n if (ctx.letterSpacing !== undefined) { ctx.letterSpacing = \"1.5px\"; }\r\n \r\n var locTxt = S.loc.toUpperCase();\r\n var locW = ctx.measureText(locTxt).width;\r\n if (locW > 120) {\r\n baseLocFs = (120 \/ locW) * 16;\r\n ctx.font = '400 ' + baseLocFs + 'px \"DM Sans\", sans-serif';\r\n }\r\n ctx.textAlign = 'right';\r\n ctx.fillText(locTxt, 275, 420);\r\n\r\n ctx.restore(); \r\n\r\n cartData.poster_thumbnail = cnv.toDataURL('image\/jpeg', 0.92) || '';\r\n\r\n var body = Object.keys(cartData).map(function(k) {\r\n return encodeURIComponent(k) + '=' + encodeURIComponent(cartData[k]);\r\n }).join('&');\r\n\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 window.location.href = 'https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n } else { \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 }\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\r\nfunction fitPoster() {\r\n var canvas = document.getElementById('pme-canvas');\r\n var outer = document.getElementById('pme-outer');\r\n var poster = document.getElementById('pme-poster');\r\n if (!canvas || !poster.offsetWidth) return;\r\n var isMob = window.innerWidth <= 768;\r\n var aH = canvas.clientHeight - (isMob ? 16 : 60);\r\n var aW = canvas.clientWidth - (isMob ? 24 : 80);\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 var isMob = window.innerWidth <= 768;\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 canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvas) canvas.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 canvas = 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 (canvas) canvas.style.height = h + 'px';\r\n }\r\n setTimeout(fitPoster, 100);\r\n}\r\n\r\nwindow.addEventListener('load', setHeight);\r\nwindow.addEventListener('resize', setHeight);\r\nsetTimeout(setHeight, 300);\r\n\r\nvar p = new URLSearchParams(window.location.search);\r\nif (p.has('mat')) S.mat = p.get('mat');\r\nif (p.has('size')) S.sizeIdx = parseInt(p.get('size')) || 0;\r\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 7;\r\nif (p.has('frame')) S.frame = p.get('frame');\r\nif (p.has('loc')) S.loc = p.get('loc');\r\nif (p.has('heart')) S.showHeart = p.get('heart') === 'true';\r\n\r\nif (p.has('names')) {\r\n var nms = p.get('names').split('|');\r\n for (var i = 0; i < 8; i++) {\r\n S.names[i] = nms[i] || '';\r\n }\r\n}\r\n\r\nvar ms = document.getElementById('sel-mat');\r\nif (ms) ms.value = S.mat;\r\n\r\nfor (var i = 0; i < 8; i++) {\r\n var inp = document.getElementById('inp-name-' + i);\r\n if (inp) inp.value = S.names[i];\r\n}\r\n\r\ndocument.getElementById('inp-loc').value = S.loc;\r\ndocument.getElementById('inp-heart').checked = S.showHeart;\r\n\r\nrenderPoster();\r\n\r\nvar pins = document.querySelectorAll('.pme-thm');\r\nif (pins.length > S.styleIndex) {\r\n var activePin = pins[S.styleIndex];\r\n pins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('home-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--tag-bg', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--tag-fg', activePin.getAttribute('data-fg'));\r\n wrap.style.setProperty('--house-fill', activePin.getAttribute('data-hf'));\r\n wrap.style.setProperty('--house-stroke', activePin.getAttribute('data-hs'));\r\n }\r\n}\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\nrenderSizes();\r\n\r\n} \/\/ end initEvents\r\n\r\ninitEvents();\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>Family Home Editor Texte Stil Gr\u00f6\u00dfe Texte Stil Gr\u00f6\u00dfe Home Details Personalisiere deinen Family Home Print. Namen Mehr Namen Ort Stil W\u00e4hle eine Farbvariante f\u00fcr deinen Print. Design MinimalWhite SaharaSands RetroSunset Evergreen MidnightExpress Nautica Stone WarmSand Optionen Herz anzeigen Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material PostkartePosterGerahmtes PosterLeinwand Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 29,99 \u20ac 14,99 […]<\/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-2172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFamily Home Editor<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\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\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:#999;margin-bottom:6px;}\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;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n\r\n.theme-pins { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; justify-content: flex-start; }\r\n.pme-thm { border: none !important; border-radius: 0 !important; padding: 0 !important; cursor: pointer !important; background: 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-circle { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #e0e0e0; transition: border-color 0.2s; }\r\n.pme-thm:hover .pme-thm-circle { border-color: #a0a0a0; }\r\n.pme-thm.active .pme-thm-circle { border-color: #1a1a1a; }\r\n.pme-thm span { font-size: 11px; color: #1a1a1a; font-weight: 500; font-family:'DM Sans',sans-serif; text-align: center; line-height: 1.2;}\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:12px;position:relative;display:flex;flex-direction:column;border:1px solid hsl(0,0%,78%);box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); overflow:hidden;}\r\n.home-wrap { --tag-bg: #ffffff; --tag-fg: #1a1a1a; --house-fill: transparent; --house-stroke: #1a1a1a; flex: 1; min-height: 0; position: relative; background: var(--tag-bg); color: var(--tag-fg); transition: background 0.3s, color 0.3s;}\r\n.home-wrap svg { display: block; }\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\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#size-dropdown,#mat-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);}\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.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\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\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=\"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=\"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-mobbtn\" 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-mobbtn\" 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 <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Home Details<\/div>\r\n <div class=\"pme-desc\">Personalisiere deinen Family Home Print.<\/div>\r\n \r\n <span class=\"pme-lbl\">Namen<\/span>\r\n <div class=\"pme-field\" id=\"names-wrap\" style=\"display:flex; flex-direction:column; gap:8px;\">\r\n <input type=\"text\" id=\"inp-name-0\" placeholder=\"Name 1\" \/>\r\n <input type=\"text\" id=\"inp-name-1\" placeholder=\"Name 2\" \/>\r\n <input type=\"text\" id=\"inp-name-2\" placeholder=\"Name 3\" \/>\r\n <input type=\"text\" id=\"inp-name-3\" placeholder=\"Name 4\" \/>\r\n \r\n <div id=\"extra-names-wrap\" style=\"display:none; flex-direction:column; gap:8px;\">\r\n <input type=\"text\" id=\"inp-name-4\" placeholder=\"Name 5\" \/>\r\n <input type=\"text\" id=\"inp-name-5\" placeholder=\"Name 6\" \/>\r\n <input type=\"text\" id=\"inp-name-6\" placeholder=\"Name 7\" \/>\r\n <input type=\"text\" id=\"inp-name-7\" placeholder=\"Name 8\" \/>\r\n <\/div>\r\n \r\n <div id=\"btn-more-names\" style=\"font-size:13px; color:#1a1a1a; text-decoration:underline; cursor:pointer; margin-top:2px; font-weight:500;\">Mehr Namen<\/div>\r\n <\/div>\r\n \r\n <span class=\"pme-lbl\">Ort<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"LONDON\" placeholder=\"Stadt\"\/><\/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 eine Farbvariante f\u00fcr deinen Print.<\/div>\r\n\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div class=\"theme-pins\">\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"transparent\" data-hs=\"#1a1a1a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #ffffff; border-color: #e0e0e0; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Minimal<br>White<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-hf=\"transparent\" data-hs=\"#fcf9e5\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #e0ceb8; border-color: #e0ceb8; box-shadow: inset 0 0 0 2px #fcf9e5;\"><\/div>\r\n <span>Sahara<br>Sands<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-hf=\"transparent\" data-hs=\"#f7285a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f7bf3d; border-color: #f7bf3d; box-shadow: inset 0 0 0 2px #f7285a;\"><\/div>\r\n <span>Retro<br>Sunset<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-hf=\"transparent\" data-hs=\"#f7e946\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #42c053; border-color: #42c053; box-shadow: inset 0 0 0 2px #f7e946;\"><\/div>\r\n <span>Evergreen<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-hf=\"transparent\" data-hs=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #000000; border-color: #000000; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Midnight<br>Express<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#fdf7ef\" data-fg=\"#cf8a7c\" data-hf=\"#c8e2d5\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #c8e2d5; border-color: #c8e2d5; box-shadow: inset 0 0 0 2px #cf8a7c;\"><\/div>\r\n <span>Nautica<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-fg=\"#1a1a1a\" data-hf=\"#b2b2b2\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #b2b2b2; border-color: #b2b2b2; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Stone<\/span>\r\n <\/button>\r\n <button class=\"pme-thm active\" data-bg=\"#f6eee3\" data-fg=\"#ffffff\" data-hf=\"#d6b6a0\" data-hs=\"transparent\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #d6b6a0; border-color: #d6b6a0; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Warm<br>Sand<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\" style=\"margin-top:24px;\">Optionen<\/span>\r\n <div class=\"pme-field\">\r\n <label style=\"display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#1a1a1a; font-weight:500; text-transform:none;\">\r\n <input type=\"checkbox\" id=\"inp-heart\" checked style=\"width:18px; height:18px; cursor:pointer; accent-color:#1a1a1a;\">\r\n Herz anzeigen\r\n <\/label>\r\n <\/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 <select id=\"sel-mat\" style=\"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:#fafafa;margin-bottom:14px;cursor:pointer;appearance:auto;\">\r\n <option value=\"postcard\">Postkarte<\/option>\r\n <option value=\"poster\" selected>Poster<\/option>\r\n <option value=\"framed\">Gerahmtes Poster<\/option>\r\n <option value=\"canvas\">Leinwand<\/option>\r\n <\/select>\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\" style=\"position:relative;margin-bottom:14px;\">\r\n <div id=\"size-selected\" style=\"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 <span id=\"size-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 id=\"size-options\" style=\"display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);\"><\/div>\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\">29,99 \u20ac<\/span>\r\n <span class=\"pme-new\" id=\"p-new\">14,99 \u20ac<\/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\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 \r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"home-wrap\" id=\"home-wrap\">\r\n <svg id=\"homePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 70 435 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 435 Z\" fill=\"var(--house-fill)\" \/>\r\n\r\n <path id=\"svg-heart\" d=\"M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z\" fill=\"#ff0000\" \/>\r\n \r\n <path d=\"M 70 190 L 70 160 L 180 60 L 230 105 L 230 85 L 250 85 L 250 123 L 290 160 L 290 420\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n \r\n <path d=\"M 70 360 L 70 435 L 180 435\" fill=\"none\" stroke=\"var(--house-stroke)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n \r\n <g id=\"svg-names\" font-family=\"'DM Sans', sans-serif\" font-weight=\"300\" fill=\"currentColor\"><\/g>\r\n \r\n <text id=\"svg-loc\" x=\"275\" y=\"420\" text-anchor=\"end\" font-family=\"'DM Sans', sans-serif\" font-weight=\"400\" font-size=\"16\" letter-spacing=\"0.08em\" fill=\"currentColor\">LONDON<\/text>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n \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\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 S = {\r\n names: ['ANDREA', 'THOMAS', 'HANNAH', 'DAVID', '', '', '', ''],\r\n loc: 'LONDON',\r\n showHeart: true,\r\n mat: 'poster', \r\n sizeIdx: 1, \/\/ Setzt Default auf 30x40cm\r\n styleIndex: 7, \r\n frame: 'black'\r\n};\r\n\r\nfunction updateURL() {\r\n var p = new URLSearchParams();\r\n p.set('mat', S.mat);\r\n p.set('size', S.sizeIdx);\r\n p.set('style', S.styleIndex);\r\n if (S.mat === 'framed') p.set('frame', S.frame);\r\n p.set('names', S.names.join('|'));\r\n p.set('loc', S.loc);\r\n p.set('heart', S.showHeart);\r\n history.replaceState(null, '', '?' + p.toString());\r\n}\r\n\r\nfunction renderPoster() {\r\n var heart = document.getElementById('svg-heart');\r\n if (heart) heart.style.display = S.showHeart ? 'block' : 'none';\r\n\r\n var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\r\n var svgNames = document.getElementById('svg-names');\r\n if (svgNames) {\r\n svgNames.innerHTML = '';\r\n var N = validNames.length;\r\n if (N > 0) {\r\n var fs = 28; \r\n var lh = 38; \r\n var maxH = 160; \r\n \r\n var textHeight = (N - 1) * lh + fs;\r\n\r\n \/\/ Vertikale Skalierung\r\n if (textHeight > maxH) {\r\n var scaleH = maxH \/ textHeight;\r\n fs = fs * scaleH;\r\n lh = lh * scaleH;\r\n }\r\n\r\n \/\/ Horizontale Skalierung um \u00dcberlappen zu verhindern\r\n var testCanvas = document.createElement('canvas');\r\n var testCtx = testCanvas.getContext('2d');\r\n testCtx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n var maxNameW = 0;\r\n for (var i = 0; i < N; i++) {\r\n var nw = testCtx.measureText(validNames[i].toUpperCase()).width;\r\n if (nw > maxNameW) maxNameW = nw;\r\n }\r\n \r\n var maxAllowedW = 190; \/\/ (290 Right Edge - 85 Start X - 15 Padding)\r\n if (maxNameW > maxAllowedW) {\r\n var scaleW = maxAllowedW \/ maxNameW;\r\n fs = fs * scaleW;\r\n lh = lh * scaleW;\r\n }\r\n\r\n var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\r\n\r\n for(var i=0; i<N; i++) {\r\n var textEl = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\r\n textEl.setAttribute('x', '85'); \/\/ leicht nach rechts verschoben\r\n textEl.setAttribute('y', startY + (i * lh));\r\n textEl.setAttribute('font-size', fs);\r\n textEl.textContent = validNames[i].toUpperCase();\r\n svgNames.appendChild(textEl);\r\n }\r\n }\r\n }\r\n\r\n var svgLoc = document.getElementById('svg-loc');\r\n if (svgLoc) {\r\n svgLoc.textContent = S.loc.toUpperCase();\r\n svgLoc.setAttribute('font-size', '16'); \r\n \r\n var w = 0;\r\n try { w = svgLoc.getComputedTextLength(); } catch(e){}\r\n \r\n if (w > 120 && w > 0) {\r\n var newSize = (120 \/ w) * 16;\r\n svgLoc.setAttribute('font-size', newSize);\r\n }\r\n }\r\n}\r\n\r\nfunction initEvents() {\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').forEach(function(b) { b.classList.remove('active'); });\r\n document.querySelectorAll('.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\ndocument.querySelectorAll('.pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('home-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--tag-bg', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--tag-fg', this.getAttribute('data-fg'));\r\n wrap.style.setProperty('--house-fill', this.getAttribute('data-hf'));\r\n wrap.style.setProperty('--house-stroke', this.getAttribute('data-hs'));\r\n }\r\n S.styleIndex = index;\r\n updateURL();\r\n });\r\n});\r\n\r\nfor (let i = 0; i < 8; i++) {\r\n let inp = document.getElementById('inp-name-' + i);\r\n if (inp) {\r\n inp.addEventListener('input', function() {\r\n S.names[i] = this.value;\r\n renderPoster();\r\n updateURL();\r\n });\r\n }\r\n}\r\n\r\ndocument.getElementById('btn-more-names').addEventListener('click', function() {\r\n var extraWrap = document.getElementById('extra-names-wrap');\r\n if (extraWrap.style.display === 'none') {\r\n extraWrap.style.display = 'flex';\r\n this.textContent = 'Weniger Namen';\r\n } else {\r\n extraWrap.style.display = 'none';\r\n this.textContent = 'Mehr Namen';\r\n }\r\n});\r\n\r\ndocument.getElementById('inp-loc').addEventListener('input', function() {\r\n S.loc = this.value;\r\n renderPoster();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('inp-heart').addEventListener('change', function() {\r\n S.showHeart = this.checked;\r\n renderPoster();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('sel-mat').addEventListener('change', function() {\r\n S.mat = this.value;\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 === '30x40cm') {\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n renderSizes();\r\n updateURL();\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 renderSizes() {\r\n var sizes = SIZES[S.mat] || [];\r\n var opts = document.getElementById('size-options');\r\n var selText = document.getElementById('size-selected-text');\r\n var selDiv = document.getElementById('size-selected');\r\n var optsDiv = document.getElementById('size-options');\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 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\n\r\n function selectIdx(i) {\r\n S.sizeIdx = i;\r\n selText.innerHTML = buildLabel(sizes[i]);\r\n optsDiv.style.display = 'none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n\r\n opts.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\r\n opts.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\r\n selDiv.onclick = function(e) {\r\n e.stopPropagation();\r\n optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\r\n };\r\n\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 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, 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 { \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 = '1px solid hsl(0,0%,78%)';\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(){ fitPoster(); }, 60);\r\n}\r\n\r\n\/\/ Add to Cart Funktionalit\u00e4t \r\ndocument.getElementById('btn-cart').addEventListener('click', function() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart',\r\n \/\/ DEUTSCHE PRODUKT-ID:\r\n product_id: '2220', \r\n poster_title: 'Family Home',\r\n poster_subtitle: S.loc,\r\n poster_names: S.names.join(','),\r\n poster_heart: S.showHeart ? 'Yes' : 'No',\r\n poster_lat: '',\r\n poster_lng: '',\r\n poster_zoom: '',\r\n poster_shape: '',\r\n poster_zodiac: '',\r\n poster_coordinates:'',\r\n poster_style: S.styleIndex,\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 wrap = document.getElementById('home-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-bg').trim() : '#ffffff';\r\n var fg = wrap ? getComputedStyle(wrap).getPropertyValue('--tag-fg').trim() : '#1a1a1a';\r\n var hf = wrap ? getComputedStyle(wrap).getPropertyValue('--house-fill').trim() : 'transparent';\r\n var hs = wrap ? getComputedStyle(wrap).getPropertyValue('--house-stroke').trim() : '#1a1a1a';\r\n\r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n\r\n var W = 360, H = 504;\r\n var pad = 12; \r\n var innerW = W - pad * 2;\r\n var innerH = H - pad * 2;\r\n\r\n var cnv = document.createElement('canvas');\r\n cnv.width = W; cnv.height = H;\r\n var ctx = cnv.getContext('2d');\r\n\r\n ctx.fillStyle = '#ffffff';\r\n ctx.fillRect(0, 0, W, H);\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(pad, pad, innerW, innerH);\r\n\r\n var scale = Math.min(innerW \/ 360, innerH \/ 504);\r\n var drawW = 360 * scale;\r\n var drawH = 504 * scale;\r\n var offsetX = pad + (innerW - drawW) \/ 2;\r\n var offsetY = pad + (innerH - drawH) \/ 2;\r\n\r\n ctx.save();\r\n ctx.translate(offsetX, offsetY);\r\n ctx.scale(scale, scale);\r\n\r\n if (hf !== 'transparent' && hf !== 'rgba(0, 0, 0, 0)') {\r\n ctx.fillStyle = hf;\r\n ctx.beginPath();\r\n ctx.moveTo(70, 435); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\r\n ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\r\n ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 435);\r\n ctx.closePath();\r\n ctx.fill();\r\n }\r\n\r\n if (hs !== 'transparent' && hs !== 'rgba(0, 0, 0, 0)') {\r\n ctx.strokeStyle = hs;\r\n ctx.lineWidth = 2.5;\r\n ctx.lineCap = 'round';\r\n ctx.lineJoin = 'round';\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(70, 190); ctx.lineTo(70, 160); ctx.lineTo(180, 60);\r\n ctx.lineTo(230, 105); ctx.lineTo(230, 85); ctx.lineTo(250, 85);\r\n ctx.lineTo(250, 123); ctx.lineTo(290, 160); ctx.lineTo(290, 420);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(70, 360); ctx.lineTo(70, 435); ctx.lineTo(180, 435);\r\n ctx.stroke();\r\n }\r\n\r\n if (S.showHeart) {\r\n var heartPath = new Path2D('M 240 65 C 240 65 225 55 225 45 C 225 35 240 35 240 45 C 240 35 255 35 255 45 C 255 55 240 65 240 65 Z');\r\n ctx.fillStyle = '#ff0000';\r\n ctx.fill(heartPath);\r\n }\r\n\r\n ctx.fillStyle = fg;\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var validNames = S.names.filter(function(n) { return n.trim() !== ''; });\r\n var N = validNames.length;\r\n if (N > 0) {\r\n var fs = 28;\r\n var lh = 38;\r\n var maxH = 160;\r\n var textHeight = (N - 1) * lh + fs;\r\n\r\n if (textHeight > maxH) {\r\n var scaleNamesH = maxH \/ textHeight;\r\n fs = fs * scaleNamesH;\r\n lh = lh * scaleNamesH;\r\n }\r\n\r\n ctx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n var maxNameW = 0;\r\n for (var i = 0; i < N; i++) {\r\n var nw = ctx.measureText(validNames[i].toUpperCase()).width;\r\n if (nw > maxNameW) maxNameW = nw;\r\n }\r\n var maxAllowedW = 190;\r\n if (maxNameW > maxAllowedW) {\r\n var scaleNamesW = maxAllowedW \/ maxNameW;\r\n fs = fs * scaleNamesW;\r\n lh = lh * scaleNamesW;\r\n }\r\n\r\n var startY = 275 - ((N - 1) * lh) \/ 2 + (fs * 0.75) \/ 2;\r\n ctx.font = '300 ' + fs + 'px \"DM Sans\", sans-serif';\r\n\r\n for(var i=0; i<N; i++) {\r\n ctx.fillText(validNames[i].toUpperCase(), 85, startY + (i * lh));\r\n }\r\n }\r\n\r\n var baseLocFs = 16;\r\n ctx.font = '400 ' + baseLocFs + 'px \"DM Sans\", sans-serif';\r\n if (ctx.letterSpacing !== undefined) { ctx.letterSpacing = \"1.5px\"; }\r\n \r\n var locTxt = S.loc.toUpperCase();\r\n var locW = ctx.measureText(locTxt).width;\r\n if (locW > 120) {\r\n baseLocFs = (120 \/ locW) * 16;\r\n ctx.font = '400 ' + baseLocFs + 'px \"DM Sans\", sans-serif';\r\n }\r\n ctx.textAlign = 'right';\r\n ctx.fillText(locTxt, 275, 420);\r\n\r\n ctx.restore(); \r\n\r\n cartData.poster_thumbnail = cnv.toDataURL('image\/jpeg', 0.92) || '';\r\n\r\n var body = Object.keys(cartData).map(function(k) {\r\n return encodeURIComponent(k) + '=' + encodeURIComponent(cartData[k]);\r\n }).join('&');\r\n\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 window.location.href = 'https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n } else { \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 }\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\r\nfunction fitPoster() {\r\n var canvas = document.getElementById('pme-canvas');\r\n var outer = document.getElementById('pme-outer');\r\n var poster = document.getElementById('pme-poster');\r\n if (!canvas || !poster.offsetWidth) return;\r\n var isMob = window.innerWidth <= 768;\r\n var aH = canvas.clientHeight - (isMob ? 16 : 60);\r\n var aW = canvas.clientWidth - (isMob ? 24 : 80);\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 var isMob = window.innerWidth <= 768;\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 canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvas) canvas.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 canvas = 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 (canvas) canvas.style.height = h + 'px';\r\n }\r\n setTimeout(fitPoster, 100);\r\n}\r\n\r\nwindow.addEventListener('load', setHeight);\r\nwindow.addEventListener('resize', setHeight);\r\nsetTimeout(setHeight, 300);\r\n\r\nvar p = new URLSearchParams(window.location.search);\r\nif (p.has('mat')) S.mat = p.get('mat');\r\nif (p.has('size')) S.sizeIdx = parseInt(p.get('size')) || 0;\r\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 7;\r\nif (p.has('frame')) S.frame = p.get('frame');\r\nif (p.has('loc')) S.loc = p.get('loc');\r\nif (p.has('heart')) S.showHeart = p.get('heart') === 'true';\r\n\r\nif (p.has('names')) {\r\n var nms = p.get('names').split('|');\r\n for (var i = 0; i < 8; i++) {\r\n S.names[i] = nms[i] || '';\r\n }\r\n}\r\n\r\nvar ms = document.getElementById('sel-mat');\r\nif (ms) ms.value = S.mat;\r\n\r\nfor (var i = 0; i < 8; i++) {\r\n var inp = document.getElementById('inp-name-' + i);\r\n if (inp) inp.value = S.names[i];\r\n}\r\n\r\ndocument.getElementById('inp-loc').value = S.loc;\r\ndocument.getElementById('inp-heart').checked = S.showHeart;\r\n\r\nrenderPoster();\r\n\r\nvar pins = document.querySelectorAll('.pme-thm');\r\nif (pins.length > S.styleIndex) {\r\n var activePin = pins[S.styleIndex];\r\n pins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('home-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--tag-bg', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--tag-fg', activePin.getAttribute('data-fg'));\r\n wrap.style.setProperty('--house-fill', activePin.getAttribute('data-hf'));\r\n wrap.style.setProperty('--house-stroke', activePin.getAttribute('data-hs'));\r\n }\r\n}\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\nrenderSizes();\r\n\r\n} \/\/ end initEvents\r\n\r\ninitEvents();\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>Family Home Editor Texte Stil Gr\u00f6\u00dfe Texte Stil Gr\u00f6\u00dfe Home Details Personalisiere deinen Family Home Print. Namen Mehr Namen Ort Stil W\u00e4hle eine Farbvariante f\u00fcr deinen Print. Design MinimalWhite SaharaSands RetroSunset Evergreen MidnightExpress Nautica Stone WarmSand Optionen Herz anzeigen Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material PostkartePosterGerahmtes PosterLeinwand Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 29,99 \u20ac 14,99 […]<\/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-2172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/comments?post=2172"}],"version-history":[{"count":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2172\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}