<style>
/* --- Gemeinsame Basis für beide Boxen --- */
.sylvester, .text_countdown  {
  font: bold 20px Open Sans, arial, sans-serif !important;
  color:#800000;
  background: #ffffff;
  max-width:320px;  
  position:relative;
  top: 10px;
  padding: 10px;
  margin:auto;
  text-align:center;
  border-radius: 11px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
 
/* --- Text nach Ablauf --- */
.text_countdown {
  padding: 5px 20px;
  max-width: 1000px;
  width: fit-content;
  display: none;
}
 
/* --- Icons --- */
.sylvester img {
  width: 45px;
  padding:5px 10px;
  margin: 10px 25px;
  border-radius: 50%;
  box-shadow: 0 1px 0 #65750b, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
 
/* --- Countdown-Zahlen --- */
#countdown {
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
 
#countdown li {
  display: inline-block;
  width: 60px;
}
 
#countdown .zahlen {
  color: #1F4761;
  font: 26px arial !important;
  line-height: 1.5;
}
 
#countdown .zuordnung {
  color: #323232;
  font: 13px arial !important;
  font-variant: small-caps;
  line-height: 1.5;
}
 
#countImage {
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>
 
 
<script>
document.addEventListener("DOMContentLoaded", () => {
 
  // Neujahr: Wie viele Tage nach Neujahr (hier 3) soll der Text sichtbar bleiben?
  const TageNachNeujahr = 3;
 
  // Neujahrsgruß (Jahreszahl wird automatisch am Ende ergänzt)
  const Neujahrsgruss = "Wir wünschen Euch ein frohes, neues und gesundes Jahr ";
 
  // Eventmodus: Eigener Text für Ereignisse (ohne Jahreszahl)
  const EventText = "Das Ereignis ist heute!";
 
  // Eigenes Event-Datum ("5.11.", "05.11.26", "5.11.2026")
  // Leer lassen = Neujahrmodus
  const EventDatum = "";
 
  /***** Ende EINSTELLUNGEN *****/
  
  
  // ---- Standort Counter ---
  $('#obere_leiste,#nav_n,.navbar').closest('#obere_leiste,table,.navbar').after(`
  
  <center><div class="sylvester">
    <ul id="countdown">
      <li><span class="days zahlen">00</span><p class="timeRefDays zuordnung">Tage</p></li>
      <li><span class="hours zahlen">00</span><p class="timeRefHours zuordnung">Stunden</p></li>
      <li><span class="minutes zahlen">00</span><p class="timeRefMinutes zuordnung">Minuten</p></li>
      <li><span class="seconds zahlen">00</span><p class="timeRefSeconds zuordnung">Sekunden</p></li>
    </ul>
    <div id="countImage">
      <img src="//files.homepagemodules.de/b104774/a_682_91a55c17.png">
      <div class="year"></div>
      <img src="//files.homepagemodules.de/b104774/a_681_55937c29.png">
    </div>
  </div>
  <div class="text_countdown"></div><br /></center>`);
 
  // Liest Tag und Monat aus EventDatum, ignoriert das Jahr als Zieljahr.
  function parseEventDayMonth(str) {
    if (!str) return null;
 
    const parts = str.split(".");
    if (parts.length < 2) return null;
 
    let [d, m] = parts;
    d = parseInt(d.trim(), 10);
    m = parseInt(m.trim(), 10) - 1; // JS-Monate: 0–11
 
    if (isNaN(d) || isNaN(m) || d < 1 || d > 31 || m < 0 || m > 11) return null;
    return { day: d, month: m };
  }
 
  function getNextOccurrence(day, month) {
    const now = new Date();
    let year = now.getFullYear();
    let candidate = new Date(year, month, day);
 
    // Nur wenn Event bereits vorbei ist, nächstes Jahr
    if (candidate < now) {
      candidate = new Date(year + 1, month, day);
    }
    return candidate;
  }
 
  const now = new Date();
  const dayMs = 86400000;
  const currentYear = now.getFullYear();
  const newYearNext = new Date(currentYear + 1, 0, 1);
  const newYearThis = new Date(currentYear, 0, 1);
  const parsedEventDM = parseEventDayMonth(EventDatum);
 
  // Nur für Neujahr-Modus
  function showTextOnly(year) {
    $(".sylvester").hide();
    $(".year").text(year);
    $(".text_countdown").text(Neujahrsgruss + year + "!").show();
  }
 
  // Universelle Countdown-Funktion
  function setupCountdown(targetDate, label, onReachedText) {
    $(".year").text(label ? label : "");
    $(".text_countdown").hide();
 
    function tick() {
      const now = new Date();
      const diff = targetDate - now;
 
      if (diff <= 0) {
        $(".sylvester").hide();
        if (onReachedText) {
          $(".text_countdown").text(onReachedText).show();
        }
        return;
      }
 
      const s   = Math.floor(diff / 1000);
      const d   = Math.floor(s / 86400);
      const h   = Math.floor((s % 86400) / 3600);
      const m   = Math.floor((s % 3600) / 60);
      const sec = s % 60;
 
      $(".days").text(String(d).padStart(2, "0"));
      $(".hours").text(String(h).padStart(2, "0"));
      $(".minutes").text(String(m).padStart(2, "0"));
      $(".seconds").text(String(sec).padStart(2, "0"));
 
      $(".timeRefDays").text(d === 1 ? "Tag" : "Tage");
      $(".timeRefHours").text(h === 1 ? "Stunde" : "Stunden");
      $(".timeRefMinutes").text(m === 1 ? "Minute" : "Minuten");
      $(".timeRefSeconds").text(sec === 1 ? "Sekunde" : "Sekunden");
    }
    tick();
    setInterval(tick, 1000);
  }
 
  // EVENT-MODUS (wenn EventDatum gesetzt ist)
  if (parsedEventDM) {
    const today = new Date();
    const day   = parsedEventDM.day;
    const month = parsedEventDM.month;
 
    // Event-Tag, EventText anzeigen
    if (today.getDate() === day && today.getMonth() === month) {
      $(".sylvester").hide();
      $(".year").text(""); // keine Jahreszahl im Eventmodus
      $(".text_countdown").text(EventText).show();
      return;
    }
 
    // Countdown bis zum nächsten Event
    const target = getNextOccurrence(day, month);
    setupCountdown(target, "", EventText);
    return;
  }
 
  // Vor diesem Neujahr, Countdown auf dieses Neujahr
  if (now < newYearThis) {
    setupCountdown(newYearThis, currentYear, Neujahrsgruss + currentYear + "!");
 
  // Nach Neujahr, innerhalb der Anzeigedauer, Neujahrstext
  } else if (now < newYearThis.getTime() + TageNachNeujahr * dayMs) { showTextOnly(currentYear);
 
  // Nach Anzeigedauer, Countdown auf nächstes Neujahr
  } else { setupCountdown(newYearNext, currentYear + 1, Neujahrsgruss + (currentYear + 1) + "!"); }
 
});
</script>
 

