Baggage Tag Editor<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{overflow-x:hidden;}\r\n.pme{display:flex;width:100vw;height:100%;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:64px;min-width:64px;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;}\r\n.pme-nav-btn{width:52px;height:56px;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#888;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}\r\n.pme-nav-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}\r\n.pme-nav-btn.active{color:#fff;background:rgba(255,255,255,0.12);}\r\n.pme-nav-btn svg{width:20px;height:20px;}\r\n.pme-panel{width:416px;min-width:416px;background:#e7e7e7;border-right:1px solid #e8e8e8;overflow-y:auto;display:flex;flex-direction:column;}\r\n.pme-section{display:none;padding:24px 24px 32px;}\r\n.pme-section.active{display:block;}\r\n.pme-title{font-size:22px;font-weight:600;margin-bottom:6px;}\r\n.pme-desc{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5;}\r\n.pme-lbl{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;margin-top:20px;display:block;}\r\n\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:#999;margin-bottom:6px;}\r\n.pme-field input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n#inp-code {text-transform: uppercase;}\r\n\r\n.pme-pins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}\r\n.pme-pin{border:2px solid transparent;border-radius:12px;padding:14px 8px 10px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all 0.15s;}\r\n.pme-pin:hover{border:2px solid #aaa;}\r\n.pme-pin.active{border:2px solid #1a1a1a;}\r\n.pme-pin .tag-icon-circle {width: 34px; height: 34px; border-radius: 50%; border: 9px solid; box-shadow: 0 0 0 1px #1a1a1a; transition: transform 0.2s ease;}\r\n.pme-pin:hover .tag-icon-circle {transform: scale(1.08);}\r\n.pme-pin span{font-size:11px;color:#444;font-weight:500;text-align:center;line-height:1.2;}\r\n\r\n.pme-canvas{flex:1;min-width:0;min-height:0;background:#F9F6F0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;align-self:stretch;}\r\n.pme-outer{position:relative;}\r\n\r\n\/* ORIGINAL POSTER STYLES *\/\r\n.pme-poster{position:relative;display:flex;flex-direction:column;box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); overflow:hidden; background-size:100% 100%; background-position:center; background-repeat:no-repeat; background-color:#fff; transition: background-image 0.3s ease;}\r\n\r\n.tag-code { position: absolute; top: 18%; left: 12.5%; width: 75%; height: 18%; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 115px; font-weight: 700; line-height: 1; font-family: 'Inter', sans-serif; transform-origin: center center; }\r\n.tag-code span { display: block; }\r\n\r\n.tag-location { position: absolute; top: 37.5%; left: 12.5%; width: 75%; height: 6%; display: flex; align-items: center; justify-content: center; }\r\n.tag-location span { font-size: 26px; font-weight: 700; font-family: 'Inter', sans-serif; letter-spacing: 0.02em; white-space: nowrap; transform-origin: center; display: inline-block; line-height: 1;}\r\n\r\n.tag-box-val { position: absolute; left: 33.5%; width: 46.5%; height: 8.5%; display: flex; align-items: center; justify-content: center; letter-spacing: 0.03em; }\r\n#box-date-val { top: 50.2%; }\r\n#box-name-val { top: 60.5%; }\r\n.tag-box-val span { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 24px; white-space: nowrap; transform-origin: center center; display: inline-block; line-height: 1; }\r\n\r\n.pme-dimr{position:absolute;right:-22px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}\r\n.pme-dimr span{writing-mode:vertical-rl;font-size:11px;color:#aaa;white-space:nowrap;}\r\n.pme-dimb{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}\r\n.pme-dimb span{font-size:11px;color:#aaa;}\r\n\r\n.pme-bar{background:#1a1a1a;display:flex;align-items:center;padding:16px 24px;gap:12px;margin-top:auto;}\r\n.pme-prices{display:flex;align-items:baseline;gap:6px;}\r\n.pme-old{font-size:12px;color:#888;text-decoration:line-through;}\r\n.pme-new{font-size:17px;font-weight:600;color:#fff;}\r\n.pme-cart{background:#7E5AF0;color:#ffffff;border:none;border-radius:25px;padding:10px 14px;font-size:18px;font-weight:400;font-family:'Poppins',sans-serif;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.15s,color 0.15s,border-color 0.15s;}\r\n.pme-cart:hover{background:#632ED3!important;color:#ffffff!important;border:none!important;}\r\n\r\n#size-dropdown,#mat-dropdown{position:relative;margin-bottom:14px;}\r\n.dd-selected{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}\r\n.dd-options{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);}\r\n\r\n.pme-frame{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px 4px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff;font-family:'DM Sans',sans-serif;color:#1a1a1a;transition:border 0.15s;}\r\n.pme-frame:hover,.pme-frame.active{border:2.5px solid #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\r\n.pme-poster.is-framed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 3px 18px rgba(0,0,0,0.25);pointer-events:none;z-index:20;}\r\n\r\n@media(max-width:768px){\r\n .pme{flex-direction:column; height:auto!important; min-height:100vh;}\r\n .pme-nav{display:none;}\r\n .pme-panel{width:100%!important; min-width:0!important; border-right:none; border-top:1px solid #e8e8e8; max-height:none!important; height:auto!important; overflow-y:visible!important; order:3;}\r\n .pme-canvas{order:1; flex:none!important; height:65vh!important; min-height:380px;}\r\n .pme-mobnav{display:flex!important; order:2; height:71px!important; flex:0 0 71px!important;}\r\n .pme-section{padding:16px 16px 24px;}\r\n}\r\n\r\n.pme-mobnav{display:none;width:100%;background:#1a1a1a;overflow-x:auto;scrollbar-width:none;}\r\n.pme-mobnav::-webkit-scrollbar{display:none;}\r\n.pme-mobbtn{flex:1;min-width:60px;height:71px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#888;font-size:14px;font-family:'DM Sans',sans-serif;}\r\n.pme-mobbtn.active{color:#fff;}\r\n.pme-mobbtn svg{width:24px;height:24px;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pme\" id=\"pme-root\">\r\n <nav class=\"pme-nav\">\r\n <button class=\"pme-nav-btn active\" data-panel=\"labels\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"style\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"size\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n <\/button>\r\n <\/nav>\r\n\r\n <div class=\"pme-mobnav\">\r\n <button class=\"pme-mobbtn active\" data-panel=\"labels\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n <\/button>\r\n <button class=\"pme-mobbtn\" data-panel=\"style\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n <\/button>\r\n <button class=\"pme-mobbtn\" data-panel=\"size\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Texte<\/div>\r\n <div class=\"pme-desc\">Passe die Details deines Kofferanh\u00e4ngers an.<\/div>\r\n \r\n <span class=\"pme-lbl\">Flughafencode<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-code\" maxlength=\"3\" value=\"BKK\" placeholder=\"Z.B. BKK\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Ort<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"BANGKOK\" placeholder=\"Stadt \/ Flughafen\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Flugdatum<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-date\" value=\"12 - 08 - 2024\" placeholder=\"TT - MM - JJJJ\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Passagiername<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-name\" value=\"LILY ADAMS & MIKE BARNS\" placeholder=\"Name\"\/><\/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 eine Farbvariante f\u00fcr deinen Anh\u00e4nger.<\/div>\r\n\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div class=\"pme-pins\">\r\n <div class=\"pme-pin active\" data-bg=\"#c9d6dc\" data-fg=\"#3648ac\" data-file=\"Royal-Blue\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #c9d6dc; border-color: #3648ac;\"><\/div>\r\n <span>Royal Blue<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-file=\"Ivory\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #e0ceb8; border-color: #fcf9e5;\"><\/div>\r\n <span>Ivory<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-file=\"Sunflower\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #f7bf3d; border-color: #f7285a;\"><\/div>\r\n <span>Sunflower<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-file=\"Green-Apple\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #42c053; border-color: #f7e946;\"><\/div>\r\n <span>Green Apple<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-file=\"Black\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #000000; border-color: #ffffff;\"><\/div>\r\n <span>Black<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#ffc0cb\" data-fg=\"#f7285a\" data-file=\"Candy-Pink\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #ffc0cb; border-color: #f7285a;\"><\/div>\r\n <span>Candy Pink<\/span>\r\n <\/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 und Gr\u00f6\u00dfe.<\/div>\r\n <span class=\"pme-lbl\">Material<\/span>\r\n <select id=\"sel-mat\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;background:#fafafa;margin-bottom:14px;cursor:pointer;appearance:auto;\">\r\n <option value=\"postcard\">Postkarte<\/option>\r\n <option value=\"poster\" selected>Poster<\/option>\r\n <option value=\"framed\">Gerahmtes Poster<\/option>\r\n <option value=\"canvas\">Leinwand<\/option>\r\n <\/select>\r\n \r\n <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\r\n <span class=\"pme-lbl\">Rahmenfarbe<\/span>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\r\n <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\r\n <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\r\n <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\r\n <div id=\"size-dropdown\" style=\"position:relative;margin-bottom:14px;\">\r\n <div id=\"size-selected\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;\">\r\n <span id=\"size-selected-text\"><\/span>\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 4l4 4 4-4\" stroke=\"#888\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/div>\r\n <div id=\"size-options\" style=\"display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-bar\">\r\n <div class=\"pme-prices\">\r\n <span class=\"pme-old\" id=\"p-old\">29,99 \u20ac<\/span>\r\n <span class=\"pme-new\" id=\"p-new\">14,99 \u20ac<\/span>\r\n <\/div>\r\n <button class=\"pme-cart\" id=\"btn-cart\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 001.99 1.61h9.72a2 2 0 001.99-1.61L23 6H6\"\/><\/svg>\r\n In den Warenkorb\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n <div class=\"pme-outer\" id=\"pme-outer\">\r\n \r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"tag-code\" id=\"out-code\">\r\n <span>B<\/span><span>K<\/span><span>K<\/span>\r\n <\/div>\r\n <div class=\"tag-location\"><span id=\"out-loc\">BANGKOK<\/span><\/div>\r\n \r\n <div class=\"tag-box-val\" id=\"box-date-val\"><span id=\"out-date\">12 - 08 - 2024<\/span><\/div>\r\n <div class=\"tag-box-val\" id=\"box-name-val\"><span id=\"out-name\">LILY ADAMS & MIKE BARNS<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\nvar SIZES = {\r\n postcard: [{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n poster: [{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n framed: [{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n canvas: [{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\n\/\/ AUTO-COMPLETE DICTIONARY\r\nvar AIRPORTS = {\r\n \"MUC\": \"M\u00dcNCHEN\", \"FRA\": \"FRANKFURT\", \"BER\": \"BERLIN\", \"DUS\": \"D\u00dcSSELDORF\", \r\n \"HAM\": \"HAMBURG\", \"STR\": \"STUTTGART\", \"CGN\": \"K\u00d6LN\", \"NUE\": \"N\u00dcRNBERG\",\r\n \"HAJ\": \"HANNOVER\", \"BRE\": \"BREMEN\", \"LEJ\": \"LEIPZIG\",\r\n \"VIE\": \"WIEN\", \"SZG\": \"SALZBURG\", \"INN\": \"INNSBRUCK\",\r\n \"ZRH\": \"Z\u00dcRICH\", \"GVA\": \"GENF\", \"BSL\": \"BASEL\",\r\n \"LHR\": \"LONDON\", \"LGW\": \"LONDON\", \"STN\": \"LONDON\", \"LTN\": \"LONDON\",\r\n \"CDG\": \"PARIS\", \"ORY\": \"PARIS\", \r\n \"AMS\": \"AMSTERDAM\", \r\n \"MAD\": \"MADRID\", \"BCN\": \"BARCELONA\", \"PMI\": \"PALMA DE MALLORCA\", \"AGP\": \"MALAGA\",\r\n \"FCO\": \"ROM\", \"MXP\": \"MAILAND\", \"LIN\": \"MAILAND\", \"BGY\": \"MAILAND\", \"VCE\": \"VENEDIG\", \"NAP\": \"NEAPEL\",\r\n \"LIS\": \"LISSABON\", \"OPO\": \"PORTO\",\r\n \"ATH\": \"ATHEN\", \"IST\": \"ISTANBUL\", \"SAW\": \"ISTANBUL\",\r\n \"JFK\": \"NEW YORK\", \"EWR\": \"NEWARK\", \"LGA\": \"NEW YORK\", \r\n \"LAX\": \"LOS ANGELES\", \"SFO\": \"SAN FRANCISCO\", \"ORD\": \"CHICAGO\", \"MDW\": \"CHICAGO\",\r\n \"MIA\": \"MIAMI\", \"MCO\": \"ORLANDO\", \"ATL\": \"ATLANTA\", \"DFW\": \"DALLAS\", \r\n \"LAS\": \"LAS VEGAS\", \"SEA\": \"SEATTLE\", \"DEN\": \"DENVER\", \"BOS\": \"BOSTON\",\r\n \"DXB\": \"DUBAI\", \"AUH\": \"ABU DHABI\", \"DOH\": \"DOHA\",\r\n \"SIN\": \"SINGAPUR\", \"HKG\": \"HONGKONG\", \"BKK\": \"BANGKOK\", \"KUL\": \"KUALA LUMPUR\",\r\n \"HND\": \"TOKIO\", \"NRT\": \"TOKIO\", \"ICN\": \"SEOUL\", \"PEK\": \"PEKING\", \"PVG\": \"SHANGHAI\",\r\n \"SYD\": \"SYDNEY\", \"MEL\": \"MELBOURNE\", \"AKL\": \"AUCKLAND\",\r\n \"YYZ\": \"TORONTO\", \"YVR\": \"VANCOUVER\", \"YUL\": \"MONTREAL\",\r\n \"GRU\": \"SAO PAULO\", \"GIG\": \"RIO DE JANEIRO\", \"EZE\": \"BUENOS AIRES\", \"BOG\": \"BOGOTA\",\r\n \"MEX\": \"MEXIKO-STADT\", \"CUN\": \"CANCUN\",\r\n \"JNB\": \"JOHANNESBURG\", \"CPT\": \"KAPSTADT\", \"CAI\": \"KAIRO\"\r\n};\r\n\r\nvar S = {code:'BKK', loc:'BANGKOK', date:'12 - 08 - 2024', name:'LILY ADAMS & MIKE BARNS', mat:'poster', sizeIdx:1, styleIndex:0, frame:'black'};\r\n\r\nfunction updateURL() {\r\n var p = new URLSearchParams();\r\n p.set('mat', S.mat);\r\n p.set('size', S.sizeIdx);\r\n p.set('style', S.styleIndex);\r\n if (S.mat === 'framed') p.set('frame', S.frame);\r\n var c = document.getElementById('inp-code'); if (c && c.value) p.set('code', c.value.toUpperCase());\r\n var l = document.getElementById('inp-loc'); if (l && l.value) p.set('loc', l.value);\r\n var d = document.getElementById('inp-date'); if (d && d.value) p.set('fdate', d.value);\r\n var n = document.getElementById('inp-name'); if (n && n.value) p.set('pname', n.value);\r\n history.replaceState(null, '', '?' + p.toString());\r\n}\r\n\r\nfunction updatePosterBackground() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx];\r\n if (!s) return;\r\n var activePin = document.querySelectorAll('.pme-pin')[S.styleIndex];\r\n var designFile = activePin ? activePin.getAttribute('data-file') : 'Royal-Blue';\r\n \r\n var sizeLabel = s.l;\r\n if (sizeLabel === '10x15cm') {\r\n sizeLabel = '40x60cm';\r\n }\r\n \r\n var imgUrl = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/Baggage-Tag_' + sizeLabel + '_' + designFile + '.png';\r\n \r\n var poster = document.getElementById('pme-poster');\r\n poster.style.backgroundImage = 'url(' + imgUrl + ')';\r\n poster.style.color = activePin ? activePin.getAttribute('data-fg') : '#3648ac';\r\n}\r\n\r\nfunction renderCode(val) {\r\n var html = '';\r\n for(var i=0; i<val.length; i++) {\r\n html += '<span>' + val[i] + '<\/span>';\r\n }\r\n document.getElementById('out-code').innerHTML = html;\r\n scaleText(); \r\n}\r\n\r\n\/\/ ORIGINAL JS SCALE FUNCTION\r\nfunction scaleText() {\r\n ['out-date', 'out-name', 'out-loc'].forEach(function(id) {\r\n var el = document.getElementById(id);\r\n if (!el) return;\r\n el.style.transform = 'none'; \r\n var parent = el.parentElement;\r\n var availableWidth = parent.clientWidth - 24; \r\n var textWidth = el.offsetWidth;\r\n if (textWidth > availableWidth && textWidth > 0) {\r\n var scale = availableWidth \/ textWidth;\r\n el.style.transform = 'scale(' + scale + ')';\r\n }\r\n });\r\n\r\n var codeContainer = document.getElementById('out-code');\r\n if(codeContainer) {\r\n codeContainer.style.transform = 'none';\r\n var availableW = codeContainer.clientWidth;\r\n var textW = codeContainer.scrollWidth;\r\n if (textW > availableW && textW > 0) {\r\n var scale = availableW \/ textW;\r\n codeContainer.style.transform = 'scale(' + scale + ')';\r\n }\r\n }\r\n}\r\n\r\nfunction initEvents() {\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n var panel = this.getAttribute('data-panel');\r\n document.querySelectorAll('.pme-section').forEach(function(s) { s.classList.remove('active'); });\r\n document.querySelectorAll('.pme-nav-btn').forEach(function(b) { b.classList.remove('active'); });\r\n document.querySelectorAll('.pme-mobbtn').forEach(function(b) { b.classList.remove('active'); });\r\n document.getElementById('sec-' + panel).classList.add('active');\r\n document.querySelectorAll('[data-panel=\"' + panel + '\"]').forEach(function(b) { b.classList.add('active'); });\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-pin').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-pin').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.styleIndex = index;\r\n updatePosterBackground();\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.getElementById('inp-code').addEventListener('input', function() {\r\n this.value = this.value.toUpperCase();\r\n var codeVal = this.value;\r\n \r\n renderCode(codeVal);\r\n \r\n \/\/ AUTO-COMPLETE LOCATION\r\n if (codeVal.length === 3 && AIRPORTS[codeVal]) {\r\n var locInput = document.getElementById('inp-loc');\r\n locInput.value = AIRPORTS[codeVal];\r\n document.getElementById('out-loc').textContent = AIRPORTS[codeVal];\r\n scaleText();\r\n }\r\n \r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('inp-loc').addEventListener('input', function() {\r\n document.getElementById('out-loc').textContent = this.value;\r\n scaleText(); \r\n updateURL();\r\n});\r\ndocument.getElementById('inp-date').addEventListener('input', function() {\r\n document.getElementById('out-date').textContent = this.value;\r\n scaleText();\r\n updateURL();\r\n});\r\ndocument.getElementById('inp-name').addEventListener('input', function() {\r\n document.getElementById('out-name').textContent = this.value;\r\n scaleText();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('sel-mat').addEventListener('change', function() {\r\n S.mat = this.value;\r\n var sizes = SIZES[S.mat] || [];\r\n S.sizeIdx = 0;\r\n for (var i = 0; i < sizes.length; i++) {\r\n if (sizes[i].l === '30x40cm') {\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n renderSizes();\r\n updateURL();\r\n});\r\n\r\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.frame = this.getAttribute('data-frame');\r\n updateDims();\r\n updateURL();\r\n });\r\n});\r\n\r\nfunction renderSizes() {\r\n var sizes = SIZES[S.mat] || [];\r\n var opts = document.getElementById('size-options');\r\n var selText = document.getElementById('size-selected-text');\r\n var selDiv = document.getElementById('size-selected');\r\n var optsDiv = document.getElementById('size-options');\r\n \r\n var frameWrap = document.getElementById('frame-opt-wrap');\r\n if (frameWrap) {\r\n frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\r\n }\r\n\r\n function buildLabel(s) {\r\n return s.l + '\\u00a0\\u00a0<s style=\"color:#999\">' + s.orig.toFixed(2) + '\\u00a0\\u20ac<\/s>\\u00a0\\u00a0<span style=\"color:#e00\">' + s.p.toFixed(2) + '\\u00a0\\u20ac<\/span>';\r\n }\r\n\r\n function selectIdx(i) {\r\n S.sizeIdx = i;\r\n selText.innerHTML = buildLabel(sizes[i]);\r\n optsDiv.style.display = 'none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n\r\n opts.innerHTML = sizes.map(function(s, i) {\r\n return '<div class=\"size-opt\" data-idx=\"' + i + '\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">' + buildLabel(s) + '<\/div>';\r\n }).join('');\r\n\r\n opts.querySelectorAll('.size-opt').forEach(function(el) {\r\n el.addEventListener('mouseenter', function() { this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave', function() { this.style.background=''; });\r\n el.addEventListener('click', function() { selectIdx(parseInt(this.getAttribute('data-idx'))); });\r\n });\r\n\r\n selDiv.onclick = function(e) {\r\n e.stopPropagation();\r\n optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\r\n };\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];\r\n if (!s) return;\r\n document.getElementById('p-old').textContent = s.orig.toFixed(2).replace('.', ',') + ' EUR';\r\n document.getElementById('p-new').textContent = s.p.toFixed(2).replace('.', ',') + ' EUR';\r\n}\r\n\r\nfunction updateDims() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx];\r\n if (!s) return;\r\n document.getElementById('dim-w').textContent = s.w + ' cm';\r\n document.getElementById('dim-h').textContent = s.h + ' cm';\r\n var BASE = 504;\r\n var pw = s.w, ph = s.h;\r\n var longer = Math.max(pw, ph), shorter = Math.min(pw, ph);\r\n var baseW = Math.round(BASE * shorter \/ longer);\r\n var baseH = BASE;\r\n var poster = document.getElementById('pme-poster');\r\n\r\n if (S.mat === 'framed') {\r\n var thicknessMm = (s.l === '13x18cm') ? 10 : 14;\r\n var framePx = thicknessMm * (BASE \/ (longer * 10));\r\n\r\n poster.style.borderWidth = framePx + 'px';\r\n poster.style.borderStyle = 'solid';\r\n\r\n if (S.frame === 'wood') {\r\n poster.style.borderColor = '#d7c5b3';\r\n poster.style.borderImage = \"url(\\\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.4' numOctaves='2' result='noise'\/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0 0 0 0.15 0' in='noise'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' fill='%23d7c5b3'\/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\\\") 10 stretch\";\r\n } else if (S.frame === 'white') {\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#ffffff';\r\n } else { \r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#1a1a1a';\r\n }\r\n \r\n poster.style.width = (baseW + framePx * 2) + 'px';\r\n poster.style.height = (baseH + framePx * 2) + 'px';\r\n poster.classList.add('is-framed');\r\n } else {\r\n poster.style.border = '';\r\n poster.style.borderImage = '';\r\n poster.style.width = baseW + 'px';\r\n poster.style.height = baseH + 'px';\r\n poster.classList.remove('is-framed');\r\n }\r\n\r\n updatePosterBackground();\r\n setTimeout(function(){ scaleText(); fitPoster(); }, 60);\r\n}\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click', function() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\r\n var codeVal = document.getElementById('inp-code').value || 'BKK';\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart',\r\n \/\/ DEUTSCHE PRODUKT-ID \r\n product_id: '2216',\r\n poster_title: codeVal.toUpperCase(),\r\n poster_subtitle: document.getElementById('out-loc').textContent,\r\n poster_date: document.getElementById('out-date').textContent,\r\n poster_passenger: document.getElementById('out-name').textContent,\r\n poster_style: S.styleIndex,\r\n poster_material: S.mat,\r\n poster_frame: (S.mat === 'framed') ? S.frame : '',\r\n poster_size: s.l || '',\r\n poster_orientation: 'portrait',\r\n poster_price: s.p || '',\r\n poster_original_price: s.orig || ''\r\n };\r\n\r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n\r\n \/\/ HIER PASSIERT DIE MAGIE: Der onclone-Fix korrigiert den html2canvas-Bug,\r\n \/\/ OHNE das Design deines Live-Editors auf der Seite kaputtzumachen!\r\n html2canvas(document.getElementById('pme-poster'), {\r\n useCORS: true,\r\n scale: 2,\r\n backgroundColor: null,\r\n onclone: function(clonedDoc) {\r\n var clonedPoster = clonedDoc.getElementById('pme-poster');\r\n if(!clonedPoster) return;\r\n \r\n \/\/ 1. Repariert den \"B K K\" Abstand, da html2canvas Flexbox-'gap' oft ignoriert\r\n var codeEl = clonedPoster.querySelector('#out-code');\r\n if (codeEl) {\r\n var spans = codeEl.querySelectorAll('span');\r\n spans.forEach(function(span, index) {\r\n if(index > 0) span.style.marginLeft = '4px';\r\n });\r\n }\r\n\r\n \/\/ 2. Ersetzt \"transform: scale\" durch echte Schriftgr\u00f6\u00dfen f\u00fcr das Vorschaubild\r\n ['out-date', 'out-name', 'out-loc', 'out-code'].forEach(function(id) {\r\n var liveEl = document.getElementById(id);\r\n var clonedEl = clonedPoster.querySelector('#' + id);\r\n if (!liveEl || !clonedEl) return;\r\n \r\n var transform = liveEl.style.transform;\r\n if (transform && transform.indexOf('scale') !== -1) {\r\n var scaleMatch = transform.match(\/scale\\(([^)]+)\\)\/);\r\n if (scaleMatch && scaleMatch[1]) {\r\n var scale = parseFloat(scaleMatch[1]);\r\n clonedEl.style.transform = 'none';\r\n \r\n var baseSize = 24;\r\n if(id === 'out-loc') baseSize = 26;\r\n if(id === 'out-code') baseSize = 115;\r\n \r\n if(id === 'out-code') {\r\n var spans = clonedEl.querySelectorAll('span');\r\n spans.forEach(function(s) { \r\n s.style.fontSize = Math.floor(baseSize * scale) + 'px'; \r\n });\r\n } else {\r\n clonedEl.style.fontSize = Math.floor(baseSize * scale) + 'px';\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }).then(function(canvas) {\r\n cartData.poster_thumbnail = canvas.toDataURL('image\/jpeg', 0.90);\r\n sendToCart(cartData);\r\n }).catch(function(err) {\r\n console.error('Canvas Generation Error', err);\r\n sendToCart(cartData);\r\n });\r\n\r\n function sendToCart(data) {\r\n var body = Object.keys(data).map(function(k) {\r\n return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);\r\n }).join('&');\r\n fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\r\n body: body\r\n }).then(function(r) { return r.json(); })\r\n .then(function(res) {\r\n if (res.success) { \r\n window.location.href = 'https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n } else { \r\n btn.innerHTML = originalHTML; \r\n console.error(\"Cart Error:\", res);\r\n alert(\"Konnte nicht in den Warenkorb gelegt werden. Hast du die richtige deutsche Produkt-ID hinterlegt?\");\r\n }\r\n }).catch(function(err) {\r\n btn.innerHTML = originalHTML;\r\n console.error(\"Fetch Error:\", err);\r\n alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n });\r\n }\r\n});\r\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 scaleText(); \r\n}\r\n\r\nfunction setHeight() {\r\n var el = document.getElementById('pme-root');\r\n if (!el) return;\r\n var isMob = window.innerWidth <= 768;\r\n if (isMob) {\r\n el.style.height = 'auto'; \r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvas) canvas.style.height = '';\r\n } else {\r\n var r = el.getBoundingClientRect();\r\n var h = Math.max(window.innerHeight - r.top, 500);\r\n el.style.height = h + 'px';\r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = h + 'px';\r\n if (nav) nav.style.height = h + 'px';\r\n if (canvas) canvas.style.height = h + 'px';\r\n }\r\n setTimeout(fitPoster, 100);\r\n}\r\n\r\nwindow.addEventListener('load', setHeight);\r\nwindow.addEventListener('resize', setHeight);\r\nsetTimeout(setHeight, 300);\r\n\r\nvar p = new URLSearchParams(window.location.search);\r\nif (p.has('mat')) S.mat = p.get('mat');\r\nif (p.has('size')) S.sizeIdx = parseInt(p.get('size')) || 0;\r\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 0;\r\nif (p.has('frame')) S.frame = p.get('frame');\r\nif (p.has('code')) document.getElementById('inp-code').value = p.get('code');\r\nif (p.has('loc')) document.getElementById('inp-loc').value = p.get('loc');\r\nif (p.has('fdate')) document.getElementById('inp-date').value = p.get('fdate');\r\nif (p.has('pname')) document.getElementById('inp-name').value = p.get('pname');\r\n\r\nvar ms = document.getElementById('sel-mat');\r\nif (ms) ms.value = S.mat;\r\n\r\nrenderCode(document.getElementById('inp-code').value);\r\ndocument.getElementById('out-loc').textContent = document.getElementById('inp-loc').value;\r\ndocument.getElementById('out-date').textContent = document.getElementById('inp-date').value;\r\ndocument.getElementById('out-name').textContent = document.getElementById('inp-name').value;\r\n\r\nvar pins = document.querySelectorAll('.pme-pin');\r\nif (pins.length > S.styleIndex) {\r\n var activePin = pins[S.styleIndex];\r\n pins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n}\r\n\r\nif (S.frame) {\r\n document.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\r\n });\r\n}\r\nif (S.mat === 'framed') {\r\n document.getElementById('pme-poster').classList.add('is-framed');\r\n}\r\n\r\nrenderSizes();\r\nsetTimeout(scaleText, 100);\r\n\r\n} \/\/ end initEvents\r\n\r\ninitEvents();\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Baggage Tag Editor Texte Stil Gr\u00f6\u00dfe Texte Stil Gr\u00f6\u00dfe Texte Passe die Details deines Kofferanh\u00e4ngers an. Flughafencode Ort Flugdatum Passagiername Stil W\u00e4hle eine Farbvariante f\u00fcr deinen Anh\u00e4nger. Design Royal Blue Ivory Sunflower Green Apple Black Candy Pink Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material PostkartePosterGerahmtes PosterLeinwand Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 29,99 \u20ac 14,99 \u20ac In […]<\/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-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":2249,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2158\/revisions\/2249"}],"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}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBaggage Tag Editor<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Poppins:wght@400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{overflow-x:hidden;}\r\n.pme{display:flex;width:100vw;height:100%;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#ffffff;}\r\n.pme-nav{width:64px;min-width:64px;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;}\r\n.pme-nav-btn{width:52px;height:56px;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#888;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.15s;}\r\n.pme-nav-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}\r\n.pme-nav-btn.active{color:#fff;background:rgba(255,255,255,0.12);}\r\n.pme-nav-btn svg{width:20px;height:20px;}\r\n.pme-panel{width:416px;min-width:416px;background:#e7e7e7;border-right:1px solid #e8e8e8;overflow-y:auto;display:flex;flex-direction:column;}\r\n.pme-section{display:none;padding:24px 24px 32px;}\r\n.pme-section.active{display:block;}\r\n.pme-title{font-size:22px;font-weight:600;margin-bottom:6px;}\r\n.pme-desc{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5;}\r\n.pme-lbl{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#1a1a1a;margin-bottom:10px;margin-top:20px;display:block;}\r\n\r\n.pme-field{margin-bottom:14px;}\r\n.pme-field label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:#999;margin-bottom:6px;}\r\n.pme-field input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n#inp-code {text-transform: uppercase;}\r\n\r\n.pme-pins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}\r\n.pme-pin{border:2px solid transparent;border-radius:12px;padding:14px 8px 10px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all 0.15s;}\r\n.pme-pin:hover{border:2px solid #aaa;}\r\n.pme-pin.active{border:2px solid #1a1a1a;}\r\n.pme-pin .tag-icon-circle {width: 34px; height: 34px; border-radius: 50%; border: 9px solid; box-shadow: 0 0 0 1px #1a1a1a; transition: transform 0.2s ease;}\r\n.pme-pin:hover .tag-icon-circle {transform: scale(1.08);}\r\n.pme-pin span{font-size:11px;color:#444;font-weight:500;text-align:center;line-height:1.2;}\r\n\r\n.pme-canvas{flex:1;min-width:0;min-height:0;background:#F9F6F0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;align-self:stretch;}\r\n.pme-outer{position:relative;}\r\n\r\n\/* ORIGINAL POSTER STYLES *\/\r\n.pme-poster{position:relative;display:flex;flex-direction:column;box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); overflow:hidden; background-size:100% 100%; background-position:center; background-repeat:no-repeat; background-color:#fff; transition: background-image 0.3s ease;}\r\n\r\n.tag-code { position: absolute; top: 18%; left: 12.5%; width: 75%; height: 18%; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 115px; font-weight: 700; line-height: 1; font-family: 'Inter', sans-serif; transform-origin: center center; }\r\n.tag-code span { display: block; }\r\n\r\n.tag-location { position: absolute; top: 37.5%; left: 12.5%; width: 75%; height: 6%; display: flex; align-items: center; justify-content: center; }\r\n.tag-location span { font-size: 26px; font-weight: 700; font-family: 'Inter', sans-serif; letter-spacing: 0.02em; white-space: nowrap; transform-origin: center; display: inline-block; line-height: 1;}\r\n\r\n.tag-box-val { position: absolute; left: 33.5%; width: 46.5%; height: 8.5%; display: flex; align-items: center; justify-content: center; letter-spacing: 0.03em; }\r\n#box-date-val { top: 50.2%; }\r\n#box-name-val { top: 60.5%; }\r\n.tag-box-val span { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 24px; white-space: nowrap; transform-origin: center center; display: inline-block; line-height: 1; }\r\n\r\n.pme-dimr{position:absolute;right:-22px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;}\r\n.pme-dimr span{writing-mode:vertical-rl;font-size:11px;color:#aaa;white-space:nowrap;}\r\n.pme-dimb{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;}\r\n.pme-dimb span{font-size:11px;color:#aaa;}\r\n\r\n.pme-bar{background:#1a1a1a;display:flex;align-items:center;padding:16px 24px;gap:12px;margin-top:auto;}\r\n.pme-prices{display:flex;align-items:baseline;gap:6px;}\r\n.pme-old{font-size:12px;color:#888;text-decoration:line-through;}\r\n.pme-new{font-size:17px;font-weight:600;color:#fff;}\r\n.pme-cart{background:#7E5AF0;color:#ffffff;border:none;border-radius:25px;padding:10px 14px;font-size:18px;font-weight:400;font-family:'Poppins',sans-serif;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.15s,color 0.15s,border-color 0.15s;}\r\n.pme-cart:hover{background:#632ED3!important;color:#ffffff!important;border:none!important;}\r\n\r\n#size-dropdown,#mat-dropdown{position:relative;margin-bottom:14px;}\r\n.dd-selected{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}\r\n.dd-options{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);}\r\n\r\n.pme-frame{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px 4px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff;font-family:'DM Sans',sans-serif;color:#1a1a1a;transition:border 0.15s;}\r\n.pme-frame:hover,.pme-frame.active{border:2.5px solid #1a1a1a!important;background:#fff!important;color:#1a1a1a!important;}\r\n.pme-poster.is-framed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 3px 18px rgba(0,0,0,0.25);pointer-events:none;z-index:20;}\r\n\r\n@media(max-width:768px){\r\n .pme{flex-direction:column; height:auto!important; min-height:100vh;}\r\n .pme-nav{display:none;}\r\n .pme-panel{width:100%!important; min-width:0!important; border-right:none; border-top:1px solid #e8e8e8; max-height:none!important; height:auto!important; overflow-y:visible!important; order:3;}\r\n .pme-canvas{order:1; flex:none!important; height:65vh!important; min-height:380px;}\r\n .pme-mobnav{display:flex!important; order:2; height:71px!important; flex:0 0 71px!important;}\r\n .pme-section{padding:16px 16px 24px;}\r\n}\r\n\r\n.pme-mobnav{display:none;width:100%;background:#1a1a1a;overflow-x:auto;scrollbar-width:none;}\r\n.pme-mobnav::-webkit-scrollbar{display:none;}\r\n.pme-mobbtn{flex:1;min-width:60px;height:71px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#888;font-size:14px;font-family:'DM Sans',sans-serif;}\r\n.pme-mobbtn.active{color:#fff;}\r\n.pme-mobbtn svg{width:24px;height:24px;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pme\" id=\"pme-root\">\r\n <nav class=\"pme-nav\">\r\n <button class=\"pme-nav-btn active\" data-panel=\"labels\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"style\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n <\/button>\r\n <button class=\"pme-nav-btn\" data-panel=\"size\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n <\/button>\r\n <\/nav>\r\n\r\n <div class=\"pme-mobnav\">\r\n <button class=\"pme-mobbtn active\" data-panel=\"labels\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n <\/button>\r\n <button class=\"pme-mobbtn\" data-panel=\"style\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n <\/button>\r\n <button class=\"pme-mobbtn\" data-panel=\"size\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"pme-panel\">\r\n \r\n <div class=\"pme-section active\" id=\"sec-labels\">\r\n <div class=\"pme-title\">Texte<\/div>\r\n <div class=\"pme-desc\">Passe die Details deines Kofferanh\u00e4ngers an.<\/div>\r\n \r\n <span class=\"pme-lbl\">Flughafencode<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-code\" maxlength=\"3\" value=\"BKK\" placeholder=\"Z.B. BKK\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Ort<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-loc\" value=\"BANGKOK\" placeholder=\"Stadt \/ Flughafen\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Flugdatum<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-date\" value=\"12 - 08 - 2024\" placeholder=\"TT - MM - JJJJ\"\/><\/div>\r\n \r\n <span class=\"pme-lbl\">Passagiername<\/span>\r\n <div class=\"pme-field\"><input type=\"text\" id=\"inp-name\" value=\"LILY ADAMS & MIKE BARNS\" placeholder=\"Name\"\/><\/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 eine Farbvariante f\u00fcr deinen Anh\u00e4nger.<\/div>\r\n\r\n <span class=\"pme-lbl\">Design<\/span>\r\n <div class=\"pme-pins\">\r\n <div class=\"pme-pin active\" data-bg=\"#c9d6dc\" data-fg=\"#3648ac\" data-file=\"Royal-Blue\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #c9d6dc; border-color: #3648ac;\"><\/div>\r\n <span>Royal Blue<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#e0ceb8\" data-fg=\"#fcf9e5\" data-file=\"Ivory\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #e0ceb8; border-color: #fcf9e5;\"><\/div>\r\n <span>Ivory<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#f7bf3d\" data-fg=\"#f7285a\" data-file=\"Sunflower\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #f7bf3d; border-color: #f7285a;\"><\/div>\r\n <span>Sunflower<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#42c053\" data-fg=\"#f7e946\" data-file=\"Green-Apple\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #42c053; border-color: #f7e946;\"><\/div>\r\n <span>Green Apple<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#000000\" data-fg=\"#ffffff\" data-file=\"Black\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #000000; border-color: #ffffff;\"><\/div>\r\n <span>Black<\/span>\r\n <\/div>\r\n <div class=\"pme-pin\" data-bg=\"#ffc0cb\" data-fg=\"#f7285a\" data-file=\"Candy-Pink\">\r\n <div class=\"tag-icon-circle\" style=\"background-color: #ffc0cb; border-color: #f7285a;\"><\/div>\r\n <span>Candy Pink<\/span>\r\n <\/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 und Gr\u00f6\u00dfe.<\/div>\r\n <span class=\"pme-lbl\">Material<\/span>\r\n <select id=\"sel-mat\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;background:#fafafa;margin-bottom:14px;cursor:pointer;appearance:auto;\">\r\n <option value=\"postcard\">Postkarte<\/option>\r\n <option value=\"poster\" selected>Poster<\/option>\r\n <option value=\"framed\">Gerahmtes Poster<\/option>\r\n <option value=\"canvas\">Leinwand<\/option>\r\n <\/select>\r\n \r\n <div id=\"frame-opt-wrap\" style=\"display:none;margin-bottom:14px;\">\r\n <span class=\"pme-lbl\">Rahmenfarbe<\/span>\r\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\r\n <button class=\"pme-frame active\" data-frame=\"black\">Schwarz<\/button>\r\n <button class=\"pme-frame\" data-frame=\"white\">Wei\u00df<\/button>\r\n <button class=\"pme-frame\" data-frame=\"wood\">Holz<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"pme-lbl\">Gr\u00f6\u00dfe<\/span>\r\n <div id=\"size-dropdown\" style=\"position:relative;margin-bottom:14px;\">\r\n <div id=\"size-selected\" style=\"width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;background:#fafafa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;\">\r\n <span id=\"size-selected-text\"><\/span>\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 4l4 4 4-4\" stroke=\"#888\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/div>\r\n <div id=\"size-options\" style=\"display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:200;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pme-bar\">\r\n <div class=\"pme-prices\">\r\n <span class=\"pme-old\" id=\"p-old\">29,99 \u20ac<\/span>\r\n <span class=\"pme-new\" id=\"p-new\">14,99 \u20ac<\/span>\r\n <\/div>\r\n <button class=\"pme-cart\" id=\"btn-cart\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 001.99 1.61h9.72a2 2 0 001.99-1.61L23 6H6\"\/><\/svg>\r\n In den Warenkorb\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n <div class=\"pme-outer\" id=\"pme-outer\">\r\n \r\n <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n <div class=\"tag-code\" id=\"out-code\">\r\n <span>B<\/span><span>K<\/span><span>K<\/span>\r\n <\/div>\r\n <div class=\"tag-location\"><span id=\"out-loc\">BANGKOK<\/span><\/div>\r\n \r\n <div class=\"tag-box-val\" id=\"box-date-val\"><span id=\"out-date\">12 - 08 - 2024<\/span><\/div>\r\n <div class=\"tag-box-val\" id=\"box-name-val\"><span id=\"out-name\">LILY ADAMS & MIKE BARNS<\/span><\/div>\r\n <\/div>\r\n \r\n <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\nvar SIZES = {\r\n postcard: [{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n poster: [{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n framed: [{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n canvas: [{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\n\/\/ AUTO-COMPLETE DICTIONARY\r\nvar AIRPORTS = {\r\n \"MUC\": \"M\u00dcNCHEN\", \"FRA\": \"FRANKFURT\", \"BER\": \"BERLIN\", \"DUS\": \"D\u00dcSSELDORF\", \r\n \"HAM\": \"HAMBURG\", \"STR\": \"STUTTGART\", \"CGN\": \"K\u00d6LN\", \"NUE\": \"N\u00dcRNBERG\",\r\n \"HAJ\": \"HANNOVER\", \"BRE\": \"BREMEN\", \"LEJ\": \"LEIPZIG\",\r\n \"VIE\": \"WIEN\", \"SZG\": \"SALZBURG\", \"INN\": \"INNSBRUCK\",\r\n \"ZRH\": \"Z\u00dcRICH\", \"GVA\": \"GENF\", \"BSL\": \"BASEL\",\r\n \"LHR\": \"LONDON\", \"LGW\": \"LONDON\", \"STN\": \"LONDON\", \"LTN\": \"LONDON\",\r\n \"CDG\": \"PARIS\", \"ORY\": \"PARIS\", \r\n \"AMS\": \"AMSTERDAM\", \r\n \"MAD\": \"MADRID\", \"BCN\": \"BARCELONA\", \"PMI\": \"PALMA DE MALLORCA\", \"AGP\": \"MALAGA\",\r\n \"FCO\": \"ROM\", \"MXP\": \"MAILAND\", \"LIN\": \"MAILAND\", \"BGY\": \"MAILAND\", \"VCE\": \"VENEDIG\", \"NAP\": \"NEAPEL\",\r\n \"LIS\": \"LISSABON\", \"OPO\": \"PORTO\",\r\n \"ATH\": \"ATHEN\", \"IST\": \"ISTANBUL\", \"SAW\": \"ISTANBUL\",\r\n \"JFK\": \"NEW YORK\", \"EWR\": \"NEWARK\", \"LGA\": \"NEW YORK\", \r\n \"LAX\": \"LOS ANGELES\", \"SFO\": \"SAN FRANCISCO\", \"ORD\": \"CHICAGO\", \"MDW\": \"CHICAGO\",\r\n \"MIA\": \"MIAMI\", \"MCO\": \"ORLANDO\", \"ATL\": \"ATLANTA\", \"DFW\": \"DALLAS\", \r\n \"LAS\": \"LAS VEGAS\", \"SEA\": \"SEATTLE\", \"DEN\": \"DENVER\", \"BOS\": \"BOSTON\",\r\n \"DXB\": \"DUBAI\", \"AUH\": \"ABU DHABI\", \"DOH\": \"DOHA\",\r\n \"SIN\": \"SINGAPUR\", \"HKG\": \"HONGKONG\", \"BKK\": \"BANGKOK\", \"KUL\": \"KUALA LUMPUR\",\r\n \"HND\": \"TOKIO\", \"NRT\": \"TOKIO\", \"ICN\": \"SEOUL\", \"PEK\": \"PEKING\", \"PVG\": \"SHANGHAI\",\r\n \"SYD\": \"SYDNEY\", \"MEL\": \"MELBOURNE\", \"AKL\": \"AUCKLAND\",\r\n \"YYZ\": \"TORONTO\", \"YVR\": \"VANCOUVER\", \"YUL\": \"MONTREAL\",\r\n \"GRU\": \"SAO PAULO\", \"GIG\": \"RIO DE JANEIRO\", \"EZE\": \"BUENOS AIRES\", \"BOG\": \"BOGOTA\",\r\n \"MEX\": \"MEXIKO-STADT\", \"CUN\": \"CANCUN\",\r\n \"JNB\": \"JOHANNESBURG\", \"CPT\": \"KAPSTADT\", \"CAI\": \"KAIRO\"\r\n};\r\n\r\nvar S = {code:'BKK', loc:'BANGKOK', date:'12 - 08 - 2024', name:'LILY ADAMS & MIKE BARNS', mat:'poster', sizeIdx:1, styleIndex:0, frame:'black'};\r\n\r\nfunction updateURL() {\r\n var p = new URLSearchParams();\r\n p.set('mat', S.mat);\r\n p.set('size', S.sizeIdx);\r\n p.set('style', S.styleIndex);\r\n if (S.mat === 'framed') p.set('frame', S.frame);\r\n var c = document.getElementById('inp-code'); if (c && c.value) p.set('code', c.value.toUpperCase());\r\n var l = document.getElementById('inp-loc'); if (l && l.value) p.set('loc', l.value);\r\n var d = document.getElementById('inp-date'); if (d && d.value) p.set('fdate', d.value);\r\n var n = document.getElementById('inp-name'); if (n && n.value) p.set('pname', n.value);\r\n history.replaceState(null, '', '?' + p.toString());\r\n}\r\n\r\nfunction updatePosterBackground() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx];\r\n if (!s) return;\r\n var activePin = document.querySelectorAll('.pme-pin')[S.styleIndex];\r\n var designFile = activePin ? activePin.getAttribute('data-file') : 'Royal-Blue';\r\n \r\n var sizeLabel = s.l;\r\n if (sizeLabel === '10x15cm') {\r\n sizeLabel = '40x60cm';\r\n }\r\n \r\n var imgUrl = 'https:\/\/zulumaps.com\/wp-content\/uploads\/2026\/04\/Baggage-Tag_' + sizeLabel + '_' + designFile + '.png';\r\n \r\n var poster = document.getElementById('pme-poster');\r\n poster.style.backgroundImage = 'url(' + imgUrl + ')';\r\n poster.style.color = activePin ? activePin.getAttribute('data-fg') : '#3648ac';\r\n}\r\n\r\nfunction renderCode(val) {\r\n var html = '';\r\n for(var i=0; i<val.length; i++) {\r\n html += '<span>' + val[i] + '<\/span>';\r\n }\r\n document.getElementById('out-code').innerHTML = html;\r\n scaleText(); \r\n}\r\n\r\n\/\/ ORIGINAL JS SCALE FUNCTION\r\nfunction scaleText() {\r\n ['out-date', 'out-name', 'out-loc'].forEach(function(id) {\r\n var el = document.getElementById(id);\r\n if (!el) return;\r\n el.style.transform = 'none'; \r\n var parent = el.parentElement;\r\n var availableWidth = parent.clientWidth - 24; \r\n var textWidth = el.offsetWidth;\r\n if (textWidth > availableWidth && textWidth > 0) {\r\n var scale = availableWidth \/ textWidth;\r\n el.style.transform = 'scale(' + scale + ')';\r\n }\r\n });\r\n\r\n var codeContainer = document.getElementById('out-code');\r\n if(codeContainer) {\r\n codeContainer.style.transform = 'none';\r\n var availableW = codeContainer.clientWidth;\r\n var textW = codeContainer.scrollWidth;\r\n if (textW > availableW && textW > 0) {\r\n var scale = availableW \/ textW;\r\n codeContainer.style.transform = 'scale(' + scale + ')';\r\n }\r\n }\r\n}\r\n\r\nfunction initEvents() {\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n var panel = this.getAttribute('data-panel');\r\n document.querySelectorAll('.pme-section').forEach(function(s) { s.classList.remove('active'); });\r\n document.querySelectorAll('.pme-nav-btn').forEach(function(b) { b.classList.remove('active'); });\r\n document.querySelectorAll('.pme-mobbtn').forEach(function(b) { b.classList.remove('active'); });\r\n document.getElementById('sec-' + panel).classList.add('active');\r\n document.querySelectorAll('[data-panel=\"' + panel + '\"]').forEach(function(b) { b.classList.add('active'); });\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.pme-pin').forEach(function(pin, index) {\r\n pin.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-pin').forEach(function(p) { p.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.styleIndex = index;\r\n updatePosterBackground();\r\n updateURL();\r\n });\r\n});\r\n\r\ndocument.getElementById('inp-code').addEventListener('input', function() {\r\n this.value = this.value.toUpperCase();\r\n var codeVal = this.value;\r\n \r\n renderCode(codeVal);\r\n \r\n \/\/ AUTO-COMPLETE LOCATION\r\n if (codeVal.length === 3 && AIRPORTS[codeVal]) {\r\n var locInput = document.getElementById('inp-loc');\r\n locInput.value = AIRPORTS[codeVal];\r\n document.getElementById('out-loc').textContent = AIRPORTS[codeVal];\r\n scaleText();\r\n }\r\n \r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('inp-loc').addEventListener('input', function() {\r\n document.getElementById('out-loc').textContent = this.value;\r\n scaleText(); \r\n updateURL();\r\n});\r\ndocument.getElementById('inp-date').addEventListener('input', function() {\r\n document.getElementById('out-date').textContent = this.value;\r\n scaleText();\r\n updateURL();\r\n});\r\ndocument.getElementById('inp-name').addEventListener('input', function() {\r\n document.getElementById('out-name').textContent = this.value;\r\n scaleText();\r\n updateURL();\r\n});\r\n\r\ndocument.getElementById('sel-mat').addEventListener('change', function() {\r\n S.mat = this.value;\r\n var sizes = SIZES[S.mat] || [];\r\n S.sizeIdx = 0;\r\n for (var i = 0; i < sizes.length; i++) {\r\n if (sizes[i].l === '30x40cm') {\r\n S.sizeIdx = i;\r\n break;\r\n }\r\n }\r\n renderSizes();\r\n updateURL();\r\n});\r\n\r\ndocument.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('.pme-frame').forEach(function(b) { b.classList.remove('active'); });\r\n this.classList.add('active');\r\n S.frame = this.getAttribute('data-frame');\r\n updateDims();\r\n updateURL();\r\n });\r\n});\r\n\r\nfunction renderSizes() {\r\n var sizes = SIZES[S.mat] || [];\r\n var opts = document.getElementById('size-options');\r\n var selText = document.getElementById('size-selected-text');\r\n var selDiv = document.getElementById('size-selected');\r\n var optsDiv = document.getElementById('size-options');\r\n \r\n var frameWrap = document.getElementById('frame-opt-wrap');\r\n if (frameWrap) {\r\n frameWrap.style.display = (S.mat === 'framed') ? 'block' : 'none';\r\n }\r\n\r\n function buildLabel(s) {\r\n return s.l + '\\u00a0\\u00a0<s style=\"color:#999\">' + s.orig.toFixed(2) + '\\u00a0\\u20ac<\/s>\\u00a0\\u00a0<span style=\"color:#e00\">' + s.p.toFixed(2) + '\\u00a0\\u20ac<\/span>';\r\n }\r\n\r\n function selectIdx(i) {\r\n S.sizeIdx = i;\r\n selText.innerHTML = buildLabel(sizes[i]);\r\n optsDiv.style.display = 'none';\r\n updatePrice(); updateDims(); updateURL();\r\n }\r\n\r\n opts.innerHTML = sizes.map(function(s, i) {\r\n return '<div class=\"size-opt\" data-idx=\"' + i + '\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">' + buildLabel(s) + '<\/div>';\r\n }).join('');\r\n\r\n opts.querySelectorAll('.size-opt').forEach(function(el) {\r\n el.addEventListener('mouseenter', function() { this.style.background='#f5f5f5'; });\r\n el.addEventListener('mouseleave', function() { this.style.background=''; });\r\n el.addEventListener('click', function() { selectIdx(parseInt(this.getAttribute('data-idx'))); });\r\n });\r\n\r\n selDiv.onclick = function(e) {\r\n e.stopPropagation();\r\n optsDiv.style.display = optsDiv.style.display === 'none' ? 'block' : 'none';\r\n };\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];\r\n if (!s) return;\r\n document.getElementById('p-old').textContent = s.orig.toFixed(2).replace('.', ',') + ' EUR';\r\n document.getElementById('p-new').textContent = s.p.toFixed(2).replace('.', ',') + ' EUR';\r\n}\r\n\r\nfunction updateDims() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx];\r\n if (!s) return;\r\n document.getElementById('dim-w').textContent = s.w + ' cm';\r\n document.getElementById('dim-h').textContent = s.h + ' cm';\r\n var BASE = 504;\r\n var pw = s.w, ph = s.h;\r\n var longer = Math.max(pw, ph), shorter = Math.min(pw, ph);\r\n var baseW = Math.round(BASE * shorter \/ longer);\r\n var baseH = BASE;\r\n var poster = document.getElementById('pme-poster');\r\n\r\n if (S.mat === 'framed') {\r\n var thicknessMm = (s.l === '13x18cm') ? 10 : 14;\r\n var framePx = thicknessMm * (BASE \/ (longer * 10));\r\n\r\n poster.style.borderWidth = framePx + 'px';\r\n poster.style.borderStyle = 'solid';\r\n\r\n if (S.frame === 'wood') {\r\n poster.style.borderColor = '#d7c5b3';\r\n poster.style.borderImage = \"url(\\\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.4' numOctaves='2' result='noise'\/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0 0 0 0.15 0' in='noise'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' fill='%23d7c5b3'\/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\\\") 10 stretch\";\r\n } else if (S.frame === 'white') {\r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#ffffff';\r\n } else { \r\n poster.style.borderImage = \"\";\r\n poster.style.borderColor = '#1a1a1a';\r\n }\r\n \r\n poster.style.width = (baseW + framePx * 2) + 'px';\r\n poster.style.height = (baseH + framePx * 2) + 'px';\r\n poster.classList.add('is-framed');\r\n } else {\r\n poster.style.border = '';\r\n poster.style.borderImage = '';\r\n poster.style.width = baseW + 'px';\r\n poster.style.height = baseH + 'px';\r\n poster.classList.remove('is-framed');\r\n }\r\n\r\n updatePosterBackground();\r\n setTimeout(function(){ scaleText(); fitPoster(); }, 60);\r\n}\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click', function() {\r\n var s = (SIZES[S.mat] || [])[S.sizeIdx] || {};\r\n var codeVal = document.getElementById('inp-code').value || 'BKK';\r\n\r\n var cartData = {\r\n action: 'uwa_add_to_cart',\r\n \/\/ DEUTSCHE PRODUKT-ID \r\n product_id: '2216',\r\n poster_title: codeVal.toUpperCase(),\r\n poster_subtitle: document.getElementById('out-loc').textContent,\r\n poster_date: document.getElementById('out-date').textContent,\r\n poster_passenger: document.getElementById('out-name').textContent,\r\n poster_style: S.styleIndex,\r\n poster_material: S.mat,\r\n poster_frame: (S.mat === 'framed') ? S.frame : '',\r\n poster_size: s.l || '',\r\n poster_orientation: 'portrait',\r\n poster_price: s.p || '',\r\n poster_original_price: s.orig || ''\r\n };\r\n\r\n var btn = this;\r\n var originalHTML = btn.innerHTML;\r\n btn.innerHTML = 'Wird bearbeitet...';\r\n\r\n \/\/ HIER PASSIERT DIE MAGIE: Der onclone-Fix korrigiert den html2canvas-Bug,\r\n \/\/ OHNE das Design deines Live-Editors auf der Seite kaputtzumachen!\r\n html2canvas(document.getElementById('pme-poster'), {\r\n useCORS: true,\r\n scale: 2,\r\n backgroundColor: null,\r\n onclone: function(clonedDoc) {\r\n var clonedPoster = clonedDoc.getElementById('pme-poster');\r\n if(!clonedPoster) return;\r\n \r\n \/\/ 1. Repariert den \"B K K\" Abstand, da html2canvas Flexbox-'gap' oft ignoriert\r\n var codeEl = clonedPoster.querySelector('#out-code');\r\n if (codeEl) {\r\n var spans = codeEl.querySelectorAll('span');\r\n spans.forEach(function(span, index) {\r\n if(index > 0) span.style.marginLeft = '4px';\r\n });\r\n }\r\n\r\n \/\/ 2. Ersetzt \"transform: scale\" durch echte Schriftgr\u00f6\u00dfen f\u00fcr das Vorschaubild\r\n ['out-date', 'out-name', 'out-loc', 'out-code'].forEach(function(id) {\r\n var liveEl = document.getElementById(id);\r\n var clonedEl = clonedPoster.querySelector('#' + id);\r\n if (!liveEl || !clonedEl) return;\r\n \r\n var transform = liveEl.style.transform;\r\n if (transform && transform.indexOf('scale') !== -1) {\r\n var scaleMatch = transform.match(\/scale\\(([^)]+)\\)\/);\r\n if (scaleMatch && scaleMatch[1]) {\r\n var scale = parseFloat(scaleMatch[1]);\r\n clonedEl.style.transform = 'none';\r\n \r\n var baseSize = 24;\r\n if(id === 'out-loc') baseSize = 26;\r\n if(id === 'out-code') baseSize = 115;\r\n \r\n if(id === 'out-code') {\r\n var spans = clonedEl.querySelectorAll('span');\r\n spans.forEach(function(s) { \r\n s.style.fontSize = Math.floor(baseSize * scale) + 'px'; \r\n });\r\n } else {\r\n clonedEl.style.fontSize = Math.floor(baseSize * scale) + 'px';\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }).then(function(canvas) {\r\n cartData.poster_thumbnail = canvas.toDataURL('image\/jpeg', 0.90);\r\n sendToCart(cartData);\r\n }).catch(function(err) {\r\n console.error('Canvas Generation Error', err);\r\n sendToCart(cartData);\r\n });\r\n\r\n function sendToCart(data) {\r\n var body = Object.keys(data).map(function(k) {\r\n return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);\r\n }).join('&');\r\n fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n headers: {'Content-Type': 'application\/x-www-form-urlencoded'},\r\n body: body\r\n }).then(function(r) { return r.json(); })\r\n .then(function(res) {\r\n if (res.success) { \r\n window.location.href = 'https:\/\/zulumaps.com\/de\/warenkorb\/'; \r\n } else { \r\n btn.innerHTML = originalHTML; \r\n console.error(\"Cart Error:\", res);\r\n alert(\"Konnte nicht in den Warenkorb gelegt werden. Hast du die richtige deutsche Produkt-ID hinterlegt?\");\r\n }\r\n }).catch(function(err) {\r\n btn.innerHTML = originalHTML;\r\n console.error(\"Fetch Error:\", err);\r\n alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n });\r\n }\r\n});\r\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 scaleText(); \r\n}\r\n\r\nfunction setHeight() {\r\n var el = document.getElementById('pme-root');\r\n if (!el) return;\r\n var isMob = window.innerWidth <= 768;\r\n if (isMob) {\r\n el.style.height = 'auto'; \r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = '';\r\n if (nav) nav.style.height = '';\r\n if (canvas) canvas.style.height = '';\r\n } else {\r\n var r = el.getBoundingClientRect();\r\n var h = Math.max(window.innerHeight - r.top, 500);\r\n el.style.height = h + 'px';\r\n var panel = document.querySelector('.pme-panel');\r\n var nav = document.querySelector('.pme-nav');\r\n var canvas = document.getElementById('pme-canvas');\r\n if (panel) panel.style.height = h + 'px';\r\n if (nav) nav.style.height = h + 'px';\r\n if (canvas) canvas.style.height = h + 'px';\r\n }\r\n setTimeout(fitPoster, 100);\r\n}\r\n\r\nwindow.addEventListener('load', setHeight);\r\nwindow.addEventListener('resize', setHeight);\r\nsetTimeout(setHeight, 300);\r\n\r\nvar p = new URLSearchParams(window.location.search);\r\nif (p.has('mat')) S.mat = p.get('mat');\r\nif (p.has('size')) S.sizeIdx = parseInt(p.get('size')) || 0;\r\nif (p.has('style')) S.styleIndex = parseInt(p.get('style')) || 0;\r\nif (p.has('frame')) S.frame = p.get('frame');\r\nif (p.has('code')) document.getElementById('inp-code').value = p.get('code');\r\nif (p.has('loc')) document.getElementById('inp-loc').value = p.get('loc');\r\nif (p.has('fdate')) document.getElementById('inp-date').value = p.get('fdate');\r\nif (p.has('pname')) document.getElementById('inp-name').value = p.get('pname');\r\n\r\nvar ms = document.getElementById('sel-mat');\r\nif (ms) ms.value = S.mat;\r\n\r\nrenderCode(document.getElementById('inp-code').value);\r\ndocument.getElementById('out-loc').textContent = document.getElementById('inp-loc').value;\r\ndocument.getElementById('out-date').textContent = document.getElementById('inp-date').value;\r\ndocument.getElementById('out-name').textContent = document.getElementById('inp-name').value;\r\n\r\nvar pins = document.querySelectorAll('.pme-pin');\r\nif (pins.length > S.styleIndex) {\r\n var activePin = pins[S.styleIndex];\r\n pins.forEach(function(p) { p.classList.remove('active'); });\r\n activePin.classList.add('active');\r\n}\r\n\r\nif (S.frame) {\r\n document.querySelectorAll('.pme-frame').forEach(function(btn) {\r\n btn.classList.toggle('active', btn.getAttribute('data-frame') === S.frame);\r\n });\r\n}\r\nif (S.mat === 'framed') {\r\n document.getElementById('pme-poster').classList.add('is-framed');\r\n}\r\n\r\nrenderSizes();\r\nsetTimeout(scaleText, 100);\r\n\r\n} \/\/ end initEvents\r\n\r\ninitEvents();\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Baggage Tag Editor Texte Stil Gr\u00f6\u00dfe Texte Stil Gr\u00f6\u00dfe Texte Passe die Details deines Kofferanh\u00e4ngers an. Flughafencode Ort Flugdatum Passagiername Stil W\u00e4hle eine Farbvariante f\u00fcr deinen Anh\u00e4nger. Design Royal Blue Ivory Sunflower Green Apple Black Candy Pink Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material PostkartePosterGerahmtes PosterLeinwand Rahmenfarbe Schwarz Wei\u00df Holz Gr\u00f6\u00dfe 29,99 \u20ac 14,99 \u20ac In […]<\/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-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":2249,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2158\/revisions\/2249"}],"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}]}}