{"id":2156,"date":"2026-04-16T17:22:01","date_gmt":"2026-04-16T15:22:01","guid":{"rendered":"https:\/\/zulumaps.com\/strassenkarte\/"},"modified":"2026-06-11T14:00:39","modified_gmt":"2026-06-11T12:00:39","slug":"street-map","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/street-map\/","title":{"rendered":"Street Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2156\" class=\"elementor elementor-2156 elementor-16\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db3b44b e-con-full e-flex e-con e-parent\" data-id=\"db3b44b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d8fc1a elementor-widget elementor-widget-html\" data-id=\"0d8fc1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<link href=\"https:\/\/unpkg.com\/maplibre-gl@4.5.0\/dist\/maplibre-gl.css\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/unpkg.com\/maplibre-gl@4.5.0\/dist\/maplibre-gl.js\"><\/script>\r\n<style>\r\n\/* --- LOKALE SCHRIFTEN (RELATIVE PFADE) --- *\/\r\n@font-face {\r\n  font-family: 'Poppins';\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-regular.woff2') format('woff2');\r\n}\r\n@font-face {\r\n  font-family: 'Poppins';\r\n  font-style: normal;\r\n  font-weight: 500;\r\n  font-display: swap;\r\n  src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-500.woff2') format('woff2');\r\n}\r\n@font-face {\r\n  font-family: 'Poppins';\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url('\/wp-content\/uploads\/fonts\/poppins-v24-latin-600.woff2') format('woff2');\r\n}\r\n@font-face {\r\n  font-family: 'Rubik';\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url('\/wp-content\/uploads\/fonts\/rubik-v31-latin-regular.woff2') format('woff2');\r\n}\r\n@font-face {\r\n  font-family: 'Rubik';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('\/wp-content\/uploads\/fonts\/rubik-v31-latin-700.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.pme-search{position:relative;margin-bottom:8px;}\r\n.pme-search input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px 10px 36px;font-size:14px;font-family:'Poppins',sans-serif;outline:none;background:#fafafa;}\r\n.pme-search input:focus{border-color:#1a1a1a;background:#fff;}\r\n.pme-sic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none;}\r\n.pme-results{display:none;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:4px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:100;position:relative;}\r\n.pme-results.show{display:block;}\r\n.pme-ri{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f0f0;}\r\n.pme-ri:last-child{border-bottom:none;}\r\n.pme-ri:hover{background:#f8f8f8;}\r\n.pme-ri strong{display:block;font-weight:500;}\r\n.pme-ri span{color:#888;font-size:12px;}\r\n.pme-pop-lbl{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#999;margin:20px 0 10px;}\r\n.pme-pop{list-style:none;}\r\n.pme-pop li{padding:9px 0;font-size:14px;color:#444;cursor:pointer;}\r\n.pme-pop li:hover{color:#1a1a1a;}\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\r\n\/* UNIFIED BUTTON GRIDS & SIZING *\/\r\n.pme-pins{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}\r\n.pme-shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}\r\n.pme-thm, .pme-pin, .pme-shape {\r\n  border: 1.5px solid #d0d0d0;\r\n  border-radius: 8px;\r\n  padding: 0;\r\n  height: 76px;\r\n  cursor: pointer;\r\n  background: #fff;\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  transition: all 0.15s;\r\n}\r\n.pme-thm:hover, .pme-thm.active,\r\n.pme-pin:hover, .pme-pin.active,\r\n.pme-shape:hover, .pme-shape.active {\r\n  border-color: #1a1a1a;\r\n  box-shadow: inset 0 0 0 1.5px #1a1a1a;\r\n}\r\n.pme-thm svg { width: 26px; height: 32px; }\r\n.pme-pin svg { width: 28px; height: 36px; }\r\n.pme-shape svg { width: 32px; height: 32px; }\r\n.pme-thm span, .pme-pin span, .pme-shape span {\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  font-family: 'Poppins', sans-serif;\r\n  color: #555;\r\n  line-height: 1;\r\n}\r\n\r\n\/* NEW MAP SHAPES MASKS *\/\r\n.shape-circle{-webkit-mask-image:radial-gradient(circle closest-side at center, black 95%, transparent 96%);mask-image:radial-gradient(circle closest-side at center, black 95%, transparent 96%);}\r\n.shape-heart{-webkit-mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60,110 C60,110 5,75 5,35 C5,12 25,0 42,12 C52,19 60,32 60,32 C60,32 68,19 78,12 C95,0 115,12 115,35 C115,75 60,110 60,110 Z' fill='black'\/%3E%3C\/svg%3E\");mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60,110 C60,110 5,75 5,35 C5,12 25,0 42,12 C52,19 60,32 60,32 C60,32 68,19 78,12 C95,0 115,12 115,35 C115,75 60,110 60,110 Z' fill='black'\/%3E%3C\/svg%3E\");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}\r\n.shape-star{-webkit-mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpolygon points='60,2 78,39 118,44 89,73 96,114 60,95 24,114 31,73 2,44 42,39' fill='black'\/%3E%3C\/svg%3E\");mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpolygon points='60,2 78,39 118,44 89,73 96,114 60,95 24,114 31,73 2,44 42,39' fill='black'\/%3E%3C\/svg%3E\");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}\r\n.shape-pin{-webkit-mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60,115 C60,115 20,70 20,40 A40,40 0 0,1 100,40 C100,70 60,115 60,115 Z' fill='black'\/%3E%3C\/svg%3E\");mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60,115 C60,115 20,70 20,40 A40,40 0 0,1 100,40 C100,70 60,115 60,115 Z' fill='black'\/%3E%3C\/svg%3E\");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}\r\n\r\n.pme-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}\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:all 0.15s;}\r\n.pme-frame:hover,.pme-frame.active{border-color:#1a1a1a!important;box-shadow:inset 0 0 0 1px #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\r\n.pme-orients{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}\r\n.pme-or{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff!important;font-family:'Poppins',sans-serif;color:#1a1a1a!important;transition:all 0.15s;}\r\n.pme-or:hover,.pme-or.active{border-color:#1a1a1a!important;box-shadow:inset 0 0 0 1px #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\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.pme-poster{background:#fff;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);}\r\n.pme-poster.is-framed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 3px 18px rgba(0,0,0,0.25);pointer-events:none;z-index:20;}\r\n.pme-mapwrap{flex:1;position:relative;padding:12px;background:#fff;}\r\n.pme-map-clip{position:absolute;top:12px;left:12px;right:12px;bottom:12px;overflow:hidden;}\r\n#pme-map{width:400%;height:400%;transform:scale(0.25);transform-origin:0 0;}\r\n.pme-footer{background:#fff;padding:10px 14px 12px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;font-family:'Rubik',sans-serif;position:relative;z-index:10;}\r\n.pme-h{font-size:16px;font-weight:700;letter-spacing:0.12em;text-align:center;text-transform:uppercase;}\r\n.pme-dr{display:flex;align-items:center;gap:8px;margin:4px 0;width:100%;justify-content:center;}\r\n.pme-dl{flex:1;max-width:36px;height:1px;background:currentColor;opacity:0.4;}\r\n.pme-dt{font-size:8px;letter-spacing:0.2em;opacity:0.65;text-transform:uppercase;}\r\n.pme-tg{font-size:7px;letter-spacing:0.06em;opacity:0.4;text-align:center;text-transform:uppercase;}\r\n.pme-dimr{position:absolute;right:-22px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}\r\n.pme-dimr span{writing-mode:vertical-rl;font-size:11px;color:#aaa;white-space:nowrap;}\r\n.pme-dimb{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}\r\n.pme-dimb span{font-size:11px;color:#aaa;}\r\n.pme-bar{background:#1a1a1a;display:flex;align-items:center;padding:16px 24px;gap:12px;margin-top:auto;}\r\n.pme-prices{display:flex;align-items:baseline;gap:6px;}\r\n.pme-old{font-size:12px;color:#888;text-decoration:line-through;}\r\n.pme-new{font-size:17px;font-weight:600;color:#fff;}\r\n.pme-cart{background:#7E5AF0;color:#ffffff;border:none;border-radius:25px;padding:10px 14px;font-size:18px;font-weight:400;font-family:'Poppins',sans-serif;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.15s,color 0.15s,border-color 0.15s;}\r\n.pme-cart:hover, .pme-cart:active, .pme-cart:focus {background:#632ED3!important;color:#ffffff!important;border:none!important;outline:none!important;}\r\n.maplibregl-ctrl-logo,.maplibregl-ctrl-attrib,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-right,.maplibregl-ctrl-top-left{display:none!important;}\r\n@media(max-width:768px){\r\n  .pme{flex-direction:column;height:auto!important;min-height:100vh;}\r\n  .pme-nav{display:none;}\r\n  .pme-panel{width:100%!important;min-width:0!important;border-right:none;border-top:1px solid #e8e8e8;max-height:none!important;height:auto!important;overflow-y:visible!important;order:3;}\r\n  .pme-canvas{order:1;flex:none!important;height:65vh!important;min-height:380px;}\r\n  .pme-mobnav{display:flex!important;order:2;height:71px!important;flex:0 0 71px!important;}\r\n  .pme-section{padding:16px 16px 24px;}\r\n}\r\n.pme-mobnav{display:none;width:100%;background:#1a1a1a;overflow-x:auto;scrollbar-width:none;}\r\n.pme-mobnav::-webkit-scrollbar{display:none;}\r\n\r\n\/* --- FIX FOR ELEMENTOR MAGENTA BUTTONS --- *\/\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  stroke: currentColor !important;\r\n}\r\n\/* ----------------------------------------- *\/\r\n\r\n.theme-pure .pme-footer{display:none!important;}\r\n.theme-standard .pme-footer{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);background:#fff;padding:8px 12px;box-shadow:0 4px 15px rgba(0,0,0,0.15);width:50%;border:none;z-index:10;}\r\n.theme-center .pme-footer{position:absolute;top:25px;left:50%;transform:translateX(-50%);background:#fff;padding:8px 12px;box-shadow:0 4px 15px rgba(0,0,0,0.15);width:50%;border:none;z-index:10;}\r\n.theme-legend .pme-footer{position:absolute;bottom:11px;right:11px;background:#fff;padding:8px 12px;box-shadow:-2px -2px 15px rgba(0,0,0,0.1);width:50%;max-width:50%;border:none;z-index:10;align-items:center;}\r\n.theme-legend .pme-h,.theme-legend .pme-tg{text-align:center;}\r\n.theme-standard .pme-h,.theme-center .pme-h,.theme-legend .pme-h{font-size:13px;margin-bottom:2px;}\r\n.theme-standard .pme-dr,.theme-center .pme-dr,.theme-legend .pme-dr{margin:2px 0;}\r\n.theme-standard .pme-dt,.theme-center .pme-dt,.theme-legend .pme-dt{font-size:7px;}\r\n.theme-standard .pme-tg,.theme-center .pme-tg,.theme-legend .pme-tg{font-size:6px;}\r\n.pme-h,.pme-dt,.pme-tg{white-space:nowrap;}\r\n\r\n\/* --- ZOOM CONTROLS --- *\/\r\n.pme-zoom-ctrl {\r\n  position: absolute;\r\n  top: 24px;\r\n  left: 24px;\r\n  z-index: 50;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: #fff;\r\n  border-radius: 4px;\r\n  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);\r\n}\r\n.pme-zoom-ctrl button {\r\n  width: 29px;\r\n  height: 29px;\r\n  background: #fff;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #333;\r\n  padding: 0;\r\n  transition: background 0.15s;\r\n}\r\n.pme-zoom-ctrl button:first-child {\r\n  border-bottom: 1px solid #ddd;\r\n  border-top-left-radius: 4px;\r\n  border-top-right-radius: 4px;\r\n}\r\n.pme-zoom-ctrl button:last-child {\r\n  border-bottom-left-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n}\r\n.pme-zoom-ctrl button:hover {\r\n  background: #f4f4f4;\r\n}\r\n.pme-zoom-ctrl svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  stroke: #333;\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=\"location\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>Ort\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"labels\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"style\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"size\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n    <\/button>\r\n  <\/nav>\r\n\r\n  <div class=\"pme-mobnav\">\r\n    <button class=\"pme-mobbtn active\" data-panel=\"location\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg>Karte\r\n    <\/button>\r\n    <button class=\"pme-mobbtn\" 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    <div class=\"pme-section active\" id=\"sec-location\">\r\n      <div class=\"pme-title\">Ort<\/div>\r\n      <div class=\"pme-desc\">Suche, ziehe und zoome, um deinen perfekten Ort zu finden.<\/div>\r\n      <div class=\"pme-search\">\r\n        <svg class=\"pme-sic\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\r\n        <input type=\"text\" id=\"pme-sinput\" placeholder=\"Suche nach einem Ort, einer Stra\u00dfe oder Sehensw\u00fcrdigkeit\"\/>\r\n      <\/div>\r\n      <div class=\"pme-results\" id=\"pme-results\"><\/div>\r\n      <div class=\"pme-pop-lbl\">Beliebte Orte<\/div>\r\n      <ul class=\"pme-pop\">\r\n        <li data-lng=\"100.5018\" data-lat=\"13.7563\" data-name=\"Bangkok, Thailand\">Bangkok, Thailand<\/li>\r\n        <li data-lng=\"2.3522\" data-lat=\"48.8566\" data-name=\"Paris, Frankreich\">Paris, Frankreich<\/li>\r\n        <li data-lng=\"-0.1278\" data-lat=\"51.5074\" data-name=\"London, Gro\u00dfbritannien\">London, Gro\u00dfbritannien<\/li>\r\n        <li data-lng=\"55.2708\" data-lat=\"25.2048\" data-name=\"Dubai, VAE\">Dubai, VAE<\/li>\r\n        <li data-lng=\"-74.006\" data-lat=\"40.7128\" data-name=\"New York, USA\">New York, USA<\/li>\r\n        <li data-lng=\"103.8198\" data-lat=\"1.3521\" data-name=\"Singapur\">Singapur<\/li>\r\n        <li data-lng=\"28.9784\" data-lat=\"41.0082\" data-name=\"Istanbul, T\u00fcrkei\">Istanbul, T\u00fcrkei<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"pme-section\" id=\"sec-labels\">\r\n      <div class=\"pme-title\">Texte<\/div>\r\n      <div class=\"pme-desc\">Passe dein Design mit eigenen Texten an.<\/div>\r\n      <span class=\"pme-lbl\">\u00dcberschrift<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-h\" value=\"PARIS\"\/><\/div>\r\n      <span class=\"pme-lbl\">Trenntext<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-d\" value=\"Frankreich\"\/><\/div>\r\n      <span class=\"pme-lbl\">Koordinaten<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-t\" value=\"48.857\u00b0N \/ 2.352\u00b0E\"\/><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"pme-section\" id=\"sec-style\">\r\n      <div class=\"pme-title\">Stil<\/div>\r\n      <div class=\"pme-desc\">W\u00e4hle einen Stil f\u00fcr dein Kartenposter.<\/div>\r\n      <span class=\"pme-lbl\">Layout<\/span>\r\n      <div style=\"display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px;\">\r\n        <div class=\"pme-thm\" data-theme=\"standard\"><svg viewBox=\"0 0 40 50\"><rect x=\"5\" y=\"5\" width=\"30\" height=\"40\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\"\/><rect x=\"12\" y=\"32\" width=\"16\" height=\"8\" fill=\"#000\"\/><\/svg><span>Standard<\/span><\/div>\r\n        <div class=\"pme-thm\" data-theme=\"center\"><svg viewBox=\"0 0 40 50\"><rect x=\"5\" y=\"5\" width=\"30\" height=\"40\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\"\/><rect x=\"12\" y=\"10\" width=\"16\" height=\"8\" fill=\"#000\"\/><\/svg><span>Center<\/span><\/div>\r\n        <div class=\"pme-thm\" data-theme=\"legend\"><svg viewBox=\"0 0 40 50\"><rect x=\"5\" y=\"5\" width=\"30\" height=\"40\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\"\/><rect x=\"17\" y=\"32\" width=\"18\" height=\"13\" fill=\"#000\"\/><\/svg><span>Legend<\/span><\/div>\r\n        <div class=\"pme-thm active\" data-theme=\"modern\"><svg viewBox=\"0 0 40 50\"><rect x=\"5\" y=\"5\" width=\"30\" height=\"40\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\"\/><rect x=\"5\" y=\"35\" width=\"30\" height=\"10\" fill=\"#000\"\/><\/svg><span>Modern<\/span><\/div>\r\n        <div class=\"pme-thm\" data-theme=\"pure\"><svg viewBox=\"0 0 40 50\"><rect x=\"5\" y=\"5\" width=\"30\" height=\"40\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\"\/><\/svg><span>Pure<\/span><\/div>\r\n      <\/div>\r\n      \r\n      <span class=\"pme-lbl\">Design<\/span>\r\n      <div class=\"pme-pins\">\r\n        <div class=\"pme-pin\" data-style=\"modern\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#FFFFFF\" stroke=\"#333\" stroke-width=\"2\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#000000\"\/><\/svg><span>Modern<\/span><\/div>\r\n        <div class=\"pme-pin\" data-style=\"black\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#262D3C\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFFFFF\"\/><\/svg><span>Black<\/span><\/div>\r\n        <div class=\"pme-pin\" data-style=\"rose_red\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#FB003F\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFFFFF\"\/><\/svg><span>Rose Red<\/span><\/div>\r\n        <div class=\"pme-pin\" data-style=\"ocean\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#7CA7B9\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFFFFF\"\/><\/svg><span>Ocean<\/span><\/div>\r\n        <div class=\"pme-pin active\" data-style=\"nautica\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#A5CABC\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#C88C72\"\/><\/svg><span>Nautica<\/span><\/div>\r\n        <div class=\"pme-pin\" data-style=\"zulu\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#7E5AF0\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFFFFF\"\/><\/svg><span>Zulu<\/span><\/div>\r\n        <div class=\"pme-pin\" data-style=\"night\"><svg viewBox=\"0 0 28 36\" fill=\"none\"><path d=\"M14 2C8.48 2 4 6.48 4 12c0 7.5 10 22 10 22s10-14.5 10-22c0-5.52-4.48-10-10-10z\" fill=\"#262D3C\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFD700\"\/><\/svg><span>Night<\/span><\/div>\r\n      <\/div>\r\n\r\n      <span class=\"pme-lbl\">Kartenform<\/span>\r\n      <div class=\"pme-shapes\">\r\n        <div class=\"pme-shape active\" data-shape=\"none\">\r\n          <svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"#666\" stroke-width=\"1.2\"><circle cx=\"20\" cy=\"20\" r=\"10\"\/><line x1=\"13\" y1=\"13\" x2=\"27\" y2=\"27\"\/><\/svg>\r\n          <span>Keine<\/span>\r\n        <\/div>\r\n        <div class=\"pme-shape\" data-shape=\"circle\">\r\n          <svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"56\" fill=\"#74828A\"\/><\/svg>\r\n          <span>Kreis<\/span>\r\n        <\/div>\r\n        <div class=\"pme-shape\" data-shape=\"heart\">\r\n          <svg viewBox=\"0 0 120 120\"><path d=\"M60,110 C60,110 5,75 5,35 C5,12 25,0 42,12 C52,19 60,32 60,32 C60,32 68,19 78,12 C95,0 115,12 115,35 C115,75 60,110 60,110 Z\" fill=\"#74828A\"\/><\/svg>\r\n          <span>Herz<\/span>\r\n        <\/div>\r\n        <div class=\"pme-shape\" data-shape=\"star\">\r\n          <svg viewBox=\"0 0 120 120\"><polygon points=\"60,2 78,39 118,44 89,73 96,114 60,95 24,114 31,73 2,44 42,39\" fill=\"#74828A\"\/><\/svg>\r\n          <span>Stern<\/span>\r\n        <\/div>\r\n        <div class=\"pme-shape\" data-shape=\"pin\">\r\n          <svg viewBox=\"0 0 120 120\"><path d=\"M60,115 C60,115 20,70 20,40 A40,40 0 0,1 100,40 C100,70 60,115 60,115 Z\" fill=\"#74828A\"\/><\/svg>\r\n          <span>Pin<\/span>\r\n        <\/div>\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, Gr\u00f6\u00dfe und Ausrichtung.<\/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      <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\r\n        <span class=\"pme-lbl\">Rahmenfarbe<\/span>\r\n        <div class=\"pme-sizes\">\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      <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      <span class=\"pme-lbl\">Ausrichtung<\/span>\r\n      <div class=\"pme-orients\">\r\n        <button class=\"pme-or active\" data-orient=\"portrait\">Hochformat<\/button>\r\n        <button class=\"pme-or\" data-orient=\"landscape\">Querformat<\/button>\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  <\/div>\r\n\r\n  <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n    <div class=\"pme-outer\" id=\"pme-outer\">\r\n      <div class=\"pme-poster theme-modern\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n\r\n        <div class=\"pme-zoom-ctrl\">\r\n          <button id=\"pme-z-in\" title=\"Hineinzoomen\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\r\n          <\/button>\r\n          <button id=\"pme-z-out\" title=\"Herauszoomen\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\r\n          <\/button>\r\n        <\/div>\r\n        <div class=\"pme-mapwrap\" id=\"pme-mapwrap\">\r\n          <div class=\"pme-map-clip\">\r\n            <div id=\"pme-map\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"pme-footer\">\r\n          <div class=\"pme-h\" id=\"out-h\" style=\"font-family:'Rubik',sans-serif\">PARIS<\/div>\r\n          <div class=\"pme-dr\">\r\n            <div class=\"pme-dl\"><\/div>\r\n            <div class=\"pme-dt\" id=\"out-d\" style=\"font-family:'Rubik',sans-serif\">FRANKREICH<\/div>\r\n            <div class=\"pme-dl\"><\/div>\r\n          <\/div>\r\n          <div class=\"pme-tg\" id=\"out-t\" style=\"font-family:'Rubik',sans-serif\">48.857\u00b0N \/ 2.352\u00b0E<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n      <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\nfunction fitText() {\r\n  var hOut = document.getElementById('out-h');\r\n  var dOut = document.getElementById('out-d');\r\n  var tOut = document.getElementById('out-t');\r\n  var footer = document.querySelector('.pme-footer');\r\n  if (!footer || !hOut || !dOut || !tOut) return;\r\n  hOut.style.fontSize = ''; dOut.style.fontSize = ''; tOut.style.fontSize = '';\r\n  var maxWidth = footer.clientWidth - 24;\r\n  if (maxWidth <= 0) return;\r\n  [hOut, dOut, tOut].forEach(function(el) {\r\n    if (el.scrollWidth > maxWidth) {\r\n      var currentSize = parseFloat(window.getComputedStyle(el).fontSize);\r\n      el.style.fontSize = ((currentSize * maxWidth \/ el.scrollWidth) * 0.95) + 'px';\r\n    }\r\n  });\r\n}\r\n\r\nvar THEMES = {\r\n  modern:      { land:'#FFFFFF', water:'#FFFFFF', road:'#000000', roadMain:'#000000', building:'#FFFFFF', park:'#FFFFFF' },\r\n  black:       { land:'#262D3C', water:'#262D3C', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#262D3C', park:'#262D3C' },\r\n  night:       { land:'#262D3C', water:'#262D3C', road:'#FFD700', roadMain:'#FFD700', building:'#262D3C', park:'#262D3C' },\r\n  rose_red:    { land:'#FB003F', water:'#FFFFFF', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#FB003F', park:'#FB003F' },\r\n  ocean:       { land:'#7CA7B9', water:'#FFFFFF', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#7CA7B9', park:'#7CA7B9' },\r\n  nautica:     { land:'#EADDC7', water:'#A5CABC', road:'#C88C72', roadMain:'#C88C72', building:'#EADDC7', park:'#EADDC7' },\r\n  zulu:        { land:'#7E5AF0', water:'#FFFFFF', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#7E5AF0', park:'#7E5AF0' }\r\n};\r\n\r\nfunction buildProtomapsStyle(themeName) {\r\n  var t = THEMES[themeName];\r\n  return {\r\n    version: 8,\r\n    glyphs: 'https:\/\/protomaps.github.io\/basemaps-assets\/fonts\/{fontstack}\/{range}.pbf',\r\n    sprite: 'https:\/\/protomaps.github.io\/basemaps-assets\/sprites\/v4\/light',\r\n    sources: {\r\n      protomaps: {\r\n        type: 'vector',\r\n        tiles: ['https:\/\/api.protomaps.com\/tiles\/v4\/{z}\/{x}\/{y}.mvt?key=' + PMKEY],\r\n        maxzoom: 15,\r\n        attribution: '\\u00a9 <a href=\"https:\/\/protomaps.com\">Protomaps<\/a> \\u00a9 <a href=\"https:\/\/openstreetmap.org\">OpenStreetMap<\/a>'\r\n      }\r\n    },\r\n    layers: [\r\n      { id: 'bg', type: 'background', paint: { 'background-color': t.water } },\r\n      { id: 'earth', type: 'fill', source: 'protomaps', 'source-layer': 'earth', paint: { 'fill-color': t.land } },\r\n      { id: 'park', type: 'fill', source: 'protomaps', 'source-layer': 'landuse', filter: ['match', ['get', 'kind'], ['park','national_park','nature_reserve','protected_area','forest','wood','garden','cemetery','meadow','grass','dog_park','playground','recreation_ground'], true, false], paint: { 'fill-color': t.park, 'fill-opacity': 1 } },\r\n      { id: 'water', type: 'fill', source: 'protomaps', 'source-layer': 'water', filter: ['==', ['geometry-type'], 'Polygon'], paint: { 'fill-color': t.water } },\r\n      { id: 'buildings', type: 'fill', source: 'protomaps', 'source-layer': 'buildings', paint: { 'fill-color': t.building, 'fill-opacity': 1 } },\r\n      { id: 'buildings_outline', type: 'line', source: 'protomaps', 'source-layer': 'buildings', paint: { 'line-color': t.road, 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.3, 15, 0.8, 17, 1.2] } },\r\n      { id: 'roads_any', type: 'line', source: 'protomaps', 'source-layer': 'roads', filter: ['all', ['==', ['geometry-type'], 'LineString'], ['!=', ['get', 'kind_detail'], 'tram'], ['!=', ['get', 'kind'], 'ferry'], ['!=', ['get', 'kind_detail'], 'ferry']], paint: { 'line-color': t.road, 'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.2, 11, 0.8, 14, 2] }, layout: { 'line-cap': 'round', 'line-join': 'round' } },\r\n      { id: 'roads_major', type: 'line', source: 'protomaps', 'source-layer': 'roads', filter: ['match', ['get', 'kind_detail'], ['motorway','trunk','primary'], true, false], paint: { 'line-color': t.roadMain, 'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 10, 2, 14, 5] }, layout: { 'line-cap': 'round', 'line-join': 'round' } }\r\n    ]\r\n  };\r\n}\r\n\r\nfunction loadStyle(themeName) {\r\n  return Promise.resolve(buildProtomapsStyle(themeName));\r\n}\r\n\r\nvar SIZES = {\r\n  postcard: [{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n  poster:   [{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n  framed:   [{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n  canvas:   [{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\nvar PMKEY = '3706eaad4d32d03c';\r\nvar S = {lat:48.8566,lng:2.3522,zoom:11,style:'nautica',mat:'poster',sizeIdx:1,orient:'portrait',frame:'black',shape:'none'};\r\nvar ZOOM_OFFSET = 2;\r\n\r\n\/\/ Hilfsfunktion: Sch\u00fctzt vor Doppel-Decodierung bei alten fehlerhaften Links\r\nfunction safeDecode(val) {\r\n  if (!val) return '';\r\n  try {\r\n    if (\/%[0-9A-F]{2}\/i.test(val)) {\r\n      return decodeURIComponent(val);\r\n    }\r\n  } catch(e) {}\r\n  return val;\r\n}\r\n\r\n(function() {\r\n  var p = new URLSearchParams(window.location.search);\r\n  if (p.get('lat')) S.lat = parseFloat(p.get('lat'));\r\n  if (p.get('lng')) S.lng = parseFloat(p.get('lng'));\r\n  if (p.get('zoom')) S.zoom = parseFloat(p.get('zoom'));\r\n  if (p.get('style')) S.style = p.get('style');\r\n  if (p.get('mat')) S.mat = p.get('mat');\r\n  if (p.get('size')) S.sizeIdx = parseInt(p.get('size'));\r\n  if (p.get('orient')) S.orient = p.get('orient');\r\n  if (p.get('frame')) S.frame = p.get('frame');\r\n  if (p.get('shape')) S.shape = p.get('shape');\r\n\r\n  \/\/ BUGFIX 1: Texte sofort auslesen und ins DOM schreiben, bevor andere Funktionen (wie renderSizes) aufgerufen werden\r\n  var isShared = p.has('lat') || p.has('lng');\r\n  if (isShared) {\r\n    var ih = document.getElementById('inp-h'); if(ih) ih.value = p.has('h') ? safeDecode(p.get('h')) : '';\r\n    var id2 = document.getElementById('inp-d'); if(id2) id2.value = p.has('d') ? safeDecode(p.get('d')) : '';\r\n    var it = document.getElementById('inp-t'); if(it) it.value = p.has('t') ? safeDecode(p.get('t')) : '';\r\n  } else {\r\n    if(p.has('h')){var ih=document.getElementById('inp-h');if(ih)ih.value=safeDecode(p.get('h'));}\r\n    if(p.has('d')){var id2=document.getElementById('inp-d');if(id2)id2.value=safeDecode(p.get('d'));}\r\n    if(p.has('t')){var it=document.getElementById('inp-t');if(it)it.value=safeDecode(p.get('t'));}\r\n  }\r\n\r\n  \/\/ Texte direkt dem Poster zuweisen, damit sie sofort synchron mit der URL sind\r\n  var outH = document.getElementById('out-h'); if(outH) outH.textContent = document.getElementById('inp-h').value;\r\n  var outD = document.getElementById('out-d'); if(outD) outD.textContent = document.getElementById('inp-d').value;\r\n  var outT = document.getElementById('out-t'); if(outT) outT.textContent = document.getElementById('inp-t').value;\r\n  \r\n  var dr = document.querySelector('.pme-dr');\r\n  if (dr) {\r\n      dr.style.display = document.getElementById('inp-d').value.trim() === '' ? 'none' : 'flex';\r\n  }\r\n})();\r\n\r\nfunction updateURL() {\r\n  var p = new URLSearchParams();\r\n  var c = map ? map.getCenter() : {lat:S.lat,lng:S.lng};\r\n  p.set('lat',c.lat.toFixed(5)); p.set('lng',c.lng.toFixed(5));\r\n  p.set('zoom',(map?(map.getZoom()-ZOOM_OFFSET):S.zoom).toFixed(2));\r\n  p.set('style',S.style); p.set('mat',S.mat);\r\n  p.set('size',S.sizeIdx); p.set('orient',S.orient);\r\n  p.set('shape',S.shape);\r\n  if (S.mat==='framed') p.set('frame',S.frame);\r\n  \r\n  \/\/ URLSearchParams kodiert bereits automatisch! EncodeURIComponent wird hier entfernt\r\n  var h = document.getElementById('inp-h'); p.set('h', h ? h.value : '');\r\n  var d = document.getElementById('inp-d'); p.set('d', d ? d.value : '');\r\n  var t = document.getElementById('inp-t'); p.set('t', t ? t.value : '');\r\n  \r\n  history.replaceState(null,'','?'+p.toString());\r\n}\r\n\r\nfunction updateThemeAvailability() {\r\n  var isShape = (S.shape && S.shape !== 'none');\r\n  var currentThemeBtn = document.querySelector('.pme-thm.active');\r\n  var currentTheme = currentThemeBtn ? currentThemeBtn.getAttribute('data-theme') : 'modern';\r\n\r\n  document.querySelectorAll('.pme-thm').forEach(function(thm) {\r\n    var t = thm.getAttribute('data-theme');\r\n    if (isShape && t !== 'modern' && t !== 'pure') {\r\n      thm.style.opacity = '0.35';\r\n      thm.style.pointerEvents = 'none';\r\n      thm.style.filter = 'grayscale(100%)';\r\n    } else {\r\n      thm.style.opacity = '1';\r\n      thm.style.pointerEvents = 'auto';\r\n      thm.style.filter = 'none';\r\n    }\r\n  });\r\n\r\n  if (isShape && currentTheme !== 'modern' && currentTheme !== 'pure') {\r\n    var modernBtn = document.querySelector('.pme-thm[data-theme=\"modern\"]');\r\n    if(modernBtn) modernBtn.click();\r\n  }\r\n}\r\n\r\nfunction updateShape() {\r\n  var clipEl = document.querySelector('.pme-map-clip');\r\n  if (clipEl) {\r\n    clipEl.className = 'pme-map-clip';\r\n    if (S.shape && S.shape !== 'none') {\r\n      clipEl.classList.add('shape-' + S.shape);\r\n    }\r\n  }\r\n  updateThemeAvailability();\r\n}\r\n\r\nvar map;\r\nloadStyle(S.style).then(function(style) {\r\n  \r\n  var maxPixelRatio = window.innerWidth <= 768 ? 1 : Math.min(window.devicePixelRatio, 2);\r\n  \r\n  map = new maplibregl.Map({\r\n    container:'pme-map', style:style,\r\n    center:[S.lng,S.lat], zoom:S.zoom+ZOOM_OFFSET,\r\n    attributionControl:false, preserveDrawingBuffer:true,\r\n    dragRotate: false, \r\n    pixelRatio: maxPixelRatio \r\n  });\r\n  \r\n  map.touchZoomRotate.disableRotation();\r\n  \r\n  if (window.innerWidth <= 768) {\r\n    map.touchZoomRotate.disable();\r\n  }\r\n\r\n  map.on('load', function() { \r\n    fitPoster(); \r\n    \r\n    if (typeof ResizeObserver !== 'undefined') {\r\n      new ResizeObserver(function() {\r\n        if (map) { map.resize(); map.triggerRepaint(); }\r\n      }).observe(document.getElementById('pme-canvas'));\r\n    }\r\n  });\r\n  \r\n  map.on('moveend', function() {\r\n    var c=map.getCenter();\r\n    S.lat=c.lat; S.lng=c.lng; S.zoom=map.getZoom()-ZOOM_OFFSET;\r\n    updateURL();\r\n  });\r\n  \r\n  initEvents();\r\n});\r\n\r\nfunction initEvents() {\r\n\r\ndocument.getElementById('pme-z-in').addEventListener('click', function() { map.zoomIn(); });\r\ndocument.getElementById('pme-z-out').addEventListener('click', function() { map.zoomOut(); });\r\n\r\ndocument.querySelectorAll('.pme-thm').forEach(function(thm) {\r\n  thm.addEventListener('click', function() {\r\n    if(this.style.pointerEvents === 'none') return;\r\n    var themeName = this.getAttribute('data-theme');\r\n    document.querySelectorAll('.pme-thm').forEach(function(t){t.classList.remove('active');});\r\n    this.classList.add('active');\r\n    document.getElementById('pme-poster').className = 'pme-poster theme-'+themeName+(S.mat==='framed'?' is-framed':'');\r\n    setTimeout(function(){fitText();map.resize();fitPoster();},60);\r\n  });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn) {\r\n  btn.addEventListener('click', function() {\r\n    var panel = this.getAttribute('data-panel');\r\n    document.querySelectorAll('.pme-section').forEach(function(s){s.classList.remove('active');});\r\n    document.querySelectorAll('.pme-nav-btn').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    setTimeout(function(){ if(map){ map.resize(); map.triggerRepaint(); } fitPoster(); }, 50);\r\n  });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-pin[data-style]').forEach(function(pin) {\r\n  pin.addEventListener('click', function() {\r\n    var styleName = this.getAttribute('data-style');\r\n    document.querySelectorAll('.pme-pin[data-style]').forEach(function(p){p.classList.remove('active');});\r\n    this.classList.add('active');\r\n    S.style = styleName;\r\n    loadStyle(styleName).then(function(style){map.setStyle(style);});\r\n    updateURL();\r\n  });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-shape').forEach(function(btn) {\r\n  btn.addEventListener('click', function() {\r\n    var shapeName = this.getAttribute('data-shape');\r\n    document.querySelectorAll('.pme-shape').forEach(function(p){p.classList.remove('active');});\r\n    this.classList.add('active');\r\n    S.shape = shapeName;\r\n    updateShape();\r\n    updateURL();\r\n  });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-pop li').forEach(function(li) {\r\n  li.addEventListener('click', function() {\r\n    goTo(this.getAttribute('data-name'),parseFloat(this.getAttribute('data-lng')),parseFloat(this.getAttribute('data-lat')));\r\n  });\r\n});\r\n\r\nvar stimer;\r\ndocument.getElementById('pme-sinput').addEventListener('input', function() {\r\n  clearTimeout(stimer);\r\n  var v = this.value;\r\n  if (v.length<2){document.getElementById('pme-results').classList.remove('show');return;}\r\n  stimer = setTimeout(doSearch,500);\r\n});\r\n\r\nfunction doSearch() {\r\n  var q = document.getElementById('pme-sinput').value.trim();\r\n  if (!q) return;\r\n  var box = document.getElementById('pme-results');\r\n  fetch('https:\/\/photon.komoot.io\/api\/?q='+encodeURIComponent(q)+'&limit=6&lang=de')\r\n    .then(function(r){return r.json();})\r\n    .then(function(d) {\r\n      if (!d.features||!d.features.length) {\r\n        box.innerHTML='<div class=\"pme-ri\">Keine Ergebnisse<\/div>';\r\n        box.classList.add('show'); return;\r\n      }\r\n      box.innerHTML = d.features.map(function(f) {\r\n        var p=f.properties;\r\n        var name=(p.name||p.city||q).replace(\/\"\/g,'');\r\n        var sub=[p.city,p.state,p.country].filter(Boolean).join(', ');\r\n        var lng=f.geometry.coordinates[0]; var lat=f.geometry.coordinates[1];\r\n        return '<div class=\"pme-ri\" data-lng=\"'+lng+'\" data-lat=\"'+lat+'\" data-name=\"'+name+'\" data-sub=\"'+sub+'\"><strong>'+name+'<\/strong><span>'+sub+'<\/span><\/div>';\r\n      }).join('');\r\n      box.classList.add('show');\r\n      box.querySelectorAll('.pme-ri').forEach(function(item) {\r\n        item.addEventListener('click', function() {\r\n          var lng=parseFloat(this.getAttribute('data-lng'));\r\n          var lat=parseFloat(this.getAttribute('data-lat'));\r\n          var name=this.getAttribute('data-name');\r\n          var sub=this.getAttribute('data-sub');\r\n          document.getElementById('pme-sinput').value=name;\r\n          box.classList.remove('show');\r\n          goTo(name+', '+sub,lng,lat);\r\n        });\r\n      });\r\n    }).catch(function(){});\r\n}\r\n\r\ndocument.addEventListener('click', function(e) {\r\n  if (!e.target.closest('#pme-sinput')&&!e.target.closest('#pme-results'))\r\n    document.getElementById('pme-results').classList.remove('show');\r\n});\r\n\r\nfunction goTo(full,lng,lat) {\r\n  map.flyTo({center:[lng,lat],zoom:12+ZOOM_OFFSET,duration:1400});\r\n  S.lat=lat; S.lng=lng;\r\n  var parts=full.split(',');\r\n  var city=parts[0].trim().toUpperCase();\r\n  var country=(parts[parts.length-1]||'').trim();\r\n  document.getElementById('inp-h').value=city;\r\n  document.getElementById('inp-d').value=country;\r\n  var ls=Math.abs(lat).toFixed(3)+(lat>=0?'\u00b0N':'\u00b0S');\r\n  var lo=Math.abs(lng).toFixed(3)+(lng>=0?'\u00b0E':'\u00b0W');\r\n  document.getElementById('inp-t').value=ls+' \/ '+lo;\r\n  updateText();\r\n}\r\n\r\ndocument.getElementById('inp-h').addEventListener('input',updateText);\r\ndocument.getElementById('inp-d').addEventListener('input',updateText);\r\ndocument.getElementById('inp-t').addEventListener('input',updateText);\r\n\r\nfunction updateText() {\r\n  var valH = document.getElementById('inp-h').value;\r\n  var valD = document.getElementById('inp-d').value;\r\n  var valT = document.getElementById('inp-t').value;\r\n  \r\n  document.getElementById('out-h').textContent = valH;\r\n  document.getElementById('out-d').textContent = valD;\r\n  document.getElementById('out-t').textContent = valT;\r\n  \r\n  \/\/ NEW: Verstecke die Strich-Reihe, falls der Trenntext komplett leer ist\r\n  var dr = document.querySelector('.pme-dr');\r\n  if (dr) {\r\n      dr.style.display = valD.trim() === '' ? 'none' : 'flex';\r\n  }\r\n\r\n  fitText(); \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++){if(sizes[i].l==='30x40cm'){S.sizeIdx=i;break;}}\r\n  renderSizes(); 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(); updateURL();\r\n  });\r\n});\r\n\r\nfunction renderSizes() {\r\n  var sizes=SIZES[S.mat]||[];\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  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  function selectIdx(i){\r\n    S.sizeIdx=i; selText.innerHTML=buildLabel(sizes[i]);\r\n    optsDiv.style.display='none';\r\n    updatePrice(); updateDims(); updateURL();\r\n  }\r\n  optsDiv.innerHTML=sizes.map(function(s,i){\r\n    return '<div class=\"size-opt\" data-idx=\"'+i+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'Poppins\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+buildLabel(s)+'<\/div>';\r\n  }).join('');\r\n  optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n    el.addEventListener('mouseenter',function(){this.style.background='#f5f5f5';});\r\n    el.addEventListener('mouseleave',function(){this.style.background='';});\r\n    el.addEventListener('click',function(){selectIdx(parseInt(this.getAttribute('data-idx')));});\r\n  });\r\n  selDiv.onclick=function(e){\r\n    e.stopPropagation();\r\n    optsDiv.style.display=optsDiv.style.display==='none'?'block':'none';\r\n  };\r\n  document.addEventListener('click',function(){optsDiv.style.display='none';});\r\n  selectIdx(S.sizeIdx<sizes.length?S.sizeIdx:0);\r\n}\r\n\r\nfunction updatePrice() {\r\n  var s=(SIZES[S.mat]||[])[S.sizeIdx]; 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]; if(!s)return;\r\n  var isL=S.orient==='landscape';\r\n  document.getElementById('dim-w').textContent=(isL?s.h:s.w)+' cm';\r\n  document.getElementById('dim-h').textContent=(isL?s.w:s.h)+' cm';\r\n  var BASE=504;\r\n  var pw=isL?s.h:s.w; var ph=isL?s.w:s.h;\r\n  var longer=Math.max(pw,ph); var shorter=Math.min(pw,ph);\r\n  var poster=document.getElementById('pme-poster');\r\n  if(isL){poster.style.width=BASE+'px';poster.style.height=Math.round(BASE*shorter\/longer)+'px';}\r\n  else{poster.style.width=Math.round(BASE*shorter\/longer)+'px';poster.style.height=BASE+'px';}\r\n  if(S.mat==='framed'){\r\n    var thicknessMm=(s.l==='13x18cm')?10:14;\r\n    var frameThicknessPx=thicknessMm*(BASE\/(longer*10));\r\n    poster.style.borderWidth=frameThicknessPx+'px';\r\n    poster.style.borderStyle='solid';\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=''; poster.style.borderColor='#ffffff';\r\n    } else {\r\n      poster.style.borderImage=''; poster.style.borderColor='#1a1a1a';\r\n    }\r\n    poster.classList.add('is-framed');\r\n  } else {\r\n    poster.style.border=''; poster.style.borderImage='';\r\n    poster.classList.remove('is-framed');\r\n  }\r\n  setTimeout(function(){fitText();map.resize();fitPoster();},60);\r\n}\r\n\r\ndocument.querySelectorAll('.pme-or').forEach(function(btn){\r\n  btn.addEventListener('click',function(){\r\n    document.querySelectorAll('.pme-or').forEach(function(b){b.classList.remove('active');});\r\n    this.classList.add('active');\r\n    S.orient=this.getAttribute('data-orient');\r\n    updateDims(); updateURL();\r\n    setTimeout(function(){fitText();map.resize();fitPoster();},60);\r\n  });\r\n});\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click',function(){\r\n  \/\/ NEW: Button Handling\r\n  var btn = this;\r\n  var origHTML = btn.innerHTML; \/\/ Speichert Original Inhalt\r\n  btn.innerHTML = 'Wird bearbeitet ...';\r\n  btn.style.pointerEvents = 'none'; \/\/ Klicks deaktivieren\r\n\r\n  var s=(SIZES[S.mat]||[])[S.sizeIdx]||{};\r\n  var c=map.getCenter();\r\n  \r\n  \/\/ NEW: Texte auslesen und Leere-Felder durch ein Leerzeichen ersetzen\r\n  var outH = document.getElementById('out-h').textContent;\r\n  var outD = document.getElementById('out-d').textContent;\r\n  var outT = document.getElementById('out-t').textContent;\r\n\r\n  \/\/ BUGFIX 2: Ein normales Leerzeichen (' ') anstelle von \\u200B sorgt daf\u00fcr, dass das Feld \r\n  \/\/ im Print-Tool nicht auf \"HEADLINE\" zur\u00fcckf\u00e4llt, sondern visuell leer bleibt.\r\n  var cartData={\r\n    action:'uwa_add_to_cart',\r\n    product_id:'2215',\r\n    poster_title: outH.trim() === '' ? ' ' : outH,\r\n    poster_subtitle: outD.trim() === '' ? ' ' : outD,\r\n    poster_coordinates: outT.trim() === '' ? ' ' : outT,\r\n    poster_lat:c.lat.toFixed(6),poster_lng:c.lng.toFixed(6),\r\n    poster_zoom:(map.getZoom()-ZOOM_OFFSET).toFixed(2),\r\n    poster_style:S.style,poster_material:S.mat,\r\n    poster_frame:(S.mat==='framed')?S.frame:'',\r\n    poster_size:s.l||'',poster_orientation:S.orient,\r\n    poster_shape:S.shape||'none',\r\n    poster_price:s.p||'',poster_original_price:s.orig||''\r\n  };\r\n  function buildThumbnail(){\r\n    try{\r\n      var mapCanvas=map.getCanvas();\r\n      var posterEl=document.getElementById('pme-poster');\r\n      var posterW=posterEl.offsetWidth; var posterH=posterEl.offsetHeight;\r\n      var footerEl=posterEl.querySelector('.pme-footer');\r\n      var footerH=footerEl?footerEl.offsetHeight:0;\r\n      var mapH=posterH-footerH;\r\n      var out=document.createElement('canvas');\r\n      out.width=posterW; out.height=posterH;\r\n      var ctx=out.getContext('2d');\r\n      ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,posterW,posterH);\r\n      var pad=12;\r\n\r\n      ctx.save();\r\n      if (S.shape && S.shape !== 'none') {\r\n        var dw = posterW - pad * 2;\r\n        var dh = mapH - pad * 2;\r\n        var minS = Math.min(dw \/ 120, dh \/ 120);\r\n        var ox = pad + (dw - 120 * minS) \/ 2;\r\n        var oy = pad + (dh - 120 * minS) \/ 2;\r\n        \r\n        ctx.translate(ox, oy);\r\n        ctx.scale(minS, minS);\r\n        \r\n        if (S.shape === 'circle') {\r\n          ctx.beginPath();\r\n          ctx.arc(60, 60, 56, 0, Math.PI * 2);\r\n          ctx.clip();\r\n        } else if (S.shape === 'heart') {\r\n          ctx.clip(new Path2D(\"M60,110 C60,110 5,75 5,35 C5,12 25,0 42,12 C52,19 60,32 60,32 C60,32 68,19 78,12 C95,0 115,12 115,35 C115,75 60,110 60,110 Z\"));\r\n        } else if (S.shape === 'star') {\r\n          ctx.clip(new Path2D(\"M60,2 L78,39 L118,44 L89,73 L96,114 L60,95 L24,114 L31,73 L2,44 L42,39 Z\"));\r\n        } else if (S.shape === 'pin') {\r\n          ctx.clip(new Path2D(\"M60,115 C60,115 20,70 20,40 A40,40 0 0,1 100,40 C100,70 60,115 60,115 Z\"));\r\n        }\r\n        \r\n        ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n      }\r\n\r\n      ctx.drawImage(mapCanvas, 0, 0, mapCanvas.width, mapCanvas.height, pad, pad, posterW-pad*2, mapH-pad*2);\r\n      ctx.restore();\r\n\r\n      ctx.fillStyle='#ffffff'; ctx.fillRect(0,mapH,posterW,footerH);\r\n      \r\n      var hl=document.getElementById('out-h').textContent||'';\r\n      var dv=document.getElementById('out-d').textContent||'';\r\n      var tg=document.getElementById('out-t').textContent||'';\r\n      var fy=mapH+10;\r\n      ctx.textAlign='center'; ctx.fillStyle='#1a1a1a';\r\n      ctx.font='bold 14px Rubik,sans-serif'; ctx.fillText(hl.toUpperCase(),posterW\/2,fy+14);\r\n      ctx.font='7px Rubik,sans-serif'; ctx.fillStyle='rgba(26,26,26,0.65)'; ctx.fillText(dv.toUpperCase(),posterW\/2,fy+28);\r\n      ctx.font='6px Rubik,sans-serif'; ctx.fillStyle='rgba(26,26,26,0.4)'; ctx.fillText(tg,posterW\/2,fy+40);\r\n      return out.toDataURL('image\/jpeg',0.92);\r\n    }catch(e){return null;}\r\n  }\r\n  map.once('render',function(){\r\n    var thumbnail=buildThumbnail();\r\n    if(thumbnail) cartData.poster_thumbnail=thumbnail;\r\n    var body=Object.keys(cartData).map(function(k){return encodeURIComponent(k)+'='+encodeURIComponent(cartData[k]);}).join('&');\r\n    \r\n    fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php',{\r\n      method:'POST',headers:{'Content-Type':'application\/x-www-form-urlencoded'},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        console.error(\"Warenkorb-Fehler:\", res);\r\n        alert(\"Konnte nicht in den Warenkorb gelegt werden. Bitte \u00fcberpr\u00fcfe die Einstellungen oder kontaktiere uns.\");\r\n        btn.innerHTML = origHTML;\r\n        btn.style.pointerEvents = 'auto';\r\n      }\r\n    })\r\n    .catch(function(err){\r\n      console.error(\"AJAX Error:\", err);\r\n      alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n      btn.innerHTML = origHTML;\r\n      btn.style.pointerEvents = 'auto';\r\n    });\r\n  });\r\n  map.triggerRepaint();\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  \r\n  var aH=canvas.clientHeight-(isMob?50:60);\r\n  var aW=canvas.clientWidth-(isMob?50:80);\r\n  \r\n  var scale=Math.min(aH\/poster.offsetHeight,aW\/poster.offsetWidth,isMob?2.5:1.4);\r\n  outer.style.transform='scale('+scale+')';\r\n  outer.style.transformOrigin='center center';\r\n  setTimeout(function(){\r\n    if(map){\r\n      map.resize();\r\n      map.triggerRepaint(); \r\n    }\r\n  },60);\r\n}\r\n\r\nfunction setHeight(){\r\n  var el=document.getElementById('pme-root'); 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=''; if(nav)nav.style.height=''; 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'; if(nav)nav.style.height=h+'px'; 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\nsetTimeout(setHeight,900);\r\n\r\nrenderSizes();\r\n\r\n(function(){\r\n  var p=new URLSearchParams(window.location.search);\r\n  if(p.get('style')){\r\n    document.querySelectorAll('.pme-pin[data-style]').forEach(function(pin){\r\n      pin.classList.toggle('active',pin.getAttribute('data-style')===p.get('style'));\r\n    });\r\n  }\r\n  if(p.get('mat')){var ms=document.getElementById('sel-mat');if(ms)ms.value=p.get('mat');}\r\n  if(p.get('orient')){\r\n    document.querySelectorAll('.pme-or').forEach(function(btn){\r\n      btn.classList.toggle('active',btn.getAttribute('data-orient')===p.get('orient'));\r\n    });\r\n  }\r\n  if(p.get('frame')){\r\n    document.querySelectorAll('.pme-frame').forEach(function(btn){\r\n      btn.classList.toggle('active',btn.getAttribute('data-frame')===p.get('frame'));\r\n    });\r\n  }\r\n  \r\n  if(p.get('shape')){\r\n    document.querySelectorAll('.pme-shape').forEach(function(btn){\r\n      btn.classList.toggle('active',btn.getAttribute('data-shape')===p.get('shape'));\r\n    });\r\n  }\r\n  updateShape();\r\n  \r\n  if(S.mat==='framed')document.getElementById('pme-poster').classList.add('is-framed');\r\n  \r\n  \/\/ Setzt Text und versteckt ggf. das Element mit den Trennstrichen direkt beim Laden\r\n  updateText();\r\n})();\r\n\r\n} \/\/ end initEvents\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>Ort Texte Stil Gr\u00f6\u00dfe Karte Texte Stil Gr\u00f6\u00dfe Ort Suche, ziehe und zoome, um deinen perfekten Ort zu finden. Beliebte Orte Bangkok, Thailand Paris, Frankreich London, Gro\u00dfbritannien Dubai, VAE New York, USA Singapur Istanbul, T\u00fcrkei Texte Passe dein Design mit eigenen Texten an. \u00dcberschrift Trenntext Koordinaten Stil W\u00e4hle einen Stil f\u00fcr dein Kartenposter. Layout Standard [&hellip;]<\/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-2156","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2156","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=2156"}],"version-history":[{"count":10,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2156\/revisions"}],"predecessor-version":[{"id":2926,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2156\/revisions\/2926"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}