sicher

components/mybizapp.js

@@ -0,0 +1,629 @@
+/**
+ * mybizapp.js — my-biz.app UI Components
+ * ========================================
+ * Provides two global modal functions:
+ *
+ *   show_trial(plan?)    — free-trial sign-up modal
+ *                          HTML lives in components/trial_modal.html (lazy-fetched)
+ *
+ *   show_calendar()      — book-a-meeting modal (Google Calendar iframe)
+ *
+ * CONFIGURATION  (set before this script loads)
+ * ----------------------------------------------
+ * window.TrialModalConfig = {
+ *   webhook      : string   — POST endpoint (multipart/form-data)
+ *   product      : string   — hidden field value          (default: "odoo_19")
+ *   title        : string   — modal heading
+ *   subtitle     : string   — modal sub-heading
+ *   submitLabel  : string   — submit button label
+ *   confirmTitle : string   — success heading
+ *   confirmSub   : string   — success body text
+ *   calendarUrl  : string   — Google Calendar embed URL
+ *   triggerSelector : string — CSS selectors for trial triggers
+ *                              (default: "#open-modal, .open-modal")
+ *   calendarSelector : string — CSS selectors for calendar triggers
+ *                               (default: ".open-calendar")
+ *   locations    : Array<{ value: string, label: string }>
+ *   utm_source / utm_medium / utm_campaign / utm_term / utm_content
+ * }
+ *
+ * AUTO-WIRING  (on DOMContentLoaded)
+ * ------------------------------------
+ *   #open-modal, .open-modal  →  show_trial(data-plan?)
+ *   .open-calendar            →  show_calendar()
+ *
+ * DESIGN TOKENS (CSS custom properties, fallback to my-biz.app theme)
+ * --------------------------------------------------------------------
+ *   --tm-bg, --tm-card, --tm-white, --tm-silver, --tm-grey
+ *   --tm-gold, --tm-gold-hi, --tm-gold-lo, --tm-gold-glow, --tm-border, --tm-radius
+ */
+
+(function () {
+    "use strict";
+
+    /* ------------------------------------------------------------------ */
+    /* 1. BASE PATH (resolved from this script's src)                      */
+    /* ------------------------------------------------------------------ */
+
+    var _scriptBase = (function () {
+        var s = document.currentScript;
+        if (s && s.src) return s.src.replace(/\/[^/]+$/, "/") + "/";
+        return "components/";
+    })();
+
+    /* ------------------------------------------------------------------ */
+    /* 2. CONFIG                                                            */
+    /* ------------------------------------------------------------------ */
+
+    var DEFAULTS = {
+        webhook: "",
+        product: "odoo_19",
+        title: "Start Your 4 Weeks Free Trial",
+        subtitle: "Test drive your back-office in a 4-week free trial.",
+        submitLabel: "Start Free Trial",
+        confirmTitle: "Thank you! \uD83C\uDF89",
+        confirmSub: "We\u2019ve received your request and a specialist will be in touch within one business day.",
+        calendarUrl: "https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c",
+        triggerSelector: "#open-modal, .open-modal",
+        calendarSelector: ".open-calendar",
+        locations: [
+            { value: "boston",     label: "\uD83C\uDDFA\uD83C\uDDF8 Boston" },
+            { value: "manchester", label: "\uD83C\uDDEC\uD83C\uDDE7 Manchester" },
+            { value: "mumbai",     label: "\uD83C\uDDEE\uD83C\uDDF3 Mumbai" },
+            { value: "saopaulo",   label: "\uD83C\uDDE7\uD83C\uDDF7 S\u00e3o Paulo" },
+            { value: "meppel",     label: "\uD83C\uDDF3\uD83C\uDDF1 Meppel" },
+            { value: "sydney",     label: "\uD83C\uDDE6\uD83C\uDDFA Sydney" },
+        ],
+        utm_source:   "homepage",
+        utm_medium:   "direct",
+        utm_campaign: "none",
+        utm_term:     "",
+        utm_content:  "",
+    };
+
+    var cfg = {};
+    for (var k in DEFAULTS) {
+        if (Object.prototype.hasOwnProperty.call(DEFAULTS, k)) cfg[k] = DEFAULTS[k];
+    }
+    var userCfg = window.TrialModalConfig || {};
+    for (var k in userCfg) {
+        if (Object.prototype.hasOwnProperty.call(userCfg, k)) cfg[k] = userCfg[k];
+    }
+
+    /* URL query string overrides UTM config */
+    var urlParams = new URLSearchParams(window.location.search);
+    ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"].forEach(function (p) {
+        var v = urlParams.get(p);
+        if (v) cfg[p] = v;
+    });
+
+    /* ------------------------------------------------------------------ */
+    /* 3. INJECT SHARED CSS                                                 */
+    /* ------------------------------------------------------------------ */
+
+    var CSS = [
+        /* Token fallbacks — scoped so host-page :root overrides still win */
+        "#tm-overlay, #cal-overlay {",
+        "  --tm-bg:        rgba(62,39,35,0.84);",
+        "  --tm-card:      #fff3e0;",
+        "  --tm-white:     #3e2723;",
+        "  --tm-silver:    #6d4c41;",
+        "  --tm-grey:      #a1887f;",
+        "  --tm-gold:      #e65100;",
+        "  --tm-gold-hi:   #fb8c00;",
+        "  --tm-gold-lo:   #bf360c;",
+        "  --tm-gold-glow: rgba(230,81,0,0.18);",
+        "  --tm-border:    rgba(230,81,0,0.18);",
+        "  --tm-radius:    28px;",
+        "}",
+
+        /* ---- Shared overlay ---- */
+        "#tm-overlay, #cal-overlay {",
+        "  position: fixed; inset: 0; z-index: 9900;",
+        "  display: none; align-items: center; justify-content: center;",
+        "  padding: 20px;",
+        "  background: var(--tm-bg);",
+        "  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);",
+        "  box-sizing: border-box;",
+        "}",
+
+        /* ================================================================ */
+        /* TRIAL MODAL                                                       */
+        /* ================================================================ */
+
+        "#tm-box {",
+        "  position: relative; width: 100%; max-width: 640px;",
+        "  padding: 44px; background: var(--tm-card);",
+        "  border-radius: var(--tm-radius);",
+        "  border: 1px solid rgba(230,81,0,0.24);",
+        "  box-shadow: 0 30px 90px rgba(0,0,0,0.3);",
+        "  box-sizing: border-box;",
+        "}",
+
+        "#tm-close {",
+        "  position: absolute; top: 18px; right: 18px;",
+        "  width: 40px; height: 40px; border-radius: 50%;",
+        "  color: var(--tm-grey); background: rgba(93,64,55,0.05);",
+        "  font-size: 1.2rem; border: none; cursor: pointer; line-height: 1;",
+        "}",
+        "#tm-close:hover { color: var(--tm-gold); }",
+
+        "#tm-box .tm-title {",
+        "  font-family: Georgia, 'Times New Roman', serif;",
+        "  font-size: 2.2rem; font-weight: 700; line-height: 1.05; margin: 0 0 10px;",
+        "  background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
+        "  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;",
+        "}",
+
+        "#tm-box .tm-subtitle {",
+        "  font-size: 0.9rem; color: var(--tm-silver); margin: 0 0 26px;",
+        "}",
+
+        ".tm-grid {",
+        "  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;",
+        "}",
+        ".tm-field-group { margin-bottom: 18px; }",
+        ".tm-grid .tm-field-group.full { grid-column: 1 / -1; }",
+
+        ".tm-label {",
+        "  display: block; margin-bottom: 8px;",
+        "  font-size: 0.62rem; font-family: system-ui, -apple-system, sans-serif;",
+        "  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tm-gold);",
+        "}",
+
+        ".tm-field {",
+        "  width: 100%; padding: 14px 16px; border-radius: 16px;",
+        "  background: rgba(93,64,55,0.05); border: 1px solid var(--tm-border);",
+        "  color: var(--tm-white); box-sizing: border-box; font: inherit; outline: none;",
+        "}",
+        ".tm-field:focus { border-color: var(--tm-gold); box-shadow: 0 0 0 3px var(--tm-gold-glow); }",
+        ".tm-field::placeholder { color: var(--tm-grey); }",
+
+        ".tm-select { position: relative; }",
+        ".tm-select-btn { position: relative; text-align: left; cursor: pointer; padding-right: 42px; background: none; border: none; }",
+        ".tm-select-btn::after {",
+        "  content: ''; position: absolute; right: 16px; top: 50%;",
+        "  width: 14px; height: 8px; transform: translateY(-50%);",
+        "  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");",
+        "  background-repeat: no-repeat; background-position: center; pointer-events: none;",
+        "}",
+        ".tm-select-btn.is-placeholder { color: var(--tm-grey); }",
+
+        ".tm-select-menu {",
+        "  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3;",
+        "  max-height: 220px; padding: 8px; background: var(--tm-card);",
+        "  border: 1px solid var(--tm-border); border-radius: 16px;",
+        "  box-shadow: 0 18px 40px rgba(62,39,35,0.16); overflow-y: auto; display: none;",
+        "}",
+        ".tm-select.open .tm-select-menu { display: block; }",
+
+        ".tm-select-option {",
+        "  width: 100%; padding: 10px 12px; border: none; border-radius: 12px;",
+        "  background: transparent; color: var(--tm-white);",
+        "  text-align: left; font: inherit; cursor: pointer;",
+        "  transition: background 0.2s, color 0.2s;",
+        "}",
+        ".tm-select-option:hover, .tm-select-option:focus-visible, .tm-select-option.is-selected {",
+        "  outline: none; background: rgba(230,81,0,0.1); color: var(--tm-gold);",
+        "}",
+
+        ".tm-submit {",
+        "  width: 100%; margin-top: 8px; padding: 15px 20px; border-radius: 50px; border: none;",
+        "  cursor: pointer; font-family: system-ui, -apple-system, sans-serif;",
+        "  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;",
+        "  color: var(--tm-card);",
+        "  background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
+        "  transition: opacity 0.2s;",
+        "}",
+        ".tm-submit:hover { opacity: 0.88; }",
+        ".tm-submit:disabled { opacity: 0.56; cursor: not-allowed; }",
+
+        "#tm-confirm { display: none; text-align: center; padding-top: 8px; }",
+        "#tm-confirm .tm-confirm-title {",
+        "  font-family: Georgia, 'Times New Roman', serif;",
+        "  font-size: 1.6rem; color: var(--tm-gold-hi); margin: 0 0 12px;",
+        "}",
+        "#tm-confirm .tm-confirm-sub { color: var(--tm-silver); font-size: 0.9rem; margin: 0 0 24px; }",
+
+        /* ================================================================ */
+        /* CALENDAR MODAL                                                    */
+        /* ================================================================ */
+
+        "#cal-box {",
+        "  position: relative; width: 100%; max-width: 780px;",
+        "  background: var(--tm-card);",
+        "  border-radius: var(--tm-radius);",
+        "  border: 1px solid rgba(230,81,0,0.24);",
+        "  box-shadow: 0 30px 90px rgba(0,0,0,0.3);",
+        "  box-sizing: border-box; overflow: hidden;",
+        "}",
+
+        "#cal-header {",
+        "  display: flex; align-items: center; justify-content: space-between;",
+        "  padding: 22px 32px;",
+        "  border-bottom: 1px solid var(--tm-border);",
+        "}",
+
+        "#cal-header .cal-title {",
+        "  font-family: Georgia, 'Times New Roman', serif;",
+        "  font-size: 1.5rem; font-weight: 700; margin: 0;",
+        "  background: linear-gradient(135deg, var(--tm-gold-lo) 0%, var(--tm-gold) 38%, var(--tm-gold-hi) 55%, var(--tm-gold) 75%, var(--tm-gold-lo) 100%);",
+        "  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;",
+        "}",
+
+        "#cal-close {",
+        "  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;",
+        "  color: var(--tm-grey); background: rgba(93,64,55,0.05);",
+        "  font-size: 1.2rem; border: none; cursor: pointer; line-height: 1;",
+        "}",
+        "#cal-close:hover { color: var(--tm-gold); }",
+
+        "#cal-frame {",
+        "  width: 100%; height: 620px; border: none; display: block;",
+        "}",
+
+        /* ================================================================ */
+        /* RESPONSIVE                                                        */
+        /* ================================================================ */
+
+        "@media (max-width: 860px) {",
+        "  #tm-box { padding: 34px 22px; }",
+        "  .tm-grid { grid-template-columns: 1fr; }",
+        "  #cal-header { padding: 18px 20px; }",
+        "  #cal-frame { height: 540px; }",
+        "}",
+        "@media (max-width: 480px) {",
+        "  #tm-box .tm-title { font-size: 1.8rem; }",
+        "  #cal-header .cal-title { font-size: 1.2rem; }",
+        "  #cal-frame { height: 480px; }",
+        "}",
+    ].join("\n");
+
+    var _styleEl = document.createElement("style");
+    _styleEl.id = "mba-styles";
+    _styleEl.textContent = CSS;
+    document.head.appendChild(_styleEl);
+
+    /* ================================================================== */
+    /* TRIAL MODAL                                                         */
+    /* ================================================================== */
+
+    var _trialLoading = false;
+    var _trialLoaded  = false;
+    var _trialQueue   = [];   /* pending plan args while HTML is fetching  */
+
+    /* --- show_trial(plan?) -------------------------------------------- */
+    function show_trial(plan) {
+        if (_trialLoaded) {
+            _openTrial(plan);
+            return;
+        }
+        _trialQueue.push(plan !== undefined ? plan : null);
+        if (!_trialLoading) {
+            _trialLoading = true;
+            _loadTrialModal();
+        }
+    }
+
+    /* --- Fetch + inject trial_modal.html ------------------------------ */
+    function _loadTrialModal() {
+        var url = _scriptBase + "trial_modal.html";
+        fetch(url)
+            .then(function (r) {
+                if (!r.ok) throw new Error("[mybizapp] trial_modal.html fetch failed: " + r.status);
+                return r.text();
+            })
+            .then(function (html) {
+                var tmp = document.createElement("div");
+                tmp.innerHTML = html;
+                var node = tmp.firstElementChild;
+                document.body.appendChild(node);
+
+                _applyTrialConfig();
+                _wireTrialEvents();
+
+                _trialLoaded  = true;
+                _trialLoading = false;
+
+                if (_trialQueue.length) {
+                    var plan = _trialQueue[_trialQueue.length - 1];
+                    _trialQueue = [];
+                    _openTrial(plan);
+                }
+            })
+            .catch(function (err) {
+                console.error(err);
+                _trialLoading = false;
+                _trialQueue   = [];
+            });
+    }
+
+    /* --- Apply TrialModalConfig overrides after HTML is in the DOM ---- */
+    function _applyTrialConfig() {
+        /* Text content */
+        var titleEl = document.getElementById("tm-title");
+        if (titleEl) titleEl.textContent = cfg.title;
+
+        var subEl = document.querySelector("#tm-box .tm-subtitle");
+        if (subEl) subEl.textContent = cfg.subtitle;
+
+        var submitEl = document.querySelector("#tm-form .tm-submit");
+        if (submitEl) submitEl.textContent = cfg.submitLabel;
+
+        var confirmTitleEl = document.querySelector("#tm-confirm .tm-confirm-title");
+        if (confirmTitleEl) confirmTitleEl.textContent = cfg.confirmTitle;
+
+        var confirmSubEl = document.querySelector("#tm-confirm .tm-confirm-sub");
+        if (confirmSubEl) confirmSubEl.textContent = cfg.confirmSub;
+
+        /* Locations — rebuild menu only if config provides a custom list  */
+        if (userCfg.locations) {
+            var menu = document.getElementById("tm-location-menu");
+            if (menu) {
+                menu.innerHTML = cfg.locations.map(function (loc) {
+                    return '<button type="button" class="tm-select-option" data-value="'
+                        + _esc(loc.value) + '">' + _esc(loc.label) + "</button>";
+                }).join("\n");
+            }
+        }
+
+        /* UTM hidden fields */
+        var form = document.getElementById("tm-form");
+        if (form) {
+            var utmMap = {
+                utm_source:   cfg.utm_source,
+                utm_medium:   cfg.utm_medium,
+                utm_campaign: cfg.utm_campaign,
+                utm_term:     cfg.utm_term,
+                utm_content:  cfg.utm_content,
+            };
+            Object.keys(utmMap).forEach(function (name) {
+                var el = form.querySelector('[name="' + name + '"]');
+                if (el) el.value = utmMap[name];
+            });
+        }
+    }
+
+    /* --- Wire all trial modal events ---------------------------------- */
+    function _wireTrialEvents() {
+        var overlay        = document.getElementById("tm-overlay");
+        var box            = document.getElementById("tm-box");
+        var closeBtn       = document.getElementById("tm-close");
+        var form           = document.getElementById("tm-form");
+        var confirmDiv     = document.getElementById("tm-confirm");
+        var confirmClose   = document.getElementById("tm-confirm-close");
+        var planField      = document.getElementById("tm-plan");
+        var productField   = document.getElementById("tm-product");
+        var locationField  = document.getElementById("tm-location");
+        var locationSelect = document.getElementById("tm-location-select");
+        var locationBtn    = document.getElementById("tm-location-btn");
+        var locationMenu   = document.getElementById("tm-location-menu");
+        var defaultProduct = productField.value;
+
+        /* Location picker */
+        function _syncLabel() {
+            var val = locationField.value || "";
+            var selected = null;
+            locationMenu.querySelectorAll(".tm-select-option").forEach(function (opt) {
+                var isSel = opt.getAttribute("data-value") === val;
+                if (isSel) selected = opt;
+                opt.classList.toggle("is-selected", isSel);
+                opt.setAttribute("aria-selected", isSel ? "true" : "false");
+            });
+            locationBtn.textContent = selected ? selected.textContent.trim() : "Select your server location";
+            locationBtn.classList.toggle("is-placeholder", !selected);
+            locationBtn.setAttribute("aria-expanded", locationSelect.classList.contains("open") ? "true" : "false");
+        }
+
+        function _openLoc()  { locationSelect.classList.add("open");    _syncLabel(); }
+        function _closeLoc() { locationSelect.classList.remove("open"); _syncLabel(); }
+
+        locationBtn.addEventListener("click", function () {
+            locationSelect.classList.contains("open") ? _closeLoc() : _openLoc();
+        });
+        locationMenu.querySelectorAll(".tm-select-option").forEach(function (opt) {
+            opt.addEventListener("click", function () {
+                locationField.value = opt.getAttribute("data-value") || "";
+                _closeLoc();
+            });
+        });
+        document.addEventListener("click", function (e) {
+            if (!locationSelect.contains(e.target)) _closeLoc();
+        });
+
+        /* Store open/close functions so show_trial() can call them */
+        overlay._openTrial = function (plan) {
+            planField.value    = plan || "General Free Trial";
+            productField.value = defaultProduct;                 /* always pinned */
+            if (window._mbsTracking) window._mbsTracking.applyToFields(form);
+            _closeLoc();
+            overlay.style.display      = "flex";
+            document.body.style.overflow = "hidden";
+        };
+
+        overlay._closeTrial = function () {
+            overlay.style.display      = "none";
+            document.body.style.overflow = "";
+            setTimeout(function () {
+                form.style.display     = "";
+                confirmDiv.style.display = "none";
+                form.reset();
+                planField.value    = "General Free Trial";
+                productField.value = defaultProduct;
+                locationField.value = "";
+                if (window._mbsTracking) window._mbsTracking.applyToFields(form);
+                _closeLoc();
+                var btn = form.querySelector(".tm-submit");
+                btn.textContent = cfg.submitLabel;
+                btn.disabled    = false;
+            }, 200);
+        };
+
+        /* Close triggers */
+        closeBtn.addEventListener("click", function () { overlay._closeTrial(); });
+        confirmClose.addEventListener("click", function () { overlay._closeTrial(); });
+        overlay.addEventListener("click", function (e) {
+            if (e.target === overlay || !box.contains(e.target)) overlay._closeTrial();
+        });
+        document.addEventListener("keydown", function (e) {
+            if (e.key === "Escape") {
+                if (locationSelect.classList.contains("open")) { _closeLoc(); return; }
+                if (overlay.style.display === "flex") overlay._closeTrial();
+            }
+        });
+
+        /* Form submit */
+        form.addEventListener("submit", function (e) {
+            e.preventDefault();
+            if (!cfg.webhook) {
+                console.warn("[mybizapp] No webhook URL set. Add window.TrialModalConfig.webhook.");
+                return;
+            }
+            var btn = form.querySelector(".tm-submit");
+            var formData = new FormData(form);
+            if (window._mbsTracking) {
+                formData = window._mbsTracking.appendToFormData(formData);
+                window._mbsTracking.trackEvent("Trial", { source: planField.value || "General Free Trial" });
+            }
+            btn.textContent = "Sending\u2026";
+            btn.disabled    = true;
+            /* Show confirmation regardless — webhook may not return CORS headers */
+            fetch(cfg.webhook, { method: "POST", body: formData })
+                .then(function ()  { form.style.display = "none"; confirmDiv.style.display = "block"; })
+                .catch(function () { form.style.display = "none"; confirmDiv.style.display = "block"; });
+        });
+    }
+
+    /* --- Internal open helper (called after HTML is confirmed ready) -- */
+    function _openTrial(plan) {
+        var overlay = document.getElementById("tm-overlay");
+        if (overlay && overlay._openTrial) overlay._openTrial(plan);
+    }
+
+    /* ================================================================== */
+    /* CALENDAR MODAL                                                      */
+    /* ================================================================== */
+
+    var _calInjected = false;
+
+    /* --- show_calendar() ---------------------------------------------- */
+    function show_calendar() {
+        if (!_calInjected) _buildCalendarModal();
+        var overlay = document.getElementById("cal-overlay");
+        if (overlay) {
+            overlay.style.display      = "flex";
+            document.body.style.overflow = "hidden";
+        }
+    }
+
+    /* --- Build and inject the calendar modal HTML --------------------- */
+    function _buildCalendarModal() {
+        var html = [
+            '<div id="cal-overlay" role="dialog" aria-modal="true" aria-labelledby="cal-title">',
+            '  <div id="cal-box">',
+            '    <div id="cal-header">',
+            '      <h2 class="cal-title" id="cal-title">Book a Meeting</h2>',
+            '      <button id="cal-close" aria-label="Close">&times;</button>',
+            '    </div>',
+            '    <iframe',
+            '      id="cal-frame"',
+            '      src="' + _esc(cfg.calendarUrl) + '"',
+            '      title="Book a Meeting"',
+            '      loading="lazy"',
+            '    ></iframe>',
+            '  </div>',
+            '</div>',
+        ].join("\n");
+
+        var tmp = document.createElement("div");
+        tmp.innerHTML = html;
+        document.body.appendChild(tmp.firstElementChild);
+        _calInjected = true;
+
+        _wireCalendarEvents();
+    }
+
+    /* --- Wire calendar modal events ----------------------------------- */
+    function _wireCalendarEvents() {
+        var overlay  = document.getElementById("cal-overlay");
+        var box      = document.getElementById("cal-box");
+        var closeBtn = document.getElementById("cal-close");
+
+        function _closeCalendar() {
+            overlay.style.display      = "none";
+            document.body.style.overflow = "";
+        }
+
+        closeBtn.addEventListener("click", _closeCalendar);
+        overlay.addEventListener("click", function (e) {
+            if (e.target === overlay || !box.contains(e.target)) _closeCalendar();
+        });
+        document.addEventListener("keydown", function (e) {
+            if (e.key === "Escape" && overlay.style.display === "flex") _closeCalendar();
+        });
+    }
+
+    /* ================================================================== */
+    /* DOM AUTO-WIRING                                                     */
+    /* ================================================================== */
+
+    function _wireAll() {
+        /* Trial triggers */
+        var primary = document.getElementById("open-modal");
+        if (primary) {
+            primary.addEventListener("click", function (e) {
+                e.preventDefault();
+                show_trial();
+            });
+        }
+        try {
+            document.querySelectorAll(cfg.triggerSelector).forEach(function (el) {
+                if (el.id === "open-modal") return; /* already handled above */
+                el.addEventListener("click", function (e) {
+                    e.preventDefault();
+                    show_trial(el.getAttribute("data-plan") || undefined);
+                });
+            });
+        } catch (err) {
+            console.warn("[mybizapp] invalid triggerSelector:", cfg.triggerSelector, err);
+        }
+
+        /* Calendar triggers */
+        try {
+            document.querySelectorAll(cfg.calendarSelector).forEach(function (el) {
+                el.addEventListener("click", function (e) {
+                    e.preventDefault();
+                    show_calendar();
+                });
+            });
+        } catch (err) {
+            console.warn("[mybizapp] invalid calendarSelector:", cfg.calendarSelector, err);
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", _wireAll);
+    } else {
+        _wireAll();
+    }
+
+    /* ================================================================== */
+    /* UTILITIES                                                           */
+    /* ================================================================== */
+
+    function _esc(str) {
+        return String(str)
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+    }
+
+    /* ================================================================== */
+    /* PUBLIC API                                                          */
+    /* ================================================================== */
+
+    window.show_trial    = show_trial;
+    window.show_calendar = show_calendar;
+
+})();

