.btn-book {
	display: inline-block;
	margin-top: 100px; 
	font-size: 1em;
	font-weight: 40;
	padding: 0.1em 0.4em;
	text-align: center;
	-webkit-transition: color 0.3s, border-color 0.3s;
	-moz-transition: color 0.3s, border-color 0.3s;
	transition: color 0.3s, border-color 0.3s;
}

.btn-book:hover {
	color: #16a085;
}

.align {
	clear: both;
	margin: 20px auto 0 auto;
	width: 100%;
	max-width: 1170px;
	text-align: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.align > li {
	max-width: 90px;
	display: inline-block;
	margin: 0 20px 0 10px;
	padding: 0;
	vertical-align: top;
}

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events

/////////////////////////////////////////////////////*/

/*
	1. container
*/

.book { 
	width: 100px; 
	height: 110px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
	background-color: #eee;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
	background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
	background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
	background: #fffbec;
}

.book_spine li:first-child {
	background: #eee;
}
.book_spine li:last-child {
	background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	background: #999;
}

/* page */

.page > li {
	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
	-webkit-transform: rotateY(-34deg) translateZ(8px);
	-moz-transform: rotateY(-34deg) translateZ(8px);
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
}

.hardcover_back {
	-webkit-transform: rotateY(-15deg) translateZ(-8px);
	-moz-transform: rotateY(-15deg) translateZ(-8px);
	transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
	-webkit-transform: rotateY(-28deg);
	-moz-transform: rotateY(-28deg);
	transform: rotateY(-28deg);
}

.page li:nth-child(2) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
}

.page li:nth-child(3) {
	-webkit-transform: rotateY(-32deg);
	-moz-transform: rotateY(-32deg);
	transform: rotateY(-32deg);
}

.page li:nth-child(4) {
	-webkit-transform: rotateY(-34deg);
	-moz-transform: rotateY(-34deg);
	transform: rotateY(-34deg);
}

.page li:nth-child(5) {
	-webkit-transform: rotateY(-36deg);
	-moz-transform: rotateY(-36deg);
	transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	border:1px solid #b7b7b7;
}

.hardcover_front,
.hardcover_back {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

.hardcover_front {
	-webkit-transition: all 0.8s ease, z-index 0.6s;
	-moz-transition: all 0.8s ease, z-index 0.6s;
	transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_front li:last-child {
	-webkit-transform: rotateY(180deg) translateZ(2px);
	-moz-transform: rotateY(180deg) translateZ(2px);
	transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_back li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	position: absolute;
	top: 0;
	left: 0;
}

/* HARDCOVER front *//*
.hardcover_front li:first-child:after,.hardcover_front li:first-child:before {width: 4px;height: 100%;}

.hardcover_front li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}


.hardcover_front li:last-child:after,.hardcover_front li:last-child:before {width: 4px;height: 20px;}

.hardcover_front li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
	box-shadow: 0px 0px 30px 5px #333;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

.hardcover_back li:first-child:after,.hardcover_back li:first-child:before {width: 4px;height: 100%;}

.hardcover_back li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}
.hardcover_back li:last-child:after,.hardcover_back li:last-child:before {width: 4px;height: 40px;}
.hardcover_back li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
	box-shadow: 10px -1px 80px 20px #666;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}
*/

/*
.book_spine {-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);transform: rotateY(60deg) translateX(-5px) translateZ(-12px);width: 16px;z-index: 0;}
.book_spine li:first-child {-webkit-transform: translateZ(2px);-moz-transform: translateZ(2px);transform: translateZ(2px);}
.book_spine li:last-child {-webkit-transform: translateZ(-2px);-moz-transform: translateZ(-2px);transform: translateZ(-2px);}
.book_spine li:first-child:after,.book_spine li:first-child:before {width: 4px;height: 100%;}
.book_spine li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.book_spine li:first-child:before {
	-webkit-transform: rotateY(-90deg) translateZ(-12px);
	-moz-transform: rotateY(-90deg) translateZ(-12px);
	transform: rotateY(-90deg) translateZ(-12px);
}
.book_spine li:last-child:after,.book_spine li:last-child:before {width: 4px;	height: 16px;}
.book_spine li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}
.book_spine li:last-child:before {
	box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}*/
.page,.page > li {position: absolute;top: 0;left: 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
.page {width: 100%;height: 98%;top: 1%;left: 3%;z-index: 10;}
.page > li {width: 100%;height: 100%;-webkit-transform-origin: left center;-moz-transform-origin: left center;transform-origin: left center;-webkit-transition-property: transform;-moz-transition-property: transform;transition-property: transform;-webkit-transition-timing-function: ease;-moz-transition-timing-function: ease;transition-timing-function: ease;}
.page > li:nth-child(1) {-webkit-transition-duration: 0.6s;-moz-transition-duration: 0.6s;transition-duration: 0.6s;}
.page > li:nth-child(2) {-webkit-transition-duration: 0.6s;-moz-transition-duration: 0.6s;transition-duration: 0.6s;}
.page > li:nth-child(3) {-webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;}
.page > li:nth-child(4) {-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;transition-duration: 0.5s;}
.page > li:nth-child(5) {-webkit-transition-duration: 0.6s;-moz-transition-duration: 0.6s;transition-duration: 0.6s;}


.book:hover > .hardcover_front {
	-webkit-transform: rotateY(-145deg) translateZ(0);
	-moz-transform: rotateY(-145deg) translateZ(0);
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}
.book:hover > .page li:nth-child(1) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	transition-duration: 1.5s;
}
.book:hover > .page li:nth-child(2) {
	-webkit-transform: rotateY(-35deg);
	-moz-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
	-webkit-transition-duration: 1.8s;
	-moz-transition-duration: 1.8s;
	transition-duration: 1.8s;
}
.book:hover > .page li:nth-child(3) {
	-webkit-transform: rotateY(-118deg);
	-moz-transform: rotateY(-118deg);
	transform: rotateY(-118deg);
	-webkit-transition-duration: 1.6s;
	-moz-transition-duration: 1.6s;
	transition-duration: 1.6s;
}
.book:hover > .page li:nth-child(4) {
	-webkit-transform: rotateY(-130deg);
	-moz-transform: rotateY(-130deg);
	transform: rotateY(-130deg);
	-webkit-transition-duration: 1.4s;
	-moz-transition-duration: 1.4s;
	transition-duration: 1.4s;
}
.book:hover > .page li:nth-child(5) {-webkit-transform: rotateY(-140deg);-moz-transform: rotateY(-140deg);transform: rotateY(-140deg);-webkit-transition-duration: 1.2s;-moz-transition-duration: 1.2s;transition-duration: 1.2s;}





.kalender {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 20px;
	max-width:80vw;
	margin:auto;
  justify-content: center;
  align-items: center;
  padding-top:10px;
}
 .div1 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
}

.div2 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 5;
}

