<!-- Anfang Online Timer -->
<style>
.onlinezeit-details {margin:40px auto 10px auto; background:#222;color:#fff;border-radius:8px;box-shadow:0 0 6px rgba(0,0,0,.3); display:inline-flex; padding:0 10px; gap:5px;animation:onlinezeit-pulseClockAnim 2s infinite;}
.onlinezeit-time {font:bold 14px Arial;color:#fc6;text-shadow:0 0 2px rgba(200,200,200,.6);padding:10px 5px; line-height: 20px; }
.onlinezeit-uhr {white-space:nowrap;}
.onlinezeit-aktiv {white-space:nowrap;padding-left:3px;font:13px Arial;color:#ccc;line-height: 20px; }
 
.oz-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.oz-dialog { background: #222; color: #fff; padding: 20px 25px; border-radius: 10px; box-shadow: 0 0 12px rgba(0,0,0,.6); font: 14px Arial; text-align: center; min-width: 260px; animation:onlinezeit-pulseClockAnim 2s infinite;}
.oz-dialog button { margin: 10px 8px 0 8px; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font: bold 14px Arial; }
.oz-yes { background: #c33; color: #fff; }
.oz-no  { background: #555; color: #fff; }
 
.oz-info-spoiler {display:inline-flex; flex-direction: column; margin: 0 6px 10px 40px;padding: 8px;border: 1px solid #ccc;border-radius: 6px;background: #f9f9f9;font: 14px Arial; color: #000000; text-align:left; max-width:60%;}
.oz-info-spoiler ul {margin: 0!important;padding-left:20px !important;} 
#oz-info-toggle {display: inline-flex;cursor: pointer;user-select: none;}
#oz-info-toggle:hover #oz-arrow {color: #ee1111 !important;}
#oz-arrow {display: flex !important; align-items: center; transition: transform 0.2s ease; margin-bottom:3px; margin-left: 4px; color:#eeeeee;}
#oz-arrow.open { transform: rotate(180deg); }
#oz-reset-btn { display: inline-block; cursor: pointer;}
#oz-reset-btn:hover .onlinezeit-uhr span:nth-child(2) { filter: saturate(50) grayscale(100%);}
#oz-reset-btn:hover .onlinezeit-aktiv { color:#fc6;}
 
@keyframes onlinezeit-pulseClockAnim {0%,100%{box-shadow:0 0 8px rgba(250,250,250,.3)}50%{box-shadow:0 0 16px rgba(250,250,250,.7)}}
@media (max-width: 900px) { 
 .onlinezeit-details {margin:10px 0 20px 0;}
 .oz-info-spoiler {margin: 0 6px 20px 5px; max-width: 95%;}
}
</style>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  const $ = jQuery;
 
  /* ---------------------------------------------------------
     Speicher
  --------------------------------------------------------- */
  const load = () => JSON.parse(localStorage.getItem("oz_days") || "{}");
  const save = d => localStorage.setItem("oz_days", JSON.stringify(d));
  let days = load();
 
  /* ---------------------------------------------------------
     TAB-ID + HEARTBEAT
  --------------------------------------------------------- */
  const tabId = "oz_tab_" + Math.random().toString(36).slice(2);
 
  setInterval(() => {
    localStorage.setItem("oz_heartbeat_" + tabId, Date.now());
  }, 5000);
 
  function getAliveTabs() {
    const now = Date.now();
    const alive = [];
    for (let key in localStorage) {
      if (key.startsWith("oz_heartbeat_")) {
        const t = parseInt(localStorage.getItem(key), 10);
        if (now - t < 10000) alive.push(key.replace("oz_heartbeat_", ""));
      }
    }
    return alive.sort();
  }
 
  function isMaster() {
    const alive = getAliveTabs();
    return alive.length && alive[0] === tabId;
  }
 
  function cleanupDeadTabs() {
    const now = Date.now();
    for (let key in localStorage) {
      if (key.startsWith("oz_heartbeat_")) {
        const t = parseInt(localStorage.getItem(key), 10);
        if (now - t > 20000) localStorage.removeItem(key);
      }
    }
  }
  setInterval(cleanupDeadTabs, 10000);
 
  /* ---------------------------------------------------------
     Helfer
  --------------------------------------------------------- */
  const todayISO = () => new Date().toISOString().slice(0,10);
  const yesterdayISO = () => {
    let d = new Date();
    d.setDate(d.getDate() - 1);
    return d.toISOString().slice(0,10);
  };
  const fmt = ms => {
    let m = (ms/60000)|0, h = (m/60)|0;
    return String(h).padStart(2,"0")+":"+String(m%60).padStart(2,"0");
  };
 
  let lastTick = Date.now();
  let lastDay = todayISO();
 
  /* ---------------------------------------------------------
     7-Tage Zählung
  --------------------------------------------------------- */
  function cleanup() {
    let now = Date.now(), keep = {};
    for (let d in days) {
      if ((now - new Date(d).getTime()) / 86400000 <= 7) keep[d] = days[d];
    }
    days = keep;
    save(days);
  }
  cleanup();
 
  /* ---------------------------------------------------------
     TICK (nur Master zählt!)
  --------------------------------------------------------- */
  function tick() {
    if (!isMaster()) return;
 
    let now = Date.now();
    let diff = now - lastTick;
    lastTick = now;
 
    if (diff > 0 && diff < 60000) {
      let t = todayISO();
 
      if (t !== lastDay) {
        if (!days[t]) days[t] = 0;
        lastDay = t;
      }
 
      days[t] += diff;
      save(days);
      updateUI();
    }
    cleanup();
  }
 
  /* ---------------------------------------------------------
     Anzeige (alle TABs lesen, synchronisieren)
  --------------------------------------------------------- */
  function updateUI() {
    days = load(); // Synchronisation
 
    let t = todayISO();
    let y = yesterdayISO();
    let total = Object.values(days).reduce((a,b)=>a+b,0);
    let today = days[t] || 0;
    let yesterday = days[y] || 0;
    let activeDays = Object.keys(days).length;
 
    $("[data-oz-total]").text(fmt(total));
    $("[data-oz-active]").text(activeDays);
    $("[data-oz-today]").text(fmt(today));
    $("[data-oz-yesterday]").text(fmt(yesterday));
  }
 
  /* ---------------------------------------------------------
     RESET DIALOG
  --------------------------------------------------------- */
  function showResetDialog() {
    const dialog = `
    <div class="oz-dialog-overlay">
      <div class="oz-dialog">
        <div>Onlinezeit neu starten?</div>
        <button class="oz-yes">Ja</button>
        <button class="oz-no">Nein</button>
      </div>
    </div>`;
 
    $("body").append(dialog);
    $(".oz-no").on("click", () => $(".oz-dialog-overlay").remove());
    $(".oz-yes").on("click", () => {
      localStorage.removeItem("oz_days");
      let t = todayISO();
      days = { [t]: 0 };
      lastDay = t;
      save(days);
      updateUI();
      $(".oz-dialog-overlay").remove();
    });
  }
 
  $(document).on("click", "#oz-reset-btn", showResetDialog);
 
  /* ---------------------------------------------------------
     Anzeige EINBINDEN
  --------------------------------------------------------- */
  const box = `
  <center>   
    <div class="onlinezeit-details">      
      <div class="onlinezeit-time" id="oz-reset-btn" title="Onlinezeit neu starten!">
        <span class="onlinezeit-uhr">&#9201;&#65039; Gesamt: <span data-oz-total>00:00</span> <span style="font: 15px Arial;">&#128465;&#65039;</span></span>
        <span class="onlinezeit-aktiv">(Aktive Tage: <span data-oz-active>0</span> von 7)</span>
      </div>
      <div id="oz-info-toggle" title="Info zum Onlinezeitzähler">
        <div class="onlinezeit-time"><span class="onlinezeit-uhr">&#128197; Heute:</span> <span data-oz-today>00:00</span></div>
        <div class="onlinezeit-time"><span class="onlinezeit-uhr">&#128197; Gestern:</span> <span data-oz-yesterday>00:00</span></div>
        <span id="oz-arrow">&#9660;</span>
      </div>
    </div><br>
    <div class="oz-info-spoiler" style="display:none;"> 
      <strong>Wichtige Hinweise:</strong>
      <ul><li>Die Onlinezeiten werden erfasst, solange mindestens <i>ein Forum-TAB</i> geöffnet ist.</li>
        <li>TABs synchronisieren sich automatisch gegenseitig.</li>
        <li>Ein Reset löscht alle Onlinezeiten.</li>
        <li>Der Tageswechsel wird automatisch erkannt. Die Onlinezeiten von "Heute" werden auf "Gestern" übertragen.</li>
        <li>Die Onlinezeiten werden im jeweiligen Browser gespeichert.</li>
        <li>Jeder Browser auf dem PC oder auf dem Handy, zeigt seine eigene Onlinezeit an!</li>
        <li>Browserübergreifend kann die echte, gesamte Onlinezeit nur durch Addition der geöffneten Browser ermittelt werden!</li>
      </ul>
    </div>
  </center>`;
 
  // Position Online-Timer (V6, V4, V3+V1, V2)
  const target = $(".mbt .navbar, #obere_leiste, #pagewidth table, #pagewidth #page-header").first();
  if (target.length) target.after(box); // ".after(box)", ".before(box)", ".prepend(box)", ".append(box)"
 
  $("#oz-info-toggle").on("click", function() {
    $(".oz-info-spoiler").slideToggle(150);
    $("#oz-arrow").toggleClass("open");
  });
 
  updateUI();
  
  // --- Sofortige Synchronisation zwischen Tabs ---
  window.addEventListener("storage", (e) => {
    if (e.key === "oz_days") {
      days = load();
      updateUI();
    }
  });
 
  setInterval(tick, 5000);
});
</script>
 
<!-- Ende Online Timer -->