<!-- ============================================================
     XOBOR ADVENT-MASTER 2026 - FINALE FASSUNG
     ============================================================ -->
 
<!-- 1. JQUERY (Technik-Basis) -->
<script src="https://ajax.googleapis.com"></script>
 
<style>
/* --- DESIGN DER KERZEN & UMGEBUNG --- */
.AdventsVorschauContainer { 
    display: block; width: 100%; text-align: center; padding: 60px 0; 
    white-space: nowrap !important; overflow: visible; position: relative; 
}
.DivKerze { 
    width: 45px; height: 160px; margin: 0 6px; 
    position: relative; display: inline-block; vertical-align: bottom; 
}
 
/* Die rote Kerze */
.Kerze { 
    position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); 
    width: 26px; height: 70px; border-radius: 3px; 
    background: linear-gradient(to right, #660000, #ff4444, #660000); /* HIER FARBE ÄNDERN */
    box-shadow: inset 2px -2px 10px rgba(0,0,0,0.5); z-index: 5; transition: all 1.5s;
}
 
/* Wachstropfen (nur wenn brennend) */
.Kerze.brennt::after { 
    content: ""; position: absolute; top: 1px; left: 4px; width: 4px; height: 14px; 
    background: linear-gradient(to bottom, #ff6666, #b22222); border-radius: 0 0 4px 4px; z-index: 6; 
}
 
/* --- SILVESTER-OPTIK (Wird automatisch aktiv) --- */
.istSilvester .Kerze { width: 3px; height: 85px; background: #555; box-shadow: none; bottom: 35px; overflow: visible; }
.istSilvester .KerzenFuss, .istSilvester .Motiv, .istSilvester .D_Neu, .istSilvester .D_Alt, .istSilvester .Beeren, .istSilvester .SchneeSchicht { display: none !important; }
 
/* --- FLAMMEN-STIL --- */
.Flamme { 
    position: absolute; width: 14px; height: 35px; left: 50%; bottom: 118px; 
    transform: translateX(-50%); transform-origin: center bottom;
    background: radial-gradient(ellipse at bottom, #ffffff 15%, #ffcc00 40%, #ff4500 95%); 
    box-shadow: 0 0 15px rgba(255, 150, 0, 0.9); border-radius: 50% 50% 20% 20%; z-index: 100;
}
 
/* --- ANIMATIONEN (Wind & Flackern) --- */
@keyframes flackern_wild { 0% { transform: translateX(-50%) scaleX(0.9); } 100% { transform: translateX(-48%) scaleX(1.1); } }
@keyframes atmen_wild { 0%, 100% { height: 30px; } 50% { height: 45px; } }
@keyframes heftiger_wind {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-45%) rotate(12deg) skewX(-3deg); }
    75% { transform: translateX(-55%) rotate(-15deg) skewX(4deg); }
}
 
/* --- SILVESTER-EFFEKTE --- */
.Funke { position: absolute; border-radius: 50%; opacity: 0; z-index: 120; pointer-events: none; }
@keyframes brenntRunter { 0% { transform: translate(0, 0); opacity: 1; top: 0; } 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; top: 85px; } }
@keyframes raketeExplosion { 0% { transform: translate(0, 85px) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(2.5); opacity: 0; } }
 
