{"id":2156,"date":"2026-04-16T17:22:01","date_gmt":"2026-04-16T15:22:01","guid":{"rendered":"https:\/\/zulumaps.com\/strassenkarte\/"},"modified":"2026-04-28T19:40:41","modified_gmt":"2026-04-28T17:40:41","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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Rubik:wght@300;400;500;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/unpkg.com\/maplibre-gl@4.5.0\/dist\/maplibre-gl.js\"><\/script>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{overflow-x:hidden;}\r\n.pme{display:flex;width:100vw;height:100%;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:64px;min-width:64px;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;}\r\n.pme-nav-btn{width:52px;height:56px;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#888;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}\r\n.pme-nav-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}\r\n.pme-nav-btn.active{color:#fff;background:rgba(255,255,255,0.12);}\r\n.pme-nav-btn svg{width:20px;height:20px;}\r\n.pme-panel{width:416px;min-width:416px;background:#e7e7e7;border-right:1px solid #e8e8e8;overflow-y:auto;display:flex;flex-direction:column;}\r\n.pme-section{display:none;padding:24px 24px 32px;}\r\n.pme-section.active{display:block;}\r\n.pme-title{font-size:22px;font-weight:600;margin-bottom:6px;}\r\n.pme-desc{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5;}\r\n.pme-lbl{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;margin-top:20px;display:block;}\r\n.pme-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:'DM Sans',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:'DM Sans',sans-serif;outline:none;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n.pme-pins{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}\r\n.pme-pin{border:1.5px solid #d0d0d0;border-radius:10px;padding:10px 6px 8px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border 0.15s;}\r\n.pme-pin:hover,.pme-pin.active{border:3px solid #1a1a1a;}\r\n.pme-pin svg{width:28px;height:36px;}\r\n.pme-pin span{font-size:10px;color:#666;}\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:'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-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:'DM Sans',sans-serif;color:#1a1a1a!important;transition:border 0.15s;}\r\n.pme-or:hover,.pme-or.active{border:2.5px solid #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;border-top:1px solid #eee;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{background:#632ED3!important;color:#ffffff!important;border: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.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.pme-thm{border:1.5px solid #d0d0d0;border-radius:10px;padding:8px 4px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border 0.15s;}\r\n.pme-thm:hover,.pme-thm.active{border:3px solid #1a1a1a;}\r\n.pme-thm svg{width:26px;height:32px;}\r\n.pme-thm span{font-size:10px;color:#666;}\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:12px;right:12px;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<\/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      <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=\"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=\"#FFFFFF\"\/><\/svg><span>Night<\/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=\"black_white\"><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=\"#000000\" stroke=\"#333\" stroke-width=\"2\"\/><circle cx=\"14\" cy=\"12\" r=\"4\" fill=\"#FFFFFF\"\/><\/svg><span>Black &amp; White<\/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>\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:'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      <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:'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      <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        <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\n\/\/ Theme color palettes.\r\nvar THEMES = {\r\n  modern:      { land:'#FFFFFF', water:'#FFFFFF', road:'#000000', roadMain:'#000000', building:'#FFFFFF', park:'#FFFFFF' },\r\n  night:       { land:'#262D3C', water:'#262D3C', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#262D3C', park:'#262D3C' },\r\n  rose_red:    { land:'#FB003F', water:'#FB003F', road:'#FFFFFF', roadMain:'#FFFFFF', building:'#FB003F', park:'#FB003F' },\r\n  black_white: { land:'#FFFFFF', water:'#EEEEEE', road:'#000000', roadMain:'#000000', building:'#DDDDDD', park:'#F5F5F5' },\r\n  nautica:     { land:'#EADDC7', water:'#A5CABC', road:'#C88C72', roadMain:'#C88C72', building:'#EADDC7', park:'#EADDC7' }\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',\r\n        filter: ['match', ['get', 'kind'], ['park','national_park','nature_reserve','protected_area','forest','wood','garden','cemetery','meadow','grass','dog_park','playground','recreation_ground'], true, false],\r\n        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',\r\n        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',\r\n        filter: ['all', ['==', ['geometry-type'], 'LineString'], ['!=', ['get', 'kind_detail'], 'tram']],\r\n        paint: { 'line-color': t.road, 'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.2, 11, 0.8, 14, 2] },\r\n        layout: { 'line-cap': 'round', 'line-join': 'round' } },\r\n      { id: 'roads_major', type: 'line', source: 'protomaps', 'source-layer': 'roads',\r\n        filter: ['match', ['get', 'kind_detail'], ['motorway','trunk','primary'], true, false],\r\n        paint: { 'line-color': t.roadMain, 'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 10, 2, 14, 5] },\r\n        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'};\r\nvar ZOOM_OFFSET = 2;\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})();\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  if (S.mat==='framed') p.set('frame',S.frame);\r\n  var h=document.getElementById('inp-h'); if(h&&h.value) p.set('h',encodeURIComponent(h.value));\r\n  var d=document.getElementById('inp-d'); if(d&&d.value) p.set('d',encodeURIComponent(d.value));\r\n  var t=document.getElementById('inp-t'); if(t&&t.value) p.set('t',encodeURIComponent(t.value));\r\n  history.replaceState(null,'','?'+p.toString());\r\n}\r\n\r\nvar map;\r\nloadStyle(S.style).then(function(style) {\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  });\r\n  map.on('load', function() { fitPoster(); });\r\n  map.on('move', 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  initEvents();\r\n});\r\n\r\nfunction initEvents() {\r\n\r\ndocument.querySelectorAll('.pme-thm').forEach(function(thm) {\r\n  thm.addEventListener('click', function() {\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});\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-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  document.getElementById('out-h').textContent=document.getElementById('inp-h').value;\r\n  document.getElementById('out-d').textContent=document.getElementById('inp-d').value;\r\n  document.getElementById('out-t').textContent=document.getElementById('inp-t').value;\r\n  fitText(); 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:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+buildLabel(s)+'<\/div>';\r\n  }).join('');\r\n  optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n    el.addEventListener('mouseenter',function(){this.style.background='#f5f5f5';});\r\n    el.addEventListener('mouseleave',function(){this.style.background='';});\r\n    el.addEventListener('click',function(){selectIdx(parseInt(this.getAttribute('data-idx')));});\r\n  });\r\n  selDiv.onclick=function(e){\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  var s=(SIZES[S.mat]||[])[S.sizeIdx]||{};\r\n  var c=map.getCenter();\r\n  var cartData={\r\n    action:'uwa_add_to_cart',\r\n    product_id:'2215',\r\n    poster_title:document.getElementById('out-h').textContent,\r\n    poster_subtitle:document.getElementById('out-d').textContent,\r\n    poster_coordinates:document.getElementById('out-t').textContent,\r\n    poster_lat: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_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      ctx.drawImage(mapCanvas,0,0,mapCanvas.width,mapCanvas.height*((mapH-pad*2)\/mapCanvas.height),pad,pad,posterW-pad*2,mapH-pad*2);\r\n      ctx.fillStyle='#ffffff'; ctx.fillRect(0,mapH,posterW,footerH);\r\n      ctx.strokeStyle='#eeeeee'; ctx.lineWidth=1;\r\n      ctx.beginPath(); ctx.moveTo(0,mapH); ctx.lineTo(posterW,mapH); ctx.stroke();\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    \/\/ Die URL geht nun korrekt an das Hauptverzeichnis (ohne \/de\/), \r\n    \/\/ weil admin-ajax.php dort immer verortet ist!\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        \/\/ Bei Erfolg wird an den deutschen Warenkorb weitergeleitet\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      }\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    });\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  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  setTimeout(function(){map.resize();},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  if(p.get('h')){var ih=document.getElementById('inp-h');if(ih){ih.value=decodeURIComponent(p.get('h'));document.getElementById('out-h').textContent=ih.value;}}\r\n  if(p.get('d')){var id2=document.getElementById('inp-d');if(id2){id2.value=decodeURIComponent(p.get('d'));document.getElementById('out-d').textContent=id2.value;}}\r\n  if(p.get('t')){var it=document.getElementById('inp-t');if(it){it.value=decodeURIComponent(p.get('t'));document.getElementById('out-t').textContent=it.value;}}\r\n  if(S.mat==='framed')document.getElementById('pme-poster').classList.add('is-framed');\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":2227,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2156\/revisions\/2227"}],"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}]}}