{"id":2166,"date":"2026-04-19T06:25:51","date_gmt":"2026-04-19T04:25:51","guid":{"rendered":"https:\/\/zulumaps.com\/star-map\/"},"modified":"2026-04-28T20:12:08","modified_gmt":"2026-04-28T18:12:08","slug":"star-map","status":"publish","type":"page","link":"https:\/\/zulumaps.com\/de\/star-map\/","title":{"rendered":"Star Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2166\" class=\"elementor elementor-2166 elementor-734\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db3b44b e-con-full e-flex e-con e-parent\" data-id=\"db3b44b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d8fc1a elementor-widget elementor-widget-html\" data-id=\"0d8fc1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=Rubik:wght@300;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.pme-field{margin-bottom:14px;}\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;background:#fff;}\r\n.pme-field input:focus{border-color:#1a1a1a;}\r\n.pme-search{position:relative;margin-bottom:8px;}\r\n.pme-search input{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px 10px 36px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;background:#fafafa;}\r\n.pme-search input:focus{border-color:#1a1a1a;background:#fff;}\r\n.pme-sic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none;}\r\n.pme-results{display:none;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:4px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:100;position:relative;}\r\n.pme-results.show{display:block;}\r\n.pme-ri{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f0f0;}\r\n.pme-ri:last-child{border-bottom:none;}\r\n.pme-ri:hover{background:#f8f8f8;}\r\n.pme-ri strong{display:block;font-weight:500;}\r\n.pme-ri span{color:#888;font-size:12px;}\r\n.pme-pins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}\r\n.pme-pin{border:1.5px solid #d0d0d0;border-radius:10px;padding:10px 6px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border 0.15s;overflow:hidden;}\r\n.pme-pin:hover,.pme-pin.active{border:3px solid #1a1a1a;}\r\n.pme-pin span{font-size:11px;font-weight:500;color:#333;}\r\n.pme-or{border:1.5px solid #d0d0d0;border-radius:8px;padding:12px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:#fff!important;font-family:'DM Sans',sans-serif;color:#1a1a1a!important;transition:border 0.15s;}\r\n.pme-or:hover,.pme-or.active{border:2.5px solid #1a1a1a!important;}\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\/* MAPIFUL STYLE POSTER ADJUSTMENTS *\/\r\n.pme-poster{background:#fff;padding:14px;position:relative;display:flex;flex-direction:column;border:1px solid hsl(0,0%,85%);box-shadow:0 6px 40px hsl(0,0%,60%,0.45),0 2px 12px hsl(0,0%,50%,0.25); box-sizing:border-box;}\r\n.pme-poster-inner{flex:1;background:#1a2a3e;display:flex;flex-direction:column;align-items:center;position:relative;width:100%;overflow:hidden;}\r\n.star-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:24px 20px 0;width:100%;}\r\n.star-wrap canvas{display:block;}\r\n\r\n\/* MAPIFUL STYLE FOOTER ADJUSTMENTS *\/\r\n.pme-footer{background:transparent;padding:15px 14px 25px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;border-top:none;font-family:'Rubik',sans-serif;position:relative;z-index:10;width:100%;}\r\n.pme-h{font-size:17px;font-weight:700;letter-spacing:0.15em;text-align:center;text-transform:uppercase;color:#fff;margin-bottom:4px;}\r\n.pme-dt{font-size:9px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#fff;}\r\n.pme-tg{font-size:8px;font-weight:400;letter-spacing:0.12em;text-align:center;text-transform:uppercase;color:#fff;margin-top:14px;opacity:0.85;}\r\n.pme-coords{font-size:7px;font-weight:400;letter-spacing:0.15em;text-align:center;text-transform:uppercase;color:#fff;margin-top:4px;opacity:0.85;}\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.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#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=\"moment\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>Moment\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"labels\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>Texte\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"style\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Stil\r\n    <\/button>\r\n    <button class=\"pme-nav-btn\" data-panel=\"size\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg>Gr\u00f6\u00dfe\r\n    <\/button>\r\n  <\/nav>\r\n\r\n  <div class=\"pme-mobnav\">\r\n    <button class=\"pme-mobbtn active\" data-panel=\"moment\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>Moment<\/button>\r\n    <button class=\"pme-mobbtn\" data-panel=\"labels\"><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<\/button>\r\n    <button class=\"pme-mobbtn\" data-panel=\"style\"><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<\/button>\r\n    <button class=\"pme-mobbtn\" data-panel=\"size\"><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<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"pme-panel\">\r\n    <div class=\"pme-section active\" id=\"sec-moment\">\r\n      <div class=\"pme-title\">Dein Moment<\/div>\r\n      <div class=\"pme-desc\">W\u00e4hle Datum, Uhrzeit und Ort, um den exakten Sternenhimmel deines besonderen Moments zu zeigen.<\/div>\r\n      <span class=\"pme-lbl\">Datum<\/span>\r\n      <div class=\"pme-field\"><input type=\"date\" id=\"inp-date\" value=\"2024-06-15\"\/><\/div>\r\n      <span class=\"pme-lbl\">Uhrzeit<\/span>\r\n      <div class=\"pme-field\"><input type=\"time\" id=\"inp-time\" value=\"22:00\"\/><\/div>\r\n      <span class=\"pme-lbl\">Ort<\/span>\r\n      <div class=\"pme-search\">\r\n        <svg class=\"pme-sic\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\r\n        <input type=\"text\" id=\"pme-sinput\" value=\"Paris, Frankreich\" placeholder=\"Suche nach einer Stadt oder einem Ort...\"\/>\r\n      <\/div>\r\n      <div class=\"pme-results\" id=\"pme-results\"><\/div>\r\n      <input type=\"hidden\" id=\"inp-lat\" value=\"48.8566\"\/>\r\n      <input type=\"hidden\" id=\"inp-lng\" value=\"2.3522\"\/>\r\n    <\/div>\r\n\r\n    <div class=\"pme-section\" id=\"sec-labels\">\r\n      <div class=\"pme-title\">Texte<\/div>\r\n      <div class=\"pme-desc\">Passe den Text auf deinem Sternenkarte-Poster an.<\/div>\r\n      <span class=\"pme-lbl\">\u00dcberschrift<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-h\" value=\"UNSER MOMENT\"\/><\/div>\r\n      <span class=\"pme-lbl\">Unter\u00fcberschrift<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-d\" value=\"Paris, Frankreich\"\/><\/div>\r\n      <span class=\"pme-lbl\">Zusatztext<\/span>\r\n      <div class=\"pme-field\"><input type=\"text\" id=\"inp-t\" value=\"15.06.2024 \u00b7 22:00\"\/><\/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 ein Farbschema f\u00fcr deine Sternenkarte.<\/div>\r\n      <span class=\"pme-lbl\">Design<\/span>\r\n      <div class=\"pme-pins\" id=\"theme-pins\"><\/div>\r\n      <span class=\"pme-lbl\">Sternbildlinien<\/span>\r\n      <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;\">\r\n        <button class=\"pme-or active\" id=\"lines-on\">Anzeigen<\/button>\r\n        <button class=\"pme-or\" id=\"lines-off\">Ausblenden<\/button>\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      <div id=\"mat-dropdown\">\r\n        <div class=\"dd-selected\" id=\"mat-selected\"><span id=\"mat-selected-text\">Poster<\/span><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><\/div>\r\n        <div class=\"dd-options\" id=\"mat-options\"><\/div>\r\n      <\/div>\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\">\r\n        <div class=\"dd-selected\" id=\"size-selected\"><span id=\"size-selected-text\">30x40cm<\/span><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><\/div>\r\n        <div class=\"dd-options\" id=\"size-options\"><\/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\"><\/span>\r\n        <span class=\"pme-new\" id=\"p-new\"><\/span>\r\n      <\/div>\r\n      <button class=\"pme-cart\" id=\"btn-cart\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 001.99 1.61h9.72a2 2 0 001.99-1.61L23 6H6\"\/><\/svg>\r\n        In den Warenkorb\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"pme-canvas\" id=\"pme-canvas\">\r\n    <div class=\"pme-outer\" id=\"pme-outer\">\r\n      <div class=\"pme-poster\" id=\"pme-poster\" style=\"width:360px;height:504px;\">\r\n        <div class=\"pme-poster-inner\" id=\"pme-poster-inner\">\r\n          <div class=\"star-wrap\" id=\"star-wrap\">\r\n            <canvas id=\"star-canvas\"><\/canvas>\r\n          <\/div>\r\n          <div class=\"pme-footer\" id=\"pme-footer\">\r\n            <div class=\"pme-h\" id=\"out-h\">UNSER MOMENT<\/div>\r\n            <div class=\"pme-dt\" id=\"out-d\">PARIS, FRANKREICH<\/div>\r\n            <div class=\"pme-tg\" id=\"out-t\">15.06.2024 \u00b7 22:00<\/div>\r\n            <div class=\"pme-coords\" id=\"out-c\">48.8566\u00b0N \/ 2.3522\u00b0E<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pme-dimr\"><span id=\"dim-h\">40 cm<\/span><\/div>\r\n      <div class=\"pme-dimb\"><span id=\"dim-w\">30 cm<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ \u2500\u2500 THEMES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nvar THEMES = [\r\n  { id:'bw',     name:'B&W',     posterBg:'#ffffff', circleBg:'#ffffff', starCol:'#1a1a1a', lineCol:'#b0b0b0', textCol:'#1a1a1a' },\r\n  { id:'dark',   name:'Dark',    posterBg:'#1a1a1a', circleBg:'#1a1a1a', starCol:'#ffffff', lineCol:'#aaaaaa', textCol:'#ffffff' },\r\n  { id:'mint',   name:'Mint',    posterBg:'#8ecdb8', circleBg:'#8ecdb8', starCol:'#ffffff', lineCol:'#ffffff', textCol:'#ffffff' },\r\n  { id:'gray',   name:'Gray',    posterBg:'#3a3a3a', circleBg:'#3a3a3a', starCol:'#ffffff', lineCol:'#aaaaaa', textCol:'#ffffff' },\r\n  { id:'navy',   name:'Navy',    posterBg:'#1a2b3c', circleBg:'#1a2b3c', starCol:'#ffffff', lineCol:'#ffffff', textCol:'#ffffff' },\r\n  { id:'blush',  name:'Blush',   posterBg:'#f5e8e0', circleBg:'#f5e8e0', starCol:'#2a1a0a', lineCol:'#9a7060', textCol:'#1a1a1a' },\r\n];\r\n\r\nvar SIZES = {\r\n  postcard:[{l:'10x15cm',w:10,h:15,p:2.99,orig:4.99}],\r\n  poster:[{l:'13x18cm',w:13,h:18,p:14.99,orig:24.99},{l:'30x40cm',w:30,h:40,p:20.99,orig:34.99},{l:'40x60cm',w:40,h:60,p:26.99,orig:44.99},{l:'50x70cm',w:50,h:70,p:29.99,orig:49.99},{l:'70x100cm',w:70,h:100,p:47.99,orig:79.99}],\r\n  framed:[{l:'13x18cm',w:13,h:18,p:32.99,orig:54.99},{l:'30x40cm',w:30,h:40,p:44.99,orig:74.99},{l:'50x70cm',w:50,h:70,p:89.99,orig:149.99},{l:'70x100cm',w:70,h:100,p:149.99,orig:249.99}],\r\n  canvas:[{l:'30x40cm',w:30,h:40,p:47.99,orig:79.99},{l:'50x70cm',w:50,h:70,p:83.99,orig:139.99},{l:'70x100cm',w:70,h:100,p:113.99,orig:189.99}]\r\n};\r\n\r\nvar MATS = ['postcard','poster','framed','canvas'];\r\nvar MAT_LABELS = {postcard:'Postkarte',poster:'Poster',framed:'Gerahmtes Poster',canvas:'Leinwand'};\r\n\r\nvar S = {\r\n  mat:'poster', sizeIdx:1,\r\n  themeId:'navy', showLines:true,\r\n  lat:48.8566, lng:2.3522,\r\n  date:'2024-06-15', time:'22:00', frame:'black'\r\n};\r\n\r\nfunction getTheme(){ return THEMES.find(function(t){ return t.id===S.themeId; })||THEMES[0]; }\r\n\r\n\/\/ \u2500\u2500 URL STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var p = new URLSearchParams(window.location.search);\r\n  if(p.get('mat')) S.mat = p.get('mat');\r\n  if(p.get('size')) S.sizeIdx = parseInt(p.get('size'));\r\n  if(p.get('theme')) S.themeId = p.get('theme');\r\n  if(p.get('lat')) S.lat = parseFloat(p.get('lat'));\r\n  if(p.get('lng')) S.lng = parseFloat(p.get('lng'));\r\n  if(p.get('date')){ S.date=p.get('date'); document.getElementById('inp-date').value=S.date; }\r\n  if(p.get('time')){ S.time=p.get('time'); document.getElementById('inp-time').value=S.time; }\r\n  if(p.get('lines')) S.showLines = p.get('lines')!=='0';\r\n  if(p.get('frame')) S.frame = p.get('frame');\r\n  if(p.get('h')) document.getElementById('inp-h').value=decodeURIComponent(p.get('h'));\r\n  if(p.get('d')) document.getElementById('inp-d').value=decodeURIComponent(p.get('d'));\r\n  if(p.get('t')) document.getElementById('inp-t').value=decodeURIComponent(p.get('t'));\r\n})();\r\n\r\nfunction updateURL(){\r\n  var p = new URLSearchParams();\r\n  p.set('mat',S.mat); p.set('size',S.sizeIdx); p.set('theme',S.themeId);\r\n  p.set('lat',S.lat); p.set('lng',S.lng);\r\n  p.set('date',S.date); p.set('time',S.time);\r\n  p.set('lines',S.showLines?'1':'0');\r\n  if(S.mat === 'framed') p.set('frame', S.frame);\r\n  p.set('h',encodeURIComponent(document.getElementById('inp-h').value));\r\n  p.set('d',encodeURIComponent(document.getElementById('inp-d').value));\r\n  p.set('t',encodeURIComponent(document.getElementById('inp-t').value));\r\n  history.replaceState(null,'','?'+p.toString());\r\n}\r\n\r\n\/\/ \u2500\u2500 ASTRONOMY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nvar A_STARS = [];\r\nvar C_LINES = [];\r\nvar dataLoaded = false;\r\nvar dataFailed = false;\r\n\r\nPromise.all([\r\n  fetch('\/wp-content\/uploads\/starmap-data\/stars.6.json').then(r=>r.json()),\r\n  fetch('\/wp-content\/uploads\/starmap-data\/constellations.lines.json').then(r=>r.json())\r\n]).then(function(results){\r\n    \r\n  var starsData = results[0];\r\n  var linesData = results[1];\r\n  \r\n  starsData.features.forEach(function(f){\r\n     A_STARS.push({\r\n        ra: f.geometry.coordinates[0]\/15,\r\n        dec: f.geometry.coordinates[1],\r\n        mag: f.properties.mag\r\n     });\r\n  });\r\n  \r\n  linesData.features.forEach(function(f){\r\n      if(f.geometry.type === 'MultiLineString'){\r\n          f.geometry.coordinates.forEach(function(line){\r\n              C_LINES.push(line.map(function(pt){\r\n                  return {ra: pt[0]\/15, dec: pt[1]};\r\n              }));\r\n          });\r\n      }\r\n  });\r\n  dataLoaded = true;\r\n  drawStarMap();\r\n}).catch(function(e){\r\n  console.error(\"Star Data Failed to Load\", e);\r\n  dataFailed = true;\r\n  drawStarMap();\r\n});\r\n\r\nfunction julianDate(dateStr, timeStr){\r\n  var d = new Date(dateStr+'T'+timeStr+':00Z');\r\n  return d.getTime()\/86400000 + 2440587.5;\r\n}\r\n\r\nfunction starAltAz(ra_h, dec_deg, lat, lng, jd){\r\n  var ra = ra_h*15*Math.PI\/180;\r\n  var dec = dec_deg*Math.PI\/180;\r\n  var latR = lat*Math.PI\/180;\r\n  var T = (jd-2451545.0)\/36525;\r\n  var GST = (280.46061837 + 360.98564736629*(jd-2451545) + 0.000387933*T*T) % 360;\r\n  if(GST<0) GST+=360;\r\n  var LST = ((GST+lng)%360);\r\n  if(LST<0) LST+=360;\r\n  var HA = (LST*Math.PI\/180)-ra;\r\n  var sinAlt = Math.sin(dec)*Math.sin(latR)+Math.cos(dec)*Math.cos(latR)*Math.cos(HA);\r\n  var alt = Math.asin(Math.max(-1,Math.min(1,sinAlt)));\r\n  var cosAz = (Math.sin(dec)-Math.sin(alt)*Math.sin(latR))\/(Math.cos(alt)*Math.cos(latR));\r\n  var az = Math.acos(Math.max(-1,Math.min(1,cosAz)));\r\n  if(Math.sin(HA)>0) az=2*Math.PI-az;\r\n  return {alt:alt*180\/Math.PI, az:az*180\/Math.PI};\r\n}\r\n\r\nfunction projectStar(alt, az, cx, cy, R){\r\n  var azR = az*Math.PI\/180;\r\n  var r = R * (1 - alt\/90); \r\n  return {\r\n      x: cx - r * Math.sin(azR),\r\n      y: cy - r * Math.cos(azR)\r\n  };\r\n}\r\n\r\n\/\/ \u2500\u2500 DRAW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction drawStarMap(){\r\n  var canvas = document.getElementById('star-canvas');\r\n  var poster = document.getElementById('pme-poster');\r\n  var footer = document.getElementById('pme-footer');\r\n  \r\n  var avW = poster.clientWidth - 68; \r\n  var avH = poster.clientHeight - footer.offsetHeight - 58; \r\n  var D = Math.min(avW, avH);\r\n  if(D < 10) return;\r\n\r\n  canvas.width = D;\r\n  canvas.height = D;\r\n  canvas.style.width = D+'px';\r\n  canvas.style.height = D+'px';\r\n\r\n  var ctx = canvas.getContext('2d');\r\n  var t = getTheme();\r\n  var cx = D\/2, cy = D\/2, R = D\/2 - 2;\r\n\r\n  ctx.fillStyle = t.circleBg;\r\n  ctx.beginPath();\r\n  ctx.arc(cx,cy,R,0,Math.PI*2);\r\n  ctx.fill();\r\n\r\n  ctx.save();\r\n  ctx.beginPath();\r\n  ctx.arc(cx,cy,R,0,Math.PI*2);\r\n  ctx.clip();\r\n\r\n  if(t.id==='dark'||t.id==='gray'||t.id==='navy'){\r\n    var g = ctx.createRadialGradient(cx-R*0.2,cy-R*0.3,0,cx,cy,R);\r\n    g.addColorStop(0,'rgba(255,255,255,0.03)');\r\n    g.addColorStop(1,'rgba(0,0,0,0.2)');\r\n    ctx.fillStyle = g;\r\n    ctx.fillRect(0,0,D,D);\r\n  }\r\n\r\n  ctx.strokeStyle = t.id==='bw' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.12)'; \r\n  ctx.lineWidth = 0.5;\r\n  for(var i=1; i<=6; i++){\r\n    ctx.beginPath(); ctx.arc(cx, cy, R * (i\/6), 0, Math.PI*2); ctx.stroke();\r\n  }\r\n  for(var i=0; i<24; i++){\r\n    var ang = i * Math.PI\/12;\r\n    ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + R * Math.cos(ang), cy + R * Math.sin(ang)); ctx.stroke();\r\n  }\r\n\r\n  if(!dataLoaded && !dataFailed){\r\n      ctx.fillStyle = t.textCol;\r\n      ctx.font = '500 12px \"DM Sans\"';\r\n      ctx.textAlign = 'center';\r\n      ctx.globalAlpha = 0.5;\r\n      ctx.fillText('Universum l\u00e4dt...', cx, cy);\r\n      ctx.globalAlpha = 1.0;\r\n      ctx.restore();\r\n      return;\r\n  }\r\n\r\n  var jd = julianDate(S.date, S.time);\r\n\r\n  if(S.showLines){\r\n    ctx.strokeStyle = t.id==='bw' ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.25)';\r\n    ctx.lineWidth = 0.4;\r\n    ctx.lineJoin = 'round';\r\n    \r\n    C_LINES.forEach(function(line){\r\n      ctx.beginPath();\r\n      var pts = line.map(function(pt){\r\n        var pos = starAltAz(pt.ra, pt.dec, S.lat, S.lng, jd);\r\n        return projectStar(pos.alt, pos.az, cx, cy, R);\r\n      });\r\n      \r\n      for(var i=0; i<pts.length; i++){\r\n        if(i===0) { ctx.moveTo(pts[i].x, pts[i].y); }\r\n        else {\r\n          var dist = Math.hypot(pts[i].x - pts[i-1].x, pts[i].y - pts[i-1].y);\r\n          if(dist < R * 1.5) ctx.lineTo(pts[i].x, pts[i].y);\r\n          else ctx.moveTo(pts[i].x, pts[i].y);\r\n        }\r\n      }\r\n      ctx.stroke();\r\n    });\r\n  }\r\n\r\n  A_STARS.forEach(function(s){\r\n    var pos = starAltAz(s.ra, s.dec, S.lat, S.lng, jd);\r\n    if(pos.alt < -2) return; \r\n    \r\n    var p = projectStar(pos.alt, pos.az, cx, cy, R);\r\n    var mag = s.mag;\r\n    var size, alpha;\r\n    \r\n    if(mag < 1.5) { size = 1.8; alpha = 1.0; }\r\n    else if(mag < 3.0) { size = 1.2; alpha = 0.85; }\r\n    else if(mag < 4.5) { size = 0.7; alpha = 0.6; }\r\n    else { size = 0.4; alpha = 0.35; }\r\n    \r\n    if(mag < 2 && t.id !== 'bw') {\r\n      var g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, size*3.5);\r\n      g.addColorStop(0, hexAlpha(t.starCol, 0.4));\r\n      g.addColorStop(1, 'rgba(0,0,0,0)');\r\n      ctx.fillStyle = g;\r\n      ctx.beginPath(); ctx.arc(p.x, p.y, size*3.5, 0, Math.PI*2); ctx.fill();\r\n    }\r\n    \r\n    ctx.fillStyle = t.starCol;\r\n    ctx.globalAlpha = alpha;\r\n    ctx.beginPath(); ctx.arc(p.x, p.y, size, 0, Math.PI*2); ctx.fill();\r\n  });\r\n  ctx.globalAlpha = 1.0;\r\n\r\n  ctx.restore();\r\n\r\n  ctx.strokeStyle = t.id==='bw' ? 'rgba(0,0,0,0.8)' : hexAlpha(t.lineCol, 0.6);\r\n  ctx.lineWidth = 1.0;\r\n  ctx.beginPath();\r\n  ctx.arc(cx,cy,R,0,Math.PI*2);\r\n  ctx.stroke();\r\n}\r\n\r\nfunction hexAlpha(hex, a){\r\n  var r=parseInt(hex.slice(1,3),16);\r\n  var g=parseInt(hex.slice(3,5),16);\r\n  var b=parseInt(hex.slice(5,7),16);\r\n  return 'rgba('+r+','+g+','+b+','+a+')';\r\n}\r\n\r\nfunction updatePosterBg(){\r\n  var t = getTheme();\r\n  document.getElementById('pme-poster-inner').style.background = t.posterBg;\r\n  ['out-h','out-d','out-t','out-c'].forEach(function(id){\r\n    var el = document.getElementById(id);\r\n    if(el) el.style.color = t.textCol;\r\n  });\r\n}\r\n\r\nfunction updateText(){\r\n  document.getElementById('out-h').textContent = document.getElementById('inp-h').value.toUpperCase();\r\n  document.getElementById('out-d').textContent = document.getElementById('inp-d').value.toUpperCase();\r\n  document.getElementById('out-t').textContent = document.getElementById('inp-t').value.toUpperCase();\r\n  \r\n  var latStr = Math.abs(S.lat).toFixed(4) + \"\u00b0\" + (S.lat >= 0 ? \"N\" : \"S\");\r\n  var lngStr = Math.abs(S.lng).toFixed(4) + \"\u00b0\" + (S.lng >= 0 ? \"E\" : \"W\");\r\n  document.getElementById('out-c').textContent = latStr + \" \/ \" + lngStr;\r\n  \r\n  updateURL();\r\n}\r\n\r\nfunction renderThemePins(){\r\n  var c = document.getElementById('theme-pins');\r\n  c.innerHTML = THEMES.map(function(t){\r\n    var active = t.id===S.themeId?' active':'';\r\n    var split = t.id === 'bw' ? '<div style=\"width:50%;height:100%;background:#1a1a1a;\"><\/div>' : '';\r\n    var preview = '<div style=\"width:34px; height:34px; border-radius:50%; background:'+t.posterBg+'; overflow:hidden; display:flex; margin-top:2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);\">' + split + '<\/div>';\r\n    \r\n    return '<div class=\"pme-pin'+active+'\" data-id=\"'+t.id+'\">'\r\n      +preview+'<span>'+t.name+'<\/span>'\r\n      +'<\/div>';\r\n  }).join('');\r\n  \r\n  c.querySelectorAll('.pme-pin').forEach(function(pin){\r\n    pin.addEventListener('click', function(){\r\n      c.querySelectorAll('.pme-pin').forEach(function(p){ p.classList.remove('active'); });\r\n      this.classList.add('active');\r\n      S.themeId = this.getAttribute('data-id');\r\n      updatePosterBg(); drawStarMap(); updateURL();\r\n    });\r\n  });\r\n}\r\n\r\ndocument.querySelectorAll('.pme-nav-btn, .pme-mobbtn').forEach(function(btn){\r\n  btn.addEventListener('click', function(){\r\n    var panel = this.getAttribute('data-panel');\r\n    document.querySelectorAll('.pme-section').forEach(function(s){ s.classList.remove('active'); });\r\n    document.querySelectorAll('.pme-nav-btn,.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\nfunction autoTagline(){\r\n  var dVal = document.getElementById('inp-date').value;\r\n  if(!dVal) return;\r\n  var p = dVal.split('-');\r\n  if(p.length === 3){\r\n    document.getElementById('inp-t').value = p[2]+'.'+p[1]+'.'+p[0]+' \u00b7 '+document.getElementById('inp-time').value;\r\n    updateText();\r\n  }\r\n}\r\ndocument.getElementById('inp-date').addEventListener('change', function(){ S.date=this.value; autoTagline(); drawStarMap(); });\r\ndocument.getElementById('inp-time').addEventListener('change', function(){ S.time=this.value; autoTagline(); drawStarMap(); });\r\n\r\nvar stimer;\r\ndocument.getElementById('pme-sinput').addEventListener('input', function(){\r\n  clearTimeout(stimer);\r\n  if(this.value.length<2){ document.getElementById('pme-results').classList.remove('show'); return; }\r\n  stimer = setTimeout(doSearch,500);\r\n});\r\nfunction doSearch(){\r\n  var q = document.getElementById('pme-sinput').value.trim();\r\n  if(!q) return;\r\n  var box = document.getElementById('pme-results');\r\n  \/\/ API Call auf Deutsch (lang=de)\r\n  fetch('https:\/\/photon.komoot.io\/api\/?q='+encodeURIComponent(q)+'&limit=5&lang=de')\r\n    .then(function(r){ return r.json(); })\r\n    .then(function(d){\r\n      if(!d.features||!d.features.length){ box.innerHTML='<div class=\"pme-ri\">Keine Ergebnisse<\/div>'; box.classList.add('show'); return; }\r\n      box.innerHTML = d.features.map(function(f){\r\n        var p=f.properties;\r\n        var name=(p.name||p.city||q).replace(\/\"\/g,'');\r\n        var sub=[p.city,p.state,p.country].filter(Boolean).join(', ');\r\n        var lng=f.geometry.coordinates[0], lat=f.geometry.coordinates[1];\r\n        return '<div class=\"pme-ri\" data-lng=\"'+lng+'\" data-lat=\"'+lat+'\" data-name=\"'+name+'\" data-sub=\"'+sub+'\"><strong>'+name+'<\/strong><span>'+sub+'<\/span><\/div>';\r\n      }).join('');\r\n      box.classList.add('show');\r\n      box.querySelectorAll('.pme-ri').forEach(function(item){\r\n        item.addEventListener('click', function(){\r\n          S.lat=parseFloat(this.getAttribute('data-lat'));\r\n          S.lng=parseFloat(this.getAttribute('data-lng'));\r\n          var name=this.getAttribute('data-name'), sub=this.getAttribute('data-sub');\r\n          var full = sub?name+', '+sub:name;\r\n          \r\n          document.getElementById('pme-sinput').value=full;\r\n          document.getElementById('inp-d').value=full;\r\n          \r\n          box.classList.remove('show');\r\n          autoTagline(); drawStarMap(); updateURL();\r\n        });\r\n      });\r\n    }).catch(function(){});\r\n}\r\ndocument.addEventListener('click', function(e){\r\n  if(!e.target.closest('#pme-sinput')&&!e.target.closest('#pme-results'))\r\n    document.getElementById('pme-results').classList.remove('show');\r\n});\r\n\r\n['inp-h','inp-d','inp-t'].forEach(function(id){\r\n  document.getElementById(id).addEventListener('input', updateText);\r\n});\r\n\r\ndocument.getElementById('lines-on').addEventListener('click', function(){\r\n  S.showLines=true; this.classList.add('active'); document.getElementById('lines-off').classList.remove('active');\r\n  drawStarMap(); updateURL();\r\n});\r\ndocument.getElementById('lines-off').addEventListener('click', function(){\r\n  S.showLines=false; this.classList.add('active'); document.getElementById('lines-on').classList.remove('active');\r\n  drawStarMap(); 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 renderMaterials(){\r\n  var optsDiv = document.getElementById('mat-options');\r\n  var selText = document.getElementById('mat-selected-text');\r\n  var selDiv  = document.getElementById('mat-selected');\r\n  function selectMat(mat){\r\n    S.mat=mat;\r\n    \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    \r\n    selText.textContent = MAT_LABELS[mat];\r\n    optsDiv.style.display='none';\r\n    renderSizes(); updateURL();\r\n  }\r\n  optsDiv.innerHTML = MATS.map(function(m){\r\n    return '<div class=\"size-opt\" data-mat=\"'+m+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+MAT_LABELS[m]+'<\/div>';\r\n  }).join('');\r\n  optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n    el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n    el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n    el.addEventListener('click',function(){ selectMat(this.getAttribute('data-mat')); });\r\n  });\r\n  selDiv.onclick = function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n  document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n  selText.textContent = MAT_LABELS[S.mat];\r\n}\r\n\r\nfunction 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\nfunction renderSizes(){\r\n  var sizes=SIZES[S.mat]||[];\r\n  var optsDiv=document.getElementById('size-options');\r\n  var selText=document.getElementById('size-selected-text');\r\n  var selDiv=document.getElementById('size-selected');\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 selectIdx(i){\r\n    S.sizeIdx=i; selText.innerHTML=buildLabel(sizes[i]);\r\n    optsDiv.style.display='none';\r\n    updatePrice(); updateDims(); updateURL();\r\n  }\r\n  optsDiv.innerHTML=sizes.map(function(s,i){\r\n    return '<div class=\"size-opt\" data-idx=\"'+i+'\" style=\"padding:10px 12px;font-size:14px;font-family:\\'DM Sans\\',sans-serif;cursor:pointer;border-bottom:1px solid #f0f0f0;\">'+buildLabel(s)+'<\/div>';\r\n  }).join('');\r\n  optsDiv.querySelectorAll('.size-opt').forEach(function(el){\r\n    el.addEventListener('mouseenter',function(){ this.style.background='#f5f5f5'; });\r\n    el.addEventListener('mouseleave',function(){ this.style.background=''; });\r\n    el.addEventListener('click',function(){ selectIdx(parseInt(this.getAttribute('data-idx'))); });\r\n  });\r\n  selDiv.onclick=function(e){ e.stopPropagation(); optsDiv.style.display=optsDiv.style.display==='none'?'block':'none'; };\r\n  document.addEventListener('click',function(){ optsDiv.style.display='none'; });\r\n  selectIdx(S.sizeIdx<sizes.length?S.sizeIdx:0);\r\n}\r\n\r\nfunction updatePrice(){\r\n  var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n  if(!s) return;\r\n  document.getElementById('p-old').textContent=s.orig.toFixed(2).replace('.',',')+' EUR';\r\n  document.getElementById('p-new').textContent=s.p.toFixed(2).replace('.',',')+' EUR';\r\n}\r\n\r\nfunction updateDims(){\r\n  var s=(SIZES[S.mat]||[])[S.sizeIdx];\r\n  if(!s) return;\r\n  document.getElementById('dim-w').textContent=s.w+' cm';\r\n  document.getElementById('dim-h').textContent=s.h+' cm';\r\n  var BASE=504;\r\n  var pw=s.w, ph=s.h;\r\n  var longer=Math.max(pw,ph), shorter=Math.min(pw,ph);\r\n  var baseW = Math.round(BASE*shorter\/longer);\r\n  var baseH = BASE;\r\n  var poster=document.getElementById('pme-poster');\r\n\r\n  if (S.mat === 'framed') {\r\n    var thicknessMm = (s.l === '13x18cm') ? 10 : 14;\r\n    var framePx = thicknessMm * (BASE \/ (longer * 10));\r\n\r\n    poster.style.borderWidth = framePx + 'px';\r\n    poster.style.borderStyle = 'solid';\r\n\r\n    if (S.frame === 'wood') {\r\n      poster.style.borderColor = '#d7c5b3';\r\n      poster.style.borderImage = \"url(\\\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.4' numOctaves='2' result='noise'\/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0 0 0 0.15 0' in='noise'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' fill='%23d7c5b3'\/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\\\") 10 stretch\";\r\n    } else if (S.frame === 'white') {\r\n      poster.style.borderImage = \"\";\r\n      poster.style.borderColor = '#ffffff';\r\n    } else { \/\/ black\r\n      poster.style.borderImage = \"\";\r\n      poster.style.borderColor = '#1a1a1a';\r\n    }\r\n    \r\n    poster.style.width = (baseW - 2 + framePx * 2) + 'px';\r\n    poster.style.height = (baseH - 2 + 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  setTimeout(function(){ fitPoster(); drawStarMap(); },60);\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  \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  \r\n  var scale = Math.min(aH \/ poster.offsetHeight, aW \/ poster.offsetWidth, isMob ? 2.5 : 1.4);\r\n  outer.style.transform='scale('+scale+')';\r\n  outer.style.transformOrigin='center center';\r\n}\r\n\r\nfunction setHeight(){\r\n  var el=document.getElementById('pme-root');\r\n  if(!el) return;\r\n  \r\n  var isMob = window.innerWidth <= 768;\r\n\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  \r\n  setTimeout(function(){ fitPoster(); drawStarMap(); },100);\r\n}\r\n\r\nwindow.addEventListener('load',setHeight);\r\nwindow.addEventListener('resize',function(){ setHeight(); });\r\nsetTimeout(setHeight,300);\r\n\r\ndocument.getElementById('btn-cart').addEventListener('click', function(){\r\n  var s=(SIZES[S.mat]||[])[S.sizeIdx]||{};\r\n  var t=getTheme();\r\n  var cartData={\r\n    action:'uwa_add_to_cart',\r\n    \r\n    \/\/ HIER DIE NEUE DEUTSCHE PRODUKT-ID:\r\n    product_id:'2217', \r\n    \r\n    poster_title:document.getElementById('inp-h').value,\r\n    poster_subtitle:document.getElementById('inp-d').value,\r\n    poster_coordinates:document.getElementById('inp-t').value,\r\n    poster_lat:S.lat.toFixed(6),\r\n    poster_lng:S.lng.toFixed(6),\r\n    poster_date:S.date,\r\n    poster_time:S.time,\r\n    poster_style:S.themeId,\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:S.orient || 'portrait',\r\n    poster_price:s.p||'',\r\n    poster_original_price:s.orig||''\r\n  };\r\n  \r\n  var starCanvas=document.getElementById('star-canvas');\r\n  var poster=document.getElementById('pme-poster');\r\n  var footer=document.getElementById('pme-footer');\r\n  var W=poster.offsetWidth, H=poster.offsetHeight;\r\n  \r\n  var out=document.createElement('canvas');\r\n  out.width=W; out.height=H;\r\n  var ctx2=out.getContext('2d');\r\n  \r\n  ctx2.fillStyle='#ffffff';\r\n  ctx2.fillRect(0,0,W,H);\r\n  \r\n  var pad=14; \r\n  ctx2.fillStyle=t.posterBg;\r\n  ctx2.fillRect(pad,pad,W-2*pad,H-2*pad);\r\n  \r\n  var sw=starCanvas.width, sh=starCanvas.height;\r\n  var footerH = footer.offsetHeight;\r\n  var availableH = H - 2*pad - footerH;\r\n  var sx = (W - sw)\/2;\r\n  var sy = pad + (availableH - sh)\/2; \r\n  ctx2.drawImage(starCanvas,sx,sy);\r\n  \r\n  ctx2.fillStyle=t.textCol;\r\n  ctx2.textAlign='center';\r\n  \r\n  var bY = H - pad - 24; \r\n  ctx2.font='400 7px Rubik,sans-serif'; \r\n  ctx2.letterSpacing='2px';\r\n  ctx2.globalAlpha=0.85;\r\n  ctx2.fillText(document.getElementById('out-c').textContent,W\/2,bY);\r\n  \r\n  ctx2.fillText(document.getElementById('out-t').textContent,W\/2,bY-12);\r\n  \r\n  ctx2.font='600 9px Rubik,sans-serif'; \r\n  ctx2.globalAlpha=1.0;\r\n  ctx2.fillText(document.getElementById('out-d').textContent,W\/2,bY-28);\r\n  \r\n  ctx2.font='700 17px Rubik,sans-serif';\r\n  ctx2.fillText(document.getElementById('out-h').textContent,W\/2,bY-43);\r\n\r\n  cartData.poster_thumbnail=out.toDataURL('image\/jpeg',0.92);\r\n\r\n  function sendToCart(data){\r\n    var body=Object.keys(data).map(function(k){ return encodeURIComponent(k)+'='+encodeURIComponent(data[k]); }).join('&');\r\n    \r\n    \/\/ Anfrage an die universelle Root-Ajax Datei\r\n    fetch('https:\/\/zulumaps.com\/wp-admin\/admin-ajax.php',{\r\n      method:'POST',headers:{'Content-Type':'application\/x-www-form-urlencoded'},body:body\r\n    }).then(function(r){ return r.json(); })\r\n    .then(function(res){\r\n      if(res.success){\r\n        \/\/ Bei Erfolg an den deutschen Warenkorb leiten\r\n        window.location.href='https:\/\/zulumaps.com\/de\/warenkorb\/';\r\n      } else {\r\n        console.error(\"Warenkorb-Fehler:\", res);\r\n        alert(\"Konnte nicht in den Warenkorb gelegt werden. Hast du die richtige deutsche Produkt-ID hinterlegt?\");\r\n      }\r\n    })\r\n    .catch(function(err){\r\n      console.error(\"AJAX Error:\", err);\r\n      alert(\"Es gab einen Verbindungsfehler zum Server.\");\r\n    });\r\n  }\r\n  sendToCart(cartData);\r\n});\r\n\r\nrenderThemePins();\r\nrenderMaterials();\r\nrenderSizes();\r\nupdateText();\r\nupdatePosterBg();\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\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>Moment Texte Stil Gr\u00f6\u00dfe Moment Texte Stil Gr\u00f6\u00dfe Dein Moment W\u00e4hle Datum, Uhrzeit und Ort, um den exakten Sternenhimmel deines besonderen Moments zu zeigen. Datum Uhrzeit Ort Texte Passe den Text auf deinem Sternenkarte-Poster an. \u00dcberschrift Unter\u00fcberschrift Zusatztext Stil W\u00e4hle ein Farbschema f\u00fcr deine Sternenkarte. Design Sternbildlinien Anzeigen Ausblenden Gr\u00f6\u00dfe W\u00e4hle Material und Gr\u00f6\u00dfe. Material [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2166","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2166","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=2166"}],"version-history":[{"count":4,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2166\/revisions"}],"predecessor-version":[{"id":2234,"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/pages\/2166\/revisions\/2234"}],"wp:attachment":[{"href":"https:\/\/zulumaps.com\/de\/wp-json\/wp\/v2\/media?parent=2166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}