{"id":3800,"date":"2025-12-13T14:07:51","date_gmt":"2025-12-13T14:07:51","guid":{"rendered":"https:\/\/mazurly.com\/?page_id=3800"},"modified":"2025-12-13T18:26:28","modified_gmt":"2025-12-13T18:26:28","slug":"free-time-converter","status":"publish","type":"page","link":"https:\/\/mazurly.com\/de\/free-time-converter\/","title":{"rendered":"Free Time Converter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3800\" class=\"elementor elementor-3800\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2387b2 e-flex e-con-boxed e-con e-parent\" data-id=\"b2387b2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa9a026 elementor-widget elementor-widget-html\" data-id=\"aa9a026\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"mz-tbX\" id=\"mz-tbX\">\n  <div class=\"mz-top\">\n    <div class=\"mz-title\">\n      Free Time Converter <span class=\"mz-hint\">(Search cities \u2022 drag to reorder \u2022 click blocks)<\/span>\n    <\/div>\n\n    <div class=\"mz-controls\">\n      <!-- LEFT: search -->\n      <div class=\"mz-searchWrap\">\n        <span class=\"mz-plus\">+<\/span>\n        <input id=\"mz-q\" class=\"mz-search\" placeholder=\"Place or timezone\" autocomplete=\"off\" \/>\n        <div id=\"mz-dd\" class=\"mz-dd\" hidden><\/div>\n      <\/div>\n\n      <!-- RIGHT: days + time + now -->\n      <div class=\"mz-right\">\n        <div class=\"mz-days\" id=\"mz-days\"><\/div>\n\n        <div class=\"mz-field\">\n          <span>Time<\/span>\n          <input id=\"mz-time\" type=\"time\" step=\"60\" \/>\n        <\/div>\n\n        <button id=\"mz-now\" class=\"mz-now\">Now<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"mz-rows\" id=\"mz-rows\"><\/div>\n<\/div>\n\n<style>\n  :root{\n    --bg:#0b0714;\n    --border:rgba(255,255,255,.10);\n    --border2:rgba(255,255,255,.07);\n    --text:rgba(255,255,255,.92);\n    --muted:rgba(255,255,255,.62);\n    --radius:16px;\n    --shadow:0 12px 28px rgba(0,0,0,.34);\n    --purple:#8b5cf6;\n    --purple2:#a78bfa;\n  }\n\n  .mz-tbX{\n    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;\n    max-width: 1200px;\n    margin: 0 auto;\n    color: var(--text);\n    border-radius: var(--radius);\n    border: 1px solid var(--border);\n    box-shadow: var(--shadow);\n    overflow: hidden;\n    background:\n      radial-gradient(1200px 520px at 18% 0%, rgba(139,92,246,.16), transparent 55%),\n      radial-gradient(900px 450px at 88% 16%, rgba(167,139,250,.09), transparent 52%),\n      var(--bg);\n  }\n\n  .mz-top{\n    padding: 12px 12px 10px;\n    border-bottom: 1px solid var(--border);\n    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\n  }\n\n  .mz-title{\n    font-weight: 900;\n    letter-spacing: .2px;\n    font-size: 16px;\n    margin-bottom: 8px;\n  }\n  .mz-hint{\n    font-weight: 700;\n    font-size: 11px;\n    color: var(--muted);\n  }\n\n  .mz-controls{\n    display:grid;\n    grid-template-columns: minmax(240px, 500px) 1fr;\n    gap: 10px;\n    align-items:center;\n  }\n\n  \/* Search *\/\n  .mz-searchWrap{ position:relative; width:100%; }\n  .mz-plus{\n    position:absolute; left:9px; top:50%; transform:translateY(-50%);\n    width:20px;height:20px;border-radius:7px;\n    display:grid;place-items:center;\n    background: rgba(255,255,255,.05);\n    border:1px solid var(--border2);\n    color: rgba(255,255,255,.80);\n    font-weight: 900;\n    pointer-events:none;\n    font-size: 14px;\n  }\n  .mz-search{\n    width:100%;\n    background: rgba(255,255,255,.05);\n    border: 1px solid var(--border);\n    color: var(--text);\n    border-radius: 12px;\n    padding: 9px 10px 9px 38px;\n    outline:none;\n    font-size: 13px;\n  }\n\n  .mz-dd{\n    position:absolute; left:0; right:0; top:41px;\n    background: rgba(12,8,22,.98);\n    border: 1px solid var(--border);\n    border-radius: 12px;\n    overflow:auto;\n    max-height: 260px;\n    z-index: 20;\n    box-shadow: 0 16px 34px rgba(0,0,0,.45);\n  }\n  .mz-dd button{\n    width:100%;\n    border:0;\n    background: transparent;\n    color: var(--text);\n    text-align:left;\n    padding: 9px 10px;\n    cursor:pointer;\n    border-bottom: 1px solid rgba(255,255,255,.05);\n    font-size: 13px;\n  }\n  .mz-dd button:hover{ background: rgba(139,92,246,.11); }\n  .mz-dd small{ display:block; margin-top:2px; color: var(--muted); font-size: 11px; }\n\n  \/* Right side controls *\/\n  .mz-right{\n    display:flex;\n    gap: 8px;\n    align-items:stretch;\n    justify-content:flex-end;\n    flex-wrap: wrap;\n  }\n\n  \/* Days strip *\/\n  .mz-days{\n    display:flex;\n    gap: 6px;\n    align-items:center;\n    padding: 6px 8px;\n    border: 1px solid var(--border);\n    background: rgba(255,255,255,.025);\n    border-radius: 12px;\n    white-space: nowrap;\n  }\n  .mz-day{\n    border:1px solid rgba(255,255,255,.10);\n    background: rgba(255,255,255,.035);\n    color: rgba(255,255,255,.90);\n    border-radius: 10px;\n    padding: 7px 9px;\n    cursor:pointer;\n    font-weight: 900;\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    min-width: 40px;\n    text-align:center;\n    font-size: 13px;\n  }\n  .mz-day span{\n    display:block;\n    font-size: 9px;\n    font-weight: 750;\n    color: var(--muted);\n    margin-top: 3px;\n    letter-spacing:.2px;\n  }\n  .mz-day.is-on{\n    background: rgba(139,92,246,.20);\n    border-color: rgba(167,139,250,.45);\n    color:#fff;\n  }\n\n  .mz-field{\n    display:flex;\n    gap: 7px;\n    align-items:center;\n    padding: 6px 8px;\n    border: 1px solid var(--border);\n    background: rgba(255,255,255,.025);\n    border-radius: 12px;\n  }\n  .mz-field span{\n    font-size: 11px;\n    color: var(--muted);\n    font-weight: 700;\n  }\n  .mz-field input{\n    background: rgba(255,255,255,.05);\n    border: 1px solid rgba(255,255,255,.10);\n    color: var(--text);\n    border-radius: 10px;\n    padding: 6px 7px;\n    outline:none;\n    min-width: 110px;\n    font-size: 13px;\n  }\n\n  .mz-now{\n    border: 1px solid rgba(255,255,255,.12);\n    background: rgba(139,92,246,.18);\n    color:#fff;\n    padding: 9px 12px;\n    border-radius: 12px;\n    cursor:pointer;\n    font-weight: 900;\n    font-size: 13px;\n  }\n\n  \/* ===== Rows ===== *\/\n  .mz-rows{ padding: 10px 10px 14px; }\n\n  .mz-row{\n    display:grid;\n    grid-template-columns: 320px 1fr;\n    gap: 10px;\n    align-items:center;\n    padding: 9px;\n    border-radius: 14px;\n    background: rgba(255,255,255,.02);\n    border: 1px solid rgba(255,255,255,.05);\n    margin-bottom: 10px;\n  }\n  .mz-row.dragging{ opacity:.65; outline:2px dashed rgba(167,139,250,.40); }\n\n  .mz-city{\n    display:flex; gap:10px; align-items:flex-start;\n    padding: 11px;\n    border-radius: 14px;\n    background: rgba(255,255,255,.03);\n    border: 1px solid var(--border);\n  }\n  .mz-x{\n    width:18px;height:18px;border-radius:6px;\n    display:grid;place-items:center;\n    background: rgba(255,255,255,.05);\n    border: 1px solid var(--border2);\n    cursor:pointer;\n    color: rgba(255,255,255,.80);\n    font-weight: 900;\n    line-height:1;\n    margin-top:2px;\n    flex:0 0 auto;\n  }\n  .mz-meta{ min-width:0; width:100%; }\n  .mz-name{\n    display:flex; justify-content:space-between; gap:10px;\n    font-weight: 900;\n    font-size: 14px;\n  }\n  .mz-sel{\n    font-variant-numeric: tabular-nums;\n    font-weight: 950;\n    color: rgba(255,255,255,.94);\n  }\n  .mz-sub{\n    margin-top:6px;\n    font-size:11px;\n    color: var(--muted);\n    white-space:nowrap;\n    overflow:hidden;\n    text-overflow:ellipsis;\n  }\n  .mz-pill{\n    display:inline-block;\n    padding:2px 7px;\n    border-radius:999px;\n    border:1px solid rgba(255,255,255,.10);\n    background: rgba(255,255,255,.05);\n    margin-left:6px;\n    color: rgba(255,255,255,.82);\n    font-variant-numeric: tabular-nums;\n    font-size: 11px;\n  }\n\n  \/* ===== Base bar layout (kept) ===== *\/\n  .mz-barWrap{\n    border-radius: 14px;\n    border: 1px solid rgba(255,255,255,.06);\n    background: rgba(255,255,255,.02);\n    overflow-x:auto;\n    overflow-y:visible;\n    padding-top: 16px;\n  }\n  .mz-bar{\n    display:flex;\n    width:100%;\n    min-width: 820px;\n  }\n  .mz-slot{\n    flex: 1 0 0;\n    min-width: 44px;\n    padding: 9px 0 9px;\n    text-align:center;\n    cursor:pointer;\n    user-select:none;\n    background: rgba(255,255,255,.03);\n    border-right: 1px solid rgba(255,255,255,.05);\n    font-variant-numeric: tabular-nums;\n    position:relative;\n  }\n  .mz-slot:nth-child(odd){ background: rgba(255,255,255,.026); }\n  .mz-slot:hover{ background: rgba(139,92,246,.085); }\n\n  .mz-slot .n{\n    font-size: 15px;\n    font-weight: 950;\n    letter-spacing: .2px;\n  }\n  .mz-slot .ap{\n    font-size: 10px;\n    color: rgba(255,255,255,.58);\n    margin-top: 3px;\n    font-weight: 850;\n    letter-spacing:.15px;\n  }\n\n  .mz-slot.is-focus{\n    background: rgba(139,92,246,.17) !important;\n    outline: 1px solid rgba(167,139,250,.45);\n    outline-offset: -1px;\n  }\n\n  \/* single-line \"DEC 13\" marker *\/\n  .mz-daymark{\n    position:absolute;\n    left:50%;\n    transform: translateX(-50%);\n    top: -13px;\n    font-size: 7.5px;\n    font-weight: 900;\n    padding: 1px 6px;\n    border-radius: 999px;\n    background: rgba(255,255,255,.06);\n    border: 1px solid rgba(255,255,255,.09);\n    color: rgba(255,255,255,.70);\n    text-transform: uppercase;\n    pointer-events:none;\n    z-index: 5;\n    white-space: nowrap;\n    letter-spacing: .25px;\n  }\n\n  @media (max-width: 980px){\n    .mz-controls{ grid-template-columns: 1fr; }\n    .mz-row{ grid-template-columns: 1fr; }\n    .mz-right{ justify-content:flex-start; }\n  }\n\n  \/* =========================================================\n     NEW PURPLE SLIDER DESIGN (ONLY VISUAL OVERRIDES)\n     ========================================================= *\/\n\n  .mz-barWrap{\n    border: 1px solid rgba(167,139,250,.18) !important;\n    background:\n      radial-gradient(900px 220px at 20% 0%, rgba(139,92,246,.14), transparent 60%),\n      rgba(255,255,255,.02) !important;\n  }\n\n  .mz-slot{\n    background:\n      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;\n    border-right: 1px solid rgba(167,139,250,.08) !important;\n    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;\n  }\n\n  .mz-slot:hover{\n    background:\n      linear-gradient(180deg, rgba(139,92,246,.14), rgba(139,92,246,.06)) !important;\n    box-shadow: inset 0 0 0 1px rgba(167,139,250,.18);\n  }\n\n  .mz-slot.is-focus{\n    background:\n      linear-gradient(180deg, rgba(139,92,246,.28), rgba(139,92,246,.12)) !important;\n    outline: 1px solid rgba(167,139,250,.65) !important;\n    outline-offset: -1px !important;\n    box-shadow:\n      inset 0 0 0 1px rgba(167,139,250,.22),\n      0 8px 18px rgba(139,92,246,.18);\n  }\n\n  .mz-slot .ap{\n    color: rgba(200,184,255,.70) !important;\n  }\n\n  .mz-daymark{\n    background: rgba(139,92,246,.12) !important;\n    border: 1px solid rgba(167,139,250,.22) !important;\n    color: rgba(230,224,255,.82) !important;\n  }\n\n  .mz-barWrap::-webkit-scrollbar{ height: 10px; }\n  .mz-barWrap::-webkit-scrollbar-track{\n    background: rgba(255,255,255,.03);\n    border-radius: 999px;\n  }\n  .mz-barWrap::-webkit-scrollbar-thumb{\n    background: linear-gradient(90deg, rgba(139,92,246,.55), rgba(167,139,250,.45));\n    border: 1px solid rgba(255,255,255,.10);\n    border-radius: 999px;\n  }\n  .mz-barWrap::-webkit-scrollbar-thumb:hover{\n    background: linear-gradient(90deg, rgba(139,92,246,.70), rgba(167,139,250,.55));\n  }\n<\/style>\n\n<script>\n(() => {\n  const rowsEl = document.getElementById(\"mz-rows\");\n  const qEl = document.getElementById(\"mz-q\");\n  const ddEl = document.getElementById(\"mz-dd\");\n  const daysEl = document.getElementById(\"mz-days\");\n  const timeEl = document.getElementById(\"mz-time\");\n  const nowBtn = document.getElementById(\"mz-now\");\n\n  const ALL_TZ = (Intl.supportedValuesOf && Intl.supportedValuesOf(\"timeZone\")) || [\n  \/\/ US & Canada\n  \"America\/New_York\",\n  \"America\/Toronto\",\n  \"America\/Los_Angeles\",\n\n  \/\/ Europe\n  \"Europe\/London\",\n  \"Europe\/Berlin\",\n  \"Europe\/Paris\",\n\n  \/\/ Middle East\n  \"Asia\/Dubai\",\n\n  \/\/ APAC\n  \"Asia\/Singapore\",\n  \"Asia\/Tokyo\",\n\n  \/\/ Optional extras\n  \"Asia\/Kolkata\",\n  \"Australia\/Sydney\"\n];\nlet cities = [\n  { name: \"New York\",    tz: \"America\/New_York\" },\n  { name: \"Los Angeles\",tz: \"America\/Los_Angeles\" },\n  { name: \"Paris\", tz: \"Europe\/Paris\" },\n  { name: \"Dubai\",      tz: \"Asia\/Dubai\" },\n  { name: \"Toronto\",    tz: \"America\/Toronto\" },\n  { name: \"Singapore\",  tz: \"Asia\/Singapore\" },\n];\n\n  let selectedDate = startOfDay(new Date());\n  let focusUtcMs = null;\n\n  const _fmtCache = new Map();\n  function safeTz(tz){\n    try { new Intl.DateTimeFormat(\"en-US\", { timeZone: tz }).format(new Date()); return tz; }\n    catch(e){ return \"UTC\"; }\n  }\n  function getFmt(key, opts){\n    const k = key + JSON.stringify(opts);\n    if(_fmtCache.has(k)) return _fmtCache.get(k);\n    const f = new Intl.DateTimeFormat(\"en-US\", opts);\n    _fmtCache.set(k, f);\n    return f;\n  }\n\n  init();\n\n  function init(){\n    if(!timeEl.value) setTimeToNow();\n\n    renderDaysBar();\n    renderRows();\n    syncFocusFromPickers();\n\n    \/\/ Elementor-safe repaint\n    paint();\n    requestAnimationFrame(paint);\n    setTimeout(paint, 0);\n    setTimeout(paint, 80);\n\n    wire();\n  }\n\n  function wire(){\n    qEl.addEventListener(\"input\", () => showDD(qEl.value.trim()));\n    qEl.addEventListener(\"focus\", () => showDD(qEl.value.trim()));\n    qEl.addEventListener(\"blur\", () => setTimeout(()=>ddEl.hidden = true, 150));\n\n    qEl.addEventListener(\"keydown\", (e) => {\n      if(e.key === \"Enter\"){\n        e.preventDefault();\n        const q = qEl.value.trim();\n        if(!q) return;\n        const pick = bestMatch(q);\n        if(pick) addCity(pick);\n      }\n    });\n\n    timeEl.addEventListener(\"change\", () => { syncFocusFromPickers(); paint(); });\n\n    nowBtn.addEventListener(\"click\", () => {\n      selectedDate = startOfDay(new Date());\n      setTimeToNow();\n      renderDaysBar();\n      syncFocusFromPickers();\n      paint();\n      requestAnimationFrame(paint);\n      setTimeout(paint, 80);\n    });\n  }\n\n  function renderDaysBar(){\n    const base = startOfDay(selectedDate);\n    const start = addDays(base, -1);\n    daysEl.innerHTML = \"\";\n    for(let i=0;i<7;i++){\n      const d = addDays(start, i);\n      const btn = document.createElement(\"button\");\n      btn.className = \"mz-day\" + (sameDay(d, base) ? \" is-on\" : \"\");\n      btn.type = \"button\";\n      btn.innerHTML = `${d.getDate()}<span>${monthShort(d)}<\/span>`;\n      btn.addEventListener(\"click\", () => {\n        selectedDate = startOfDay(d);\n        renderDaysBar();\n        syncFocusFromPickers();\n        paint();\n        requestAnimationFrame(paint);\n      });\n      daysEl.appendChild(btn);\n    }\n  }\n\n  function renderRows(){\n    rowsEl.innerHTML = \"\";\n    cities.forEach((c, idx) => rowsEl.appendChild(rowNode(c, idx)));\n    dnd();\n  }\n\n  function rowNode(city, idx){\n    const row = document.createElement(\"div\");\n    row.className = \"mz-row\";\n    row.draggable = true;\n    row.dataset.index = String(idx);\n    row.dataset.tz = city.tz;\n\n    const left = document.createElement(\"div\");\n    left.className = \"mz-city\";\n    left.innerHTML = `\n      <div class=\"mz-x\" title=\"Remove\">\u00d7<\/div>\n      <div class=\"mz-meta\">\n        <div class=\"mz-name\">\n          <span>${esc(city.name)}<\/span>\n          <span class=\"mz-sel\">--:--<\/span>\n        <\/div>\n        <div class=\"mz-sub\">\n          ${esc(city.tz)} <span class=\"mz-pill mz-gmt\">GMT<\/span>\n        <\/div>\n      <\/div>\n    `;\n\n    left.querySelector(\".mz-x\").addEventListener(\"click\", () => {\n      cities = cities.filter((_, i) => i !== idx);\n      renderRows();\n      syncFocusFromPickers();\n      paint();\n      requestAnimationFrame(paint);\n    });\n\n    const barWrap = document.createElement(\"div\");\n    barWrap.className = \"mz-barWrap\";\n\n    const bar = document.createElement(\"div\");\n    bar.className = \"mz-bar\";\n\n    for(let h=0; h<24; h++){\n      const slot = document.createElement(\"div\");\n      slot.className = \"mz-slot\";\n      slot.dataset.h = String(h);\n\n      slot.addEventListener(\"click\", () => {\n        const baseTz = safeTz(cities[0]?.tz || city.tz);\n        const minute = getPickerMinute();\n        focusUtcMs = zonedToUtcMs(\n          selectedDate.getFullYear(),\n          selectedDate.getMonth()+1,\n          selectedDate.getDate(),\n          h,\n          minute,\n          baseTz\n        );\n        timeEl.value = `${pad(h)}:${pad(minute)}`;\n        paint();\n      });\n\n      bar.appendChild(slot);\n    }\n\n    barWrap.appendChild(bar);\n    row.appendChild(left);\n    row.appendChild(barWrap);\n    return row;\n  }\n\n  function dnd(){\n    let from = null;\n    rowsEl.querySelectorAll(\".mz-row\").forEach(r => {\n      r.addEventListener(\"dragstart\", (e) => {\n        from = Number(r.dataset.index);\n        r.classList.add(\"dragging\");\n        e.dataTransfer.effectAllowed=\"move\";\n      });\n      r.addEventListener(\"dragend\", () => r.classList.remove(\"dragging\"));\n      r.addEventListener(\"dragover\", (e) => { e.preventDefault(); e.dataTransfer.dropEffect=\"move\"; });\n      r.addEventListener(\"drop\", (e) => {\n        e.preventDefault();\n        const to = Number(r.dataset.index);\n        if(from === null || from === to) return;\n\n        const next = [...cities];\n        const [moved] = next.splice(from, 1);\n        next.splice(to, 0, moved);\n        cities = next;\n\n        renderRows();\n        syncFocusFromPickers();\n        paint();\n        requestAnimationFrame(paint);\n      });\n    });\n  }\n\n  function paint(){\n    if(!cities.length) return;\n    if(focusUtcMs == null) syncFocusFromPickers();\n\n    const baseTz = safeTz(cities[0].tz);\n    const baseHour = Number(dtParts(new Date(focusUtcMs), baseTz).hour);\n\n    rowsEl.querySelectorAll(\".mz-row\").forEach(row => {\n      try{\n        const tz = safeTz(row.dataset.tz);\n\n        row.querySelector(\".mz-sel\").textContent = fmtTime(focusUtcMs, tz);\n        row.querySelector(\".mz-gmt\").textContent = tzOffsetLabel(focusUtcMs, tz);\n\n        const slots = row.querySelectorAll(\".mz-slot\");\n        let prevYMD = null;\n\n        slots.forEach((slot, h) => {\n          const minute = getPickerMinute();\n\n          const utc = zonedToUtcMs(\n            selectedDate.getFullYear(),\n            selectedDate.getMonth()+1,\n            selectedDate.getDate(),\n            h,\n            minute,\n            baseTz\n          );\n\n          const label = hourLabelParts(utc, tz);\n          slot.innerHTML = `<div class=\"n\">${label.h}<\/div><div class=\"ap\">${label.ap}<\/div>`;\n          slot.classList.toggle(\"is-focus\", h === baseHour);\n\n          const lp = dtParts(new Date(utc), tz);\n          const ymd = `${lp.year}-${lp.month}-${lp.day}`;\n          if(prevYMD === null || ymd !== prevYMD){\n            const m = document.createElement(\"div\");\n            m.className = \"mz-daymark\";\n            m.textContent = `${monthShortFromParts(lp)} ${Number(lp.day)}`;\n            slot.appendChild(m);\n          }\n          prevYMD = ymd;\n        });\n      }catch(e){\n        row.querySelectorAll(\".mz-slot\").forEach(slot => {\n          if(!slot.innerHTML.trim()){\n            slot.innerHTML = `<div class=\"n\">\u2013<\/div><div class=\"ap\">\u2013<\/div>`;\n          }\n        });\n      }\n    });\n  }\n\n  function syncFocusFromPickers(){\n    if(!cities.length) return;\n    const baseTz = safeTz(cities[0].tz);\n    const [hh, mm] = (timeEl.value || \"00:00\").split(\":\").map(n => parseInt(n,10));\n    focusUtcMs = zonedToUtcMs(\n      selectedDate.getFullYear(),\n      selectedDate.getMonth()+1,\n      selectedDate.getDate(),\n      hh||0,\n      mm||0,\n      baseTz\n    );\n  }\n\n  function showDD(q){\n    const query = (q||\"\").toLowerCase();\n    if(!query){ ddEl.hidden = true; return; }\n\n    const res = [];\n    for(const tz of ALL_TZ){\n      const name = tzToCity(tz);\n      const hay = (name + \" \" + tz).toLowerCase();\n      if(hay.includes(query)) res.push({ name, tz });\n      if(res.length >= 120) break;\n    }\n    if(!res.length){ ddEl.hidden = true; return; }\n\n    ddEl.innerHTML = \"\";\n    res.slice(0, 80).forEach(item => {\n      const b = document.createElement(\"button\");\n      b.type = \"button\";\n      b.innerHTML = `<b>${esc(item.name)}<\/b><small>${esc(item.tz)}<\/small>`;\n      b.addEventListener(\"mousedown\", (e) => { e.preventDefault(); addCity(item); });\n      ddEl.appendChild(b);\n    });\n    ddEl.hidden = false;\n  }\n\n  function bestMatch(q){\n    const query = q.toLowerCase();\n    const exactTz = ALL_TZ.find(t => t.toLowerCase() === query);\n    if(exactTz) return { name: tzToCity(exactTz), tz: exactTz };\n    for(const tz of ALL_TZ){\n      const name = tzToCity(tz);\n      if((name + \" \" + tz).toLowerCase().includes(query)) return { name, tz };\n    }\n    return null;\n  }\n\n  function addCity(item){\n    if(cities.some(c => c.tz === item.tz)){\n      qEl.value = \"\";\n      ddEl.hidden = true;\n      return;\n    }\n    cities.push({ name: item.name, tz: item.tz });\n    qEl.value = \"\";\n    ddEl.hidden = true;\n    renderRows();\n    syncFocusFromPickers();\n    paint();\n    requestAnimationFrame(paint);\n    setTimeout(paint, 80);\n  }\n\n  function hourLabelParts(utcMs, tz){\n    tz = safeTz(tz);\n    const parts = getFmt(\"hourParts\", { timeZone: tz, hour: \"numeric\", hour12: true })\n      .formatToParts(new Date(utcMs));\n    return {\n      h: parts.find(p=>p.type===\"hour\")?.value || \"\",\n      ap: (parts.find(p=>p.type===\"dayPeriod\")?.value || \"\").toLowerCase()\n    };\n  }\n\n  function fmtTime(utcMs, tz){\n    tz = safeTz(tz);\n    return getFmt(\"timeHM\", { timeZone: tz, hour: \"numeric\", minute: \"2-digit\", hour12: true })\n      .format(new Date(utcMs));\n  }\n\n  function tzOffsetLabel(utcMs, tz){\n    tz = safeTz(tz);\n    try{\n      const parts = getFmt(\"offset\", { timeZone: tz, timeZoneName: \"shortOffset\", hour: \"2-digit\" })\n        .formatToParts(new Date(utcMs));\n      return (parts.find(p=>p.type===\"timeZoneName\")?.value || \"GMT\")\n        .replace(\":00\",\"\").replace(\"GMT+0\",\"GMT+\").replace(\"GMT-0\",\"GMT-\");\n    }catch(e){\n      return \"GMT\";\n    }\n  }\n\n  function dtParts(date, timeZone){\n    timeZone = safeTz(timeZone);\n    const parts = getFmt(\"partsFull\", {\n      timeZone,\n      year:\"numeric\", month:\"2-digit\", day:\"2-digit\",\n      hour:\"2-digit\", minute:\"2-digit\", second:\"2-digit\",\n      hour12:false\n    }).formatToParts(date);\n\n    const out = {};\n    for(const p of parts) out[p.type] = p.value;\n    return out;\n  }\n\n  function zonedToUtcMs(y, m, d, h, min, timeZone){\n    const guess = new Date(Date.UTC(y, m-1, d, h, min, 0));\n    const parts = dtParts(guess, timeZone);\n    const asUtc = Date.UTC(\n      Number(parts.year), Number(parts.month)-1, Number(parts.day),\n      Number(parts.hour), Number(parts.minute), Number(parts.second)\n    );\n    const offset = guess.getTime() - asUtc;\n    return guess.getTime() + offset;\n  }\n\n  function getPickerMinute(){\n    return parseInt((timeEl.value || \"00:00\").split(\":\")[1] || \"0\", 10) || 0;\n  }\n\n  function setTimeToNow(){\n    const n = new Date();\n    timeEl.value = `${pad(n.getHours())}:${pad(n.getMinutes())}`;\n  }\n\n  function startOfDay(d){\n    const x = new Date(d);\n    x.setHours(0,0,0,0);\n    return x;\n  }\n\n  function addDays(d, n){ const x = new Date(d); x.setDate(x.getDate()+n); return x; }\n  function sameDay(a,b){ return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); }\n  function pad(n){ return String(n).padStart(2,\"0\"); }\n  function tzToCity(tz){ return (tz.split(\"\/\").pop() || tz).replaceAll(\"_\",\" \"); }\n  function monthShort(d){ return d.toLocaleString(\"en-US\",{month:\"short\"}); }\n  function esc(s){ return String(s).replace(\/[&<>\"']\/g, m => ({ \"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#039;\" }[m])); }\n\n  const MONTHS = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"];\n  function monthShortFromParts(p){ return MONTHS[Number(p.month)-1] || \"Mon\"; }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-843fb38 e-flex e-con-boxed e-con e-parent\" data-id=\"843fb38\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7689ae7 elementor-widget elementor-widget-html\" data-id=\"7689ae7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"mz-manual\">\n  <h2>How to Use the Free Time Converter<\/h2>\n  <p class=\"mz-intro\">\n    Plan international calls, meetings, and remote work hours without guessing.\n    This tool shows real-time overlaps across countries so you always pick the right moment.\n  <\/p>\n\n  <div class=\"mz-steps\">\n    <div class=\"mz-step\">\n      <h3>1. Add cities or time zones<\/h3>\n      <p>\n        Use the search bar to add cities (for example <b>New York<\/b>, <b>Berlin<\/b>, or <b>Singapore<\/b>).\n        You can search by city name or timezone.\n      <\/p>\n      <span class=\"mz-tip\">Pro tip: Add your main client or team location first.<\/span>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>2. Reorder cities<\/h3>\n      <p>\n        Drag and drop cities up or down.  \n        The <b>top city becomes the reference timezone<\/b> for all calculations.\n      <\/p>\n      <span class=\"mz-tip\">For US-based work, keep New York or Toronto at the top.<\/span>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>3. Select a date<\/h3>\n      <p>\n        Use the day selector to move between dates.\n        The tool automatically accounts for day changes between countries.\n      <\/p>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>4. Choose a time<\/h3>\n      <p>\n        Set a specific time using the time picker, or click <b>Now<\/b> to jump to the current moment.\n        All cities update instantly.\n      <\/p>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>5. Click the timeline<\/h3>\n      <p>\n        Click directly on any hour block to instantly test a meeting time.\n        The selected hour is highlighted across all cities.\n      <\/p>\n      <span class=\"mz-tip\">This is the fastest way to find overlaps.<\/span>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>6. Understand the timeline<\/h3>\n      <p>\n        Each row represents a city, and each column represents an hour.\n        Date markers (for example <b>DEC 13<\/b>) show when the day changes.\n      <\/p>\n      <p>\n        Timezone offsets (GMT) are displayed next to each city to avoid confusion.\n      <\/p>\n    <\/div>\n\n    <div class=\"mz-step\">\n      <h3>7. Remove cities<\/h3>\n      <p>\n        Click the <b>\u00d7<\/b> icon next to any city to remove it from the view.\n        The timeline recalculates instantly.\n      <\/p>\n    <\/div>\n  <\/div>\n\n  <div class=\"mz-pro\">\n    <h3>Pro tips for remote work<\/h3>\n    <ul>\n      <li>Limit your view to 3\u20135 cities for clarity<\/li>\n      <li>Schedule EU calls between <b>13:00\u201318:00<\/b> (CET-friendly)<\/li>\n      <li>Schedule US East calls between <b>18:00\u201322:00<\/b> (ET overlap)<\/li>\n      <li>Always check date changes for late-night meetings<\/li>\n    <\/ul>\n  <\/div>\n\n  <div class=\"mz-footer-note\">\n    <p>\n      \ud83d\udd12 <b>Privacy-first:<\/b> No accounts, no tracking, no stored data.  \n      Everything runs locally in your browser.\n    <\/p>\n  <\/div>\n<\/section>\n\n<style>\n.mz-manual{\n  max-width: 900px;\n  margin: 60px auto 0;\n  padding: 32px;\n  border-radius: 18px;\n  background:\n    radial-gradient(800px 300px at 20% 0%, rgba(139,92,246,.14), transparent 60%),\n    rgba(15,10,30,.9);\n  border: 1px solid rgba(167,139,250,.18);\n  color: #f5f3ff;\n  font-family: system-ui, -apple-system, Segoe UI, Roboto;\n}\n\n.mz-manual h2{\n  font-size: 28px;\n  font-weight: 900;\n  margin-bottom: 10px;\n}\n\n.mz-intro{\n  color: rgba(255,255,255,.75);\n  margin-bottom: 28px;\n  font-size: 15px;\n}\n\n.mz-steps{\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 22px;\n}\n\n.mz-step h3{\n  font-size: 18px;\n  margin-bottom: 6px;\n}\n\n.mz-step p{\n  font-size: 14px;\n  color: rgba(255,255,255,.85);\n  line-height: 1.6;\n}\n\n.mz-tip{\n  display: inline-block;\n  margin-top: 6px;\n  font-size: 12px;\n  color: #c4b5fd;\n}\n\n.mz-pro{\n  margin-top: 36px;\n  padding: 20px;\n  border-radius: 14px;\n  background: rgba(139,92,246,.12);\n  border: 1px solid rgba(167,139,250,.25);\n}\n\n.mz-pro h3{\n  font-size: 18px;\n  margin-bottom: 12px;\n}\n\n.mz-pro ul{\n  padding-left: 18px;\n  margin: 0;\n}\n\n.mz-pro li{\n  font-size: 14px;\n  margin-bottom: 8px;\n  color: rgba(255,255,255,.9);\n}\n\n.mz-footer-note{\n  margin-top: 28px;\n  font-size: 13px;\n  color: rgba(255,255,255,.7);\n  text-align: center;\n}\n\n\/* Responsive *\/\n@media (max-width: 640px){\n  .mz-manual{\n    padding: 22px;\n    margin-top: 40px;\n  }\n  .mz-manual h2{\n    font-size: 22px;\n  }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Free Time Converter (Search cities \u2022 drag to reorder \u2022 click blocks) + Time Now How to Use the Free Time Converter Plan international calls, meetings, and remote work hours without guessing. This tool shows real-time overlaps across countries so you always pick the right moment. 1. Add cities or time zones Use the search [&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-3800","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Free Time Converter by Mazurly<\/title>\n<meta name=\"description\" content=\"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mazurly.com\/de\/free-time-converter\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free Time Converter by Mazurly\" \/>\n<meta property=\"og:description\" content=\"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mazurly.com\/de\/free-time-converter\/\" \/>\n<meta property=\"og:site_name\" content=\"Mazurly\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-13T18:26:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mazurly.com\\\/free-time-converter\\\/\",\"url\":\"https:\\\/\\\/mazurly.com\\\/free-time-converter\\\/\",\"name\":\"Free Time Converter by Mazurly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mazurly.com\\\/#website\"},\"datePublished\":\"2025-12-13T14:07:51+00:00\",\"dateModified\":\"2025-12-13T18:26:28+00:00\",\"description\":\"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mazurly.com\\\/free-time-converter\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mazurly.com\\\/free-time-converter\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mazurly.com\\\/free-time-converter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mazurly.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Free Time Converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mazurly.com\\\/#website\",\"url\":\"https:\\\/\\\/mazurly.com\\\/\",\"name\":\"Mazurly\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/mazurly.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mazurly.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mazurly.com\\\/#organization\",\"name\":\"Mazurly\",\"url\":\"https:\\\/\\\/mazurly.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/mazurly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mazurly.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Mazurly-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/mazurly.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Mazurly-logo-1.png\",\"width\":350,\"height\":100,\"caption\":\"Mazurly\"},\"image\":{\"@id\":\"https:\\\/\\\/mazurly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Free Time Converter by Mazurly","description":"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mazurly.com\/de\/free-time-converter\/","og_locale":"de_DE","og_type":"article","og_title":"Free Time Converter by Mazurly","og_description":"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.","og_url":"https:\/\/mazurly.com\/de\/free-time-converter\/","og_site_name":"Mazurly","article_modified_time":"2025-12-13T18:26:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mazurly.com\/free-time-converter\/","url":"https:\/\/mazurly.com\/free-time-converter\/","name":"Free Time Converter by Mazurly","isPartOf":{"@id":"https:\/\/mazurly.com\/#website"},"datePublished":"2025-12-13T14:07:51+00:00","dateModified":"2025-12-13T18:26:28+00:00","description":"Plan international meetings effortlessly with our free time zone converter. Compare cities, spot overlaps, and schedule calls with confidence.","breadcrumb":{"@id":"https:\/\/mazurly.com\/free-time-converter\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mazurly.com\/free-time-converter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mazurly.com\/free-time-converter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mazurly.com\/"},{"@type":"ListItem","position":2,"name":"Free Time Converter"}]},{"@type":"WebSite","@id":"https:\/\/mazurly.com\/#website","url":"https:\/\/mazurly.com\/","name":"Mazurly","description":"","publisher":{"@id":"https:\/\/mazurly.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mazurly.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/mazurly.com\/#organization","name":"Mazurly","url":"https:\/\/mazurly.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/mazurly.com\/#\/schema\/logo\/image\/","url":"https:\/\/mazurly.com\/wp-content\/uploads\/2024\/12\/Mazurly-logo-1.png","contentUrl":"https:\/\/mazurly.com\/wp-content\/uploads\/2024\/12\/Mazurly-logo-1.png","width":350,"height":100,"caption":"Mazurly"},"image":{"@id":"https:\/\/mazurly.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/pages\/3800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/comments?post=3800"}],"version-history":[{"count":37,"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/pages\/3800\/revisions"}],"predecessor-version":[{"id":3844,"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/pages\/3800\/revisions\/3844"}],"wp:attachment":[{"href":"https:\/\/mazurly.com\/de\/wp-json\/wp\/v2\/media?parent=3800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}