{"id":241,"date":"2026-03-05T11:38:48","date_gmt":"2026-03-05T11:38:48","guid":{"rendered":"https:\/\/kalenderwoche.info\/blog\/?page_id=241"},"modified":"2026-03-05T11:46:37","modified_gmt":"2026-03-05T11:46:37","slug":"countdown-rechner","status":"publish","type":"page","link":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/","title":{"rendered":"Countdown Rechner"},"content":{"rendered":"\n<section id=\"tool__countdown-rechner\" aria-label=\"Countdown Rechner\">\n  <style>\n    #tool__countdown-rechner{--bg:#ffffff;--panel:#f5f7fa;--text:#0b1220;--muted:#4b5563;--line:#d7dde6;--focus:#1d4ed8;--danger:#b91c1c;--ok:#0f766e;--btn:#111827;--btnText:#ffffff;--btnGhost:#ffffff;--btnGhostText:#111827;--radius:14px;--pad:18px;max-width:720px;margin:18px auto;box-sizing:border-box;color:var(--text);font:inherit}\n    #tool__countdown-rechner *{box-sizing:border-box}\n    #tool__countdown-rechner .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px}\n    #tool__countdown-rechner h2{margin:0 0 12px 0;font-size:1.25rem;line-height:1.25}\n    #tool__countdown-rechner .sub{margin:0 0 18px 0;color:var(--muted);font-size:.98rem;line-height:1.45}\n    #tool__countdown-rechner form{margin:0}\n    #tool__countdown-rechner .grid{display:grid;grid-template-columns:1fr;gap:12px}\n    @media (min-width:640px){\n      #tool__countdown-rechner .grid{grid-template-columns:1.2fr .6fr .6fr .6fr}\n      #tool__countdown-rechner .span-2{grid-column:span 2}\n      #tool__countdown-rechner .span-4{grid-column:span 4}\n    }\n    #tool__countdown-rechner label{display:block;font-weight:600;font-size:.95rem;margin:0 0 6px 0}\n    #tool__countdown-rechner .help{display:block;margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.35}\n    #tool__countdown-rechner input[type=\"date\"],\n    #tool__countdown-rechner input[type=\"number\"]{\n      width:100%;\n      border:1px solid var(--line);\n      border-radius:12px;\n      padding:12px 12px;\n      font:inherit;\n      background:#fff;\n      color:var(--text);\n      min-height:44px;\n    }\n    #tool__countdown-rechner input[type=\"number\"]{appearance:textfield}\n    #tool__countdown-rechner input[type=\"number\"]::-webkit-outer-spin-button,\n    #tool__countdown-rechner input[type=\"number\"]::-webkit-inner-spin-button{appearance:none;margin:0}\n    #tool__countdown-rechner input:focus{outline:3px solid rgba(29,78,216,.22);border-color:rgba(29,78,216,.65)}\n    #tool__countdown-rechner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}\n    #tool__countdown-rechner .row-between{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}\n    #tool__countdown-rechner .toggles{display:flex;flex-wrap:wrap;gap:10px}\n    #tool__countdown-rechner .toggle{\n      display:flex;align-items:center;gap:10px;\n      padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);\n      min-height:44px\n    }\n    #tool__countdown-rechner .toggle input{width:18px;height:18px}\n    #tool__countdown-rechner .btns{display:flex;flex-wrap:wrap;gap:10px}\n    #tool__countdown-rechner button{\n      border:1px solid transparent;border-radius:12px;padding:12px 14px;\n      font:inherit;font-weight:700;cursor:pointer;min-height:44px\n    }\n    #tool__countdown-rechner button:focus{outline:3px solid rgba(29,78,216,.22)}\n    #tool__countdown-rechner .btn-primary{background:var(--btn);color:var(--btnText)}\n    #tool__countdown-rechner .btn-ghost{background:var(--btnGhost);color:var(--btnGhostText);border-color:var(--line)}\n    #tool__countdown-rechner .btn-primary:disabled{opacity:.55;cursor:not-allowed}\n    #tool__countdown-rechner .status{\n      margin-top:14px;\n      border-radius:14px;\n      border:1px solid var(--line);\n      background:var(--panel);\n      padding:14px;\n    }\n    #tool__countdown-rechner .status-top{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between}\n    #tool__countdown-rechner .kpi-wrap{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}\n    @media (min-width:640px){\n      #tool__countdown-rechner .kpi-wrap{grid-template-columns:repeat(4,1fr)}\n    }\n    #tool__countdown-rechner .kpi{\n      background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px\n    }\n    #tool__countdown-rechner .kpi .v{font-size:1.15rem;font-weight:800;letter-spacing:.2px}\n    #tool__countdown-rechner .kpi .l{margin-top:4px;color:var(--muted);font-size:.9rem}\n    #tool__countdown-rechner .meta{margin-top:12px;color:var(--muted);font-size:.95rem;line-height:1.45}\n    #tool__countdown-rechner .msg{margin:0;font-size:.98rem;line-height:1.45}\n    #tool__countdown-rechner .msg.error{color:var(--danger);font-weight:700}\n    #tool__countdown-rechner .pill{\n      display:inline-flex;align-items:center;gap:8px;\n      padding:6px 10px;border-radius:999px;border:1px solid var(--line);\n      background:#fff;color:var(--text);font-weight:700;font-size:.9rem\n    }\n    #tool__countdown-rechner .pill.ok{border-color:rgba(15,118,110,.35)}\n    #tool__countdown-rechner .pill.warn{border-color:rgba(185,28,28,.35)}\n    #tool__countdown-rechner .copyhint{font-size:.9rem;color:var(--muted)}\n    #tool__countdown-rechner .below{margin-top:16px}\n    #tool__countdown-rechner .below p{margin:0 0 10px 0;color:var(--text);line-height:1.6}\n    #tool__countdown-rechner details{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}\n    #tool__countdown-rechner details + details{margin-top:10px}\n    #tool__countdown-rechner summary{cursor:pointer;font-weight:800}\n    #tool__countdown-rechner summary:focus{outline:3px solid rgba(29,78,216,.22);border-radius:10px}\n    #tool__countdown-rechner .sr-only{\n      position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n    }\n  <\/style>\n\n  <div class=\"card\">\n    <h2>Countdown Rechner<\/h2>\n    <p class=\"sub\">W\u00e4hlen Sie ein Ziel-Datum und eine Uhrzeit. Der Rechner zeigt Ihnen pr\u00e4zise, wie viel Zeit bis dahin verbleibt (oder seitdem vergangen ist) \u2013 inkl. Live-Countdown auf Wunsch.<\/p>\n\n    <form id=\"tool__countdown-rechner__form\" novalidate>\n      <div class=\"grid\" role=\"group\" aria-label=\"Eingaben\">\n        <div class=\"span-2\">\n          <label for=\"tool__countdown-rechner__date\">Ziel-Datum<\/label>\n          <input id=\"tool__countdown-rechner__date\" name=\"date\" type=\"date\" required \/>\n          <span class=\"help\">Datumsformat: TT.MM.JJJJ (Auswahl per Kalender). Heute ist voreingestellt plus 7 Tage.<\/span>\n        <\/div>\n\n        <div>\n          <label for=\"tool__countdown-rechner__hour\">Stunde<\/label>\n          <input id=\"tool__countdown-rechner__hour\" name=\"hour\" type=\"number\" inputmode=\"numeric\" placeholder=\"0\u201323\" min=\"0\" max=\"23\" step=\"1\" required \/>\n          <span class=\"help\">0 bis 23<\/span>\n        <\/div>\n\n        <div>\n          <label for=\"tool__countdown-rechner__minute\">Minute<\/label>\n          <input id=\"tool__countdown-rechner__minute\" name=\"minute\" type=\"number\" inputmode=\"numeric\" placeholder=\"0\u201359\" min=\"0\" max=\"59\" step=\"1\" required \/>\n          <span class=\"help\">0 bis 59<\/span>\n        <\/div>\n\n        <div class=\"span-4 row-between\">\n          <div class=\"toggles\" role=\"group\" aria-label=\"Optionen\">\n            <label class=\"toggle\" for=\"tool__countdown-rechner__live\">\n              <input id=\"tool__countdown-rechner__live\" name=\"live\" type=\"checkbox\" \/>\n              <span>Live aktualisieren<\/span>\n            <\/label>\n            <label class=\"toggle\" for=\"tool__countdown-rechner__seconds\">\n              <input id=\"tool__countdown-rechner__seconds\" name=\"seconds\" type=\"checkbox\" \/>\n              <span>Sekunden anzeigen<\/span>\n            <\/label>\n            <label class=\"toggle\" for=\"tool__countdown-rechner__remember\">\n              <input id=\"tool__countdown-rechner__remember\" name=\"remember\" type=\"checkbox\" \/>\n              <span>Eingaben merken<\/span>\n            <\/label>\n          <\/div>\n\n          <div class=\"btns\">\n            <button class=\"btn-primary\" id=\"tool__countdown-rechner__calc\" type=\"submit\">Berechnen<\/button>\n            <button class=\"btn-ghost\" id=\"tool__countdown-rechner__reset\" type=\"button\">Zur\u00fccksetzen<\/button>\n            <button class=\"btn-ghost\" id=\"tool__countdown-rechner__copy\" type=\"button\" disabled>Ergebnis kopieren<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"status-top\">\n          <div>\n            <p class=\"msg\" id=\"tool__countdown-rechner__msg\">Geben Sie Ihr Ziel ein und klicken Sie auf \u201eBerechnen\u201c. Tipp: Enter l\u00f6st die Berechnung aus, Esc setzt zur\u00fcck.<\/p>\n            <div class=\"meta\" id=\"tool__countdown-rechner__meta\"><\/div>\n          <\/div>\n          <div>\n            <span class=\"pill\" id=\"tool__countdown-rechner__pill\">Bereit<\/span>\n            <div class=\"copyhint\" id=\"tool__countdown-rechner__copyhint\"><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"kpi-wrap\" id=\"tool__countdown-rechner__kpis\" hidden>\n          <div class=\"kpi\">\n            <div class=\"v\" id=\"tool__countdown-rechner__v_days\">\u2013<\/div>\n            <div class=\"l\" id=\"tool__countdown-rechner__l_days\">Tage<\/div>\n          <\/div>\n          <div class=\"kpi\">\n            <div class=\"v\" id=\"tool__countdown-rechner__v_hours\">\u2013<\/div>\n            <div class=\"l\" id=\"tool__countdown-rechner__l_hours\">Stunden<\/div>\n          <\/div>\n          <div class=\"kpi\">\n            <div class=\"v\" id=\"tool__countdown-rechner__v_minutes\">\u2013<\/div>\n            <div class=\"l\" id=\"tool__countdown-rechner__l_minutes\">Minuten<\/div>\n          <\/div>\n          <div class=\"kpi\">\n            <div class=\"v\" id=\"tool__countdown-rechner__v_seconds\">\u2013<\/div>\n            <div class=\"l\" id=\"tool__countdown-rechner__l_seconds\">Sekunden<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"sr-only\" id=\"tool__countdown-rechner__a11y-live\" aria-live=\"assertive\" aria-atomic=\"true\"><\/div>\n    <\/form>\n\n    <div class=\"below\" aria-label=\"Erkl\u00e4rung\">\n      <p>Dieser Countdown Rechner berechnet die Zeitdifferenz zwischen dem aktuellen Zeitpunkt und einem von Ihnen gew\u00e4hlten Ziel (Datum und Uhrzeit) in Ihrer lokalen Zeitzone. So sehen Sie auf einen Blick, wie viele Tage, Stunden, Minuten und \u2013 optional \u2013 Sekunden noch verbleiben. Liegt das Ziel bereits in der Vergangenheit, zeigt das Tool stattdessen die seitdem verstrichene Zeit. Das ist praktisch f\u00fcr Deadlines, Termine, Countdowns bis zu Reisen oder auch zur Kontrolle, wie lange ein Ereignis bereits zur\u00fcckliegt.<\/p>\n      <p>Damit das Ergebnis zuverl\u00e4ssig bleibt, pr\u00fcft der Rechner alle Eingaben streng: Datum muss g\u00fcltig sein, Stunden liegen zwischen 0 und 23, Minuten zwischen 0 und 59. Auf Wunsch aktualisiert sich der Countdown automatisch, ohne unn\u00f6tige Rechenlast. Wenn Sie \u201eEingaben merken\u201c aktivieren, werden Ihre letzten Werte lokal in Ihrem Browser gespeichert (Sie k\u00f6nnen das jederzeit deaktivieren und zur\u00fccksetzen).<\/p>\n\n      <details>\n        <summary>Warum unterscheidet sich das Ergebnis manchmal um eine Stunde?<\/summary>\n        <div class=\"meta\">Das passiert meist rund um die Zeitumstellung (Sommerzeit\/Winterzeit). Der Rechner verwendet bewusst die lokale Zeitzone, damit Ihr Zielzeitpunkt so interpretiert wird, wie ihn Ihr Ger\u00e4t anzeigt.<\/div>\n      <\/details>\n      <details>\n        <summary>Was passiert, wenn das Ziel schon vorbei ist?<\/summary>\n        <div class=\"meta\">Dann wechselt die Anzeige automatisch auf \u201eZeit seit Ziel\u201c und zeigt die vergangene Zeit in denselben Einheiten. So erhalten Sie immer ein sinnvolles Ergebnis.<\/div>\n      <\/details>\n      <details>\n        <summary>Werden meine Daten irgendwohin gesendet?<\/summary>\n        <div class=\"meta\">Nein. Die Berechnung l\u00e4uft vollst\u00e4ndig im Browser. Optional gespeicherte Eingaben verbleiben lokal auf Ihrem Ger\u00e4t und k\u00f6nnen jederzeit \u00fcber \u201eZur\u00fccksetzen\u201c entfernt werden.<\/div>\n      <\/details>\n    <\/div>\n  <\/div>\n\n  <script>\n    (() => {\n      'use strict';\n\n      const ROOT_ID = 'tool__countdown-rechner';\n      const STORAGE_KEY = 'tool__countdown_rechner_v1';\n\n      const $ = (sel) => document.querySelector(sel);\n\n      const els = {\n        form: $('#tool__countdown-rechner__form'),\n        date: $('#tool__countdown-rechner__date'),\n        hour: $('#tool__countdown-rechner__hour'),\n        minute: $('#tool__countdown-rechner__minute'),\n        live: $('#tool__countdown-rechner__live'),\n        seconds: $('#tool__countdown-rechner__seconds'),\n        remember: $('#tool__countdown-rechner__remember'),\n        calc: $('#tool__countdown-rechner__calc'),\n        reset: $('#tool__countdown-rechner__reset'),\n        copy: $('#tool__countdown-rechner__copy'),\n        msg: $('#tool__countdown-rechner__msg'),\n        meta: $('#tool__countdown-rechner__meta'),\n        pill: $('#tool__countdown-rechner__pill'),\n        copyhint: $('#tool__countdown-rechner__copyhint'),\n        kpisWrap: $('#tool__countdown-rechner__kpis'),\n        vDays: $('#tool__countdown-rechner__v_days'),\n        vHours: $('#tool__countdown-rechner__v_hours'),\n        vMinutes: $('#tool__countdown-rechner__v_minutes'),\n        vSeconds: $('#tool__countdown-rechner__v_seconds'),\n        lDays: $('#tool__countdown-rechner__l_days'),\n        lHours: $('#tool__countdown-rechner__l_hours'),\n        lMinutes: $('#tool__countdown-rechner__l_minutes'),\n        lSeconds: $('#tool__countdown-rechner__l_seconds'),\n        a11yLive: $('#tool__countdown-rechner__a11y-live')\n      };\n\n      const state = {\n        targetMs: null,\n        lastResult: null,\n        timerId: null,\n        lastTickKey: ''\n      };\n\n      const pad2 = (n) => String(n).padStart(2, '0');\n\n      const clampInt = (val, min, max) => {\n        if (val === '' || val === null || typeof val === 'undefined') return null;\n        const n = Number(val);\n        if (!Number.isFinite(n)) return null;\n        const i = Math.trunc(n);\n        if (i < min || i > max) return null;\n        return i;\n      };\n\n      const parseDateInput = (yyyyMmDd) => {\n        if (typeof yyyyMmDd !== 'string' || yyyyMmDd.length !== 10) return null;\n        const m = \/^(\\d{4})-(\\d{2})-(\\d{2})$\/.exec(yyyyMmDd);\n        if (!m) return null;\n        const y = Number(m[1]);\n        const mo = Number(m[2]);\n        const d = Number(m[3]);\n        if (!Number.isFinite(y) || !Number.isFinite(mo) || !Number.isFinite(d)) return null;\n        if (mo < 1 || mo > 12) return null;\n        if (d < 1 || d > 31) return null;\n        return { y, mo, d };\n      };\n\n      const buildLocalDate = (dateObj, hour, minute) => {\n        const dt = new Date(dateObj.y, dateObj.mo - 1, dateObj.d, hour, minute, 0, 0);\n        if (!Number.isFinite(dt.getTime())) return null;\n        if (dt.getFullYear() !== dateObj.y) return null;\n        if (dt.getMonth() !== dateObj.mo - 1) return null;\n        if (dt.getDate() !== dateObj.d) return null;\n        return dt;\n      };\n\n      const formatDateTimeDE = (date) => {\n        try {\n          const fmt = new Intl.DateTimeFormat('de-DE', {\n            year: 'numeric',\n            month: '2-digit',\n            day: '2-digit',\n            hour: '2-digit',\n            minute: '2-digit'\n          });\n          return fmt.format(date);\n        } catch (_) {\n          return `${pad2(date.getDate())}.${pad2(date.getMonth() + 1)}.${date.getFullYear()} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;\n        }\n      };\n\n      const computeDiff = (nowMs, targetMs) => {\n        const raw = targetMs - nowMs;\n        const sign = raw >= 0 ? 1 : -1;\n        const abs = Math.abs(raw);\n\n        const totalSeconds = Math.floor(abs \/ 1000);\n        const days = Math.floor(totalSeconds \/ 86400);\n        const rem1 = totalSeconds - days * 86400;\n        const hours = Math.floor(rem1 \/ 3600);\n        const rem2 = rem1 - hours * 3600;\n        const minutes = Math.floor(rem2 \/ 60);\n        const seconds = rem2 - minutes * 60;\n\n        const totalHours = Math.floor(totalSeconds \/ 3600);\n        const totalMinutes = Math.floor(totalSeconds \/ 60);\n\n        return {\n          sign,\n          rawMs: raw,\n          absMs: abs,\n          days,\n          hours,\n          minutes,\n          seconds,\n          totalHours,\n          totalMinutes\n        };\n      };\n\n      const validateInputs = () => {\n        const dateObj = parseDateInput(els.date.value);\n        const hour = clampInt(els.hour.value, 0, 23);\n        const minute = clampInt(els.minute.value, 0, 59);\n\n        const errors = [];\n        if (!dateObj) errors.push('Bitte w\u00e4hlen Sie ein g\u00fcltiges Ziel-Datum.');\n        if (hour === null) errors.push('Bitte geben Sie eine Stunde zwischen 0 und 23 ein.');\n        if (minute === null) errors.push('Bitte geben Sie eine Minute zwischen 0 und 59 ein.');\n\n        if (errors.length) return { ok: false, errors, targetDate: null };\n\n        const dt = buildLocalDate(dateObj, hour, minute);\n        if (!dt) return { ok: false, errors: ['Das Ziel-Datum ist ung\u00fcltig. Bitte pr\u00fcfen Sie Ihre Eingabe.'], targetDate: null };\n\n        return { ok: true, errors: [], targetDate: dt };\n      };\n\n      const buildCopyText = (result) => {\n        const targetText = result.targetText;\n        const prefix = result.sign >= 0 ? 'Noch' : 'Seit';\n        const core = `${prefix} bis ${targetText}: ${result.days} Tage, ${result.hours} Stunden, ${result.minutes} Minuten` + (result.showSeconds ? `, ${result.seconds} Sekunden` : '');\n        const extra = ` (gesamt: ${result.totalHours} Std \/ ${result.totalMinutes} Min)`;\n        return core + extra;\n      };\n\n      const setPill = (mode) => {\n        if (mode === 'error') {\n          els.pill.className = 'pill warn';\n          els.pill.textContent = 'Eingabe pr\u00fcfen';\n          return;\n        }\n        if (mode === 'countdown') {\n          els.pill.className = 'pill ok';\n          els.pill.textContent = 'Countdown';\n          return;\n        }\n        if (mode === 'since') {\n          els.pill.className = 'pill ok';\n          els.pill.textContent = 'Seit Ziel';\n          return;\n        }\n        els.pill.className = 'pill';\n        els.pill.textContent = 'Bereit';\n      };\n\n      const announce = (text) => {\n        els.a11yLive.textContent = '';\n        els.a11yLive.textContent = text;\n      };\n\n      const stopTimer = () => {\n        if (state.timerId) {\n          clearInterval(state.timerId);\n          state.timerId = null;\n        }\n      };\n\n      const getTickIntervalMs = () => (els.seconds.checked ? 250 : 1000);\n\n      const saveIfEnabled = () => {\n        if (!els.remember.checked) {\n          try { localStorage.removeItem(STORAGE_KEY); } catch (_) {}\n          return;\n        }\n        const payload = {\n          date: els.date.value || '',\n          hour: els.hour.value || '',\n          minute: els.minute.value || '',\n          live: !!els.live.checked,\n          seconds: !!els.seconds.checked,\n          remember: true\n        };\n        try { localStorage.setItem(STORAGE_KEY, JSON.stringify(payload)); } catch (_) {}\n      };\n\n      const loadSaved = () => {\n        let raw = null;\n        try { raw = localStorage.getItem(STORAGE_KEY); } catch (_) { raw = null; }\n        if (!raw) return false;\n        let data = null;\n        try { data = JSON.parse(raw); } catch (_) { data = null; }\n        if (!data || typeof data !== 'object') return false;\n\n        if (typeof data.date === 'string') els.date.value = data.date;\n        if (typeof data.hour === 'string') els.hour.value = data.hour;\n        if (typeof data.minute === 'string') els.minute.value = data.minute;\n        els.live.checked = !!data.live;\n        els.seconds.checked = !!data.seconds;\n        els.remember.checked = !!data.remember;\n\n        return true;\n      };\n\n      const setDefaults = () => {\n        const today = new Date();\n        const plus7 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);\n        const yyyy = plus7.getFullYear();\n        const mm = pad2(plus7.getMonth() + 1);\n        const dd = pad2(plus7.getDate());\n        els.date.value = `${yyyy}-${mm}-${dd}`;\n        els.hour.value = '12';\n        els.minute.value = '00';\n        els.live.checked = true;\n        els.seconds.checked = false;\n        els.remember.checked = false;\n      };\n\n      const render = (view) => {\n        if (view.kind === 'error') {\n          stopTimer();\n          state.targetMs = null;\n          state.lastResult = null;\n          els.kpisWrap.hidden = true;\n          els.copy.disabled = true;\n          els.copyhint.textContent = '';\n          els.meta.textContent = '';\n          els.msg.className = 'msg error';\n          els.msg.textContent = view.message;\n          setPill('error');\n          announce(view.message);\n          return;\n        }\n\n        if (view.kind === 'idle') {\n          stopTimer();\n          state.targetMs = null;\n          state.lastResult = null;\n          els.kpisWrap.hidden = true;\n          els.copy.disabled = true;\n          els.copyhint.textContent = '';\n          els.meta.textContent = '';\n          els.msg.className = 'msg';\n          els.msg.textContent = 'Geben Sie Ihr Ziel ein und klicken Sie auf \u201eBerechnen\u201c. Tipp: Enter l\u00f6st die Berechnung aus, Esc setzt zur\u00fcck.';\n          setPill('idle');\n          announce('Bereit.');\n          return;\n        }\n\n        if (view.kind === 'result') {\n          els.kpisWrap.hidden = false;\n          els.msg.className = 'msg';\n          els.msg.textContent = view.headline;\n          els.meta.textContent = view.meta;\n          els.vDays.textContent = String(view.days);\n          els.vHours.textContent = String(view.hours);\n          els.vMinutes.textContent = String(view.minutes);\n          els.vSeconds.textContent = view.showSeconds ? String(view.seconds) : '\u2013';\n\n          els.lDays.textContent = view.sign >= 0 ? 'Tage verbleibend' : 'Tage vergangen';\n          els.lHours.textContent = view.sign >= 0 ? 'Stunden verbleibend' : 'Stunden vergangen';\n          els.lMinutes.textContent = view.sign >= 0 ? 'Minuten verbleibend' : 'Minuten vergangen';\n          els.lSeconds.textContent = view.sign >= 0 ? 'Sekunden verbleibend' : 'Sekunden vergangen';\n\n          els.copy.disabled = false;\n          els.copyhint.textContent = view.copyHint;\n\n          setPill(view.sign >= 0 ? 'countdown' : 'since');\n          announce(view.a11y);\n\n          state.lastResult = view;\n          return;\n        }\n      };\n\n      const calculateOnce = () => {\n        const v = validateInputs();\n        if (!v.ok) {\n          render({ kind: 'error', message: v.errors[0] });\n          return false;\n        }\n\n        const targetDate = v.targetDate;\n        const now = Date.now();\n        const diff = computeDiff(now, targetDate.getTime());\n\n        const showSeconds = !!els.seconds.checked;\n        const targetText = formatDateTimeDE(targetDate);\n        const prefix = diff.sign >= 0 ? 'Noch bis' : 'Zeit seit';\n        const headline = `${prefix} ${targetText}`;\n        const meta = `Gesamtdifferenz: ${diff.totalHours} Std (${diff.totalMinutes} Min). Lokale Zeit: ${formatDateTimeDE(new Date(now))}.`;\n        const copyHint = 'Kopierbar: einzeilige Zusammenfassung des Ergebnisses.';\n        const a11y = `${headline}. ${diff.days} Tage, ${diff.hours} Stunden, ${diff.minutes} Minuten` + (showSeconds ? `, ${diff.seconds} Sekunden.` : '.');\n\n        const view = {\n          kind: 'result',\n          sign: diff.sign,\n          days: diff.days,\n          hours: diff.hours,\n          minutes: diff.minutes,\n          seconds: diff.seconds,\n          totalHours: diff.totalHours,\n          totalMinutes: diff.totalMinutes,\n          showSeconds,\n          targetText,\n          headline,\n          meta,\n          copyHint,\n          a11y\n        };\n\n        state.targetMs = targetDate.getTime();\n        state.lastTickKey = '';\n        render(view);\n        saveIfEnabled();\n        return true;\n      };\n\n      const startOrStopLive = () => {\n        stopTimer();\n        if (!els.live.checked || state.targetMs === null) return;\n\n        const interval = getTickIntervalMs();\n        state.timerId = setInterval(() => {\n          if (state.targetMs === null) return;\n\n          const now = Date.now();\n          const diff = computeDiff(now, state.targetMs);\n          const showSeconds = !!els.seconds.checked;\n\n          const tickKey = `${diff.sign}|${diff.days}|${diff.hours}|${diff.minutes}|${showSeconds ? diff.seconds : 0}`;\n          if (tickKey === state.lastTickKey) return;\n          state.lastTickKey = tickKey;\n\n          const targetText = formatDateTimeDE(new Date(state.targetMs));\n          const prefix = diff.sign >= 0 ? 'Noch bis' : 'Zeit seit';\n          const headline = `${prefix} ${targetText}`;\n          const meta = `Gesamtdifferenz: ${diff.totalHours} Std (${diff.totalMinutes} Min). Lokale Zeit: ${formatDateTimeDE(new Date(now))}.`;\n          const copyHint = 'Kopierbar: einzeilige Zusammenfassung des Ergebnisses.';\n          const a11y = `${headline}. ${diff.days} Tage, ${diff.hours} Stunden, ${diff.minutes} Minuten` + (showSeconds ? `, ${diff.seconds} Sekunden.` : '.');\n\n          render({\n            kind: 'result',\n            sign: diff.sign,\n            days: diff.days,\n            hours: diff.hours,\n            minutes: diff.minutes,\n            seconds: diff.seconds,\n            totalHours: diff.totalHours,\n            totalMinutes: diff.totalMinutes,\n            showSeconds,\n            targetText,\n            headline,\n            meta,\n            copyHint,\n            a11y\n          });\n        }, interval);\n      };\n\n      const resetAll = () => {\n        stopTimer();\n        setDefaults();\n        try { localStorage.removeItem(STORAGE_KEY); } catch (_) {}\n        render({ kind: 'idle' });\n      };\n\n      const copyResult = async () => {\n        if (!state.lastResult) return;\n        const text = buildCopyText(state.lastResult);\n        let ok = false;\n\n        try {\n          if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {\n            await navigator.clipboard.writeText(text);\n            ok = true;\n          }\n        } catch (_) {\n          ok = false;\n        }\n\n        if (!ok) {\n          try {\n            const ta = document.createElement('textarea');\n            ta.value = text;\n            ta.setAttribute('readonly', 'readonly');\n            ta.style.position = 'fixed';\n            ta.style.left = '-9999px';\n            ta.style.top = '0';\n            document.body.appendChild(ta);\n            ta.select();\n            ok = document.execCommand('copy');\n            document.body.removeChild(ta);\n          } catch (_) {\n            ok = false;\n          }\n        }\n\n        els.copyhint.textContent = ok ? 'Kopiert.' : 'Kopieren nicht m\u00f6glich. Bitte markieren Sie das Ergebnis manuell.';\n        announce(ok ? 'Ergebnis kopiert.' : 'Kopieren nicht m\u00f6glich.');\n        window.setTimeout(() => {\n          if (state.lastResult) els.copyhint.textContent = 'Kopierbar: einzeilige Zusammenfassung des Ergebnisses.';\n        }, 1800);\n      };\n\n      const onSubmit = (ev) => {\n        ev.preventDefault();\n        const ok = calculateOnce();\n        if (ok) startOrStopLive();\n      };\n\n      const onKeyDown = (ev) => {\n        const inRoot = ev.target && typeof ev.target.closest === 'function' && ev.target.closest('#' + ROOT_ID);\n        if (!inRoot) return;\n\n        if (ev.key === 'Escape') {\n          ev.preventDefault();\n          resetAll();\n          els.date.focus();\n          return;\n        }\n      };\n\n      const onInputChange = (ev) => {\n        const t = ev.target;\n        if (!t) return;\n\n        if (t === els.seconds) {\n          if (state.targetMs !== null) {\n            startOrStopLive();\n          }\n          saveIfEnabled();\n          return;\n        }\n\n        if (t === els.live) {\n          if (state.targetMs !== null) {\n            if (els.live.checked) startOrStopLive();\n            else stopTimer();\n          }\n          saveIfEnabled();\n          return;\n        }\n\n        if (t === els.remember) {\n          saveIfEnabled();\n          return;\n        }\n\n        if (t === els.date || t === els.hour || t === els.minute) {\n          if (state.targetMs === null) return;\n          const v = validateInputs();\n          if (v.ok) {\n            state.targetMs = v.targetDate.getTime();\n            startOrStopLive();\n            calculateOnce();\n          }\n          saveIfEnabled();\n        }\n      };\n\n      const init = () => {\n        const loaded = loadSaved();\n        if (!loaded) setDefaults();\n\n        render({ kind: 'idle' });\n\n        els.form.addEventListener('submit', onSubmit, { passive: false });\n        els.reset.addEventListener('click', resetAll, { passive: true });\n        els.copy.addEventListener('click', () => { copyResult(); }, { passive: true });\n        document.addEventListener('keydown', onKeyDown, { passive: false });\n\n        els.form.addEventListener('change', onInputChange, { passive: true });\n        els.form.addEventListener('input', onInputChange, { passive: true });\n\n        if (loaded) {\n          const ok = calculateOnce();\n          if (ok) startOrStopLive();\n        }\n      };\n\n      init();\n    })();\n  <\/script>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Countdown Rechner W\u00e4hlen Sie ein Ziel-Datum und eine Uhrzeit. Der Rechner zeigt Ihnen pr\u00e4zise, wie viel Zeit bis dahin verbleibt (oder seitdem vergangen ist) \u2013 inkl. Live-Countdown auf Wunsch. Ziel-Datum Datumsformat: TT.MM.JJJJ (Auswahl per Kalender). Heute ist voreingestellt plus 7 Tage. Stunde 0 bis 23 Minute 0 bis 59 Live aktualisieren Sekunden anzeigen Eingaben merken &#8230; <a title=\"Countdown Rechner\" class=\"read-more\" href=\"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/\" aria-label=\"Mehr Informationen \u00fcber Countdown Rechner\">Weiterlesen<\/a><\/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-241","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Countdown berechnen: Rechner f\u00fcr Datum &amp; Uhrzeit (lokal, ohne Tracking)<\/title>\n<meta name=\"description\" content=\"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\/Stunden\/Minuten\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Countdown berechnen: Rechner f\u00fcr Datum &amp; Uhrzeit (lokal, ohne Tracking)\" \/>\n<meta property=\"og:description\" content=\"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\/Stunden\/Minuten\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/\" \/>\n<meta property=\"og:site_name\" content=\"Kalender Wissen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T11:46:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\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:\\\/\\\/kalenderwoche.info\\\/blog\\\/countdown-rechner\\\/\",\"url\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/countdown-rechner\\\/\",\"name\":\"Countdown berechnen: Rechner f\u00fcr Datum & Uhrzeit (lokal, ohne Tracking)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#website\"},\"datePublished\":\"2026-03-05T11:38:48+00:00\",\"dateModified\":\"2026-03-05T11:46:37+00:00\",\"description\":\"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\\\/Stunden\\\/Minuten\\\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/countdown-rechner\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/countdown-rechner\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/countdown-rechner\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Countdown Rechner\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/\",\"name\":\"Kalenderwissen\",\"description\":\"f\u00fcr den Wissenshunger\",\"publisher\":{\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#organization\",\"name\":\"Kalenderwissen\",\"url\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/apple-touch-icon.png\",\"contentUrl\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/apple-touch-icon.png\",\"width\":180,\"height\":180,\"caption\":\"Kalenderwissen\"},\"image\":{\"@id\":\"https:\\\/\\\/kalenderwoche.info\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Countdown berechnen: Rechner f\u00fcr Datum & Uhrzeit (lokal, ohne Tracking)","description":"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\/Stunden\/Minuten\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.","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:\/\/kalenderwoche.info\/blog\/countdown-rechner\/","og_locale":"de_DE","og_type":"article","og_title":"Countdown berechnen: Rechner f\u00fcr Datum & Uhrzeit (lokal, ohne Tracking)","og_description":"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\/Stunden\/Minuten\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.","og_url":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/","og_site_name":"Kalender Wissen","article_modified_time":"2026-03-05T11:46:37+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/","url":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/","name":"Countdown berechnen: Rechner f\u00fcr Datum & Uhrzeit (lokal, ohne Tracking)","isPartOf":{"@id":"https:\/\/kalenderwoche.info\/blog\/#website"},"datePublished":"2026-03-05T11:38:48+00:00","dateModified":"2026-03-05T11:46:37+00:00","description":"Countdown berechnen bis zu einem Datum \u2013 optional mit Uhrzeit. Zeigt Restzeit oder \u201eseitdem\u201c, inkl. Tage\/Stunden\/Minuten\/Sekunden. Lokal im Browser, ohne Tracking, Ergebnis kopieren.","breadcrumb":{"@id":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kalenderwoche.info\/blog\/countdown-rechner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/kalenderwoche.info\/blog\/"},{"@type":"ListItem","position":2,"name":"Countdown Rechner"}]},{"@type":"WebSite","@id":"https:\/\/kalenderwoche.info\/blog\/#website","url":"https:\/\/kalenderwoche.info\/blog\/","name":"Kalenderwissen","description":"f\u00fcr den Wissenshunger","publisher":{"@id":"https:\/\/kalenderwoche.info\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kalenderwoche.info\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kalenderwoche.info\/blog\/#organization","name":"Kalenderwissen","url":"https:\/\/kalenderwoche.info\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kalenderwoche.info\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kalenderwoche.info\/blog\/wp-content\/uploads\/2026\/02\/apple-touch-icon.png","contentUrl":"https:\/\/kalenderwoche.info\/blog\/wp-content\/uploads\/2026\/02\/apple-touch-icon.png","width":180,"height":180,"caption":"Kalenderwissen"},"image":{"@id":"https:\/\/kalenderwoche.info\/blog\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/pages\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":2,"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/pages\/241\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/pages\/241\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/kalenderwoche.info\/blog\/wp-json\/wp\/v2\/media?parent=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}