components/trial_modal.html

@@ -0,0 +1,64 @@
+<div id="tm-overlay" role="dialog" aria-modal="true" aria-labelledby="tm-title">
+    <div id="tm-box">
+        <button id="tm-close" aria-label="Close">&times;</button>
+        <h2 class="tm-title" id="tm-title">Start Your 4 Weeks Free Trial</h2>
+        <p class="tm-subtitle">Test drive your back-office in a 4-week free trial.</p>
+        <form id="tm-form" novalidate>
+            <div class="tm-grid">
+                <div class="tm-field-group full">
+                    <label class="tm-label" for="tm-email">Work Email</label>
+                    <input
+                        type="email"
+                        id="tm-email"
+                        name="email"
+                        class="tm-field"
+                        placeholder="you@company.com"
+                        required
+                    />
+                </div>
+                <div class="tm-field-group full tm-select" id="tm-location-select">
+                    <label class="tm-label" for="tm-location">Server Location</label>
+                    <button
+                        type="button"
+                        class="tm-field tm-select-btn is-placeholder"
+                        id="tm-location-btn"
+                        aria-haspopup="listbox"
+                        aria-expanded="false"
+                        aria-controls="tm-location-menu"
+                    >
+                        Select your server location
+                    </button>
+                    <div
+                        class="tm-select-menu"
+                        id="tm-location-menu"
+                        role="listbox"
+                        aria-labelledby="tm-location-btn"
+                    >
+                        <button type="button" class="tm-select-option" data-value="boston">🇺🇸 Boston</button>
+                        <button type="button" class="tm-select-option" data-value="manchester">🇬🇧 Manchester</button>
+                        <button type="button" class="tm-select-option" data-value="mumbai">🇮🇳 Mumbai</button>
+                        <button type="button" class="tm-select-option" data-value="saopaulo">🇧🇷 São Paulo</button>
+                        <button type="button" class="tm-select-option" data-value="meppel">🇳🇱 Meppel</button>
+                        <button type="button" class="tm-select-option" data-value="sydney">🇦🇺 Sydney</button>
+                    </div>
+                    <input type="hidden" id="tm-location" name="location" value="" required />
+                </div>
+            </div>
+            <input type="hidden" id="tm-product"  name="product"      value="odoo_19" />
+            <input type="hidden" id="tm-plan"     name="plan"         value="General Free Trial" />
+            <input type="hidden" name="utm_source"   value="" />
+            <input type="hidden" name="utm_medium"   value="" />
+            <input type="hidden" name="utm_campaign" value="" />
+            <input type="hidden" name="utm_term"     value="" />
+            <input type="hidden" name="utm_content"  value="" />
+            <button type="submit" class="tm-submit">Start Free Trial</button>
+        </form>
+        <div id="tm-confirm">
+            <p class="tm-confirm-title">Thank you! 🎉</p>
+            <p class="tm-confirm-sub">
+                We've received your request and a specialist will be in touch within one business day.
+            </p>
+            <button id="tm-confirm-close" class="tm-submit">Close</button>
+        </div>
+    </div>
+</div>

