<style>
/* Größe der Videos (20-90) */
.spoiler_x2 {--Größe_der_Videos: 90;}
     
/* Modal */
#dark_overlay2{position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1500; display:none;}
 
/* Position und Größe der Auslöse-Grafik (Startseite) */
.hover_img2 {position:fixed; left:-3px; top:30vh !important; width:100px; z-index: 3000 !important; cursor:pointer;}
 
/* Fenster */
#about_modal2 {position:absolute; top:50px; left:50%; transform:translateX(-50%); background:#e9e9e9; color:#000; font-weight:bold; text-align:center; margin:10px; padding:35px 20px; border:1px solid #383838; border-radius:10px; box-shadow:1px 1px 10px 1px #eee; z-index:2000; transition:top 600ms ease-in-out;}
.about_close2 {position:absolute; right:0; top:0; margin:5px 5px 0 0; padding:3px 6px 4px 6px; font-size:16px; font-weight:bold; background:#ccc; border:1px solid #aaa; border-radius:50%; cursor:pointer;}
.about_close2:hover, .spoiler_nr:hover {background:#bb4e42;}
 
/* Vorschaubilder */
.video_spoiler {display:inline-block; margin:5px; cursor:pointer;}
.video_spoiler .video_img {width:150px; border:1px solid #aaa; border-radius:5px;}
.video_spoiler .video_img:hover {filter:brightness(0.8);}
.video_img2 {max-width:200px; max-height:25vh; float:left;}
.video_div {max-width:80vw; width:400px; clear:both; float:left; padding:10px; margin:20px 10px 0 10px; border-radius:5px; background: #fff; box-shadow:1px 1px 10px 1px #ccc;}
.video_nr {position:absolute; padding:5px; background:#bb4e42; border-radius:50%; margin:3px; z-index:9997;}
 
/* Video-Spoiler */
.spoiler_x2 {display:none; margin:30px 0 20px 0 !important;}
.spoiler_x2 .autoplayVi { max-width: calc(var(--Größe_der_Videos) * 1vw); height: auto; aspect-ratio: 4 / 3; max-height: min(calc(var(--Größe_der_Videos) * 1vh * 0.888), calc(var(--Größe_der_Videos) * 1vh * 0.75));}
.spoiler_nr {position:absolute; right:0; left:0; margin:5px auto; width:30px; padding:5px; background:#ddd; border:1px solid #aaa; border-radius:50%; cursor:pointer;}
 
/* Forum-Anpassungen */
.side-panel, .scroll-buttons1, .bgtopnavi {display:none !important;}
.header .usercontent, body, .bgformat {background:#356805 !important; background-image:url(https://files.homepagemodules.de/b104774/a_731_edeb1de9.png) !important;}
.header .usercontent {background-size:450px !important;}
body, .bgformat {background-size:contain !important;}
</style>
 

<div id="dark_overlay2"></div>
<img title="Frohe Ostern - Klick mich doch mal an!" class="hover_img2 about_show2" src="//files.homepagemodules.de/b104774/a_498_e98541c9.png">
 
<center>
<div id="about_modal2" style="display:none;">
   <button class="about_close2">×</button>
 
  <div class="video_spoiler"><div class="video_nr">1</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video1')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div>
  <div class="video_spoiler"><div class="video_nr">2</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video2')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div> 
  <div class="video_spoiler"><div class="video_nr">3</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video3')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div> 
  <div class="video_spoiler"><div class="video_nr">4</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video4')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div> 
  <div class="video_spoiler"><div class="video_nr">5</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video5')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div> 
  <div class="video_spoiler"><div class="video_nr">6</div> <img title="Überraschung" class="video_img" onclick="spoilerV('video6')" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"></div> 
 
  <div id="video1" class="spoiler_x2">
    <iframe data-src="https://www.youtube.com/embed/7zEM3gxjbbE" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
    <div class="spoiler_nr">1</div>
  </div>
 
  <div id="video2" class="spoiler_x2">
    <iframe data-src="https://www.youtube.com/watch?v=DY4vU-wkzOo" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="spoiler_nr">2</div>
  </div> 
 
  <div id="video3" class="spoiler_x2">
    <iframe data-src="//www.youtube.com/watch?v=9KnQkna68OI" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="spoiler_nr">3</div>
  </div>
 
  <div id="video4" class="spoiler_x2">
    <iframe data-src="//youtu.be/iYcbGYuQ0fo" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="spoiler_nr">4</div>
  </div>
 
  <div id="video5" class="spoiler_x2">
    <iframe data-src="//www.youtube.com/watch?v=k6XXf6nX3VY" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="spoiler_nr">5</div>
  </div>
 
  <div id="video6" class="spoiler_x2">
    <iframe data-src="//www.youtube.com/watch?v=ZHel1CUk8qI" class="autoplayVi" width="1840" height="1035" loading="lazy" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="spoiler_nr">6</div>
  </div>
  
</div>
</center>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  //  Animation der Auslösegrafik beim "Mouseover"!
  //  0 = keine Auslösegrafik 
  //  1 = ohne Animation
  //  2 = Grafik vergrößert sich 
  //  3 = Grafik versteckt sich am linken Rand
  //  4 = Grafik wird transparent angezeigt
  
  const Kalender_Animation = "2";
 
  // Test-Start
  const TEST_START = false; // true = Start jetzt // false = Default
 
  if(Kalender_Animation == "0"){$('.hover_img2').hide();}
  if(Kalender_Animation == "2"){$('.hover_img2').hover(function(){ $(this).animate({width:'160px', top:'300px'},600); },function(){ $(this).animate({width:'100px', top:'350px'},300); });}
  if(Kalender_Animation == "3"){$('.hover_img2').css({width:'130px', left:'-105px'}).hover(function(){ $(this).animate({left:'-3px', top:'300px'},600); },function(){ $(this).animate({left:'-105px', top:'350px'},1000); });}
  if(Kalender_Animation == "4"){$('.hover_img2').css({opacity:'0.25'}).hover(function(){ $(this).animate({opacity:'1.0', width:'160px', top:'300px'},300); },function(){ $(this).animate({opacity:'0.25', width:'100px', top:'350px'},500); });}
 
  // Ostersonntag automatisch
  function getOstersonntag(y){let f=Math.floor,a=y%19,b=f(y/100),c=y%100,d=f(b/4),e=b%4,g=f((8*b+13)/25),h=(19*a+b-d-g+15)%30,i=f(c/4),k=c%4,l=(32+2*e+2*i-h-k)%7,m=f((a+11*h+22*l)/451);return new Date(y,f((h+l-7*m+114)/31)-1,((h+l-7*m+114)%31)+1);}
 
  // Start + Ende
  const Start_Osterkalender = getOstersonntag(new Date().getFullYear());
  const End_Osterkalender   = new Date(Start_Osterkalender.getTime() + 2*86400000); // Dienstag
 
  // Startprüfung - Vor Ostersonntag
  const now = Date.now();
  if(!TEST_START && now < Start_Osterkalender.getTime()){
    $('#about_modal2 div').hide(); $('#about_modal2').prepend(`
      <br><img class="video_img" style="max-height:25vh;" src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg">
      <br><br><b>Es ist noch nicht so weit!</b>
    `);
  }
 
  // Endprüfung - Nach Ostermontag
  if(!TEST_START && now > End_Osterkalender.getTime()){
    $('#about_modal2 div').hide(); $('#about_modal2').prepend(`
      <img class="video_img2" src="//files.homepagemodules.de/b104774/a_498_e98541c9.png">
      <div class="video_div">Damit endet der Osterkalender für dieses Jahr. <br>Wir hoffen, er hat Dir Freude gemacht.</div>
    `);
  }
  
  // Spoiler öffnen/schließen
  function spoilerV(id){ $('.spoiler_x2').not('#'+id).each(function(){ $(this).hide(); $(this).find('iframe').attr('src',''); }); const box = $('#'+id); box.toggle();
 
  if(box.is(':visible')){
    box.find('iframe').each(function(){
      // Lazy Load
      if(!$(this).attr('src')){$(this).attr('src', $(this).data('src'));}});
    
      // Mobil
      if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) { const winH  = window.innerHeight || document.documentElement.clientHeight; const top   = box.offset().top; const fullH = box.outerHeight(true); let target = top + fullH - winH + 50; if (target < 0) target = 0; $('html,body').stop(true).animate({scrollTop: target}, 600);} else {const aboutTop = $('html,body').offset().top; $('html,body').stop(true).animate({scrollTop: aboutTop}, 600);}
 
    // YouTubeModal
    $('#dark_overlay2').show();
    }
  }
  window.spoilerV = spoilerV; // global
 
  // Spoiler schließen
  $('.spoiler_x2').on('click',function(){$('.spoiler_x2').hide(); $('.video_spoiler img').css('width',''); $('.autoplayVi').each(function(){ $(this).attr("src",$(this).attr("src")); }); $('#dark_overlay2').hide();}).find('.spoiler_nr').attr('title','Video schließen!');
 
  // Scroll nach oben
  $('#about_modal2, .hover_img2').on('click', function(e){if($(e.target).closest('.spoiler_x2').length) return; if($(e.target).closest('.video_spoiler').length) return;$('html,body').stop(true).animate({scrollTop:0},1000);});
 
  // Fenster öffnen
  $('.about_show2').on('click',function(){$('.hover_img2, .about_show2').hide(); $('#about_modal2').css('top','50px').show();});
 
  // Fenster schließen
  $('.about_close2').on('click',function(){$('#about_modal2').css('top','-1000px').hide(); $('.hover_img2, .about_show2').show(); $('#dark_overlay2, .spoiler_x2').hide(); });
 
  // YouTube-Links konvertieren
  $('.spoiler_x2').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/");});
});
</script>