{"id":2193,"date":"2026-04-22T22:55:17","date_gmt":"2026-04-22T20:55:17","guid":{"rendered":"https:\/\/zulumaps.com\/anniversary\/"},"modified":"2026-06-09T17:28:35","modified_gmt":"2026-06-09T15:28:35","slug":"anniversary","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/anniversary\/","title":{"rendered":"Anniversary"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nJahrestag Editor<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n\r\n<style>\r\n\/* --- LOKALE SCHRIFTEN (RELATIVE PFADE) --- *\/\r\n\r\n\/* Poppins (UI) *\/\r\n@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-regular.woff2') format('woff2'); }\r\n@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-500.woff2') format('woff2'); }\r\n@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-600.woff2') format('woff2'); }\r\n\r\n\/* Windsong (Heart I - Yes) *\/\r\n@font-face { font-family: 'Windsong'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/windsong-v13-latin-regular.woff2') format('woff2'); }\r\n\r\n\/* Big Shoulders (Heart I - Text) *\/\r\n@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/big-shoulders-v4-latin-regular.woff2') format('woff2'); }\r\n@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 700; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/big-shoulders-v4-latin-700.woff2') format('woff2'); }\r\n\r\n\/* Amatic SC (Love I) *\/\r\n@font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/amatic-sc-v28-latin-regular.woff2') format('woff2'); }\r\n@font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 700; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/amatic-sc-v28-latin-700.woff2') format('woff2'); }\r\n\r\n\/* Comfortaa (Love II & Heart II) *\/\r\n@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/comfortaa-v47-latin-regular.woff2') format('woff2'); }\r\n@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 500; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/comfortaa-v47-latin-500.woff2') format('woff2'); }\r\n\r\n\/* Allison (Date - Month) *\/\r\n@font-face { font-family: 'Allison'; font-style: normal; font-weight: 400; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/allison-v13-latin-regular.woff2') format('woff2'); }\r\n\r\n\/* Bodoni Moda (Date - Elements) *\/\r\n@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url('\/wp-content\/uploads\/fonts\/bodoni-moda-v28-latin-500.woff2') format('woff2'); }\r\n\r\n\/* ---------------------------------------- *\/\r\n\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:'Poppins',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:74px;min-width:74px;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:'Poppins',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:'Poppins',sans-serif;outline:none;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n\/* Native Date Picker Style *\/\r\ninput[type=\"date\"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; transition: 0.2s; }\r\ninput[type=\"date\"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }\r\n\r\n.theme-pins { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; justify-content: flex-start; }\r\n\r\n\/* Buttons f\u00fcr die Themen-Vorschau (Mini Poster) *\/\r\n.theme-btn { 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: 64px; outline: none !important; box-shadow: none !important;}\r\n.theme-icon { width: 60px; height: 84px; border-radius: 6px; border: 3px solid #e0e0e0; transition: border-color 0.2s; background: #fff; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; overflow: hidden;}\r\n.theme-btn:hover .theme-icon { border-color: #a0a0a0; }\r\n.theme-btn.active .theme-icon { border-color: #1a1a1a; }\r\n.theme-btn span { font-size: 11px; color: #1a1a1a; font-weight: 500; font-family:'Poppins',sans-serif; text-align: center; line-height: 1.2;}\r\n\r\n\/* Buttons f\u00fcr die Farb-Designs (Zweifarbige Kreise) *\/\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:'Poppins',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.heart-wrap { --bg-color: #ffffff; --heart-fill: #ffffff; --heart-stroke: #1a1a1a; --text-big: #1a1a1a; --text-small: #1a1a1a; flex: 1; position: relative; background: var(--bg-color); transition: background 0.3s; overflow:hidden;}\r\n.love-wrap { --bg-color: #fcbfa4; --text-col: #ffffff; flex: 1; position: relative; background: var(--bg-color); transition: background 0.3s; overflow:hidden;}\r\n.blocklove-wrap { --bg-color: #fcbfa4; --text-col: #ffffff; flex: 1; position: relative; background: var(--bg-color); transition: background 0.3s; overflow:hidden;}\r\n.date-wrap { --bg-color: #fbfaf5; --num-col: #000000; --script-col: #cdc2a5; flex: 1; position: relative; background: var(--bg-color); transition: background 0.3s; overflow:hidden;}\r\n.line-wrap { --bg-color: #ffffff; --line-col: #1a1a1a; flex: 1; position: relative; background: var(--bg-color); transition: background 0.3s; overflow:hidden;}\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\r\n\/* --- FIX FOR ELEMENTOR MAGENTA BUTTON (CART) --- *\/\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, .pme-cart:active, .pme-cart:focus {background:#632ED3!important;color:#ffffff!important;border:none!important;outline: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:'Poppins',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:'Poppins',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\r\n\/* --- FIX FOR ELEMENTOR MAGENTA BUTTONS (MOBILE NAV) --- *\/\r\n.pme-mobbtn {\r\n flex: 1;\r\n min-width: 60px;\r\n height: 71px;\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n color: #888 !important;\r\n font-size: 14px;\r\n font-family: 'Poppins', sans-serif;\r\n outline: none !important;\r\n}\r\n.pme-mobbtn.active, .pme-mobbtn:active, .pme-mobbtn:focus, .pme-mobbtn:hover {\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n color: #fff !important;\r\n}\r\n.pme-mobbtn svg {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\/* ----------------------------------------- *\/\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\">Details<\/div>\r\n <div class=\"pme-desc\">Personalisiere deinen besonderen Moment.<\/div>\r\n \r\n <div id=\"field-yes\" class=\"pme-field\" style=\"display:block;\">\r\n <span class=\"pme-lbl\">Haupttext<\/span>\r\n <input type=\"text\" id=\"inp-yes\" value=\"ja\" placeholder=\"z.B. ja oder yes\"\/>\r\n <\/div>\r\n\r\n <div class=\"pme-field\">\r\n <span class=\"pme-lbl\">Namen<\/span>\r\n <input type=\"text\" id=\"inp-names\" value=\"Giulia & Tom\" placeholder=\"z.B. Giulia & Tom\"\/>\r\n <\/div>\r\n\r\n <div class=\"pme-field\">\r\n <span class=\"pme-lbl\">Datum<\/span>\r\n <input type=\"date\" id=\"inp-date-picker\" value=\"2022-04-20\" \/>\r\n <\/div>\r\n\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 Layout und Farbvariante.<\/div>\r\n\r\n <span class=\"pme-lbl\">Layout<\/span>\r\n <div class=\"theme-pins\" id=\"theme-toggle\">\r\n \r\n <button class=\"theme-btn active\" data-theme=\"heart\">\r\n <div class=\"theme-icon\">\r\n <svg viewBox=\"0 0 336 480\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 100 380 C 250 310 316 200 316 110 C 316 20 200 10 100 80 C 0 10 -170 20 -170 110 C -170 200 -50 310 100 380 Z\" fill=\"#fff\" stroke=\"#1a1a1a\" stroke-width=\"12\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n <rect x=\"68\" y=\"420\" width=\"200\" height=\"20\" fill=\"#1a1a1a\" \/>\r\n <rect x=\"108\" y=\"450\" width=\"120\" height=\"12\" fill=\"#1a1a1a\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Heart<\/span>\r\n <\/button>\r\n \r\n <button class=\"theme-btn\" data-theme=\"love\">\r\n <div class=\"theme-icon\">\r\n <svg viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 78 90 L 78 270 L 123 270\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"18\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" \/>\r\n <circle cx=\"198\" cy=\"200\" r=\"70\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"18\" \/>\r\n <path d=\"M 78 285 L 118 350 L 256.67 90 M 228 285 L 178 285 L 178 350 L 323 350 M 38 315 L 213 315\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"18\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" \/>\r\n <rect x=\"90\" y=\"430\" width=\"180\" height=\"20\" fill=\"#1a1a1a\" \/>\r\n <rect x=\"130\" y=\"460\" width=\"100\" height=\"12\" fill=\"#1a1a1a\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Love<\/span>\r\n <\/button>\r\n\r\n <button class=\"theme-btn\" data-theme=\"blocklove\">\r\n <div class=\"theme-icon\">\r\n <svg viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <g fill=\"#1a1a1a\" stroke=\"#1a1a1a\" stroke-width=\"8\" stroke-linejoin=\"round\" stroke-linecap=\"round\">\r\n <path d=\"M 60,40 L 105,40 L 95,185 L 175,180 L 175,215 L 50,220 Z\" \/>\r\n <path d=\"M 245,40 C 310,40 330,80 330,130 C 330,180 310,220 245,220 C 180,220 160,180 160,130 C 160,80 180,40 245,40 Z M 245,105 C 225,85 205,95 205,120 C 205,150 245,175 245,185 C 245,175 285,150 285,120 C 285,95 265,85 245,105 Z\" fill-rule=\"evenodd\" \/>\r\n <path d=\"M 45,240 L 95,240 L 125,370 L 155,240 L 205,240 L 150,420 L 90,420 Z\" \/>\r\n <path d=\"M 215,240 L 315,245 L 310,285 L 255,280 L 255,310 L 305,310 L 300,350 L 255,345 L 255,380 L 325,380 L 320,420 L 205,420 Z\" \/>\r\n <\/g>\r\n <rect x=\"90\" y=\"445\" width=\"180\" height=\"15\" fill=\"#1a1a1a\" \/>\r\n <rect x=\"130\" y=\"470\" width=\"100\" height=\"10\" fill=\"#1a1a1a\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Block Love<\/span>\r\n <\/button>\r\n\r\n <button class=\"theme-btn\" data-theme=\"date\">\r\n <div class=\"theme-icon\">\r\n <svg viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <text x=\"180\" y=\"210\" text-anchor=\"middle\" font-family=\"'Bodoni Moda', serif\" font-weight=\"500\" font-size=\"200\" fill=\"#1a1a1a\">08<\/text>\r\n <text x=\"180\" y=\"375\" text-anchor=\"middle\" font-family=\"'Bodoni Moda', serif\" font-weight=\"500\" font-size=\"200\" fill=\"#1a1a1a\">22<\/text>\r\n <rect x=\"50\" y=\"240\" width=\"260\" height=\"30\" fill=\"#e0e0e0\" \/>\r\n <rect x=\"90\" y=\"430\" width=\"180\" height=\"20\" fill=\"#1a1a1a\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Date<\/span>\r\n <\/button>\r\n\r\n <button class=\"theme-btn\" data-theme=\"line\">\r\n <div class=\"theme-icon\">\r\n <svg viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M -20 340 C 50 310, 110 290, 180 250 C 260 200, 290 70, 180 140 C 70 100, 100 220, 180 250 C 250 280, 310 290, 380 310\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"12\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n <rect x=\"90\" y=\"390\" width=\"180\" height=\"15\" fill=\"#1a1a1a\" \/>\r\n <rect x=\"130\" y=\"415\" width=\"100\" height=\"10\" fill=\"#1a1a1a\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Line<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\">Design<\/span>\r\n \r\n <div class=\"theme-pins\" id=\"pins-heart\" style=\"display:flex;\">\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-hf=\"#ffffff\" data-hs=\"#1a1a1a\" data-tb=\"#1a1a1a\" data-ts=\"#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>Modern<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f5bccc\" data-hf=\"#d9385e\" data-hs=\"transparent\" data-tb=\"#f5bccc\" data-ts=\"#d9385e\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f5bccc; border-color: #f5bccc; box-shadow: inset 0 0 0 2px #d9385e;\"><\/div>\r\n <span>Pink<br>Blush<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f3e7ce\" data-hf=\"#ec7c5e\" data-hs=\"transparent\" data-tb=\"#f3e7ce\" data-ts=\"#ec7c5e\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f3e7ce; border-color: #f3e7ce; box-shadow: inset 0 0 0 2px #ec7c5e;\"><\/div>\r\n <span>Cream<br>Coral<\/span>\r\n <\/button>\r\n <button class=\"pme-thm active\" data-bg=\"#fbf0e6\" data-hf=\"#b8dfce\" data-hs=\"transparent\" data-tb=\"#b48378\" data-ts=\"#b48378\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fbf0e6; border-color: #fbf0e6; box-shadow: inset 0 0 0 2px #b8dfce;\"><\/div>\r\n <span>Mint<br>Cream<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f7df1e\" data-hf=\"#e83e60\" data-hs=\"transparent\" data-tb=\"#f7df1e\" data-ts=\"#e83e60\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f7df1e; border-color: #f7df1e; box-shadow: inset 0 0 0 2px #e83e60;\"><\/div>\r\n <span>Sunset<br>Yellow<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f1a4c3\" data-hf=\"#b84a92\" data-hs=\"transparent\" data-tb=\"#f1a4c3\" data-ts=\"#b84a92\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f1a4c3; border-color: #f1a4c3; box-shadow: inset 0 0 0 2px #b84a92;\"><\/div>\r\n <span>Lilac<br>Dream<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-hf=\"#b2b2b2\" data-hs=\"transparent\" data-tb=\"#1a1a1a\" data-ts=\"#1a1a1a\">\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\" data-bg=\"#f6eee3\" data-hf=\"#d6b6a0\" data-hs=\"transparent\" data-tb=\"#f6eee3\" data-ts=\"#d6b6a0\">\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 <div class=\"theme-pins\" id=\"pins-love\" style=\"display:none;\">\r\n <button class=\"pme-thm active\" data-bg=\"#fcbfa4\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fcbfa4; border-color: #fcbfa4; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Peach<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#90ccee\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #90ccee; border-color: #90ccee; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Sky<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#bd2d43\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #bd2d43; border-color: #bd2d43; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Crimson<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-tc=\"#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>Modern<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f6cacc\" data-tc=\"#1a1a1a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f6cacc; border-color: #f6cacc; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Soft<br>Pink<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"theme-pins\" id=\"pins-blocklove\" style=\"display:none;\">\r\n <button class=\"pme-thm active\" data-bg=\"#fcbfa4\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fcbfa4; border-color: #fcbfa4; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Peach<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#90ccee\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #90ccee; border-color: #90ccee; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Sky<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#bd2d43\" data-tc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #bd2d43; border-color: #bd2d43; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Crimson<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#ffffff\" data-tc=\"#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>Modern<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f6cacc\" data-tc=\"#1a1a1a\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f6cacc; border-color: #f6cacc; box-shadow: inset 0 0 0 2px #1a1a1a;\"><\/div>\r\n <span>Soft<br>Pink<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"theme-pins\" id=\"pins-date\" style=\"display:none;\">\r\n <button class=\"pme-thm active\" data-bg=\"#fbfaf5\" data-nc=\"#000000\" data-sc=\"#cdc2a5\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fbfaf5; border-color: #e0e0e0; box-shadow: inset 0 0 0 2px #000000;\"><\/div>\r\n <span>Modern<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#bde0d0\" data-nc=\"#fbfaf5\" data-sc=\"#d18a7c\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #bde0d0; border-color: #bde0d0; box-shadow: inset 0 0 0 2px #fbfaf5;\"><\/div>\r\n <span>Mint<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#fbfaf5\" data-nc=\"#cd8a7c\" data-sc=\"#bde0d0\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fbfaf5; border-color: #e0e0e0; box-shadow: inset 0 0 0 2px #cd8a7c;\"><\/div>\r\n <span>Coral<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f8c8d4\" data-nc=\"#e33b5c\" data-sc=\"#fbfaf5\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f8c8d4; border-color: #f8c8d4; box-shadow: inset 0 0 0 2px #e33b5c;\"><\/div>\r\n <span>Pink<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#fbc4a3\" data-nc=\"#555555\" data-sc=\"#fbfaf5\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fbc4a3; border-color: #fbc4a3; box-shadow: inset 0 0 0 2px #555555;\"><\/div>\r\n <span>Peach<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"theme-pins\" id=\"pins-line\" style=\"display:none;\">\r\n <button class=\"pme-thm active\" data-bg=\"#ffffff\" data-lc=\"#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>Modern<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#f34e6b\" data-lc=\"#ffffff\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #f34e6b; border-color: #f34e6b; box-shadow: inset 0 0 0 2px #ffffff;\"><\/div>\r\n <span>Berry<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#fdf3ed\" data-lc=\"#d9998e\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #fdf3ed; border-color: #fdf3ed; box-shadow: inset 0 0 0 2px #d9998e;\"><\/div>\r\n <span>Cream<br>Rose<\/span>\r\n <\/button>\r\n <button class=\"pme-thm\" data-bg=\"#c7e6d9\" data-lc=\"#d69b92\">\r\n <div class=\"pme-thm-circle\" style=\"background-color: #c7e6d9; border-color: #c7e6d9; box-shadow: inset 0 0 0 2px #d69b92;\"><\/div>\r\n <span>Mint<br>Rose<\/span>\r\n <\/button>\r\n <\/div>\r\n\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:'Poppins',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:'Poppins',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\"><\/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\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 \r\n <div class=\"heart-wrap\" id=\"heart-wrap\" style=\"display:block;\">\r\n <svg id=\"heartPoster\" viewBox=\"0 0 336 480\" width=\"100%\" height=\"100%\">\r\n <path d=\"M 100 380 C 250 310 316 200 316 110 C 316 20 200 10 100 80 C 0 10 -170 20 -170 110 C -170 200 -50 310 100 380 Z\" fill=\"var(--heart-fill)\" stroke=\"var(--heart-stroke)\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n <text id=\"svg-heart-yes\" x=\"168\" y=\"200\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"'Windsong', cursive\" font-size=\"140\" fill=\"var(--text-big)\">ja<\/text>\r\n <text id=\"svg-heart-names\" x=\"168\" y=\"435\" text-anchor=\"middle\" font-family=\"'Big Shoulders', sans-serif\" font-weight=\"400\" font-size=\"16\" fill=\"var(--text-small)\">Giulia & Tom<\/text>\r\n <text id=\"svg-heart-date\" x=\"168\" y=\"460\" text-anchor=\"middle\" font-family=\"'Big Shoulders', sans-serif\" font-weight=\"400\" font-size=\"12\" fill=\"var(--text-small)\">20. April 2022<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"love-wrap\" id=\"love-wrap\" style=\"display:none;\">\r\n <svg id=\"lovePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M 78 90 L 78 270 L 123 270\" fill=\"none\" stroke=\"var(--text-col)\" stroke-width=\"4.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" \/>\r\n <circle cx=\"198\" cy=\"200\" r=\"70\" fill=\"none\" stroke=\"var(--text-col)\" stroke-width=\"4.5\" \/>\r\n <path d=\"M 78 285 L 118 350 L 256.67 90 M 228 285 L 178 285 L 178 350 L 323 350 M 38 315 L 213 315\" fill=\"none\" stroke=\"var(--text-col)\" stroke-width=\"4.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" \/>\r\n <text id=\"svg-love-names\" x=\"180\" y=\"445\" text-anchor=\"middle\" font-family=\"'Amatic SC', cursive\" font-weight=\"400\" font-size=\"32\" letter-spacing=\"0.05em\" fill=\"var(--text-col)\">GIULIA & TOM<\/text>\r\n <text id=\"svg-love-date\" x=\"180\" y=\"475\" text-anchor=\"middle\" font-family=\"'Amatic SC', cursive\" font-weight=\"400\" font-size=\"24\" letter-spacing=\"0.05em\" fill=\"var(--text-col)\">20. APRIL 2022<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"blocklove-wrap\" id=\"blocklove-wrap\" style=\"display:none;\">\r\n <svg id=\"blocklovePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <g fill=\"var(--text-col)\" stroke=\"var(--text-col)\" stroke-width=\"8\" stroke-linejoin=\"round\" stroke-linecap=\"round\">\r\n <path d=\"M 60,40 L 105,40 L 95,185 L 175,180 L 175,215 L 50,220 Z\" \/>\r\n <path d=\"M 245,40 C 310,40 330,80 330,130 C 330,180 310,220 245,220 C 180,220 160,180 160,130 C 160,80 180,40 245,40 Z M 245,105 C 225,85 205,95 205,120 C 205,150 245,175 245,185 C 245,175 285,150 285,120 C 285,95 265,85 245,105 Z\" fill-rule=\"evenodd\" \/>\r\n <path d=\"M 45,240 L 95,240 L 125,370 L 155,240 L 205,240 L 150,420 L 90,420 Z\" \/>\r\n <path d=\"M 215,240 L 315,245 L 310,285 L 255,280 L 255,310 L 305,310 L 300,350 L 255,345 L 255,380 L 325,380 L 320,420 L 205,420 Z\" \/>\r\n <\/g>\r\n <text id=\"svg-blocklove-names\" x=\"180\" y=\"460\" text-anchor=\"middle\" font-family=\"'Comfortaa', sans-serif\" font-weight=\"400\" font-size=\"16\" fill=\"var(--text-col)\">Giulia & Tom<\/text>\r\n <text id=\"svg-blocklove-date\" x=\"180\" y=\"480\" text-anchor=\"middle\" font-family=\"'Comfortaa', sans-serif\" font-weight=\"400\" font-size=\"12\" fill=\"var(--text-col)\">20. April 2022<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"date-wrap\" id=\"date-wrap\" style=\"display:none;\">\r\n <svg id=\"datePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <text id=\"svg-date-day\" x=\"180\" y=\"210\" text-anchor=\"middle\" font-family=\"'Bodoni Moda', serif\" font-weight=\"500\" font-size=\"200\" fill=\"var(--num-col)\" letter-spacing=\"-0.02em\">20<\/text>\r\n <text id=\"svg-date-year\" x=\"180\" y=\"375\" text-anchor=\"middle\" font-family=\"'Bodoni Moda', serif\" font-weight=\"500\" font-size=\"200\" fill=\"var(--num-col)\" letter-spacing=\"-0.02em\">22<\/text>\r\n <text id=\"svg-date-month\" x=\"180\" y=\"270\" text-anchor=\"middle\" font-family=\"'Allison', cursive\" font-size=\"110\" fill=\"var(--script-col)\">April<\/text>\r\n <text id=\"svg-date-names\" x=\"180\" y=\"440\" text-anchor=\"middle\" font-family=\"'Bodoni Moda', serif\" font-weight=\"500\" font-size=\"16\" letter-spacing=\"0.1em\" fill=\"var(--num-col)\">GIULIA & TOM<\/text>\r\n <path d=\"M 0 10 C 0 10 -10 -2 -10 -6 C -10 -10 -4 -12 0 -8 C 4 -12 10 -10 10 -6 C 10 -2 0 10 0 10 Z\" transform=\"translate(180, 465) scale(0.6)\" fill=\"var(--script-col)\" \/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"line-wrap\" id=\"line-wrap\" style=\"display:none;\">\r\n <svg id=\"linePoster\" viewBox=\"0 0 360 504\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\r\n <path d=\"M -20 340 C 50 310, 110 290, 180 250 C 260 200, 290 70, 180 140 C 70 100, 100 220, 180 250 C 250 280, 310 290, 380 310\" \r\n fill=\"none\" stroke=\"var(--line-col)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n <text id=\"svg-line-names\" x=\"180\" y=\"390\" text-anchor=\"middle\" font-family=\"'Comfortaa', sans-serif\" font-weight=\"400\" font-size=\"18\" fill=\"var(--line-col)\">GIULIA & TOM<\/text>\r\n <text id=\"svg-line-date\" x=\"180\" y=\"415\" text-anchor=\"middle\" font-family=\"'Comfortaa', sans-serif\" font-weight=\"400\" font-size=\"14\" fill=\"var(--line-col)\">20. APRIL 2022<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <div class=\"pme-dimr\"><span id=\"dim-h\">45 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 theme: 'heart', \r\n yesText: 'ja',\r\n names: 'Giulia & Tom',\r\n dateRaw: '2022-04-20',\r\n mat: 'poster', \r\n sizeIdx: 1, \r\n styleIndexHeart: 3, \r\n styleIndexLove: 0, \r\n styleIndexBlockLove: 0, \r\n styleIndexDate: 0, \r\n styleIndexLine: 0,\r\n frame: 'black'\r\n};\r\n\r\nconst MONTHS = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\r\nconst MONTHS_DE = [\"Januar\", \"Februar\", \"M\u00e4rz\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"];\r\n\r\nfunction updateURL() {\r\n var p = new URLSearchParams();\r\n p.set('theme', S.theme);\r\n p.set('mat', S.mat);\r\n p.set('size', S.sizeIdx);\r\n p.set('styleHeart', S.styleIndexHeart);\r\n p.set('styleLove', S.styleIndexLove);\r\n p.set('styleBlockLove', S.styleIndexBlockLove);\r\n p.set('styleDate', S.styleIndexDate);\r\n p.set('styleLine', S.styleIndexLine);\r\n if (S.mat === 'framed') p.set('frame', S.frame);\r\n p.set('yes', S.yesText);\r\n p.set('names', S.names);\r\n p.set('date', S.dateRaw);\r\n history.replaceState(null, '', '?' + p.toString());\r\n}\r\n\r\nfunction processDate(rawVal) {\r\n if(!rawVal) return { dDay: \"20\", dMonth: \"April\", dYear: \"22\", formatted: \"20. April 2022\" };\r\n \r\n if(rawVal.includes('-')) {\r\n var parts = rawVal.split('-');\r\n if(parts.length === 3) {\r\n var yFull = parts[0];\r\n var yShort = yFull.length === 4 ? yFull.substring(2) : yFull;\r\n var mIndex = parseInt(parts[1]) - 1;\r\n var dDay = parts[2];\r\n var mName = MONTHS[mIndex] || \"April\";\r\n var mNameDe = MONTHS_DE[mIndex] || \"April\";\r\n \r\n return {\r\n dDay: dDay, \r\n dMonth: mNameDe,\r\n dYear: yShort,\r\n formatted: parseInt(dDay) + \". \" + mNameDe + \" \" + yFull \r\n };\r\n }\r\n }\r\n return { dDay: \"20\", dMonth: \"April\", dYear: \"22\", formatted: rawVal };\r\n}\r\n\r\nfunction renderPoster() {\r\n var dInfo = processDate(S.dateRaw);\r\n var formattedDate = dInfo.formatted;\r\n\r\n if (S.theme === 'heart') {\r\n var svgYes = document.getElementById('svg-heart-yes');\r\n if (svgYes) {\r\n svgYes.textContent = S.yesText;\r\n svgYes.setAttribute('font-size', '140');\r\n var w = 0; try { w = svgYes.getComputedTextLength(); } catch(e){}\r\n if (w > 280 && w > 0) svgYes.setAttribute('font-size', (280 \/ w) * 140);\r\n }\r\n var svgNames = document.getElementById('svg-heart-names');\r\n if (svgNames) {\r\n svgNames.textContent = S.names;\r\n svgNames.setAttribute('font-size', '16');\r\n var nw = 0; try { nw = svgNames.getComputedTextLength(); } catch(e){}\r\n if (nw > 280 && nw > 0) svgNames.setAttribute('font-size', (280 \/ nw) * 16);\r\n }\r\n var svgDate = document.getElementById('svg-heart-date');\r\n if (svgDate) {\r\n svgDate.textContent = formattedDate;\r\n svgDate.setAttribute('font-size', '12');\r\n var dw = 0; try { dw = svgDate.getComputedTextLength(); } catch(e){}\r\n if (dw > 280 && dw > 0) svgDate.setAttribute('font-size', (280 \/ dw) * 12);\r\n }\r\n } else if (S.theme === 'love') {\r\n var svgNames = document.getElementById('svg-love-names');\r\n if (svgNames) {\r\n svgNames.textContent = S.names.toUpperCase();\r\n svgNames.setAttribute('font-size', '32');\r\n var nw = 0; try { nw = svgNames.getComputedTextLength(); } catch(e){}\r\n if (nw > 280 && nw > 0) svgNames.setAttribute('font-size', (280 \/ nw) * 32);\r\n }\r\n var svgDate = document.getElementById('svg-love-date');\r\n if (svgDate) {\r\n svgDate.textContent = formattedDate.toUpperCase();\r\n svgDate.setAttribute('font-size', '24');\r\n var dw = 0; try { dw = svgDate.getComputedTextLength(); } catch(e){}\r\n if (dw > 280 && dw > 0) svgDate.setAttribute('font-size', (280 \/ dw) * 24);\r\n }\r\n } else if (S.theme === 'blocklove') {\r\n var svgNames = document.getElementById('svg-blocklove-names');\r\n if (svgNames) {\r\n svgNames.textContent = S.names;\r\n svgNames.setAttribute('font-size', '16');\r\n var nw = 0; try { nw = svgNames.getComputedTextLength(); } catch(e){}\r\n if (nw > 280 && nw > 0) svgNames.setAttribute('font-size', (280 \/ nw) * 16);\r\n }\r\n var svgDate = document.getElementById('svg-blocklove-date');\r\n if (svgDate) {\r\n svgDate.textContent = formattedDate;\r\n svgDate.setAttribute('font-size', '12');\r\n var dw = 0; try { dw = svgDate.getComputedTextLength(); } catch(e){}\r\n if (dw > 280 && dw > 0) svgDate.setAttribute('font-size', (280 \/ dw) * 12);\r\n }\r\n } else if (S.theme === 'date') {\r\n var svgDay = document.getElementById('svg-date-day');\r\n if(svgDay) svgDay.textContent = dInfo.dDay;\r\n \r\n var svgYear = document.getElementById('svg-date-year');\r\n if(svgYear) svgYear.textContent = dInfo.dYear;\r\n \r\n var svgMonth = document.getElementById('svg-date-month');\r\n if(svgMonth) {\r\n svgMonth.textContent = dInfo.dMonth;\r\n svgMonth.setAttribute('font-size', '110');\r\n var mw = 0; try { mw = svgMonth.getComputedTextLength(); } catch(e){}\r\n if (mw > 280 && mw > 0) svgMonth.setAttribute('font-size', (280 \/ mw) * 110);\r\n }\r\n\r\n var svgNames = document.getElementById('svg-date-names');\r\n if(svgNames) {\r\n svgNames.textContent = S.names.toUpperCase();\r\n svgNames.setAttribute('font-size', '16');\r\n var nw = 0; try { nw = svgNames.getComputedTextLength(); } catch(e){}\r\n if (nw > 280 && nw > 0) svgNames.setAttribute('font-size', (280 \/ nw) * 16);\r\n }\r\n } else {\r\n \/\/ Line Theme\r\n var svgNames = document.getElementById('svg-line-names');\r\n if (svgNames) {\r\n svgNames.textContent = S.names.toUpperCase();\r\n svgNames.setAttribute('font-size', '18');\r\n var nw = 0; try { nw = svgNames.getComputedTextLength(); } catch(e){}\r\n if (nw > 280 && nw > 0) svgNames.setAttribute('font-size', (280 \/ nw) * 18);\r\n }\r\n var svgDate = document.getElementById('svg-line-date');\r\n if (svgDate) {\r\n svgDate.textContent = formattedDate.toUpperCase();\r\n svgDate.setAttribute('font-size', '14');\r\n var dw = 0; try { dw = svgDate.getComputedTextLength(); } catch(e){}\r\n if (dw > 280 && dw > 0) svgDate.setAttribute('font-size', (280 \/ dw) * 14);\r\n }\r\n }\r\n}\r\n\r\nfunction switchThemeUI() {\r\n \/\/ Hide all input fields first\r\n document.getElementById('field-yes').style.display = 'none';\r\n\r\n \/\/ Hide all pins and posters\r\n document.getElementById('pins-heart').style.display = 'none';\r\n document.getElementById('pins-love').style.display = 'none';\r\n document.getElementById('pins-blocklove').style.display = 'none';\r\n document.getElementById('pins-date').style.display = 'none';\r\n document.getElementById('pins-line').style.display = 'none';\r\n \r\n document.getElementById('heart-wrap').style.display = 'none';\r\n document.getElementById('love-wrap').style.display = 'none';\r\n document.getElementById('blocklove-wrap').style.display = 'none';\r\n document.getElementById('date-wrap').style.display = 'none';\r\n document.getElementById('line-wrap').style.display = 'none';\r\n\r\n if (S.theme === 'heart') {\r\n document.getElementById('field-yes').style.display = 'block';\r\n document.getElementById('pins-heart').style.display = 'flex';\r\n document.getElementById('heart-wrap').style.display = 'block';\r\n } else if (S.theme === 'love') {\r\n document.getElementById('pins-love').style.display = 'flex';\r\n document.getElementById('love-wrap').style.display = 'block';\r\n } else if (S.theme === 'blocklove') {\r\n document.getElementById('pins-blocklove').style.display = 'flex';\r\n document.getElementById('blocklove-wrap').style.display = 'block';\r\n } else if (S.theme === 'date') {\r\n document.getElementById('pins-date').style.display = 'flex';\r\n document.getElementById('date-wrap').style.display = 'block';\r\n } else {\r\n \/\/ line theme\r\n document.getElementById('pins-line').style.display = 'flex';\r\n document.getElementById('line-wrap').style.display = 'block';\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('#theme-toggle .theme-btn').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('#theme-toggle .theme-btn').forEach(function(b) { b.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.theme = this.getAttribute('data-theme');\r\n switchThemeUI();\r\n renderPoster();\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('#pins-heart .pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('#pins-heart .pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('heart-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--bg-color', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--heart-fill', this.getAttribute('data-hf'));\r\n wrap.style.setProperty('--heart-stroke', this.getAttribute('data-hs'));\r\n wrap.style.setProperty('--text-big', this.getAttribute('data-tb'));\r\n wrap.style.setProperty('--text-small', this.getAttribute('data-ts'));\r\n }\r\n S.styleIndexHeart = index;\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('#pins-love .pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('#pins-love .pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('love-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--bg-color', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--text-col', this.getAttribute('data-tc'));\r\n }\r\n S.styleIndexLove = index;\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('#pins-blocklove .pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('#pins-blocklove .pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('blocklove-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--bg-color', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--text-col', this.getAttribute('data-tc'));\r\n }\r\n S.styleIndexBlockLove = index;\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('#pins-date .pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('#pins-date .pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('date-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--bg-color', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--num-col', this.getAttribute('data-nc'));\r\n wrap.style.setProperty('--script-col', this.getAttribute('data-sc'));\r\n }\r\n S.styleIndexDate = index;\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('#pins-line .pme-thm').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('#pins-line .pme-thm').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n var wrap = document.getElementById('line-wrap');\r\n if(wrap) {\r\n wrap.style.setProperty('--bg-color', this.getAttribute('data-bg'));\r\n wrap.style.setProperty('--line-col', this.getAttribute('data-lc'));\r\n }\r\n S.styleIndexLine = index;\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.getElementById('inp-yes').addEventListener('input', function() { S.yesText = this.value; renderPoster(); updateURL(); });\r\ndocument.getElementById('inp-names').addEventListener('input', function() { S.names = this.value; renderPoster(); updateURL(); });\r\n\r\ndocument.getElementById('inp-date-picker').addEventListener('input', function() { \r\n S.dateRaw = this.value; \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') { S.sizeIdx = i; break; }\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) frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\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:\\'Poppins\\',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) { 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 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\ndocument.getElementById('btn-cart').addEventListener('click', function() {\r\n var btn = this; var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet ...'; btn.style.pointerEvents = 'none';\r\n\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\r\n \r\n var activeStyleIdx = S.styleIndexHeart;\r\n if(S.theme === 'love') activeStyleIdx = S.styleIndexLove;\r\n if(S.theme === 'blocklove') activeStyleIdx = S.styleIndexBlockLove;\r\n if(S.theme === 'date') activeStyleIdx = S.styleIndexDate;\r\n if(S.theme === 'line') activeStyleIdx = S.styleIndexLine;\r\n\r\n var dParts = processDate(S.dateRaw);\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart', \r\n product_id: '2221', \r\n poster_title: S.theme === 'heart' ? S.yesText : S.names,\r\n poster_subtitle: (S.theme === 'heart' || S.theme === 'line') ? S.names : dParts.formatted,\r\n poster_date: (S.theme === 'heart' || S.theme === 'line') ? dParts.formatted : '',\r\n poster_theme: S.theme,\r\n poster_style: activeStyleIdx,\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 html2canvas(document.getElementById('pme-poster'), { useCORS: true, scale: 2 }).then(canvas => {\r\n cartData.poster_thumbnail = canvas.toDataURL('image\/jpeg', 0.92);\r\n var body = Object.keys(cartData).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(cartData[k])).join('&');\r\n fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php', { method: 'POST', headers: {'Content-Type': 'application\/x-www-form-urlencoded'}, body: body })\r\n .then(r => r.json()).then(res => { \r\n if (res.success) { window.location.href = 'https:\/\/zulumaps.com\/cart\/'; } \r\n else { btn.innerHTML = originalHTML; btn.style.pointerEvents = 'auto'; } \r\n }).catch(function(err) {\r\n console.error(\"Fetch Error:\", err);\r\n alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n btn.innerHTML = originalHTML;\r\n btn.style.pointerEvents = 'auto';\r\n });\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 ? 50 : 60);\r\n var aW = canvas.clientWidth - (isMob ? 50 : 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('theme')) S.theme = p.get('theme');\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('styleHeart')) S.styleIndexHeart = parseInt(p.get('styleHeart')) || 3;\r\nif (p.has('styleLove')) S.styleIndexLove = parseInt(p.get('styleLove')) || 0;\r\nif (p.has('styleBlockLove')) S.styleIndexBlockLove = parseInt(p.get('styleBlockLove')) || 0;\r\nif (p.has('styleDate')) S.styleIndexDate = parseInt(p.get('styleDate')) || 0;\r\nif (p.has('styleLine')) S.styleIndexLine = parseInt(p.get('styleLine')) || 0;\r\nif (p.has('frame')) S.frame = p.get('frame');\r\nif (p.has('yes')) S.yesText = p.get('yes');\r\nif (p.has('names')) S.names = p.get('names');\r\nif (p.has('date')) S.dateRaw = p.get('date');\r\n\r\nvar ms = document.getElementById('sel-mat');\r\nif (ms) ms.value = S.mat;\r\n\r\ndocument.getElementById('inp-yes').value = S.yesText;\r\ndocument.getElementById('inp-names').value = S.names;\r\n\r\nvar pickerVal = S.dateRaw;\r\nif (pickerVal && pickerVal.split('-').length !== 3) pickerVal = \"2022-04-20\";\r\ndocument.getElementById('inp-date-picker').value = pickerVal;\r\nif(document.getElementById('inp-date')) {\r\n document.getElementById('inp-date').value = processDate(pickerVal).formatted;\r\n}\r\n\r\ndocument.querySelectorAll('#theme-toggle .theme-btn').forEach(function(b) {\r\n b.classList.toggle('active', b.getAttribute('data-theme') === S.theme);\r\n});\r\n\r\nswitchThemeUI();\r\nrenderPoster();\r\n\r\nvar heartPins = document.querySelectorAll('#pins-heart .pme-thm');\r\nif (heartPins.length > S.styleIndexHeart) {\r\n var activePin = heartPins[S.styleIndexHeart];\r\n heartPins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('heart-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--bg-color', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--heart-fill', activePin.getAttribute('data-hf'));\r\n wrap.style.setProperty('--heart-stroke', activePin.getAttribute('data-hs'));\r\n wrap.style.setProperty('--text-big', activePin.getAttribute('data-tb'));\r\n wrap.style.setProperty('--text-small', activePin.getAttribute('data-ts'));\r\n }\r\n}\r\n\r\nvar lovePins = document.querySelectorAll('#pins-love .pme-thm');\r\nif (lovePins.length > S.styleIndexLove) {\r\n var activePin = lovePins[S.styleIndexLove];\r\n lovePins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('love-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--bg-color', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--text-col', activePin.getAttribute('data-tc'));\r\n }\r\n}\r\n\r\nvar blocklovePins = document.querySelectorAll('#pins-blocklove .pme-thm');\r\nif (blocklovePins.length > S.styleIndexBlockLove) {\r\n var activePin = blocklovePins[S.styleIndexBlockLove];\r\n blocklovePins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('blocklove-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--bg-color', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--text-col', activePin.getAttribute('data-tc'));\r\n }\r\n}\r\n\r\nvar datePins = document.querySelectorAll('#pins-date .pme-thm');\r\nif (datePins.length > S.styleIndexDate) {\r\n var activePin = datePins[S.styleIndexDate];\r\n datePins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('date-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--bg-color', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--num-col', activePin.getAttribute('data-nc'));\r\n wrap.style.setProperty('--script-col', activePin.getAttribute('data-sc'));\r\n }\r\n}\r\n\r\nvar linePins = document.querySelectorAll('#pins-line .pme-thm');\r\nif (linePins.length > S.styleIndexLine) {\r\n var activePin = linePins[S.styleIndexLine];\r\n linePins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n var wrap = document.getElementById('line-wrap');\r\n if (wrap) {\r\n wrap.style.setProperty('--bg-color', activePin.getAttribute('data-bg'));\r\n wrap.style.setProperty('--line-col', activePin.getAttribute('data-lc'));\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>Jahrestag Editor Texte Stil Gr\u00f6\u00dfe Texte Stil Gr\u00f6\u00dfe Details Personalisiere deinen besonderen Moment. Haupttext Namen Datum Stil W\u00e4hle Layout und Farbvariante. Layout Heart Love Block Love 08 22 Date Line Design Modern PinkBlush CreamCoral MintCream SunsetYellow LilacDream Stone WarmSand Peach Sky Crimson Modern SoftPink Peach Sky Crimson Modern SoftPink Modern Mint Coral Pink Peach Modern […]<\/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-2193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2193","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=2193"}],"version-history":[{"count":10,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2193\/revisions"}],"predecessor-version":[{"id":2884,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2193\/revisions\/2884"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}