{"id":2158,"date":"2026-04-18T19:33:36","date_gmt":"2026-04-18T17:33:36","guid":{"rendered":"https:\/\/zulumaps.com\/baggage-tag\/"},"modified":"2026-08-05T20:58:20","modified_gmt":"2026-08-05T18:58:20","slug":"baggage-tag","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/baggage-tag\/","title":{"rendered":"Baggage Tag"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2158\" class=\"elementor elementor-2158 elementor-491\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c19393f e-con-full e-flex e-con e-parent\" data-id=\"c19393f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb09d3a elementor-widget elementor-widget-shortcode\" data-id=\"bb09d3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n<div class=\"pme\" id=\"pme-root\">\n  <nav class=\"pme-nav\">\n    <button class=\"pme-nav-btn active\" data-panel=\"labels\">\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\n    <\/button>\n    <button class=\"pme-nav-btn\" data-panel=\"style\">\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\n    <\/button>\n    <button class=\"pme-nav-btn\" data-panel=\"size\">\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\n    <\/button>\n  <\/nav>\n\n  <div class=\"pme-mobnav\">\n    <button class=\"pme-mobbtn active\" data-panel=\"labels\">\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\n    <\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"style\">\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\n    <\/button>\n    <button class=\"pme-mobbtn\" data-panel=\"size\">\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\n    <\/button>\n  <\/div>\n\n  <div class=\"pme-panel\">\n    \n    <div class=\"pme-section active\" id=\"sec-labels\">\n      <div class=\"pme-title\">Texte<\/div>\n      <div class=\"pme-desc\">Passe die Details deines Gep\u00e4ckanh\u00e4ngers an.<\/div>\n      \n      <span class=\"pme-lbl\">Flughafen-Code<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-code\" maxlength=\"3\" value=\"BKK\" placeholder=\"z.B. BKK\"\/><\/div>\n      \n      <span class=\"pme-lbl\">Ort<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"BANGKOK\" placeholder=\"Stadt \/ Flughafen\"\/><\/div>\n      \n      <span class=\"pme-lbl\">Flugdatum<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-date\" value=\"12 - 08 - 2024\" placeholder=\"TT - MM - JJJJ\"\/><\/div>\n      \n      <span class=\"pme-lbl\">Passagiername<\/span>\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-name\" value=\"LILY ADAMS & MIKE BARNS\" placeholder=\"Name\"\/><\/div>\n    <\/div>\n\n    <div class=\"pme-section\" id=\"sec-style\">\n      <div class=\"pme-title\">Stil<\/div>\n      <div class=\"pme-desc\">W\u00e4hle eine Farbvariante f\u00fcr deinen Anh\u00e4nger.<\/div>\n\n      <span class=\"pme-lbl\">Design<\/span>\n      <div class=\"pme-pins\">\n        <div class=\"pme-pin active\" data-bg=\"#c9d6dc\" data-fg=\"#3648ac\" data-file=\"Royal-Blue\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #c9d6dc; border-color: #3648ac;\"><\/div>\n          <span>Royal Blue<\/span>\n        <\/div>\n        <div class=\"pme-pin\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-file=\"Ivory\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #e0ceb8; border-color: #fcf9e5;\"><\/div>\n          <span>Ivory<\/span>\n        <\/div>\n        <div class=\"pme-pin\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-file=\"Sunflower\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #f7bf3d; border-color: #f7285a;\"><\/div>\n          <span>Sunflower<\/span>\n        <\/div>\n        <div class=\"pme-pin\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-file=\"Green-Apple\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #42c053; border-color: #f7e946;\"><\/div>\n          <span>Green Apple<\/span>\n        <\/div>\n        <div class=\"pme-pin\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-file=\"Black\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #000000; border-color: #ffffff;\"><\/div>\n          <span>Black<\/span>\n        <\/div>\n        <div class=\"pme-pin\" data-bg=\"#ffc0cb\" data-fg=\"#f7285a\" data-file=\"Candy-Pink\">\n          <div class=\"tag-icon-circle\" style=\"background-color: #ffc0cb; border-color: #f7285a;\"><\/div>\n          <span>Candy Pink<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"pme-section\" id=\"sec-size\">\n      <div class=\"pme-title\">Gr\u00f6\u00dfe<\/div>\n      <div class=\"pme-desc\">W\u00e4hle Material und Gr\u00f6\u00dfe.<\/div>\n      <span class=\"pme-lbl\">Material<\/span>\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;\">\n        <option value=\"poster\" selected>Poster<\/option>\n        <option value=\"framed\">Gerahmtes Poster<\/option>\n        <option value=\"canvas\">Leinwand<\/option>\n      <\/select>\n      \n      <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\n        <span class=\"pme-lbl\">Rahmenfarbe<\/span>\n        <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\n          <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\n          <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\n          <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\n        <\/div>\n      <\/div>\n\n      <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\n      <div id=\"size-dropdown\" style=\"position:relative;margin-bottom:14px;\">\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;\">\n          <span id=\"size-selected-text\"><\/span>\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>\n        <\/div>\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>\n      <\/div>\n    <\/div>\n\n    <div class=\"pme-bar\">\n      <div class=\"pme-prices\">\n        <span class=\"pme-old\" id=\"p-old\"><\/span>\n        <span class=\"pme-new\" id=\"p-new\"><\/span>\n      <\/div>\n      <button class=\"pme-cart\" id=\"btn-cart\">\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>\n        In den Warenkorb\n      <\/button>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"pme-canvas\" id=\"pme-canvas\">\n    <div class=\"pme-outer\" id=\"pme-outer\">\n        \n      <div class=\"pme-poster baggage-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\n        <div class=\"tag-code\" id=\"out-code\">\n            <span>B<\/span><span>K<\/span><span>K<\/span>\n        <\/div>\n        <div class=\"tag-location\"><span id=\"out-loc\">BANGKOK<\/span><\/div>\n        \n        <div class=\"tag-box-val\" id=\"box-date-val\"><span id=\"out-date\">12 - 08 - 2024<\/span><\/div>\n        <div class=\"tag-box-val\" id=\"box-name-val\"><span id=\"out-name\">LILY ADAMS & MIKE BARNS<\/span><\/div>\n      <\/div>\n      \n      <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\n      <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n\n\/\/ GLOBALE PREISE LADEN\nvar SIZES = window.UWA_GLOBAL_SIZES;\n\n\/\/ AUTO-COMPLETE DICTIONARY\nvar AIRPORTS = {\n  \"MUC\": \"MUNICH\", \"FRA\": \"FRANKFURT\", \"BER\": \"BERLIN\", \"DUS\": \"DUSSELDORF\", \n  \"HAM\": \"HAMBURG\", \"STR\": \"STUTTGART\", \"CGN\": \"COLOGNE\", \"NUE\": \"NUREMBERG\",\n  \"HAJ\": \"HANOVER\", \"BRE\": \"BREMEN\", \"LEJ\": \"LEIPZIG\",\n  \"VIE\": \"VIENNA\", \"SZG\": \"SALZBURG\", \"INN\": \"INNSBRUCK\",\n  \"ZRH\": \"ZURICH\", \"GVA\": \"GENEVA\", \"BSL\": \"BASEL\",\n  \"LHR\": \"LONDON\", \"LGW\": \"LONDON\", \"STN\": \"LONDON\", \"LTN\": \"LONDON\",\n  \"CDG\": \"PARIS\", \"ORY\": \"PARIS\", \n  \"AMS\": \"AMSTERDAM\", \n  \"MAD\": \"MADRID\", \"BCN\": \"BARCELONA\", \"PMI\": \"PALMA DE MALLORCA\", \"AGP\": \"MALAGA\",\n  \"FCO\": \"ROME\", \"MXP\": \"MILAN\", \"LIN\": \"MILAN\", \"BGY\": \"MILAN\", \"VCE\": \"VENICE\", \"NAP\": \"NAPLES\",\n  \"LIS\": \"LISBON\", \"OPO\": \"PORTO\",\n  \"ATH\": \"ATHENS\", \"IST\": \"ISTANBUL\", \"SAW\": \"ISTANBUL\",\n  \"JFK\": \"NEW YORK\", \"EWR\": \"NEWARK\", \"LGA\": \"NEW YORK\", \n  \"LAX\": \"LOS ANGELES\", \"SFO\": \"SAN FRANCISCO\", \"ORD\": \"CHICAGO\", \"MDW\": \"CHICAGO\",\n  \"MIA\": \"MIAMI\", \"MCO\": \"ORLANDO\", \"ATL\": \"ATLANTA\", \"DFW\": \"DALLAS\", \n  \"LAS\": \"LAS VEGAS\", \"SEA\": \"SEATTLE\", \"DEN\": \"DENVER\", \"BOS\": \"BOSTON\",\n  \"DXB\": \"DUBAI\", \"AUH\": \"ABU DHABI\", \"DOH\": \"DOHA\",\n  \"SIN\": \"SINGAPORE\", \"HKG\": \"HONG KONG\", \"BKK\": \"BANGKOK\", \"KUL\": \"KUALA LUMPUR\",\n  \"HND\": \"TOKYO\", \"NRT\": \"TOKYO\", \"ICN\": \"SEOUL\", \"PEK\": \"BEIJING\", \"PVG\": \"SHANGHAI\",\n  \"SYD\": \"SYDNEY\", \"MEL\": \"MELBOURNE\", \"AKL\": \"AUCKLAND\",\n  \"YYZ\": \"TORONTO\", \"YVR\": \"VANCOUVER\", \"YUL\": \"MONTREAL\",\n  \"GRU\": \"SAO PAULO\", \"GIG\": \"RIO DE JANEIRO\", \"EZE\": \"BUENOS AIRES\", \"BOG\": \"BOGOTA\",\n  \"MEX\": \"MEXICO CITY\", \"CUN\": \"CANCUN\",\n  \"JNB\": \"JOHANNESBURG\", \"CPT\": \"CAPE TOWN\", \"CAI\": \"CAIRO\"\n};\n\nvar S = {code:'BKK', loc:'BANGKOK', date:'12 - 08 - 2024', name:'LILY ADAMS & MIKE BARNS', mat:'poster', sizeIdx:1, styleIndex:0, frame:'black'};\n\nfunction updateURL() {\n  var p = new URLSearchParams();\n  p.set('mat', S.mat);\n  p.set('size', S.sizeIdx);\n  p.set('style', S.styleIndex);\n  if (S.mat === 'framed') p.set('frame', S.frame);\n  var c = document.getElementById('inp-code'); if (c && c.value) p.set('code', c.value.toUpperCase());\n  var l = document.getElementById('inp-loc');  if (l && l.value) p.set('loc', l.value);\n  var d = document.getElementById('inp-date'); if (d && d.value) p.set('fdate', d.value);\n  var n = document.getElementById('inp-name'); if (n && n.value) p.set('pname', n.value);\n  history.replaceState(null, '', '?' + p.toString());\n}\n\nfunction updatePosterBackground() {\n  var s = (SIZES[S.mat] || [])[S.sizeIdx];\n  if (!s) return;\n  var activePin = document.querySelectorAll('.pme-pin')[S.styleIndex];\n  var designFile = activePin ? activePin.getAttribute('data-file') : 'Royal-Blue';\n  \n  var sizeLabel = s.l.split(' ')[0];\n  \n  var imgUrl = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/Baggage-Tag_' + sizeLabel + '_' + designFile + '.png';\n  \n  var poster = document.getElementById('pme-poster');\n  poster.style.backgroundImage = 'url(\"' + imgUrl + '\")';\n  poster.style.color = activePin ? activePin.getAttribute('data-fg') : '#3648ac';\n}\n\nfunction renderCode(val) {\n  var html = '';\n  for(var i=0; i<val.length; i++) {\n    html += '<span>' + val[i] + '<\/span>';\n  }\n  document.getElementById('out-code').innerHTML = html;\n  scaleText(); \n}\n\nfunction scaleText() {\n  ['out-date', 'out-name', 'out-loc'].forEach(function(id) {\n    var el = document.getElementById(id);\n    if (!el) return;\n    el.style.transform = 'none'; \n    var parent = el.parentElement;\n    var availableWidth = parent.clientWidth - 24; \n    var textWidth = el.offsetWidth;\n    if (textWidth > availableWidth && textWidth > 0) {\n      var scale = availableWidth \/ textWidth;\n      el.style.transform = 'scale(' + scale + ')';\n    }\n  });\n\n  var codeContainer = document.getElementById('out-code');\n  if(codeContainer) {\n      codeContainer.style.transform = 'none';\n      var availableW = codeContainer.clientWidth;\n      var textW = codeContainer.scrollWidth;\n      if (textW > availableW && textW > 0) {\n          var scale = availableW \/ textW;\n          codeContainer.style.transform = 'scale(' + scale + ')';\n      }\n  }\n}\n\nfunction initEvents() {\n\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn) {\n  btn.addEventListener('click', function() {\n    var panel = this.getAttribute('data-panel');\n    document.querySelectorAll('.pme-section').forEach(function(s) { s.classList.remove('active'); });\n    document.querySelectorAll('.pme-nav-btn').forEach(function(b) { b.classList.remove('active'); });\n    document.querySelectorAll('.pme-mobbtn').forEach(function(b) { b.classList.remove('active'); });\n    document.getElementById('sec-' + panel).classList.add('active');\n    document.querySelectorAll('[data-panel=\"' + panel + '\"]').forEach(function(b) { b.classList.add('active'); });\n  });\n});\n\ndocument.querySelectorAll('.pme-pin').forEach(function(pin, index) {\n  pin.addEventListener('click', function() {\n    document.querySelectorAll('.pme-pin').forEach(function(p) { p.classList.remove('active'); });\n    this.classList.add('active');\n    S.styleIndex = index;\n    updatePosterBackground();\n    updateURL();\n  });\n});\n\ndocument.getElementById('inp-code').addEventListener('input', function() {\n  this.value = this.value.toUpperCase();\n  var codeVal = this.value;\n  \n  renderCode(codeVal);\n  \n  \/\/ AUTO-COMPLETE LOCATION\n  if (codeVal.length === 3 && AIRPORTS[codeVal]) {\n      var locInput = document.getElementById('inp-loc');\n      locInput.value = AIRPORTS[codeVal];\n      document.getElementById('out-loc').textContent = AIRPORTS[codeVal];\n      scaleText();\n  }\n  \n  updateURL();\n});\n\ndocument.getElementById('inp-loc').addEventListener('input', function() {\n  document.getElementById('out-loc').textContent = this.value;\n  scaleText(); \n  updateURL();\n});\ndocument.getElementById('inp-date').addEventListener('input', function() {\n  document.getElementById('out-date').textContent = this.value;\n  scaleText();\n  updateURL();\n});\ndocument.getElementById('inp-name').addEventListener('input', function() {\n  document.getElementById('out-name').textContent = this.value;\n  scaleText();\n  updateURL();\n});\n\ndocument.getElementById('sel-mat').addEventListener('change', function() {\n  S.mat = this.value;\n  var sizes = SIZES[S.mat] || [];\n  S.sizeIdx = 0;\n  for (var i = 0; i < sizes.length; i++) {\n    if (sizes[i].l.includes('30x40cm')) {\n      S.sizeIdx = i;\n      break;\n    }\n  }\n  renderSizes();\n  updateURL();\n});\n\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\n  btn.addEventListener('click', function() {\n    document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\n    this.classList.add('active');\n    S.frame = this.getAttribute('data-frame');\n    updateDims();\n    updateURL();\n  });\n});\n\nfunction renderSizes() {\n  var sizes = SIZES[S.mat] || [];\n  var opts = document.getElementById('size-options');\n  var selText = document.getElementById('size-selected-text');\n  var selDiv = document.getElementById('size-selected');\n  var optsDiv = document.getElementById('size-options');\n  \n  var frameWrap = document.getElementById('frame-opt-wrap');\n  if (frameWrap) {\n    frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\n  }\n\n  function buildLabel(s) {\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>';\n  }\n\n  function selectIdx(i) {\n    S.sizeIdx = i;\n    selText.innerHTML = buildLabel(sizes[i]);\n    optsDiv.style.display = 'none';\n    updatePrice(); updateDims(); updateURL();\n  }\n\n  opts.innerHTML = sizes.map(function(s, i) {\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>';\n  }).join('');\n\n  opts.querySelectorAll('.size-opt').forEach(function(el) {\n    el.addEventListener('mouseenter', function() { this.style.background='#f5f5f5'; });\n    el.addEventListener('mouseleave', function() { this.style.background=''; });\n    el.addEventListener('click', function() { selectIdx(parseInt(this.getAttribute('data-idx'))); });\n  });\n\n  selDiv.onclick = function(e) {\n    e.stopPropagation();\n    optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\n  };\n\n  document.addEventListener('click', function() { optsDiv.style.display = 'none'; });\n  selectIdx(S.sizeIdx < sizes.length ? S.sizeIdx : 0);\n}\n\nfunction updatePrice() {\n  var s = (SIZES[S.mat] || [])[S.sizeIdx];\n  if (!s) return;\n  document.getElementById('p-old').textContent = s.orig.toFixed(2).replace('.', ',') + ' EUR';\n  document.getElementById('p-new').textContent = s.p.toFixed(2).replace('.', ',') + ' EUR';\n}\n\nfunction updateDims() {\n  var s = (SIZES[S.mat] || [])[S.sizeIdx];\n  if (!s) return;\n  document.getElementById('dim-w').textContent = s.w + ' cm';\n  document.getElementById('dim-h').textContent = s.h + ' cm';\n  var BASE = 504;\n  var pw = s.w, ph = s.h;\n  var longer = Math.max(pw, ph), shorter = Math.min(pw, ph);\n  var baseW = Math.round(BASE * shorter \/ longer);\n  var baseH = BASE;\n  var poster = document.getElementById('pme-poster');\n\n  if (S.mat === 'framed') {\n    var thicknessMm = (s.l.includes('13x18cm')) ? 10 : 14;\n    var framePx = thicknessMm * (BASE \/ (longer * 10));\n\n    poster.style.borderWidth = framePx + 'px';\n    poster.style.borderStyle = 'solid';\n\n    if (S.frame === 'wood') {\n      poster.style.borderColor = '#d7c5b3';\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\";\n    } else if (S.frame === 'white') {\n      poster.style.borderImage = \"\";\n      poster.style.borderColor = '#ffffff';\n    } else { \n      poster.style.borderImage = \"\";\n      poster.style.borderColor = '#1a1a1a';\n    }\n    \n    poster.style.width = (baseW + framePx * 2) + 'px';\n    poster.style.height = (baseH + framePx * 2) + 'px';\n    poster.classList.add('is-framed');\n  } else {\n    poster.style.border = '';\n    poster.style.borderImage = '';\n    poster.style.width = baseW + 'px';\n    poster.style.height = baseH + 'px';\n    poster.classList.remove('is-framed');\n  }\n\n  updatePosterBackground();\n  setTimeout(function(){ scaleText(); fitPoster(); }, 60);\n}\n\ndocument.getElementById('btn-cart').addEventListener('click', function() {\n  var btn = this;\n  var originalHTML = btn.innerHTML;\n  btn.innerHTML = 'L\u00e4dt...';\n  btn.style.pointerEvents = 'none';\n\n  var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\n  var codeVal = document.getElementById('inp-code').value || 'BKK';\n\n  var cartData = {\n    action:            'uwa_add_to_cart',\n    product_id:        '592',\n    poster_title:      codeVal.toUpperCase(),\n    poster_subtitle:   document.getElementById('out-loc').textContent,\n    poster_date:       document.getElementById('out-date').textContent,\n    poster_names:      document.getElementById('out-name').textContent, \/\/ Angepasst, damit die Checkout-Labels greifen\n    poster_style:      S.styleIndex,\n    poster_material:   S.mat,\n    poster_frame:      (S.mat === 'framed') ? S.frame : '',\n    poster_size:       s.l || '',\n    poster_orientation: 'portrait',\n    poster_price:      s.p || '',\n    poster_original_price: s.orig || '',\n    poster_url:        window.location.href\n  };\n\n  html2canvas(document.getElementById('pme-poster'), {\n      useCORS: true,\n      scale: 2.5, \n      backgroundColor: null,\n      onclone: function(clonedDoc) {\n          var clonedOuter = clonedDoc.getElementById('pme-outer');\n          if (clonedOuter) clonedOuter.style.transform = 'none';\n\n          return new Promise(function(resolve) {\n              if (clonedDoc.fonts && clonedDoc.fonts.ready) {\n                  clonedDoc.fonts.ready.then(function() {\n                      setTimeout(resolve, 150);\n                  });\n              } else {\n                  setTimeout(resolve, 600);\n              }\n          });\n      }\n  }).then(function(canvas) {\n      cartData.poster_thumbnail = canvas.toDataURL('image\/jpeg', 0.95);\n      sendToCart(cartData);\n  }).catch(function(err) {\n      console.error('Canvas Generation Error', err);\n      btn.innerHTML = originalHTML; \n      btn.style.pointerEvents = 'auto';\n      sendToCart(cartData);\n  });\n\n  function sendToCart(data) {\n    var body = Object.keys(data).map(function(k) {\n      return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);\n    }).join('&');\n    \n    fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php', {\n      method: 'POST',\n      headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\n      body: body\n    }).then(function(r) { return r.json(); })\n    .then(function(res) {\n      if (res.success) { \n        window.location.href = 'https:\/\/zulumaps.com\/cart\/'; \n      } else { \n        console.error(\"Cart Error:\", res);\n        alert(\"Fehler beim Hinzuf\u00fcgen zum Warenkorb.\");\n        btn.innerHTML = originalHTML;\n        btn.style.pointerEvents = 'auto';\n      }\n    }).catch(function(err) {\n      console.error(\"Fetch Error:\", err);\n      alert(\"Es gab einen Verbindungsfehler.\");\n      btn.innerHTML = originalHTML;\n      btn.style.pointerEvents = 'auto';\n    });\n  }\n});\n\nfunction fitPoster() {\n  var canvas = document.getElementById('pme-canvas');\n  var outer = document.getElementById('pme-outer');\n  var poster = document.getElementById('pme-poster');\n  if (!canvas || !poster.offsetWidth) return;\n  var isMob = window.innerWidth <= 768;\n  \n  var aH = canvas.clientHeight - (isMob ? 50 : 60);\n  var aW = canvas.clientWidth - (isMob ? 50 : 80);\n  \n  var scale = Math.min(aH \/ poster.offsetHeight, aW \/ poster.offsetWidth, isMob ? 2.5 : 1.4);\n  outer.style.transform = 'scale(' + scale + ')';\n  outer.style.transformOrigin = 'center center';\n  scaleText(); \n}\n\nfunction setHeight() {\n  var el = document.getElementById('pme-root');\n  if (!el) return;\n  var isMob = window.innerWidth <= 768;\n  if (isMob) {\n    el.style.height = 'auto'; \n    var panel = document.querySelector('.pme-panel');\n    var nav = document.querySelector('.pme-nav');\n    var canvas = document.getElementById('pme-canvas');\n    if (panel) panel.style.height = '';\n    if (nav) nav.style.height = '';\n    if (canvas) canvas.style.height = '';\n  } else {\n    var r = el.getBoundingClientRect();\n    var h = Math.max(window.innerHeight - r.top, 500);\n    el.style.height = h + 'px';\n    var panel = document.querySelector('.pme-panel');\n    var nav = document.querySelector('.pme-nav');\n    var canvas = document.getElementById('pme-canvas');\n    if (panel) panel.style.height = h + 'px';\n    if (nav) nav.style.height = h + 'px';\n    if (canvas) canvas.style.height = h + 'px';\n  }\n  setTimeout(fitPoster, 100);\n}\n\nwindow.addEventListener('load', setHeight);\nwindow.addEventListener('resize', setHeight);\nsetTimeout(setHeight, 300);\n\nvar p = new URLSearchParams(window.location.search);\nif (p.has('mat'))   S.mat = p.get('mat');\nif (p.has('size'))  S.sizeIdx = parseInt(p.get('size')) || 0;\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 0;\nif (p.has('frame')) S.frame = p.get('frame');\nif (p.has('code'))  document.getElementById('inp-code').value = p.get('code');\nif (p.has('loc'))   document.getElementById('inp-loc').value = p.get('loc');\nif (p.has('fdate')) document.getElementById('inp-date').value = p.get('fdate');\nif (p.has('pname')) document.getElementById('inp-name').value = p.get('pname');\n\nvar ms = document.getElementById('sel-mat');\nif (ms) ms.value = S.mat;\n\nrenderCode(document.getElementById('inp-code').value);\ndocument.getElementById('out-loc').textContent = document.getElementById('inp-loc').value;\ndocument.getElementById('out-date').textContent = document.getElementById('inp-date').value;\ndocument.getElementById('out-name').textContent = document.getElementById('inp-name').value;\n\nvar pins = document.querySelectorAll('.pme-pin');\nif (pins.length > S.styleIndex) {\n  var activePin = pins[S.styleIndex];\n  pins.forEach(function(p) { p.classList.remove('active'); });\n  activePin.classList.add('active');\n}\n\nif (S.frame) {\n  document.querySelectorAll('.pme-frame').forEach(function(btn) {\n    btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\n  });\n}\nif (S.mat === 'framed') {\n  document.getElementById('pme-poster').classList.add('is-framed');\n}\n\nrenderSizes();\nsetTimeout(scaleText, 100);\n\n} \/\/ end initEvents\n\ninitEvents();\n\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2158","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=2158"}],"version-history":[{"count":10,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2158\/revisions"}],"predecessor-version":[{"id":3074,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2158\/revisions\/3074"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}