.div3 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 7;
}

.div4 {
    grid-row: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 2;
}

.div5 {
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 2;
}

.div6 {
    grid-row: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 6;
}

.div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 5;
}

.div8 {
    grid-row: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 1;
}

.div9 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 7;
}

.div10 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 4;
}

.div11 {
    grid-row: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 4;
}

.div12 {
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 1;
}

.div13 {
    grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 1;
}

.div14 {
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 7;
}

.div15 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.div16 {
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 6;
}

.div17 {
    grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 6;
}

.div18 {
    grid-row: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 3;
}

.div19 {
    grid-row: span 2 / span 2;
    grid-column-start: 8;
    grid-row-start: 7;
}

.div20 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
}

.div21 {
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 4;
}

.div22 {
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 4;
}

.div23 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 7;
}

.div24 {
    grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 3;
}
        

.kalender {background-image: url(/assets/slider/img/adventskalender-ohne-rahmen.jpg);background-repeat: no-repeat;background-size: cover;background-position:center center;border:2px solid #fff;}
.tagKalenderBg{position:absolute;top:0;left: 0;right: 0;position:fixed;z-index: -1;background-image:url(/assets/slider/img/adventskalender-ohne-rahmen.jpg);background-size: cover;width: 100vw;height: 100vh;-webkit-filter: blur(8px);-moz-filter: blur(8px);-o-filter: blur(8px);-ms-filter: blur(8px);filter: blur(8px);}
.m-height{ height:100%;width:100%;border-radius:0;border:0 solid #333;display:flex;font-weight:700;color:rgba(255,0,0,1);}
.m-height a,.m-height a:link,.m-height a:visited,.m-height a:hover,.m-height a:focus,.m-height a:active {text-decoration:none;outline:0;border:1px solid #fff;-moz-outline-style: none;;} 
.fenster-offen{background-size:contain;background-position: center center;background-repeat:no-repeat;}
.m-height.fenster-zu{ background-color:rgba(255,255,0,0);}
.snowflake {position: absolute;height:3000px;width: 10px;height: 10px;background: linear-gradient(white, white);border-radius: 50%;filter: drop-shadow(0 0 10px white);z-index:1;}
div.fenster-style{border:1px solid #fff;height:90%;width:80%;justify-content:center;color:#ff0000;font-size:1.6rem;font-weight:700;background-color:rgba(255,255,255,0.3);}
div.fenster-style-right{border:0;height:60%;width:60%;display:flex;justify-content:center;align-items:center;color:#ff0000;font-size:1.6rem;font-weight:700;}
.justify-right {justify-content:right;}
.justify-center {justify-content:center;}
.justify-left {justify-content:left;}
.align-start{align-items:flex-start;}
.align-center{align-items:center;}
.align-end{align-items:flex-end;}