<style>
/* Position und Größe der Auslöse-Grafik (Startseite) */
.hover_img2 {position:fixed; left:-3px; top:350px; width: 100px; z-index: 100; cursor:pointer;}
 
/* Fenster */
#about_modal2 {background-color: #e9e9e9; color: #000000; font-weight:bold; box-shadow:1px 1px 10px 1px #eeeeee; border:1px solid #383838; border-radius:10px; padding:35px 20px 40px 20px; width: auto; position: absolute; top: 100px; left: 50%; z-index: 999999; transform: translateX(-50%); height: auto; transition: top 600ms ease-in-out;}
.about_close2 {background-color: #cccccc; color: 000000; font-weight:bold; font-size: 16px; position:absolute; right:0px; top:0px; margin: 5px 5px 0 0; padding: 3px 6px 4px 6px; border-radius: 50%; border: 1px solid #aaaaaa; cursor: pointer;}
.about_close2:hover, .spoiler_nr:hover {background-color: #bb4e42;}
.video_nr {position:absolute; padding:5px; background:#bb4e42; border-radius:50%; margin:3px; z-index:999999;}
.video_spoiler {display:inline-block; margin: 5px;}
.video_spoiler .video_img {width:200px; border: 1px solid #aaaaaa; border-radius:5px;}
.video_spoiler .video_img:hover {filter: brightness(80%);}
.spoiler_x2 {width: 600px; height: 400px; margin:10px 0;}
 
/* Mobil */
@media all and (max-device-width: 767px){ .spoiler_x2 {width: 300px; height: 200px; margin:10px 0;}  }
.spoiler_nr {position:absolute; padding:5px; background:#dddddd; border-radius:50%; border:1px solid #aaaaaa; right:0; left:0; margin:5px auto; width:30px; cursor:pointer;}
 
/* Sidepanel ausblenden */
.side-panel {display: none;}
</style>
 
<!-- Auslösegrafik -->
<img class="hover_img2 about_show2" src="//files.homepagemodules.de/b104774/a_498_e98541c9.png">
 
<!-- Videobox -->
<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 id="video1" class="spoiler_x2" style="display:none">
<iframe class="autoplayVi" style="width:100%; height:100%;" src="//youtu.be/NlujZjmeC7Q" 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" style="display:none">
<iframe class="autoplayVi" style="width:100%; height:100%;" src="//youtu.be/iYcbGYuQ0fo" 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" style="display:none">
<iframe class="autoplayVi" style="width:100%; height:100%;" src="//youtu.be/eL_VE0jxPgw" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="spoiler_nr">3</div>
</div>
 
</div>
</center>
 
<script>
//  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
 
var Kalender_Animation = "2"
 
// Kalenderstart:  Jahr, Monat, Tag - (Jahr = 2023 / April = 04 / Tag = 08)
var Startzeit = "2023-04-08";
 
var arr = Startzeit.split(/[- :]/), Start_Osterkalender = new Date(arr[0], arr[1]-1, arr[2]);
 
/* Startet zu einer vorgegebenen Zeit */
var now = Date.parse(new Date());
var start_k = Date.parse(new Date(Start_Osterkalender));
 
if(now < start_k && now ) {
  $('#about_modal2 div').hide();
  $('#about_modal2').prepend('<br><img class="video_img" style="max-height: 25%; max-height: 25vh;"  src="//files.homepagemodules.de/b104774/f31t1164p4938n2_IEPBweQZ.jpg"><br><br> Es ist noch nicht so weit!');
};
 
//Gegenseitige Auslösung
function spoilerV(id) {
  $('.spoiler_x2').not( $('#' +id).toggle()).hide();
  if($('.spoiler_x2').is(':visible')){
    $('.video_spoiler img').css('width','80px').attr('title','Video öffnen & schließen')
  }else {
    $('.video_spoiler img').css('width','');
  };
};
 
$('.spoiler_x2').on('click',function(){
  $('.spoiler_x2').hide();
  $('.video_spoiler img').css('width','');
 
  // Video schließen
  $('.autoplayVi').each(function(){
    var el_src = $(this).attr("src");
    $(this).attr("src",el_src);
  });
}).find('.spoiler_nr').attr('title','Video schließen!');
 
// Scrollfunktion
$('.video_spoiler, #about_modal2, .hover_img2').on('click',function(){
  $('html,body').delay(200).animate({ scrollTop: 0 }, 1000);
});
 
window.addEventListener('load', function(){
  if (Kalender_Animation == 0) {
    $('.hover_img2').css('display','none');
  };
 
  if (Kalender_Animation == 1) {
  };
 
  if (Kalender_Animation == 2) {
    $('.hover_img2').hover(function() {
      $(this).animate({width:'160px',top:'300px'},600);
    }, function() {
      $(this).animate({top:'350px',width:'100px'},300);
    });
  };
 
  if (Kalender_Animation == 3) {
    $('.hover_img2').css('width','130px').css('left','-105px').hover(function() {
      $(this).animate({left:'-3px',top:'300px'},600);
    }, function() {
      $(this).animate({top:'350px',left:'-105px'},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({width:'100px',opacity:'0.25','top':'350px'},500);
    });
  };
 
  //Auswahl Fenster  
  $('.about_show2').on('click',function(){
    $(this).hide();
    $('#about_modal2').toggle().attr('style','top:100px;');
    $('.page_topic .box, .page_topic .boxcontent').attr('style','z-index:100;');
  });
 
  // Auswahl Fenster schließen 
  $('.about_close2').on('click',function(){
    // Video schließen
    $('.autoplayVi').each(function(){
      var el_src = $(this).attr("src");
      $(this).attr("src",el_src);
    });
 
    $('#about_modal2').css('top','-1000px').delay(1000).hide(100);
    $('.about_show2').show(500);
  }).attr('title','Fenster schließen!');
 
  /* Videokonverter */
  $('.spoiler_x2').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("https://www.youtube.com/" , "https://www.youtube.com/");});
 
});
</script>