/* --- DEKO (Füße, Zweige, Beeren, Geschenke) --- */
.KerzenFuss { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); width: 30px; height: 5px; z-index: 7; background: linear-gradient(to bottom, #bf953f, #fcf6ba, #b38728); border-radius: 2px; }
.ZweigDeko { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); width: 55px; height: 12px; background: repeating-linear-gradient(45deg, #003300, #004400 2px, #002200 4px); border-radius: 50%; opacity: 0.6; z-index: 1; }
.Beeren { position: absolute; bottom: 36px; width: 4px; height: 4px; background: radial-gradient(circle at 30% 30%, #ff0000, #8b0000); border-radius: 50%; z-index: 2; }
.GeschenkBox { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; cursor: pointer; z-index: 10; }
.GeschenkBox.offen { transform: translateX(-50%) scale(0); opacity: 0; }
.GeschenkInhalt { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 16px; z-index: 9; }
.paket { width: 100%; height: 100%; background: #c0392b; border-radius: 3px; position: relative; border: 1px solid #a93226; }
.paket::before { content: ""; position: absolute; top: 0; left: 10px; width: 4px; height: 100%; background: #f1c40f; }
.paket::after { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 4px; background: #f1c40f; }
.Motiv { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 215, 0, 0.5); font-size: 13px; font-weight: bold; }
.D_Neu { position: absolute; left: 50%; bottom: 114px; transform: translateX(-50%); width: 3px; height: 8px; background: #f0f0f0; border-radius: 2px; z-index: 10; }
.D_Alt { position: absolute; left: 50%; bottom: 114px; transform: translateX(-50%); width: 2px; height: 8px; background: #000; border-radius: 2px; border-top: 2px solid #ff4500; z-index: 10; }
.SchneeSchicht { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(white 1px, transparent 1px); background-size: 8px 8px; opacity: 0.15; }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
    let demoStatus = 0;
    
    // HIER DIE MOTIVE ÄNDERN
    const motive = ['&#9733;', '&#10052;', '&#127876;', '&#127873;'];
    // HIER DIE GESCHENK-INHALTE ÄNDERN
    const geschenke = ['&#127852;', '&#129528;', '&#127850;', '&#128276;', '&#127822;', '&#127851;', '&#9976;&#65039;', '&#129420;', '&#9924;'];
 
    /* ==========================================
       DATUMS-CHECK (Silvester-Automatik)
       ========================================== */
    function checkMode() {
        const d = new Date();
        const tag = d.getDate();
        const monat = d.getMonth(); // 0 = Jan, 11 = Dez
        const stunde = d.getHours();
 
        // Überprüfung: Ist heute der 31. Dezember?
        if (tag === 31 && monat === 11) {
            return (stunde >= 18) ? "FEUERWERK" : "WUNDERKERZE";
        }
        
        /* TIPP FÜR TEST: 
           Ändere "tag === 31" in "tag === 25" und "monat === 11" in "monat === 0", 
           um das Feuerwerk heute zu sehen. */
           
        return "ADVENT";
    }
 
    /* ==========================================
       RENDER-FUNKTION (Baut alles zusammen)
       ========================================== */
    function render() {
        const modus = checkMode();
        const isSilvester = (modus !== "ADVENT");
 
        $('.messageSidebar, .user-info, .postSidebar, td.sidebar').each(function() {
            let sidebar = $(this);
            let target = sidebar.find('.AdventsVorschauContainer').first();
            if (target.length === 0) { sidebar.append('<div class="AdventsVorschauContainer"></div>'); target = sidebar.find('.AdventsVorschauContainer'); }
            
            target.empty(); 
            if (isSilvester) target.addClass('istSilvester'); else target.removeClass('istSilvester');
 
            let html = '';
            for (let i = 1; i <= 4; i++) {
                let istAn = (i <= (demoStatus + 1));
                let zufallInhalt = geschenke[Math.floor(Math.random() * geschenke.length)];
                
                // Individuelle Wind/Flacker-Dauer (Zufall)
                let fDauer = (0.07 + Math.random() * 0.1).toFixed(2);
                let aDauer = (1.5 + Math.random() * 1.5).toFixed(2);
                let wDauer = (2.5 + Math.random() * 2.5).toFixed(2);
                let delay = (Math.random() * -10).toFixed(2);
 
                html += `
                <div class="DivKerze" style="transform: scaleY(${isSilvester ? 1 : [0.8, 0.85, 0.9, 1][i-1]}); transform-origin: bottom;">
                    <div class="ZweigDeko"></div>
                    <div class="Beeren" style="left: 2px;"></div>
                    <div class="Beeren" style="right: 2px; bottom: 34px;"></div>
                    <div class="KerzenFuss"></div>
                    <div class="Kerze ${istAn ? 'brennt' : ''}">
                        <div class="SchneeSchicht"></div>
                        <div class="Motiv">${motive[i-1]}</div>
                    </div>
                    <div class="${istAn ? 'D_Alt' : 'D_Neu'}"></div>
                    
                    ${istAn && !isSilvester ? `<div class="Flamme" style="animation: flackern_wild ${fDauer}s infinite alternate, atmen_wild ${aDauer}s infinite ease-in-out ${delay}s, heftiger_wind ${wDauer}s infinite ease-in-out ${delay}s;"></div>` : ''}
                    
                    ${istAn && isSilvester ? createFinalShow(modus) : ''}
                    
                    <div class="GeschenkInhalt">${zufallInhalt}</div>
                    <div class="GeschenkBox" onclick="this.classList.add('offen')"><div class="paket"></div></div>
                </div>`;
            }
            target.append(html);
        });
    }
 
    /* SILVESTER-SHOW LOGIK */
    function createFinalShow(modus) {
        let sparks = '';
        for(let j=0; j < 12; j++) {
            let tx = (Math.random() * 50 - 25) + 'px';
            let ty = (Math.random() * 50 - 25) + 'px';
            let dur = (0.4 + Math.random() * 0.4) + 's';
            let del = (Math.random() * 1.5) + 's';
            sparks += `<div class="Funke" style="--tx:${tx}; --ty:${ty}; background:#ffcc00; width:3px; height:3px; box-shadow:0 0 5px #fff; animation: brenntRunter ${dur} infinite ${del}; left:50%;"></div>`;
        }
        if (modus === "FEUERWERK") {
            for(let k=0; k < 20; k++) {
                let tx = (Math.random() * 400 - 200) + 'px';
                let ty = (Math.random() * -550 - 100) + 'px';
                let dur = (0.8 + Math.random() * 1.2) + 's';
                let del = (Math.random() * 3) + 's';
                let color = `hsl(${Math.random()*360},100%,60%)`;
                sparks += `<div class="Funke" style="--tx:${tx}; --ty:${ty}; background:${color}; width:5px; height:5px; box-shadow:0 0 10px ${color}; animation: raketeExplosion ${dur} infinite ${del}; left:50%;"></div>`;
            }
        }
        return sparks;
    }
 
    render();
    // Geschwindigkeit des Advent-Demos (8 Sekunden pro Kerze)
    setInterval(() => { demoStatus = (demoStatus + 1) % 4; render(); }, 8000);
});
</script>