<style>
.fireworks-container{position:fixed;inset:0;pointer-events:none;z-index:999999}
.countdown { font-family:"Arial",cursive; color:#fff; margin:10px auto 20px auto; max-width:320px; display:flex; justify-content: center; gap:0.4rem; filter:drop-shadow(-.05em -.05em .05em rgba(128,0,128,1)) drop-shadow(.05em .05em .05em #000) drop-shadow(0 0 .5em rgba(255,192,203,.5)); }
.countdown div { flex-direction:column; text-align:center; padding: 0 3px;}
.countdown .value { font-size:150%;font-weight:400; text-shadow:0 0 .05em red,0 0 .1em #000}
.countdown .label { font-size:100%; font-weight:300; background:pink;color:#000}
.countdown .yeardigit { font-size:300%; display: inline-flex; width: 1.5em; font-weight:900; text-shadow:0 0 .02em red,0 0 .05em #777;  }
.countdown.eventmode .yeardigit { display: none; }
.text_countdown  {
  font: bold 20px Open Sans, arial, sans-serif !important;
  color:#800000;
  background: #ffffff;
  max-width:1000px;  
  width: fit-content;
  position:relative;
  top: 5px;
  padding: 3px 10px;
  margin:auto;
  text-align:center;
  border-radius: 11px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
</style>
 
<!-- Externes Feuerwerk-JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
 
  // Einstellungen
  const TageNachNeujahr = 3, // z.B.: 0-7 Tage // 0 = Neujahrs-Countdown aus
        Neujahrsgruss = "Wir wünschen Euch ein frohes, neues und gesundes Jahr ",
        EventText = "Das Ereignis ist heute!",
        EventCountdownText = "Text während der Counter läuft",
        EventDatum = ""; // z.B. "5.11."  // leer = Neujahrmodus
 
  // Feuerwerk
  const startFireworks = () => {
    $('body').prepend('<div class="fireworks-container"></div>');
    const c = document.querySelector(".fireworks-container"), fw = new Fireworks(c,{hue:{min:0,max:360},delay:{min:50,max:100},brightness:{min:80,max:100},rocketsPoint:50,opacity:1,speed:1,acceleration:1.05,friction:.97,gravity:2,particles:200,trace:4,explosion:40}); fw.start(); setTimeout(()=>{fw.stop();c.remove();},5000);
  };
 
  // Standort Counter (V6,V4, V3, V2, V1)
  const target = $('.main .firstrow, .page_index, .page2, #page-body, #pagewidth td.tbhi'), blocks = [["days","Tage"],["hours","Stunden"],["minutes","Minuten"],["seconds","Sekunden"]], html = blocks.map(([c,l])=>`<div><div class="value ${c}">0</div><div class="label">${l}</div><div class="yeardigit">0</div></div>`).join(""); target.prepend(`<div class="countdown">${html}</div><div class="text_countdown"></div><br>`);
 
  // Basisvariablen
  const now = Date.now(), y = new Date().getFullYear(), newYearThis = new Date(y,0,1), newYearNext = new Date(y+1,0,1), dayMs = 86400000;
 
  // Funktionen
  const showText = t => {$(".countdown").hide(); $(".text_countdown").text(t).show();};
  const setupCountdown = (date, year, label="") => {
    $(".text_countdown").hide(); $(".countdown").show();
    const d=$(".days"),h=$(".hours"),m=$(".minutes"),s=$(".seconds"),yd=$(".yeardigit");
    const tick = () => {
      const diff = date - new Date(); if(diff<=0){ showText(label); startFireworks(); return; }
      const sec = Math.floor(diff/1000); d.text(Math.floor(sec/86400)); h.text(Math.floor(sec/3600)%24); m.text(Math.floor(sec/60)%60); s.text(sec%60); year ? [...year.toString()].forEach((n,i)=>yd.eq(i).text(n)) : yd.text("");
    };
    tick(); setInterval(tick,1000);
  };
  const parseDM = str => { if(!str) return null; const p=str.split("."), d=parseInt(p[0]), m=parseInt(p[1])-1; return (isNaN(d)||isNaN(m)) ? null : {day:d,month:m}; };
  const nextOcc = (d,m) => {  const n=new Date(), y=n.getFullYear();  let t=new Date(y,m,d);  return t<n ? new Date(y+1,m,d) : t; };
  const ev = parseDM(EventDatum);
 
  // Eventmodus
  if(ev){
    $(".countdown").addClass("eventmode"); const t=new Date(); if(t.getDate()===ev.day && t.getMonth()===ev.month){ showText(EventText); startFireworks(); return; } 
    setupCountdown(nextOcc(ev.day,ev.month), null, EventCountdownText);
    $(".text_countdown").text(EventCountdownText).show();
    if (!EventCountdownText.trim()) { $(".text_countdown").remove(); }
     return;
  }
 
  // Neujahrmodus
  if (TageNachNeujahr === 0) { $(".countdown, .text_countdown").remove(); return; }
  if(now < newYearThis){ setupCountdown(newYearThis, y); } else if(now < newYearThis.getTime() + TageNachNeujahr*dayMs){
    showText(
      Neujahrsgruss
      // Jahreszahl - Neujahrsgruß
      + y + "!"
    );
    startFireworks();
  } else{ setupCountdown(newYearNext, y+1); }
 
});
</script>
 

<!-- Weihnachts & Silvester-Countdown -->
<style>
/* Schriftgröße + Farbe */
.CountDownZeit {
  --fontsize: 25px; top:10px; margin: 5px 10px 10px 10px; position: relative; display:inline-block; z-index:999; 
}
 
/* Überschrift mit Glitzereffekt */
h2.TextUe { font: bold var(--fontsize) ARIAL !important; color: #ffffff !important; background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-stroke: 1px #403d37; letter-spacing: 1px; text-transform: uppercase; }
 
/* 3D-Überschrift */
/* h2.TextUe { font: bold var(--fontsize) Arial !important; color: #eeeeee !important; letter-spacing: 10px;  text-transform: uppercase;  text-shadow: 1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 9px 6px rgba(16,16,16,0.4),1px 11px 10px rgba(16,16,16,0.2),1px 13px 35px rgba(16,16,16,0.2),1px 15px 60px rgba(16,16,16,0.4); } */
 
.zeitkontrolle {
  border: 1px solid #aaaaaa;
 
  /* Glitzerrand */
  /* border: 5px solid #0e0e0f; border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif); border-image-slice: 3%; */
 
  /* Hintergrundfarbe */
  background-color: rgba(185,12,9,0.5);
 
  border-radius:9px; text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black; width: fit-content; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem; font-weight: bold; color: rgb(230,230,230);
}
.zeitkontrolle img { border-radius:9px; }
.zeitkontrolle > .part { padding: calc(var(--fontsize) / 5); display: grid; gap: 0.5rem; }
.zeitkontrolle > .part > .number { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2px solid hsl(0 0% 50% / .3); font-size: var(--fontsize); position: relative; }
.zeitkontrolle > .part > .number::after { content: ""; position: absolute; inset: calc(var(--border-size) * -0.5); border-radius: inherit; --border-size: 4px; --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0))); background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg)); --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px)); -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); }
.zeitkontrolle > .part > .text { width: calc(var(--fontsize)*3.3); background: rgb(200,200,200); border:1px solid #383838; border-radius: 3px; font-size: calc(var(--fontsize)/1.8); color: #383838; padding: 1px 10px; text-align: center; }
 
.part[data-unit="Tage"]     { --num: 365 }
.part[data-unit="Stunden"]  { --num: 24 }
.part[data-unit="Minuten"]  { --num: 60 }
.part[data-unit="Sekunden"] { --num: 60 }
</style>
 
<script>
document.addEventListener("DOMContentLoaded",()=>{
 
  // ---- Einstellungen ----
  const Anzeigedauer_NeujahrsGruesse = 3, // 1–7 Tage im neuen Jahr
 
            WeihnachtsGruesse = "https://files.homepagemodules.de/b104774/f25t1341p3322n2_sUwZRXED.jpg",
            NeujahrsGruesse   = "https://files.homepagemodules.de/b104774/pictures_u566_TmNhsBon.jpg",
 
            BG_Weihnachten = 'url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg") no-repeat center/cover',
            BG_Neujahr     = 'url("https://files.homepagemodules.de/b104774/pictures_u568_CaRQXgyE.jpg") no-repeat center/cover',
 
            Farbkreis_Weihnachten = "#a1a106", //  Rot (#a10a06)
            Farbkreis_Neujahr     = "#0a7006", // Grün (#0a9006)
 
  // ---- Ende Einstellungen ----
 
  // ---- Helfer ----
            nyDays = Math.max(0, Math.min(7, Anzeigedauer_NeujahrsGruesse)),
            now = new Date(),
            y = now.getFullYear(),
            nyYear = (now.getMonth() === 0) ? y : y + 1;
            let ev = [ { t:"Weihnachten", img: WeihnachtsGruesse, s: new Date(y,11,24), e: new Date(y,11,27), c: Farbkreis_Weihnachten }, { t:"Neujahr", img: NeujahrsGruesse, s: new Date(nyYear,0,1), e: new Date(nyYear,0,1+nyDays), c: Farbkreis_Neujahr } ];
            const wS = ev[0].s, wE = ev[0].e;
 
  // ---- HTML einfügen ----
  let html = "<center>"; ev.forEach(e => { html += ` <div class="CountDownZeit"> <h2 class="TextUe">${e.t} ${e.s.getFullYear()}</h2> <div class="zeitkontrolle" data-t="${e.t}" data-s="${e.s}" data-e="${e.e}" style="--accent:${e.c}"> <div class="expired" style="display:none;"></div> </div> </div>`; }); html += "</center>";
 
  // ---- Standort Counter ---
  $('#obere_leiste,#nav_n,.navbar').closest('#obere_leiste,table,.navbar').after(html);
 
  // ---- Bilder einsetzen
  $(".zeitkontrolle").each(function(){ const $el = $(this), t = $el.attr("data-t"), img = t === "Weihnachten" ? WeihnachtsGruesse : NeujahrsGruesse; $el.find(".expired").html('<img height="300" src="'+img+'">'); });
 
  // ---- Countdown-Funktion ---
  const rest = (t,n) => { let d = (t-n)/1000|0; return { Tage: d/86400|0, Stunden: d%86400/3600|0, Minuten: d%3600/60|0, Sekunden: d%60 }; };
 
  // ---- Update-Logik ---
  $(".zeitkontrolle").each(function(){
    let $el = $(this), t = $el.attr("data-t"), s = new Date($el.attr("data-s")), e = new Date($el.attr("data-e")); ["Tage","Stunden","Minuten","Sekunden"].forEach(p => $el.append(`<div class="part" data-unit="${p}"> <div class="number">0</div> <div class="text">${p}</div> </div> `));
 
    function upd(n){
      // ---- Hintergrund dynamisch setzen ---
      if (n < wE) { $el.css("background", BG_Weihnachten); } else { $el.css("background", BG_Neujahr); }
 
      // --- Weihnachten aktiv ---
      if(n >= wS && n < wE){ if(t === "Weihnachten"){ $el.find(".part").hide(); $el.find(".expired").show(); $el.closest(".CountDownZeit").show(); } else { $el.closest(".CountDownZeit").hide(); } return; }
 
      // --- Neujahr aktiv ---
      if(n >= ev[1].s && n < ev[1].e){ if(t === "Neujahr"){ $el.find(".part").hide(); $el.find(".expired").show(); $el.closest(".CountDownZeit").show(); } else { $el.closest(".CountDownZeit").hide(); } return; }
 
      // --- Nach Weihnachten, vor Neujahr, nur Neujahr anzeigen ---
      if (n >= wE && n < ev[1].s) { if (t === "Weihnachten") { $el.closest(".CountDownZeit").hide(); return; } }
 
      // --- Nach Neujahr, alles ausblenden ---
      if(n >= ev[1].e){ $el.closest(".CountDownZeit").hide(); return; }
 
      // --- Countdown-Phase ---
      let r = rest(s,n); for(let p in r){ let num = $el.find(`[data-unit="${p}"] .number`); num.text(r[p]); num[0].style.setProperty("--value", r[p]); } $el.find(".expired").hide(); $el.find(".part").show(); $el.closest(".CountDownZeit").show();
    }
    $el.data("upd", upd);
  });
  
  $(".zeitkontrolle").each(function(){ $(this).data("upd")(new Date()); }); 
  setInterval(()=>{ let n = new Date(); $(".zeitkontrolle").each(function(){ $(this).data("upd")(n); }); },1000);
});
</script>