{"id":2193,"date":"2026-04-22T22:55:17","date_gmt":"2026-04-22T20:55:17","guid":{"rendered":"https:\/\/zulumaps.com\/anniversary\/"},"modified":"2026-04-28T20:49:16","modified_gmt":"2026-04-28T18:49:16","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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Poppins:wght@400;500&family=Alex+Brush&family=Yanone+Kaffeesatz:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400&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\/* 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:'DM Sans',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:'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.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.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\">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=\"'Playfair Display', serif\" font-weight=\"500\" font-size=\"200\" fill=\"#1a1a1a\">08<\/text>\r\n <text x=\"180\" y=\"375\" text-anchor=\"middle\" font-family=\"'Playfair Display', 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 #f6eee3;\"><\/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:'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 \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=\"'Alex Brush', 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=\"'Barlow Semi Condensed', 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=\"'Barlow Semi Condensed', 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=\"'Yanone Kaffeesatz', sans-serif\" font-weight=\"300\" 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=\"'Yanone Kaffeesatz', sans-serif\" font-weight=\"300\" 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=\"445\" text-anchor=\"middle\" font-family=\"'Barlow Semi Condensed', 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=\"470\" text-anchor=\"middle\" font-family=\"'Barlow Semi Condensed', 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=\"'Playfair Display', 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=\"'Playfair Display', 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=\"'Alex Brush', 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=\"'Playfair Display', serif\" font-weight=\"400\" 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=\"'Montserrat', sans-serif\" font-weight=\"300\" 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=\"'Montserrat', sans-serif\" font-weight=\"300\" 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\">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 MATS = ['postcard','poster','framed','canvas'];\r\nvar MAT_LABELS = {postcard:'Postkarte',poster:'Poster',framed:'Gerahmtes Poster',canvas:'Leinwand'};\r\n\r\nvar S = {\r\n 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:\\'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) { 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\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 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 formattedDate = processDate(S.dateRaw).formatted;\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart',\r\n \/\/ DEUTSCHE PRODUKT-ID:\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 : formattedDate,\r\n poster_date: (S.theme === 'heart' || S.theme === 'line') ? formattedDate : '',\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 \/\/ Fallback fields so backend validation passes\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_names: '',\r\n poster_heart: ''\r\n };\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 ctx.save();\r\n ctx.translate(pad, pad);\r\n\r\n if (S.theme === 'heart') {\r\n var wrap = document.getElementById('heart-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--bg-color').trim() : '#ffffff';\r\n var hf = wrap ? getComputedStyle(wrap).getPropertyValue('--heart-fill').trim() : '#ffffff';\r\n var hs = wrap ? getComputedStyle(wrap).getPropertyValue('--heart-stroke').trim() : '#1a1a1a';\r\n var tb = wrap ? getComputedStyle(wrap).getPropertyValue('--text-big').trim() : '#1a1a1a';\r\n var ts = wrap ? getComputedStyle(wrap).getPropertyValue('--text-small').trim() : '#1a1a1a';\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(0, 0, innerW, innerH);\r\n \r\n var heartPath = new Path2D('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');\r\n\r\n if (hf !== 'transparent' && hf !== 'rgba(0, 0, 0, 0)') { ctx.fillStyle = hf; ctx.fill(heartPath); }\r\n if (hs !== 'transparent' && hs !== 'rgba(0, 0, 0, 0)') { ctx.strokeStyle = hs; ctx.lineWidth = 1.2; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.stroke(heartPath); }\r\n\r\n ctx.fillStyle = tb;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n \r\n var fsYes = 140;\r\n ctx.font = fsYes + 'px \"Alex Brush\", cursive';\r\n var yesW = ctx.measureText(S.yesText).width;\r\n if(yesW > 280) { fsYes = fsYes * (280 \/ yesW); ctx.font = fsYes + 'px \"Alex Brush\", cursive'; }\r\n ctx.fillText(S.yesText, 168, 200);\r\n\r\n ctx.fillStyle = ts;\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var fsNames = 16;\r\n ctx.font = '400 ' + fsNames + 'px \"Barlow Semi Condensed\", sans-serif';\r\n var namesW = ctx.measureText(S.names).width;\r\n if(namesW > 280) { fsNames = fsNames * (280 \/ namesW); ctx.font = '400 ' + fsNames + 'px \"Barlow Semi Condensed\", sans-serif'; }\r\n ctx.fillText(S.names, 168, 435);\r\n \r\n var fsDate = 12;\r\n ctx.font = '400 ' + fsDate + 'px \"Barlow Semi Condensed\", sans-serif';\r\n var dateW = ctx.measureText(formattedDate).width;\r\n if(dateW > 280) { fsDate = fsDate * (280 \/ dateW); ctx.font = '400 ' + fsDate + 'px \"Barlow Semi Condensed\", sans-serif'; }\r\n ctx.fillText(formattedDate, 168, 460);\r\n\r\n } else if (S.theme === 'love') {\r\n var wrap = document.getElementById('love-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--bg-color').trim() : '#fcbfa4';\r\n var tc = wrap ? getComputedStyle(wrap).getPropertyValue('--text-col').trim() : '#ffffff';\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(0, 0, innerW, innerH);\r\n\r\n ctx.strokeStyle = tc;\r\n ctx.lineWidth = 4.5;\r\n ctx.lineJoin = 'miter';\r\n ctx.lineCap = 'butt';\r\n\r\n var p1 = new Path2D('M 78 90 L 78 270 L 123 270');\r\n ctx.stroke(p1);\r\n ctx.beginPath();\r\n ctx.arc(198, 200, 70, 0, Math.PI * 2);\r\n ctx.stroke();\r\n var p2 = new Path2D('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');\r\n ctx.stroke(p2);\r\n\r\n ctx.fillStyle = tc;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var fsNames = 32;\r\n ctx.font = '300 ' + fsNames + 'px \"Yanone Kaffeesatz\", sans-serif';\r\n ctx.letterSpacing = '0.05em';\r\n var namesW = ctx.measureText(S.names.toUpperCase()).width;\r\n if(namesW > 280) { fsNames = fsNames * (280 \/ namesW); ctx.font = '300 ' + fsNames + 'px \"Yanone Kaffeesatz\", sans-serif'; }\r\n ctx.fillText(S.names.toUpperCase(), 180, 445);\r\n \r\n var fsDate = 24;\r\n ctx.font = '300 ' + fsDate + 'px \"Yanone Kaffeesatz\", sans-serif';\r\n var dateW = ctx.measureText(formattedDate.toUpperCase()).width;\r\n if(dateW > 280) { fsDate = fsDate * (280 \/ dateW); ctx.font = '300 ' + fsDate + 'px \"Yanone Kaffeesatz\", sans-serif'; }\r\n ctx.fillText(formattedDate.toUpperCase(), 180, 475);\r\n \r\n } else if (S.theme === 'blocklove') {\r\n var wrap = document.getElementById('blocklove-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--bg-color').trim() : '#fcbfa4';\r\n var tc = wrap ? getComputedStyle(wrap).getPropertyValue('--text-col').trim() : '#ffffff';\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(0, 0, innerW, innerH);\r\n\r\n ctx.fillStyle = tc;\r\n ctx.strokeStyle = tc;\r\n ctx.lineWidth = 8;\r\n ctx.lineJoin = 'round';\r\n ctx.lineCap = 'round';\r\n\r\n var pL = new Path2D('M 60,40 L 105,40 L 95,185 L 175,180 L 175,215 L 50,220 Z');\r\n ctx.stroke(pL); ctx.fill(pL);\r\n\r\n var pO = new Path2D('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');\r\n ctx.stroke(pO); ctx.fill(pO, 'evenodd');\r\n\r\n var pV = new Path2D('M 45,240 L 95,240 L 125,370 L 155,240 L 205,240 L 150,420 L 90,420 Z');\r\n ctx.stroke(pV); ctx.fill(pV);\r\n\r\n var pE = new Path2D('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 ctx.stroke(pE); ctx.fill(pE);\r\n\r\n ctx.fillStyle = tc;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var fsNames = 16;\r\n ctx.font = '400 ' + fsNames + 'px \"Barlow Semi Condensed\", sans-serif';\r\n var namesW = ctx.measureText(S.names).width;\r\n if(namesW > 280) { fsNames = fsNames * (280 \/ namesW); ctx.font = '400 ' + fsNames + 'px \"Barlow Semi Condensed\", sans-serif'; }\r\n ctx.fillText(S.names, 180, 455);\r\n \r\n var fsDate = 12;\r\n ctx.font = '400 ' + fsDate + 'px \"Barlow Semi Condensed\", sans-serif';\r\n var dateW = ctx.measureText(formattedDate).width;\r\n if(dateW > 280) { fsDate = fsDate * (280 \/ dateW); ctx.font = '400 ' + fsDate + 'px \"Barlow Semi Condensed\", sans-serif'; }\r\n ctx.fillText(formattedDate, 180, 480);\r\n \r\n } else if (S.theme === 'date') {\r\n var wrap = document.getElementById('date-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--bg-color').trim() : '#fbfaf5';\r\n var nc = wrap ? getComputedStyle(wrap).getPropertyValue('--num-col').trim() : '#000000';\r\n var sc = wrap ? getComputedStyle(wrap).getPropertyValue('--script-col').trim() : '#cdc2a5';\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(0, 0, innerW, innerH);\r\n\r\n var dParts = processDate(S.dateRaw);\r\n\r\n ctx.fillStyle = nc;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n ctx.font = '500 200px \"Playfair Display\", serif';\r\n ctx.fillText(dParts.dDay, 168, 210);\r\n ctx.fillText(dParts.dYear, 168, 375);\r\n\r\n ctx.fillStyle = sc;\r\n var fsMonth = 110;\r\n ctx.font = fsMonth + 'px \"Alex Brush\", cursive';\r\n var monthW = ctx.measureText(dParts.dMonth).width;\r\n if(monthW > 280) { fsMonth = fsMonth * (280 \/ monthW); ctx.font = fsMonth + 'px \"Alex Brush\", cursive'; }\r\n ctx.fillText(dParts.dMonth, 168, 270);\r\n\r\n ctx.fillStyle = nc;\r\n var fsNames = 16;\r\n ctx.font = '400 ' + fsNames + 'px \"Playfair Display\", serif';\r\n var namesW = ctx.measureText(S.names.toUpperCase()).width;\r\n if(namesW > 280) { fsNames = fsNames * (280 \/ namesW); ctx.font = '400 ' + fsNames + 'px \"Playfair Display\", serif'; }\r\n ctx.fillText(S.names.toUpperCase(), 168, 440);\r\n\r\n ctx.fillStyle = sc;\r\n var heartPath = new Path2D('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');\r\n ctx.save();\r\n ctx.translate(168, 465);\r\n ctx.scale(0.6, 0.6);\r\n ctx.fill(heartPath);\r\n ctx.restore();\r\n\r\n } else {\r\n \/\/ Line\r\n var wrap = document.getElementById('line-wrap');\r\n var bg = wrap ? getComputedStyle(wrap).getPropertyValue('--bg-color').trim() : '#ffffff';\r\n var lc = wrap ? getComputedStyle(wrap).getPropertyValue('--line-col').trim() : '#1a1a1a';\r\n\r\n ctx.fillStyle = bg;\r\n ctx.fillRect(0, 0, innerW, innerH);\r\n\r\n ctx.strokeStyle = lc;\r\n ctx.lineWidth = 1.5;\r\n ctx.lineJoin = 'round';\r\n ctx.lineCap = 'round';\r\n \r\n var linePath = new Path2D('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 ctx.stroke(linePath);\r\n\r\n ctx.fillStyle = lc;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'alphabetic';\r\n \r\n var fsNames = 18;\r\n ctx.font = '300 ' + fsNames + 'px \"Montserrat\", sans-serif';\r\n var namesW = ctx.measureText(S.names.toUpperCase()).width;\r\n if(namesW > 280) { fsNames = fsNames * (280 \/ namesW); ctx.font = '300 ' + fsNames + 'px \"Montserrat\", sans-serif'; }\r\n ctx.fillText(S.names.toUpperCase(), 180, 390);\r\n \r\n var fsDate = 14;\r\n ctx.font = '300 ' + fsDate + 'px \"Montserrat\", sans-serif';\r\n var dateW = ctx.measureText(formattedDate.toUpperCase()).width;\r\n if(dateW > 280) { fsDate = fsDate * (280 \/ dateW); ctx.font = '300 ' + fsDate + 'px \"Montserrat\", sans-serif'; }\r\n ctx.fillText(formattedDate.toUpperCase(), 180, 415);\r\n }\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\n\/\/ Force fonts loading\r\ndocument.fonts.load('140px \"Alex Brush\"').then(function(){ renderPoster(); });\r\ndocument.fonts.load('32px \"Yanone Kaffeesatz\"').then(function(){ renderPoster(); });\r\ndocument.fonts.load('200px \"Playfair Display\"').then(function(){ renderPoster(); });\r\ndocument.fonts.load('18px \"Montserrat\"').then(function(){ renderPoster(); });\r\ndocument.fonts.load('16px \"Barlow Semi Condensed\"').then(function(){ renderPoster(); });\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\n\/\/ Fallback f\u00fcr den Kalender (muss ein g\u00fcltiges Format yyyy-mm-dd haben)\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":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2193\/revisions"}],"predecessor-version":[{"id":2258,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2193\/revisions\/2258"}],"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}]}}