content/images/images.json

@@ -0,0 +1,212 @@
+[
+  {
+    "name": "Startup_Book_Stack.jpg",
+    "objects": ["notebook", "books", "desk"],
+    "scenes": ["workspace"],
+    "feeling": "old school, productive, learning"
+  },
+  {
+    "name": "manufacturing_drilling.jpg",
+    "objects": ["industrial equipment", "machinery"],
+    "scenes": ["industrial", "workshop"],
+    "feeling": "productive, industrial, focused"
+  },
+  {
+    "name": "manufacturing_flex.jpg",
+    "objects": ["flexible machinery", "industrial equipment"],
+    "scenes": ["industrial", "workshop"],
+    "feeling": "modern, productive, efficient"
+  },
+  {
+    "name": "manufacturing_fraese.jpg",
+    "objects": ["cnc machine", "machinery", "tools"],
+    "scenes": ["industrial", "workshop"],
+    "feeling": "precise, professional, productive"
+  },
+  {
+    "name": "manufacturing_lehte.jpg",
+    "objects": ["sheet metal", "industrial equipment"],
+    "scenes": ["industrial", "workshop"],
+    "feeling": "industrial, modern, efficient"
+  },
+  {
+    "name": "manufacturing_pipes.jpg",
+    "objects": ["pipes", "industrial equipment"],
+    "scenes": ["industrial", "warehouse"],
+    "feeling": "industrial, structured, productive"
+  },
+  {
+    "name": "manufacturing_pottery.jpg",
+    "objects": ["pottery", "ceramics", "craft"],
+    "scenes": ["workshop", "artisan"],
+    "feeling": "creative, handcraft, traditional"
+  },
+  {
+    "name": "manufacturing_textil.jpg",
+    "objects": ["textile", "fabric", "machinery"],
+    "scenes": ["industrial", "factory"],
+    "feeling": "industrial, productive, modern"
+  },
+  {
+    "name": "manufacturing_workshop.jpg",
+    "objects": ["workshop", "tools", "machinery"],
+    "scenes": ["workshop", "industrial"],
+    "feeling": "productive, professional, focused"
+  },
+  {
+    "name": "manufacturing_workshop2.jpg",
+    "objects": ["workshop", "tools", "equipment"],
+    "scenes": ["workshop", "industrial"],
+    "feeling": "productive, skilled, traditional"
+  },
+  {
+    "name": "ngo_books.jpg",
+    "objects": ["books", "notebook", "desk"],
+    "scenes": ["office", "workspace"],
+    "feeling": "learning, educational, old school"
+  },
+  {
+    "name": "ngo_campus.jpg",
+    "objects": ["buildings", "city", "outdoor"],
+    "scenes": ["nature", "urban"],
+    "feeling": "professional, organized, community"
+  },
+  {
+    "name": "ngo_cowork.jpg",
+    "objects": ["laptop", "desk", "coworking space"],
+    "scenes": ["workspace", "office"],
+    "feeling": "collaborative, modern, communication"
+  },
+  {
+    "name": "ngo_hospital.jpg",
+    "objects": ["hospital", "medical", "building"],
+    "scenes": ["medical", "urban"],
+    "feeling": "caring, professional, community"
+  },
+  {
+    "name": "ngo_office.jpg",
+    "objects": ["desk", "office", "workspace"],
+    "scenes": ["office", "workspace"],
+    "feeling": "productive, organized, professional"
+  },
+  {
+    "name": "ngo_office3.jpg",
+    "objects": ["office", "meeting room", "workspace"],
+    "scenes": ["office", "meeting"],
+    "feeling": "professional, collaborative, modern"
+  },
+  {
+    "name": "ngo_scheduöe.jpg",
+    "objects": ["schedule", "planning", "calendar"],
+    "scenes": ["workspace", "office"],
+    "feeling": "organized, productive, structured"
+  },
+  {
+    "name": "ngo_success.jpg",
+    "objects": ["team", "office", "celebration"],
+    "scenes": ["workspace", "office"],
+    "feeling": "success, teamwork, communication"
+  },
+  {
+    "name": "pos_burger.jpg",
+    "objects": ["food", "burger", "restaurant"],
+    "scenes": ["restaurant", "workspace"],
+    "feeling": "modern, fast-paced, productive"
+  },
+  {
+    "name": "pos_coffe.jpg",
+    "objects": ["coffee", "cafe", "drink"],
+    "scenes": ["cafe", "restaurant"],
+    "feeling": "cozy, communication, relaxed"
+  },
+  {
+    "name": "pos_delivery.jpg",
+    "objects": ["delivery", "food", "vehicle"],
+    "scenes": ["workspace", "urban"],
+    "feeling": "modern, fast-paced, productive"
+  },
+  {
+    "name": "pos_restaurant.jpg",
+    "objects": ["restaurant", "food", "dining"],
+    "scenes": ["restaurant", "workspace"],
+    "feeling": "modern, professional, productive"
+  },
+  {
+    "name": "pos_restaurant_2.jpg",
+    "objects": ["restaurant", "dining", "interior"],
+    "scenes": ["restaurant", "workspace"],
+    "feeling": "modern, cozy, inviting"
+  },
+  {
+    "name": "pos_vintage_cafe.jpg",
+    "objects": ["cafe", "vintage", "coffee"],
+    "scenes": ["cafe", "workspace"],
+    "feeling": "old school, cozy, communication"
+  },
+  {
+    "name": "startup_couple.jpg",
+    "objects": ["people", "laptop", "workspace"],
+    "scenes": ["workspace", "meeting"],
+    "feeling": "collaborative, communication, productive"
+  },
+  {
+    "name": "startup_desk.jpg",
+    "objects": ["laptop", "desk", "workspace"],
+    "scenes": ["workspace"],
+    "feeling": "productive, modern, focused"
+  },
+  {
+    "name": "startup_fun.jpg",
+    "objects": ["team", "people", "fun activities"],
+    "scenes": ["workspace", "meeting"],
+    "feeling": "fun, communication, teamwork"
+  },
+  {
+    "name": "startup_manager.jpg",
+    "objects": ["manager", "laptop", "desk"],
+    "scenes": ["workspace", "office"],
+    "feeling": "professional, leadership, productive"
+  },
+  {
+    "name": "startup_meeting.jpg",
+    "objects": ["meeting room", "laptop", "team"],
+    "scenes": ["meeting", "workspace"],
+    "feeling": "communication, collaboration, productive"
+  },
+  {
+    "name": "startup_nature.jpg",
+    "objects": ["nature", "outdoor", "laptop"],
+    "scenes": ["nature", "workspace"],
+    "feeling": "creative, fresh, productive"
+  },
+  {
+    "name": "startup_night.jpg",
+    "objects": ["city", "night", "workspace"],
+    "scenes": ["urban", "workspace"],
+    "feeling": "modern, city, productive"
+  },
+  {
+    "name": "startup_open.jpg",
+    "objects": ["open space", "coworking", "laptop"],
+    "scenes": ["workspace", "open"],
+    "feeling": "open, collaborative, modern"
+  },
+  {
+    "name": "startup_open2.jpg",
+    "objects": ["open space", "coworking", "office"],
+    "scenes": ["workspace", "open"],
+    "feeling": "collaborative, modern, flexible"
+  },
+  {
+    "name": "startup_small_business.jpg",
+    "objects": ["small business", "desk", "workspace"],
+    "scenes": ["workspace", "office"],
+    "feeling": "entrepreneurial, productive, personal"
+  },
+  {
+    "name": "startup_write_plan.jpg",
+    "objects": ["notebook", "writing", "planning"],
+    "scenes": ["workspace"],
+    "feeling": "productive, creative, planning"
+  }
+]

