<style>
/* Grundlayout */
#bestenliste_wrapper{max-width:1000px; position:relative;margin:20px;z-index:998;}
#bestenliste_output{position:relative;z-index:9999;}
#bestenliste_output ol{padding-left:20px;}
 
#bl_dropdown_btn{background:#3858bc;color:#eee;margin-left:5px;padding:6px 12px;cursor:pointer;border:1px solid #aaa;border-radius:4px;font-size:14px;transition:0.4s;box-shadow:2px 2px 4px #555;outline:none;z-index:10000;position:relative;}
#bl_dropdown_btn:hover{background:#5a7ade;box-shadow:15px 15px 20px rgba(0,0,0,0.4);transform:scale(1.05);}
#bl_dropdown_menu{background:#fff;border:1px solid #aaa;width:300px;margin-top:10px;padding:10px;border-radius:4px;box-shadow:2px 2px 4px #555;display:none;position:absolute;z-index:9998;}
 
.bl_dd_section{font-weight:bold;margin:10px 0 6px 0;padding:4px 2px;font-size:14px;color:#333;}
.bl_dd_item{background:#fff; font-size:14px;padding:8px 12px;cursor:pointer;white-space:nowrap;transition:.4s; box-shadow:2px 2px 4px #555;border:1px solid #aaa;border-radius:4px;margin-bottom:6px;}
.bl_dd_item:hover{background:#ddddff;box-shadow:15px 15px 20px rgba(0,0,0,0.4);transform:scale(1.05);}
  
/* Modalansicht - Overlay */
#bl_overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9000;}
 
/* Top 10 Listen */
.besten_box{background:#eee;border-radius:9px;padding:10px 14px;margin-top:12px;border:1px solid #ddd;box-shadow:2px 2px 4px #555;cursor:pointer;}
.besten_box .bl_title{background:#bbb;font-size:15px;display:block;margin:0 -5px 6px -5px;padding:10px;border-radius:3px;}
.besten_box .bl_close{float:right;font-size:16px;color:#444;margin-left:8px;border-radius: 10px; padding: 0 5px;} 
.besten_box .bl_title:hover .bl_close{color:#900;font-weight:bold;background:#fff;box-shadow:2px 2px 4px #000;}
 
/* Listeneinträge */ 
.besten_item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:10px 20px 10px 0;background:#fff;transition:0.3s 0.6s;box-shadow:2px 2px 4px #555;border-radius:5px;}
.besten_item:hover{ /* transform:scale(1.05); */ box-shadow:15px 15px 20px rgba(0,0,0,0.4);}
.besten_item a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#06c;text-decoration:none;}
.besten_views{flex-shrink:0;font-size:13px;color:#000;margin-left:8px;box-shadow:2px 2px 4px #555;padding:3px 10px;border-radius:3px;background:rgba(200,0,0,0.4);}
.besten_msg{background:#fff5ef;border:1px solid #e6c76c;color:#5c4a1a;padding:10px 12px;border-radius:6px;margin-top:12px;font-size:14px;}
</style>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  /* --- Modul 1: Grundprüfung --- */
  const isBootstrap = document.body.classList.contains("mbt");
  const isThreadList = document.querySelector("tr.threadrow") || document.querySelector(".threadlink"); if (!isThreadList) return;
  const insertPoint = document.querySelector("#breadcrumbs"); if (!insertPoint) return;
 
  /* --- Modul 2: UI einfügen --- */
  insertPoint.insertAdjacentHTML("afterend", `
    <div id="bestenliste_wrapper">
      <button id="bl_dropdown_btn">&#128202; Top&#8209;Beiträge & Bestenlisten &#9660;</button>
      <div id="bl_dropdown_menu">
        <div class="bl_dd_section">Sortierung</div>
        <div class="bl_dd_item bl_sort_item" data-sort="hot">&#128293; Hot – Beliebt & aktuell</div>
        <div class="bl_dd_item bl_sort_item" data-sort="hits">&#11088; Hits – Meiste Zugriffe</div>
        <div class="bl_dd_item bl_sort_item" data-sort="trending">&#128200; Trending – Schnell steigend</div>
        <div class="bl_dd_item bl_sort_item" data-sort="new">&#127381; Neu – Jüngste Threads</div>
  
        <div class="bl_dd_section">Zeitraum</div>
        <div class="bl_dd_item" data-mode="d1">&#128994; Heute</div>
        <div class="bl_dd_item" data-mode="d7">&#128197; 7 Tage</div>
        <div class="bl_dd_item" data-mode="d14">&#128197; 14 Tage</div>
        <div class="bl_dd_item" data-mode="d30">&#128197; 30 Tage</div>
      </div>
      <div id="bestenliste_output"></div>
      <div id="bl_overlay" style="display:none"></div>
    </div>
  `);
  const output = bestenliste_output, ddBtn = bl_dropdown_btn, ddMenu = bl_dropdown_menu, ov = bl_overlay; window.BL_MODE = null; window.BL_SORT = "hot"; let listVisible = false;
 
  /* --- Modul 3: Datumkonverter (Heute, Gestern, Vor einer Minute/Stunde, ...) --- */
  const parseDate=str=>{const n=new Date();if(/Heute|Gestern/.test(str)){const d=new Date(n);if(str.startsWith("Gestern"))d.setDate(d.getDate()-1);const t=str.match(/\d{1,2}:\d{2}/);d.setHours(...(t?t[0].split(":"):[0,0]),0,0);return d;}if(str.startsWith("vor ")){const p=str.split(" "),x=(p[1]==="einer"||p[1]==="einem")?1:parseInt(p[1]),d=new Date(n);if(p[2].startsWith("Minute"))d.setMinutes(d.getMinutes()-x);else if(p[2].startsWith("Stunde"))d.setHours(d.getHours()-x);else d.setDate(d.getDate()-x);return d;}const[dt,t="00:00"]=str.trim().split(" "),[d,m,y]=dt.split(".");return new Date(`${y}-${m}-${d}T${t}:00`);};
 
  /* --- Modul 4: Threadliste V6/V4 laden --- */
  function loadThreads(){if (isBootstrap){
    const out={}; document.querySelectorAll("tr.threadrow").forEach(li=>{const t=li.querySelector(".ttitle a"), d=li.querySelector(".thread_lastreply a small")||li.querySelector(".thread_lastreply_mobile small"), v=li.querySelector(".thread_hits");if(!t||!d||!v)return;const views=parseInt(v.textContent.replace(/\./g,"")), ts=parseDate(d.textContent.trim()).getTime();if(!views||isNaN(ts))return;const link=t.href;if(!out[link]||views>out[link].views) out[link]={title:t.textContent.trim(),link,views,timestamp:ts};}); return Object.values(out);}
    const list=[]; document.querySelectorAll("tr").forEach(r=>{const t=r.querySelector(".threadlink"), d=r.querySelector(".fstattime small"), f=r.querySelector(".fstat");if(!t||!d||!f)return;const m=f.textContent.match(/Zugriffe:\s*([\d\.]+)/);if(!m)return;list.push({title:t.textContent.trim(),link:t.href,views:parseInt(m[1].replace(/\./g,"")),timestamp:parseDate(d.textContent.trim()).getTime()});});return list;
  }
  
  /* --- Modul 5: Sortierung (Hits, Hot,Trending, New) --- */
  function sortThreads(list, mode){
    const now = Date.now(); return list.sort((a,b) => {
      const ageA_days  = (now - a.timestamp) / 86400000,ageB_days  = (now - b.timestamp) / 86400000,ageA_hours = (now - a.timestamp) / 3600000,ageB_hours = (now - b.timestamp) / 3600000;
      switch(mode){
        // HITs
        case "hits": return b.views - a.views;
        // HOT Level&#8209;3 (Stundenbasiert)
        case "hot": return (b.views / Math.pow(ageB_hours + 2, 1.5)) - (a.views / Math.pow(ageA_hours + 2, 1.5));
        // Trending Level&#8209;2 (Tagesbasiert)
        case "trending": return ((b.views / (ageB_days + 1)) * Math.log(ageB_days + 2)) - ((a.views / (ageA_days + 1)) * Math.log(ageA_days + 2));
        // Aktuelle Beiträge
        case "new": return b.timestamp - a.timestamp;
        // Alle Beiträge
        default: return b.views - a.views;
      }
    });
  }
  
  /* --- Modul 6: Rendering + Mouseover + Titel --- */
  function renderTop(list,mode){
    listVisible=true; ddMenu.style.display="none";
    // Kontext in der Überschrift: Letzte Beiträge/Kategorie
    const isLast = location.href.includes("show=last"),isCat  = /\/f\d+-/.test(location.pathname),baseTitle = isLast ? "(<small><em>Aus den Beiträgen des gesamten Forums</em></small>)" : isCat ? "(<small><em>Aus den Beiträgen dieser Kategorie</em></small>)" : "Beiträge";
    // Zeit-Filter
    const now=Date.now(), rMap={d1:1,d7:7,d14:14,d30:30}, r=rMap[mode];let filtered=list; if(r){const start=new Date(); start.setHours(0,0,0,0);filtered=list.filter(t=>r===1?t.timestamp>=start.getTime():now-t.timestamp<=r*86400000);}
    // Titel
    const sorted=sortThreads(filtered,window.BL_SORT).slice(0,10);
    const timeMap={d1:"&#128994; Heute",d7:"&#128197; 7 Tage",d14:"&#128197; 14 Tage",d30:"&#128197; 30 Tage"};
    const iconMap={hot:"&#128293;",hits:"&#11088;",trending:"&#128200;",new:"&#127381;"};
    const nameMap={hot:"Hot&#8209;Liste",hits:"Hit&#8209;Liste",trending:"Trending&#8209;Liste",new:"Neu&#8209;Liste"};
    const title = mode ? `${timeMap[mode]} – Zeitraum` : `${iconMap[window.BL_SORT]} ${nameMap[window.BL_SORT]} ${baseTitle}`;
 
    // Box einfügen + Fehlermeldung
    output.innerHTML=`<div class="besten_box"><strong class="bl_title">${title}<span class="bl_close">&#10006;</span></strong>${!sorted.length?`<div class="besten_msg">&#128998; Keine Beiträge für diesen Zeitraum vorhanden!</div>`:`<ol>${sorted.map(t=>`<li><div class="besten_item"><a href="${t.link}">${t.title}</a><span class="besten_views">${t.views}</span></div></li>`).join("")}</ol>`}</div>`;
    // Toggle Hits / Datum
    document.querySelectorAll(".besten_item").forEach(i=>{const v=i.querySelector(".besten_views"),e=list.find(t=>t.link===i.querySelector("a").href); if(!e)return;const o=v.textContent, d=new Date(e.timestamp).toLocaleString();i.onmouseover=()=>v.textContent=d;i.onmouseout =()=>v.textContent=o;});
  }
  
  /* --- Modul 7: Dropdown öffnen --- */
  ddBtn.onclick=()=>{if(listVisible) output.innerHTML="", listVisible=false;const o=ddMenu.style.display==="block";ddMenu.style.display=ov.style.display=o?"none":"block";};
 
  /* --- Modul 8: Zeitraum & Sortierung wählen --- */
  document.querySelectorAll(".bl_dd_item[data-mode], .bl_sort_item").forEach(i => {i.onclick = () => {if (i.dataset.mode) {window.BL_MODE = i.dataset.mode;renderTop(loadThreads(), window.BL_MODE);}if (i.dataset.sort) {window.BL_SORT = i.dataset.sort;window.BL_MODE = null;renderTop(loadThreads());}};});
 
  /* --- Modul 9: Schließen (X-Button, Titelleiste, Overlay) --- */
  document.addEventListener("click",e=>{const close=()=>{ov.style.display="none";ddMenu.style.display="none";output.innerHTML="";listVisible=false;};if(e.target.classList.contains("bl_close")||e.target===ov||e.target.closest(".bl_title"))close();});
 
  /* --- Modul 10: Tab-Reload (Letzte Beiträge + Kategorien aktualisieren) --- */
  document.addEventListener("visibilitychange", () => {if (document.visibilityState !== "visible") return;if (location.href.includes("show=last") || /\/f\d+-/.test(location.pathname)) {fetch(location.href, { cache: "reload" }).then(() => location.reload());}});
});
</script>