body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* pattaya-regular - latin */
/* dancing-script-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/adventskalender/fonts/dancing-script-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  
  

/* inter-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('../../files/adventskalender/fonts/inter-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* inter-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/adventskalender/fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  
*{ margin: 0; padding: 0; border: 0;}
html, body {width: 100%; height: auto;}
body::before {content:''; position: absolute; width: 100%; height: 100%; background: url(../../files/adventskalender/img/bgrXmas.svg) center no-repeat; background-size: cover; z-index: 0;}
body {font-size: 100%; font-family: 'Inter', Arial, Helvetica, sans-serif; font-weight: 400; font-style: normal; color: #676767; vertical-align:baseline; background-color: #202020;}
#clear, .clear {clear: both!important; width: auto; height: 0px; font-size: 0.1px;}
img {margin: 0; padding: 0; display: block;}

#container, #footer, #header {width: 100%; height: auto;}
.contentHold  {width: 100%; height: auto; padding: 25px 2% 25px 2%; margin: 0px auto; box-sizing: border-box; position: relative; max-width: 1700px;}

#container {min-height: 550px;}
#header .inside, #footer > .inside {width: 100%; max-width: 1700px; padding: 0 2%; box-sizing: border-box; margin: 0px auto; position: relative; }
#header {position: fixed; z-index: 9999; top: 0px; left: 50%; transform: translate(-50%,0%); width: 100%; height: auto; background-color:#fff; transition: all 0.25s ease;}
#header.scroll {-webkit-box-shadow: 0 2px 5px 0 #757575; box-shadow: 0 2px 5px 0 #757575; transition: all 0.25s ease;}

/* Smooth Scroll */
	html {scroll-behavior: smooth;}

	@media screen and (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}

/* Einstellungen für den Kalender */

    .door {background-color: #5a859b;}
    .grid-item {background-color: #2a414d}


.xmasCalendar {position: relative; z-index: 10;}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /*erster Wert = Mindestbreite */
    grid-gap: 5px;
    grid-auto-rows: minmax(170px, auto); /* Mindesthoehe: 180 px*/
    grid-auto-flow: dense; /* fuelt Luecken - folglich unterschiedliche Reihenfolge */
    max-width: 1400px; padding: 50px 10%; margin: auto;
}

.grid-item {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    position: relative;
}
.span-1-2 {grid-column-end: span 1; grid-row-end: span 2;}
.span-2-1 {grid-column-end: span 2; grid-row-end: span 1;}
.span-2 {grid-column-end: span 2; grid-row-end: span 2;}
.span-3-2 {grid-column-end: span 3; grid-row-end: span 2;}
.span-3 {grid-column-end: span 3; grid-row-end: span 3;}

.door{position:absolute;top:0px;left:0px;width:100%;height:100%;transform-origin: left;transition: all 0.5s ease-in-out; overflow: hidden; }

.door::before {content:''; width: 100%; height: 100%; background: linear-gradient(90deg,  rgb(0, 0, 0)  0%, rgb(125, 125, 125, 0.125) 2%, rgb(0, 0, 0, 0) 100%); display: block; opacity: 0.25; position: absolute; z-index: 0;}
.doorOpen .door {transform: perspective(1300px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-55deg); }
.doorClose .door {transform: none;}

.door img {display: none;}
.door img {position: absolute; top: 0; right: 0; width:auto; height: 70%; max-width: inherit; ;}
.doorImgRight img {top: 0; right: 0!important; left:inherit;}
.imgH70 img {height: 70%; width: auto;}
.imgH50 img {height: 50%; width: auto;}
.imgW50 img {width: 50%; height: auto;}
.imgw100 img {width: 100%;height: auto;}
.imgPosCenter img {margin: auto;}
.imgPosBottom img {bottom: 0;}
.door span {font-family: 'Dancing Script', Arial, sans-serif; color: #fff; font-size: 5rem; line-height: 5.5rem; position: relative; z-index: 10; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.todayBox { width: 30%; margin: 0 auto;  text-align: center;}
.past .door {transform: perspective(2500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-40deg);  background-color: rgb(114, 24, 24); z-index: 99!important;box-shadow: 1px 1px 3px; }
.today .door {z-index: 99999;box-shadow: 1px 1px 3px;}

.popupFuture {background-color: #ffffff;position: fixed;width: 500px; height: 200px; padding: 5%;margin: auto;top: 0;left: -100%;z-index: 10; z-index: 99999999!important; border-radius: 10px; text-align: center; box-shadow: 0px 0px 20px #00000075; }
.popupToday {background-color: #ffffff;position: fixed;width: 500px; height: auto; padding: 3% 5% 3% 5%;margin: auto;top: 0;left: -100%;z-index: 10; z-index: 99999999!important; border-radius: 10px; text-align: center; box-shadow: 0px 0px 20px #00000075; }
.popupToday img {border-radius: 10px; margin: 20px 0;}

.popupFuture h2, .popupToday h2 {color:#BD1823;font-size: 5rem;}

.button {padding: 10px 20px;  color: #BD1823; border: none; border-radius: 10px; padding: 10px 10%; border: 1px solid #BD1823; background-color: #fff; margin-top: 50px; font-size: 1.225rem; line-height: 1.425rem;}
.button:hover, .button:active { transition: all 0.025s ease; padding: 10px 15%;}


.popupFuture {background-color: #ffffff;position: fixed;width: 500px; height: 200px; padding: 5%;margin: auto;top: 0;left: -100%;z-index: 10; z-index: 99999999!important; border-radius: 10px; text-align: center; box-shadow: 0px 0px 20px #00000075; }
.floatIn {left: 0!important; transition: 0.825s; margin: 15% 35%;}
.floatOut {left: 100%;}



/*Fallender Schnee*/
.snow-wrap {height: 100vh; width: 100%;  position: absolute; overflow: hidden; z-index: 1;}

.snow, .snow:after, .snow:before {
  content: "";
  z-index: 5; 
  position: absolute; 
  top: -650px; left: 0; right: 0; bottom: 0; 
  background-image: 
  radial-gradient(5px 5px at 100px 50px, #fff, transparent), 
  radial-gradient(7px 7px at 200px 150px, #fff, transparent),
  radial-gradient(10px 10px at 300px 250px, #fff, transparent),
  radial-gradient(5px 5px at 400px 350px, #fff, transparent), 
  radial-gradient(7px 7px at 500px 100px, #fff, transparent),
  radial-gradient(10px 10px at 50px 200px, #fff, transparent),
  radial-gradient(5px 5px at 150px 300px, #fff, transparent), 
  radial-gradient(7px 7px at 250px 400px, #fff, transparent),
  radial-gradient(10px 10px at 350px 500px, #fff, transparent);
  background-size: 650px 650px;

  animation: snowAnim 3s linear;
  animation-iteration-count: infinite;
}

.snow:after{ margin-left: -250px; opacity: 0.5;filter:blur(2px); animation-direction: reverse; animation-duration: 4s;}
.snow:before{ margin-left: -350px; opacity: 0.7;filter:blur(1px); animation-direction: reverse; animation-duration: 5s;}

@keyframes snowAnim{
  from{transform: translateY(0);}

  to{transform: translateY(650px);}
}