content/images/legal.txt

@@ -0,0 +1,38 @@
+Bild von <a href="https://pixabay.com/de/users/gumigasuki-793585/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=645620">加藤 俊</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=645620">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/jannonivergall-19088294/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5736096">Janno Nivergall</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5736096">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/ralphs_fotos-1767157/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3738903">Ralph</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3738903">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/gumigasuki-793585/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=645617">加藤 俊</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=645617">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/bakhrom_media-25181840/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6967964">Bakhrom Tursunov</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6967964">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/hnhiri-8787/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=108639">Hassan Nhiri</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=108639">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/thmilherou-5808126/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4863393">Thierry Milherou</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4863393">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/gpoulsen-6673015/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6665608">G Poulsen</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6665608">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/pexels-2286921/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1837150">Pexels</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1837150">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/neshom-447256/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=449952">Nenad Maric</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=449952">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/randgruppe-12327121/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4217255">Nico Franz</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4217255">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/stocksnap-894430/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2572522">StockSnap</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2572522">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/kaboompics-1013994/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=791942">Karolina Grabowska</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=791942">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/sunriseforever-6314823/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6974507">Sunrise</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6974507">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/konkapo-55292388/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=10237219">kazuharu kondo</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=10237219">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/geralt-9301/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2411763">Gerd Altmann</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2411763">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/pexels-2286921/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868015">Pexels</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868015">Pixabay</a>Bild von <a href="https://pixabay.com/de/users/peggy_marco-1553824/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1607503">Peggy und Marco Lachmann-Anke</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1607503">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/pexels-2286921/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868667">Pexels</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868667">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/alandavidrobb-1467112/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=966315">Alan Robb</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=966315">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/publicdomainpictures-14/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">PublicDomainPictures</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/publicdomainpictures-14/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">PublicDomainPictures</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/publicdomainpictures-14/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">PublicDomainPictures</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=14612">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/peggy_marco-1553824/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5050731">Peggy und Marco Lachmann-Anke</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5050731">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/qluglobal-19620160/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5851598">QLU Global</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=5851598">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/halcyonmarine-9714076/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3579026">Halcyon Marine Healthcare Systems</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3579026">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/fulopszokemariann-10698699/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3816835">Mariann Szőke</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3816835">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/lernestorod-5382836/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2476806">Ernesto Rodriguez</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2476806">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/lernestorod-5382836/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2476806">Ernesto Rodriguez</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2476806">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/webandi-1460261/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1021419">Andreas Lischka</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1021419">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/standsome-18205472/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6816316">Standsome</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6816316">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/infoniqa_com-14413006/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4653983">Infoniqa_com</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4653983">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/pexels-2286921/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1866533">Pexels</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1866533">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/sarahblocks-8094083/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4156018">sarah blocksidge</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4156018">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/stocksnap-894430/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2564273">StockSnap</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2564273">Pixabay</a>
+Bild von <a href="https://pixabay.com/de/users/stocksnap-894430/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2578008">StockSnap</a> auf <a href="https://pixabay.com/de//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2578008">Pixabay</a>
+
+
+