/*** Basic Styles for Carl Roth Adventskalender ***
Version:	1.1
Web:		https://www.komplizen.de
Copyright:	die Komplizen Werbeagentur GmbH · 2025
****************************************************************/
@font-face {
	font-family:robotoregular;
	src:url('../fonts/Recoleta.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica-Bold-Oblique';
	src:url('../Fonts-h/Helvetica-Bold-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica-Bold';
	src:url('../Fonts-h/Helvetica-Bold.woff2') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica-Light';
	src:url('../Fonts-h/Helvetica-Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica-Oblique';
	src:url('../Fonts-h/Helvetica-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Helvetica-Roman';
	src:url('../Fonts-h/Helvetica-Roman.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*** global styles ***/


.hide-on-mobile, .no-mobile .hide-on-desktop {
	display:none;
}

.no-mobile .hide-on-mobile, .mobile-view {
	display:block;
}


@media screen and (min-width:769px) {
	body {
		font-size:15px;
	}

	.mobile-view {
		display:none;
	}
}

@media screen and (min-width:1200px) {
	body {
		font-size:16px;
	}
}

* {
	padding:0;
	margin:0;
}

h1, h2, h3 {
	font-family: 'Recoleta';
	font-size:1rem;
	font-weight:normal;
	position:relative;
	text-align:left;
	margin-bottom: 1.3rem;
}

p {
	font-family: 'Helvetica-Roman';
}

h1, h2 {
	line-height: .8em;
	font-size: 2.4rem;
	margin-bottom: 0;
}

h2{
	font-size: 1.4rem;
}

h2.text-center{
	margin-bottom: .3em
}

h3,h4{
	font-size: 1.2rem;
	color: #fff;
	text-align: center !important;
	line-height: .9em;
}

.overlay-subtitle{
	font-size: 15px;
	color: #591002;
	line-height: 22px;
	text-align: right !important;
	padding-right: 50px;
	margin-top: 10px;
	max-width: 60%;
	float: right;

	@media screen and (max-width: 767px){
		max-width: 80%;
	}
}


@media screen and (min-width: 576px){
	h1{
    font-size: 3rem;
	}
}

@media screen and (min-width: 769px){
	h1{
    margin-bottom:0.3em;
    text-align: center;
	}

	h2{
		font-size: 2rem
	}

	h3,h4{
		font-size: 1.4rem;
	}

	.text-anleitung h3, .infotext h3, .overlay-container-not-active h3, .overlay-container-question h3{
		font-size: 2.2rem;
	}
}

@media screen and (min-width: 992px){
	h1{
		font-size: 3rem;
	}

	h2{
		font-size: 2.2rem
	}

	h3, h4{
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1200px){
	h1{
		font-size:5vw;
	}

	h2{
		font-size: 2.4rem;
	}

	h3, h4{
		font-size:2rem;
		margin-bottom:0.3em;
	}

	
}

@media screen and (min-width: 1921px){
	h1{
		font-size:5rem;
	}

	h2{
		font-size: 2.5rem;
	}
}

.text.frage li {
	width: 90%;
	max-width:480px;
	font-size:1.1rem;
	line-height:1.3em;
	float:left;
}

ul {
	padding-left:15px;
}
/*
img, object {
	width: 100%;
	height: auto;
	display: block;
}


a, a:hover, a:active, a:focus {
	color:inherit;
	text-decoration:underline;
	outline:none;
	border:none;
}
*/
.subheader-wrapper{
	margin-top: 15px;
	left: 0;
	margin-left: 30px;
	top: 0;
}

.subtitle, .sub-title{
	color: #fff;
	font-size: 1rem;
	font-family: 'Recoleta';
}

.overlay .sub-title{
	font-size: 1em;
}

h3.subtitle{
	text-transform: none;
	margin-bottom: 0;
}

h3.font-size-15em{
	font-size: 2rem;
}

.cal-day-price .overlay-subtitle{
	font-size: 1em;
	text-align: center !important;
	z-index: 2;
	width: 90%;
	margin: 15px auto;
	color: #6B0000;
	font-family: 'Helvetica';
	font-weight: 100;
}

@media screen and (min-width: 576px){
	.subheader-wrapper{
		margin-left: 4vw;
	}
}

@media screen and (min-width: 769px){
	.subtitle, .sub-title{
		font-size: 1.1rem;
	}

	.subheader-wrapper .subtitle{
		font-size: 1rem;
	}

	h3.font-size-15em{
		font-size: 2.2rem;
	}
}

@media screen and (min-width: 992px){
	.cal-day-price .overlay-subtitle, h3.font-size-15em{
		text-align: left;
	}
}

@media screen and (min-width: 1200px){
	.col-intro{
		width: 90%;
	}

	.subtitle{
		font-size: 1.4rem;
	}

	.subheader-wrapper .subtitle{
		font-size: 1.2vw;
	}

	h3.font-size-15em{
		font-size: 2rem;
	}

	.subheader-wrapper{
		margin-left: 30%;
	}
}

@media screen and (min-width: 1921px){
	.subheader-wrapper .subtitle{
		font-size: 1.2rem
	}
}

.text-inner {
	color:#212529;
	width: 100%;
	position: relative;
	z-index: 101;
}

.red-title{
	color: #e30613 !important;
}

.red-oblique {
	font-family: 'Helvetica-Bold-Oblique';
	color: #5C348A;
	font-size: 20px !important;
}

.font-green {
	color: #00AA98;
	text-transform: uppercase;
	position: relative;
	bottom: 1.5rem;
}

.title-bold {
	 color: #e30613 !important;
	 font-family: 'Helvetica-Bold';
	 font-size: 15px !important;
}

.font-bordeaux{
	color:#591002;
}

.font-white {
	color: #00AA98;
	line-height: 37px;
	font-family: 'Helvetica-Bold-Oblique';
}

span.title-down-red {
    color: #E00013;
}


.font-atlantic{
	font-family: 'Recoleta';
}

.bold{
	font-weight: 600;
}

@media screen and (min-width: 769px){
	.text-inner{
		padding-bottom: 1.5rem;
	}
}

@media screen and (min-width: 1200px){
	.text-inner{
		padding-bottom: 3rem;
	}
}

/*** wrapper styles ***/
.wrapper {
	width:100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-bottom: 5rem
}

@media screen and (min-width: 1921px){
	.wrapper{
		max-width: 1920px;
		margin:auto;
	}
}

.leitung{
	width: 100%;
	margin-top: 15px;
}

.leitung-xl{
	display: none;
}

.leitung img, .leitung #Ebene_1{
	width: calc(80% + 10% + 15px);
}

.floating-bubble {
	display: none;
	height: 15px;
	width: 15px;
 	offset-path: path('M1720,403.1V230.9c0-15-12.1-27.1-27.1-27.1h-106.2c-15,0-27.1-12.1-27.1-27.1V36.6c0-15-12.1-27.1-27.1-27.1 h-426.4c-15,0-27.1,12.1-27.1,27.1v175c0,15,12.1,27.1,27.1,27.1h108.8c15,0,27.1-12.1,27.1-27.1v-72c0-15-12.1-27.1-27.1-27.1h-366 	c-15,0-27.1,12.1-27.1,27.1v67.2c0,15-12.1,27.1-27.1,27.1H245.1c-15,0-27.1,12.1-27.1,27.1v181.3c0,15-12.1,27.1-27.1,27.1h-45.7 c-15,0-27.1-12.1-27.1-27.1v-64.5c0-15-12.1-27.1-27.1-27.1H0');
    animation: acht 10s infinite linear;
    margin-top: -25.25%
 }
 @keyframes acht {
    0% { offset-distance: 100%;}
    100% { offset-distance: 0%;}
 }

.logo-wrapper{
	position: relative;
	z-index: 101;
}

.logo-wrapper object {
	max-width: 75px;
	margin-left: 10%;
	float: right;
}

.logo-link {
	width: calc(100% - 30px);
	height: 100%;
	display: table;
	position: absolute;
	z-index: 2;
	top: 0;
	max-height: 30vw;
}

.logo {

	padding-top:15px;
}



@media screen and (min-width:992px) {
	.logo-wrapper object {
		width: 100px;
	}
}

@media screen and (min-width:992px) {
	

	.logo-wrapper object {
		width: 10vw;
		padding-right: 0;
		float: left;
	}

	.logo-link {
		max-width: 200px;
		max-height: 200px;
	}
}

@media screen and (min-width:1921px){
	.leitung-xl{
		display: block;
		right: calc((100vw - 1550px)/2);
		width: 100%;

	}
	.leitung-m{
		display: none;
	}
}

/*** main styles ***/
.main {
	position:relative;
	margin:auto;
	width:100%;
	z-index: 100;
}

.content {
	width:100%;
	height:0;
	position:absolute;
	top:0;
	left:0;
	z-index:102;
	opacity:1;
	transition:0.4s opacity;
	-moz-transition:0.4s opacity;
	-webkit-transition:0.4s opacity;
}

.text {
	color:#fff;
}

.col-intro-wrapper object {
	width: 90%;
}

.col-intro-wrapper{
	position: relative;
	z-index: 99;
}

.overlay {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	overflow:auto;
	/* z-index:999; */
}

.overlay-bg {
	width:100%;
	height:100%;
	position:fixed;
	display:block;
	z-index:20;
	top:0;
	left:0;
}

.overlay-bg:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
    background-image: url("../image/general/ROTH-Adv_2025_Hintergrund-Overlay.svg");
    opacity: 2; */
  opacity: .8;
  background: #e10817 !important;
}

.pfad-g-bild {

	position: absolute;
    top: 0;
    left: 0;
    margin-left: 5rem;
    margin-top: 13rem;
}

img.pfad-r-bild {
    position: absolute;
    top: 0;
    left: 0;
    left: 4rem;
    top: 29rem;
}

img.pfad-dr-bild {
    position: absolute;
    right: 0;
    top: 12rem;
}

img.pfad-dr-bild.anleitung-pfad {
    margin-right: -3rem;
    margin-top: -4rem;
}


@media screen and (max-width: 1540px) {

	.pfad-g-bild {

		display: none;
	}
	
	img.pfad-dr-bild {

		display: none;
	}
	
}

.overlay-container {
	display: block;
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
}

.overlay-content {
	position:absolute;
	left: 0;
	right: 0;
	margin:auto;
	width:90%;
	top:8.333%;
	z-index:9;
	background: transparent;
}

@media screen and (max-width: 767px){
	.overlay-content {
		width:100%;
		top: 20vh;
	}
}

.overlay-container-geschenke{
	max-width: 1600px;
}

@media screen and (max-width: 769px){
	.overlay-content{
		border-radius: 0;
	}

	.main{
		height: auto;
		padding-bottom: 2vw;
	}

	.overlay-container-geschenke{
		width: 90%;
	}
}

.container-icon{
	max-width: 960px;
	width: 90%;
	left: 0;
	right: 0;
	margin: auto;
	height: 100%
}

.overlay-container-infotext .overlay-content .row.question, .overlay-container-question .overlay-content .row.question, .overlay-container-not-active .overlay-content .row.question{
	min-height: 1vw;
}

.overlay-container-anleitung .overlay-content p{
	font-size: 1em;
}

@media screen and (max-width:767px) {
	.overlay-container-anleitung .overlay-content p{
		font-size: 15px;
	}
}

.overlay-content object{
	position: absolute;
}

@media screen and (min-width:769px) {
	.overlay-content {
		top:12.5%;
	}
}

/*
@media screen and (min-width: 992px) {
	.overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content, .overlay-container-not-active .overlay-content{
		min-height: 20vw;
			clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
			-webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
	}

	.overlay-container-anleitung .overlay-content{
			clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
			-webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
	}

	.overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content{
		min-height: 20vw;
			clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
			-webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
	}
}
*/
@media screen and (min-width: 1440px){
	.overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content, .overlay-container-not-active .overlay-content, .container-icon{
		max-width: 1200px;
	}
}

@media screen and (min-width: 1440px){
	.antw{
		max-width: 1200px;
		clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%) !important;
   		 -webkit-clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%) !important;
			background: unset !important;
		
		
	}
}


.p-antw {
	position: relative;
	right: 1rem;

} 





.text.question {
	min-height:300px;
	/*padding: 1rem;*/
    padding: 1rem 1rem 6rem 1rem;
}

.text .question-door {
	font-size:2rem;
	padding-top:50px;
}

.question-number {
	font-family: 'Helvetica';
	font-weight: 600;
	color: #fff;
	width: calc(16.6667% + 1.5rem);
	height:100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}

.overlay-container-infotext .question-number, .overlay-container-question .question-number{
	position: absolute;
}

.question-number .number{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 50px;
	font-size: 2rem;
	text-align: center;
}

.question-number.anleitung{
	/*background: transparent url(../img/info-solid.png) no-repeat 0 50%/50px auto;*/
	width: 60px;
	height: 60px;
	left: 5%;
	border-radius: 0;
	box-shadow: none;
	-webkit-box-shadow:none;
	border:none;
	position: absolute;
	top: 0;
	margin-top: 15px
}

.container-geschenke .overlay-subtitle{
	position: relative;
	z-index: 2;
	margin: auto;
	font-size: 1em;
	padding: 0;
	color: #fff;
}

.container-geschenke .question-number{
	z-index: 5;
	margin: 50px auto 15px;
	font-size: 1.2rem;
	right: 0;
	left: 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background: #e30613;
	color: #fff;
	border-radius: 50%;
}

.questiontext {
	font-size: 1em;
	margin-top: 20px !important;
}


@media screen and (min-width: 576px){
	.container-geschenke .overlay-subtitle{
		font-size: 1.1rem;
	}
	.question-number.anleitung{
		/*background: transparent url(../img/info-solid.png) no-repeat 0 50%/80px auto;*/
		width: 100px;
		height: 100px;
	}
}


@media screen and (min-width: 992px){
	.question-number.anleitung{
		background-size: 100px auto;
		width: 100px;
		height: 120px;
		margin-top: 60px;
		bottom: 0;
		top: initial;
	}
	.text.question {
		padding: 0 3rem 6rem 3rem !important;
	}
}

@media screen and (min-width: 1200px){
	.question-number.anleitung{
		background-size:120px auto;
		width: 120px;
		height: 150px;
	}
}

.close {
  background:transparent url(../img/close_white.png) no-repeat;
  background:transparent url(../imgage/general/ROTH-Adv_2025_X-close.svg) no-repeat;	
  position:absolute;
	right:10%;
	top: 15px;
	margin-right: 1rem;
	cursor: pointer;
	display:block;
	width:35px;
	height:35px;
	z-index:999;
	opacity: .8;
	transition: all .4s;
	-webkit-transition: all .4s;
}

@media screen and (min-width: 1200px) {
	.close {
		right: 80px;
		top: 100px;
	}
}

.close:hover, .close:focus {
	opacity: 1;
}

.header-element{
	z-index: 1001;
	left: 0;
	right: 0;
}

.text .question-door {
	position:absolute;
	bottom:5%;
	right:5%;
}

.container-footer{
	margin: auto;
	overflow: hidden;
	position: absolute;
	z-index: 102;
	background: transparent url(../img/footer-element.svg) no-repeat 50% 100%/100% auto;
}

@media screen and (min-width: 992px){
	.overlay-container-geschenke .close{
		right: 40px;
		top: 40px;
	}
}

@media screen and (min-width: 1200px){
	.overlay-container-geschenke .close{
		right: calc(41.6667% - 375px);
		top: 15px;
	}
}


/*** menu ***/

/*** doors ***/
.container-doors{
	width: 100%;
	margin-bottom: 30px;
}

.container-regal{
	border-bottom: 25px solid #591002;
	height: 150px
}

@media screen and (min-width: 992px){
	.container-doors{
		width: 80%;
		margin-bottom: 0px;
		float: left;
	}
}

.container-doors{
	position: relative;
}

.z-index-9{
	z-index: 99;
	position: relative;
}

.door {
	background: #591002;
	z-index:200;
	opacity:1;
	width:100px;
	height:150px;
	display: block;
	float: left;
	margin: 0 5px;
	position: relative;
	z-index: 1
}

.door2, .door3, .door4, .door4, .door9, .door23{
	background: transparent url(../img/glas-dreieck-leer.svg) no-repeat 50% calc(100% - 25px)/100% auto;
	width:80px;
}

.door2 a, .door3 a, .door4 a, .door9 a, .door23 a{
	background: transparent url(../img/glas-dreieck-voll-1.svg) no-repeat 0% calc(100% - 25px)/auto 50%;
	clip-path: polygon(50% 40px, 100% calc(100% - 25px), 100% 100%, 0 100%, 0 calc(100% - 25px));
	-webkit-clip-path: polygon(50% 40px, 100% calc(100% - 25px), 100% 100%, 0 100%, 0 calc(100% - 25px));
}

.door2:hover a, .door3:hover a, .door4:hover a, .door9:hover a, .door23:hover a, .door2.door-anim a, .door4.door-anim a, .door3.door-anim a, .door23.door-anim a, .door9.door-anim a{
	animation: liquid 6s linear infinite;
	-webkit-animation: liquid 6s linear infinite;
}

.door2.day-active, .door3.day-active, .door4.day-active, .door9.day-active, .door23.day-active{
	background: transparent url(../img/baum.svg) no-repeat 50% calc(100% - 25px)/100% auto;
}
/*
.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
	background: transparent url(../img/baum.svg) no-repeat 10% 10%/12% auto;
}
*/
.door22, .door16, .door17, .door21, .door5{
	background: transparent url(../img/glas-rund-leer.svg) no-repeat 0% calc(100% - 25px)/100% auto;
	width:80px;
}

.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
	background: transparent url(../img/glas-rund-anim.svg) no-repeat 0% calc(100% - 25px)/auto 40%;
	clip-path: circle(33.25% at 50% 57%);
	-webkit-clip-path: circle(33.25% at 50% 57%);
}

.door22:hover a, .door16:hover a, .door17:hover a, .door21:hover a, .door5:hover a, .door22.door-anim a, .door16.door-anim a, .door17.door-anim a, .door21.door-anim a, .door5.door-anim a{
	animation: liquid 4s linear infinite;
	-webkit-animation: liquid 4s linear infinite;
}

.door22.day-active, .door16.day-active, .door17.day-active, .door21.day-active, .door5.day-active{
	background: transparent url(../img/kugel.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 35px);
}
/*
.question-icon22, .question-icon16, .question-icon17, .question-icon21, .question-icon5{
	background: transparent url(../image/calend_5.png) no-repeat 10% 5%/10% auto;
	top: 11rem;
	z-index: 99999999;
}
*/
.door13, .door12, .door8, .door7, .door11{
	background: transparent url(../img/glas-duenn-leer.svg) no-repeat 5% calc(100% - 25px)/auto calc(100% - 25px);
	width:20px;
}

.door13 a, .door12 a, .door8 a, .door7 a, .door11 a{
	background: transparent url(../img/glas-duenn-anim.svg) no-repeat 0% calc(100% - 50px)/auto 55%;
	clip-path: polygon(2px 0, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 3px 100%);
		-webkit-clip-path: polygon(2px 0, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 3px 100%);
}

.door13:hover a, .door12:hover a, .door7:hover a, .door8:hover a, .door11:hover a, .door13.door-anim a, .door12.door-anim a, .door7.door-anim a, .door8.door-anim a, .door11.door-anim a{
	animation: liquidR 4s linear infinite;
	-webkit-animation: liquidR 4s linear infinite;
}

.door.day-active.door22 a, .door.day-active.door16 a, .door.day-active.door17 a, .door.day-active.door21 a, .door.day-active.door5 a,.door10.day-active a, .door6.day-active a, .door20.day-active a, .door10.day-active a, .door18.day-active a{
	clip-path: initial;
	-webkit-clip-path: initial;
	background: transparent url(../img/kranz.png) no-repeat 50% calc(100% + 0px)/calc(100% - 25px) auto !important;
}

@keyframes liquidR {
	0% {background-position: 0 calc(100% - 50px)}
	100% {background-position: 100% calc(100% - 50px)}
}

@-webkit-keyframes liquidR {
	0% {background-position: 0 calc(100% - 50px)}
	100% {background-position: 100% calc(100% - 50px)}
}

.door13.day-active, .door12.day-active, .door8.day-active, .door7.day-active, .door11.day-active{
	background: transparent url(../img/zuckerstange.svg) no-repeat 5% calc(100% - 25px)/auto calc(100% - 35px);
	width: 50px;
	position: absolute;
}
/*
.question-icon13, .question-icon12, .question-icon8, .question-icon7, .question-icon11{
	background: transparent url(../img/zuckerstange.svg) no-repeat 15% 5%/10% auto;
}
*/
.door7.day-active{
	left: 150px
}

.door13.day-active{
	right: 50px;
	margin-right: 0;
}

.door10, .door6, .door20, .door10, .door18{
	background: transparent url(../img/glas-kreuz-voll.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 50px);
	width:90px;
}

.door10.day-active, .door6.day-active, .door20.day-active, .door10.day-active, .door18.day-active{
	background: transparent url(../img/lebkuchenman.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 50px);
}
/*
.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
	background: transparent url(../img/lebkuchenman.svg) no-repeat 12% 0%/15% auto;
	transform: rotate(-15deg);
}
*/

.door24, .door19, .door1, .door15, .door14{
	background: transparent url(../img/glas-viereck-leer.svg) no-repeat 0% calc(100% - 25px)/100% auto;
	width:100px;
}

.door24 a, .door19 a, .door1 a, .door15 a, .door14 a{
	background: transparent url(../img/glas-viereck-anim.svg) no-repeat 0% calc(100% - 25px)/auto 50%;
	clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%);
	-webkit-clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%);
}

.door24:hover a, .door19:hover a, .door1:hover a, .door15:hover a, .door14:hover a,.door24.door-anim a, .door19.door-anim a, .door1.door-anim a, .door15.door-anim a, .door14.door-anim a{
	animation: liquid 4s linear infinite;
	-webkit-animation: liquid 4s linear infinite;
}

@keyframes liquid {
	0% {background-position: 0 calc(100% - 25px)}
	100% {background-position: 100% calc(100% - 25px)}
}

@-webkit-keyframes liquid {
	0% {background-position: 0 calc(100% - 25px)}
	100% {background-position: 100% calc(100% - 25px)}
}

.door24.day-active, .door19.day-active, .door1.day-active, .door15.day-active, .door14.day-active{
	background: transparent url(../img/geschenk-normal.svg) no-repeat 0% calc(100% - 25px)/100% auto;
}

.door24.day-active a, .door19.day-active a, .door1.day-active a, .door15.day-active a, .door14.day-active a{
background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 5px)/auto 50px !important
}
/*
.question-icon19, .question-icon1, .question-icon15, .question-icon14{
	background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 10%/10% auto;
}

.question-icon24{
	background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 5%/10% auto;
}
*/
.door1, .door2, .door6, .door9, .door13, .door14, .door17, .door20, .door21{
	float: right;
}

.door3, .door5, .door7, .door8, .door11, .door23{
	position: absolute !important;
}

.door1, .door2{
	margin-right: 30px
}

.door3, .door16{
	left: 90px;
}

.door5{
	right: 120px
}

.door6, .door13{
	margin-right:90px;
}

.door7{
	left: 180px
}

.door8{
	right: 100px
}

.door11{
	margin-left: 125px
}

.door12{
	margin-left: 15px
}

.door14{
	margin-right: 15px
}

.door17{
	margin-right: 60px
}

.door18{
	margin-left: 0
}

.door23{
	left: 80px;
}

.door24{
	margin-left: 150px
}

.door.day-active {
	z-index: 99
}



.door a {
	display: table;
	height: 100%;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.door a:hover {
	text-decoration: none;
}

.door-number {
	display:block;
	font-size: 1rem;
	margin-top: 1em;
	font-family: 'Roboto-Bold-webfont',Arial,Helvetica,sans-serif;
	font-weight: 600;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
}

.day-active a{
	background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 2px)/auto 50px !important;
	height: calc(100% + 15px);
}

.door.day-active a{
	animation:none;
}

.download.button{
	border:1px solid #fff;
	padding: 5px 10px;
	width: 50%;
	display: inline-block;
	transition:all .4s;
	margin-top: 15px
}

.download.button a{
	font-weight: 600;
	text-decoration:none;
	transition:all .4s;
	color: #000000;
}
.download.button:hover{
	background: #fff;
}

.download.button:hover a{
	color: #e30613;
  	color: #591002;
	text-decoration:none;
}

.bubbles{
	position: absolute;
	width: 100%;
	top: 0;
	height: 200px;
	margin-top: -100px;
	display: none;
}

.dot{
	display: none;
}

.door:hover .bubbles, .door.door-anim .bubbles, .door:hover .dot, .door.door-anim .dot{
	display: block;
}

.bubble{
	width: 15px;
	height: 15px;
	position: absolute;
	border-radius: 50%;
}

.door.day-active .dot, .door.day-active  .bubbles{
	display: none;
}

@media screen and (max-width: 576px){
	.bubbles{
		height: 150px
	}
	.door22 .dot, .door17 .dot, .door21 .dot, .door16 .dot, .door5 .dot{
		max-width: 60px
	}
}

@-webkit-keyframes animateBubble {
	0% {margin-top: 60px;}
  100% {margin-top: -30px;}
}

@keyframes animateBubble {
	0% {margin-top: 60px;}
  100% {margin-top: -30px;}
}

@-webkit-keyframes animateBubble1 {
	0% {margin-top: 50px;}
  100% {margin-top: -50px;}
}

@keyframes animateBubble1 {
	0% {margin-top: 50px;}
  100% {margin-top: -50px;}
}

@-webkit-keyframes sideWays {
	0% {margin-left:0px;}
  100% {margin-left:15%;}
}

@keyframes sideWays {
	0% {margin-left:0px;}
  100% {margin-left:15%;}
}

@-webkit-keyframes sideWays1 {
	0% {margin-left:0px;}
  100% {margin-right:10%;}
}

@keyframes sideWays1 {
	0% {margin-left:0px;}
  100% {margin-right:10%;}
}

.x1 {
  -webkit-animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
	animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
	left: 30%;
	top: 30%;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
}

.right-bubbles .x1{
	-webkit-animation: animateBubble 1.4s linear infinite, sideWays 1.2s ease-in-out infinite;
	animation: animateBubble 1.4s linear infinite, sideWays 1.2s ease-in-out infinite;
	left: 30%;
	-webkit-transform: scale(0.3);
	transform: scale(0.3);
}

.x2 {
  -webkit-animation: animateBubble 2.4s linear infinite, sideWays 1.2s ease-in-out infinite;
	animation: animateBubble 2.4s linear infinite, sideWays 1.2s ease-in-out infinite;
	left: 25%;
	top: 20%;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	animation-delay: .4s;
}

.right-bubbles .x2{
	-webkit-animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
	animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
	left: 30%;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
}

.x3 {
  -webkit-animation: animateBubble1 4s linear infinite, sideWays1 1.4s ease-in-out infinite;
	animation: animateBubble1 4s linear infinite, sideWays1 1.4s ease-in-out infinite;
	left: 40%;
	top: 40%;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
	animation-delay: .2s;
}

.right-bubbles .x1{
	-webkit-animation: animateBubble 3s linear infinite, sideWays 1.2s ease-in-out infinite;
	animation: animateBubble 3s linear infinite, sideWays 1.2s ease-in-out infinite;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.x4 {
  -webkit-animation: animateBubble 3s linear infinite, sideWays 1.4s ease-in-out infinite alternate;
	animation: animateBubble 3s linear infinite, sideWays 1.4s ease-in-out infinite alternate;
	left: 20%;
	top: 10%;
	-webkit-transform: scale(0.3);
	transform: scale(0.3);
}

.right-bubbles .x4{
	-webkit-animation: animateBubble 4s linear infinite, sideWays 1.2s ease-in-out infinite;
	animation: animateBubble 4s linear infinite, sideWays 1.2s ease-in-out infinite;
	left: 30%;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
	animation-delay: .4s;
}

.x5 {
  -webkit-animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
	left: 30%;
	top: 50%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.right-bubbles .x5{
	-webkit-animation: animateBubble 1.4s linear infinite, sideWays .8s ease-in-out infinite;
	animation: animateBubble 1.4s linear infinite, sideWays .8s ease-in-out infinite;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	animation-delay: .2s;
}

.door2 .dot , .door3 .dot, .door4 .dot, .door9 .dot, .door23 .dot{
	width: 75%;
	left: 0;
	right: 0;
	margin: 10% auto 0
}

.door2 .bubble, .door3 .bubble, .door4 .bubble, .door9 .bubble, .door23 .bubble, .door2 .dot span, .door3 .dot span, .door4 .dot span, .door9 .dot span, .door23 .dot span{
	background: #00AB98;
}

.door22 .bubble, .door17 .bubble, .door21 .bubble, .door16 .bubble, .door5 .bubble, .door22 .dot span, .door17 .dot span, .door21 .dot span, .door16 .dot span, .door5 .dot span{
	background: #C9DDE9;
}

.door13 .dot , .door12 .dot, .door8 .dot, .door7 .dot, .door11 .dot{
	width: 15px;
	left: 0;
	right: 0;
	margin: -25px auto 0
}

.door13 .dot span:nth-of-type(2), .door12 .dot span:nth-of-type(2), .door8 .dot span:nth-of-type(2), .door7 .dot span:nth-of-type(2), .door11 .dot span:nth-of-type(2),.door13 .dot span:nth-of-type(4), .door12 .dot span:nth-of-type(4), .door8 .dot span:nth-of-type(4), .door7 .dot span:nth-of-type(4), .door11 .dot span:nth-of-type(4){
	display: none;
}

.door13 .bubble, .door12 .bubble, .door8 .bubble, .door7 .bubble, .door11 .bubble, .door13 .dot span, .door12 .dot span, .door8 .dot span, .door7 .dot span, .door11 .dot span{
	background: #e30613;
	margin-left: -10px;
}

.door13 .dot span, .door12 .dot span, .door8 .dot span, .door7 .dot span, .door11 .dot span{
	margin-left: -2px;
}

.door24 .bubble, .door19 .bubble, .door1 .bubble, .door15 .bubble, .door14 .bubble, .door24 .dot span, .door19 .dot span, .door1 .dot span, .door15 .dot span, .door14 .dot span{
	background: #6CA0AE;
}

.door10 .bubble, .door6 .bubble, .door20 .bubble, .door10 .bubble, .door18 .bubble, .door10 .dot span, .door6 .dot span, .door20 .dot span, .door10 .dot span, .door18 .dot span{
	background: #7F1810;
}

.door10 .dot, .door6 .dot, .door20 .dot, .door10 .dot, .door18 .dot{
	top: 45px
}

.door10 .bubbles, .door6 .bubbles, .door20 .bubbles, .door10 .bubbles, .door18 .bubbles{
	margin-top: -125px;
	margin-left: -25%;
}

.door10 .bubbles.right-bubbles, .door6 .bubbles.right-bubbles, .door20 .bubbles.right-bubbles, .door10 .bubbles.right-bubbles, .door18 .bubbles.right-bubbles{
	margin-left: 30%;
	transform: rotateY(180deg);
}

.col-spendenbarometer .bubbles{
	display: block;
	height: 75%;
	width: 25%;
	left: 0;
	right: 0;
	margin: auto;
	bottom:20%;
	z-index: 10
}

.col-spendenbarometer .bubble{
	background: #e30613;
	width: 50px;
	height: 50px
}

.col-spendenbarometer .x1 {
  -webkit-animation: animateBubbleA 5s linear infinite, sideWaysA 1s ease-in-out alternate infinite;
	animation: animateBubbleA 5s linear infinite, sideWaysA 1s ease-in-out alternate infinite;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	left: 5%;
	top: 80%;
}

.col-spendenbarometer .x2 {
  -webkit-animation: animateBubbleA 6s linear infinite, sideWaysA 3s ease-in-out alternate infinite;
	animation: animateBubbleA 6s linear infinite, sideWaysA 3s ease-in-outalternate infinite;
	;
	animation-delay:1s;
	left: 15%;
	top: 70%;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
}

.col-spendenbarometer .x3 {
  -webkit-animation: animateBubbleA 12s linear infinite, sideWaysA 1.2s ease-in-out alternate infinite;
	animation: animateBubbleA 12s linear infinite, sideWaysA 1.2s ease-in-out alternate infinite;
	animation-delay:.4s;
	left: 10%;
	top: 70%;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
}

.col-spendenbarometer .x4 {
  -webkit-animation: animateBubbleA 14s linear infinite, sideWaysA 3s ease-in-out alternate infinite alternate;
	animation: animateBubbleA 14s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
	animation-delay:.2s;
	left: 5%;
	top: 80%;
	-webkit-transform: scale(0.3);
	transform: scale(0.3);
}

.col-spendenbarometer .x5 {
  -webkit-animation: animateBubbleA 10s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
	animation: animateBubbleA 10s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
	animation-delay:1.4s;
	left: 15%;
	top: 75%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.col-spendenbarometer .x6 {
  -webkit-animation: animateBubbleA 8s linear infinite, sideWaysA 2.4s ease-in-out infinite alternate;
	animation: animateBubbleA 8s linear infinite, sideWaysA 2.4s ease-in-out infinite alternate;
	animation-delay:2.4s;
	left: 15%;
	top: 80%;
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
}

.col-spendenbarometer .x7 {
  -webkit-animation: animateBubbleA 7s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
	animation: animateBubbleA 7s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
	animation-delay:2s;
	left: 15%;
	top: 80%;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
}

.col-spendenbarometer .x8 {
  -webkit-animation: animateBubbleA 12s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
	animation: animateBubbleA 12s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
	animation-delay:.8s;
	left: 15%;
	top: 70%;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
}

.col-spendenbarometer .x9 {
  -webkit-animation: animateBubbleA 8s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
	animation: animateBubbleA 8s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
	left: 20%;
	top: 80%;
	-webkit-transform: scale(0.3);
	transform: scale(0.3);
}

.col-spendenbarometer .x10 {
  -webkit-animation: animateBubbleA 6s linear infinite, sideWaysA 1s ease-in-out infinite alternate;
	animation: animateBubbleA 6s linear infinite, sideWaysA 1s ease-in-out infinite alternate;
	left: 10%;
	top: 70%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

@keyframes animateBubbleA {
  0% {margin-top: 130%;}
  100% {margin-top: -250%;}
}

@keyframes sideWaysA {
  0% {margin-left:0px;}
  100% {margin-left:25px;}
}

@-webkit-keyframes animateBubbleA {
  0% {margin-top: 130%;}
  100% {margin-top: -250%;}
}

@-webkit-keyframes sideWaysA {
  0% {margin-left:0px;}
  100% {margin-left:25px;}
}

.dot {
	position: absolute;
	width: 100%;
	height: 40px;
	top: 70px;
  /*display: none;*/
}

.dot span {
	border-radius: 50%;
  position: absolute;
  display: block;
  animation: animate 3s ease-in-out infinite;
  -webkit-animation: animate 3s ease-in-out infinite;
}

.day-active .dot, .day-active .bubble{
	display: none;
}

/*the animation*/
@keyframes animate {
	0% { transform: translateY(-10px);}
	50% { transform: translateY(10px); transform:scale(1.1);}
	100% {transform: translateY(-10px);}
}

@-webkit-keyframes animate {
	0% { transform: translateY(-10px);}
	50% { transform: translateY(10px); transform:scale(1.1);}
	100% {transform: translateY(-10px);}
}

.dot span:nth-child(1) {
	top: 25%;
	left: 70%;
	height: 7.5px;
	width: 7.5px;
	opacity: 0.7;
	animation: animate 1.4s linear infinite .3s reverse;
	-webkit-animation: animate 1.4s linear infinite .3s reverse;
}

.dot span:nth-child(2) {
	top: 30%;
	left: 15%;
	height: 10px;
	width: 10px;
	opacity: 0.9;
	animation: animate 1.2s linear infinite .5s reverse;
	-webkit-animation: animate 1.2s linear infinite .5s reverse;
}

.dot span:nth-child(3) {
	top: 25%;
	left: 35%;
	height: 10px;
	width: 10px;
	opacity: 1;
	animation: animate 2s linear infinite .5s reverse;
	-webkit-animation: animate 2s linear infinite .5s reverse;
}

.dot span:nth-child(4) {
	top: 25%;
	left: 50%;
	height: 12px;
	width: 12px;
	opacity: 1;
	animation: animate 1s linear infinite .7s reverse;
	-webkit-animation: animate 1s linear infinite .7s reverse;
}

.door10 .dot span:nth-child(1), .door6 .dot span:nth-child(1), .door20 .dot span:nth-child(1), .door10 .dot span:nth-child(1), .door18 .dot span:nth-child(1){
	left: 62.5%
}

.door10 .dot span:nth-child(2), .door6 .dot span:nth-child(2), .door20 .dot span:nth-child(2), .door10 .dot span:nth-child(2), .door18 .dot span:nth-child(2){
	left: 30%;
	width: 8px;
	height: 8px;
}

.door10 .dot span:nth-child(3), .door6 .dot span:nth-child(3), .door20 .dot span:nth-child(3), .door10 .dot span:nth-child(3), .door18 .dot span:nth-child(3){
	left: 32.5%;
	animation: animate 1.4s linear infinite .5s reverse;
}

.door10 .dot span:nth-child(4), .door6 .dot span:nth-child(4), .door20 .dot span:nth-child(4), .door10 .dot span:nth-child(4), .door18 .dot span:nth-child(4){
	left: 55%;
	height: 7px;
	width: 7px;
	animation: animate 1.4s linear infinite .7s reverse;
	-webkit-animation: animate 1.4s linear infinite .7s reverse;
}
/*
@media screen and (max-width: 1440px){
	.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
		background-position: 12.5% 10%
	}
	.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
		background-position: 15% 5%
	}
	.question-icon19, .question-icon1, .question-icon15, .question-icon14{
		background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 12%/10% auto;
	}
	.question-icon24{
		background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 10%/10% auto;
	}
	.download.button{
		width: 75%
	}
	.col-spendenbarometer .bubbles{
		bottom: 30%;
		width: 20%
	}
	.col-spendenbarometer .bubble{
		width: 35px;
		height: 35px;
		left: 0
	}
}
*/

@media screen and (max-width: 992px){
	.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
		background-position: 30px 5%
	}
	.question-icon22, .question-icon16, .question-icon17, .question-icon21, .question-icon5{
		background-position: 2% 3%
	}
	.question-icon13, .question-icon12, .question-icon8, .question-icon7, .question-icon11 {
    background-position: 0% 5%
	}
	.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
		background-position:100px 15px;
		transform: rotate(-20deg);
		margin-top: -5%;
	}
	/*
	.question-icon19, .question-icon1, .question-icon15, .question-icon14{
		background: transparent url(../img/geschenk-normal.svg) no-repeat 10% 5%/10% auto;
	}
	
	.question-icon24{
		background: transparent url(../img/geschenk-normal.svg) no-repeat 5% 5%/10% auto;
	}
	*/
	.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
		clip-path: circle(30% at 50% 60%);
		-webkit-clip-path: circle(30% at 50% 60%);
	}
	.door.day-active.door22 a, .door.day-active.door16 a, .door.day-active.door17 a, .door.day-active.door21 a, .door.day-active.door5 a{
			clip-path: initial;
			-webkit-clip-path: initial;
			background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 5px)/calc(100% - 25px) auto !important;
		}
	.door8 a, .door7 a{
		clip-path: polygon(0px 0, calc(100% - 3px) 0%, calc(100% - 2px) 100%, 2px 100%);
		-webkit-clip-path: polygon(0px 0, calc(100% - 3px) 0%, calc(100% - 2px) 100%, 2px 100%);
	}
	.col-spendenbarometer .bubbles{
		bottom: 50%;
		width: 40%
	}
	.col-spendenbarometer .bubble{
		width: 50px;
		height: 50px;
		left: 20%;
	}
}

@media screen and (max-width: 768px){
	.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
		background-position: 25px 20px
	}
	.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
		background-position: 35px 15px;
		transform: rotate(0deg);
		margin-top: 0;
	}
	.question-icon19, .question-icon1, .question-icon15, .question-icon14{
		background-position: 10% 3%
	}
}

@media screen and (max-width: 576px){
	.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
		background-position: 10px 25px
	}
	.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
		background-position: 35px 5%;
	}
	.question-icon19, .question-icon1, .question-icon15, .question-icon14{
		background-position: 10% 5%
	}
	.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
		clip-path: circle(25% at 43% 63%);
		-webkit-clip-path: circle(25% at 43% 63%);
	}
	.col-spendenbarometer .bubbles{
		bottom: 50%;
		width: 30%
	}
	.col-spendenbarometer .bubble{
		width: 40px;
		height: 40px;
		left: 10%;
	}
}
@media screen and (max-width: 420px){
	.col-spendenbarometer .bubble{
		width: 30px;
		height: 30px;
	}
}

.tuer.abgelaufen {
	opacity:0.65;
}

.col-spendenbarometer {
	position: relative;
	height: 100%;
}

.spendenbarometer-stand{
	bottom: 24vw;
	font-size: 1.2rem;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 99
}

.spendenbarometer-stand .font-atlantic{
	font-size: 1.4em
}

.spendenbarometer-stand .border-bottom{
	background: #fff;
	position: absolute;
	top: 2.2rem;
	left: 0;
	right: 0;
	margin: auto;
}

@media screen and (min-width: 576px){
	.spendenbarometer-stand{
		bottom: calc(25% - 15px);
		font-size: 1.4rem
	}
}

@media screen and (min-width: 992px){
	.spendenbarometer-stand{
		font-size:2vw;
		line-height: 1em;
	}
}

.date-bulb{
	font-size: .8em;
}

.barometer{
	font-size: 1rem;
	list-style: none;
	color: #fff;
	display: block;
	width: 90%;
	clear: both;
	margin: 0;
	font-weight: 600;
	line-height: 18px;
	display: none;
}

.barometer-sort {
	z-index: 2;
	position: relative;
	text-align: center;
	right: 0;
}

.barometer-sort p {
	font-size: 1.2em
}

.barometer>div{
	float: left;
	text-align: center;
	width: calc(70% - 50px);
	margin-right: 30px;
}

.barometer>div.clearfix{
	width: 0;
}

.spendenbarometer-image{
	margin: 50px auto;
	width: 90%;
	position: relative;
}

.spendenbarometer-anim{
	position: absolute;
	bottom: 0;
	width: 100.5%;
	height: 64%;
	animation: liquidG 2s linear infinite;
	-webkit-animation: liquidG 2s linear infinite;
	clip-path: circle(50% at 50% 50%);
	-webkit-clip-path: circle(50% at 50% 50%);
	background:transparent url(../img/glas-gross-anim.svg) repeat no-repeat 0 100%/auto 50%;
}

@keyframes liquidG {
	0% {background-position: 0 100%;background-size: auto 50%;}
	50% {background-position: 50% 100%;background-size: auto 40%;}
	100% {background-position: 100% 100%;background-size: auto 50%;}
}

@-webkit-keyframes liquidG {
	0% {background-position: 0 100%;background-size: auto 50%;}
	50% {background-position: 50% 100%;background-size: auto 40%;}
	100% {background-position: 100% 100%;background-size: auto 50%;}
}

@media screen and (min-width: 768px){
	.spendenbarometer-image{
		margin: 150px auto 0;
		width: 60%;
	}
}

@media screen and (min-width: 992px){
	.spendenbarometer-image{
		margin-top: 17vw;
		width: 70%;
	}

	.col-spendenbarometer{
		height: auto;
		width: 20%;
		float:left;
	}
}

/*** form styles ***/
form {
	position:relative;
}

input[type=text], input[type=email], textarea {
    border: none;
    font-family: 'Helvetica-Roman';
    font-size: 14px;
    width: calc(100% - 20px);
    float: left;
    /* background: #fff; */
    transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
    z-index: 500;
    padding: 14px;
    /* width: 60%; */
    background: transparent;
    height: 25px;
    margin: 0 auto;
    margin-top: 10px;
    border: none;
    border: solid 1px #FFFFFF;
    border-radius: 10px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #FFFFFF;
	opacity: 1; /* Firefox */
  }

@media screen and (min-width:992px) {
	input[type=text], input[type=email], textarea {
		font-size:16px;
	}
}

input, input:active {
	outline:none;
}

input[type=checkbox] {
	font-family:'HelveticaLTPro-Roman';
	float:left;
	border:0;
	width:auto;
	position:relative;
	cursor:pointer;
	margin-bottom:0;
}

:focus
{
	outline-style:none;
}

.checkbox, .radio{
	float: left;
	margin-top: 7px;
}

.checkbox-wrapper, .radio-wrapper {
	float: left;
	margin: 0;
	padding-top: 2px;
	width: 30px;
	position: absolute;
	left: 15px;
}

.checkbox-wrapper input, .radio-wrapper input {
	opacity: 0;
}

.checkbox-wrapper img, .radio-wrapper img {
	display: block;
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	max-width: 30px;
}

.checkbox-wrapper .image-elem-checked, .radio-wrapper .image-elem-checked {
	display:none;
}

.checkbox-wrapper.checked .image-elem-checked, .radio-wrapper.checked .image-elem-checked {
	display:block;
}

.checkbox-wrapper.checked .image-elem-unchecked, .radio-wrapper.checked .image-elem-unchecked {
	display:none;
}

.form-field label.checkbox-label,.form-field label.radio-label {
	padding-left: 50px;
	position: relative;
	z-index: 5;
	padding-top: 2px;
	overflow: hidden;
	word-break: break-word;
	min-height: 30px;
}

.radio-overlay{
	cursor: pointer;
}

input.absenden,.loesung-zeigen {
	border: none;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    font-weight: normal;
    padding: 3px 15px 4px;
    color: #E00013;
    background: var(--white);
    width: 100%;
    transition: all .4s;
    -webkit-transition: all .4s;
    display: block;
    border-radius: 15px;
}

input.absenden:hover, .zurueck:hover, .loesung-zeigen:hover {
	color: white;
	background: #591002;
	text-decoration: none;
}

.loesung-zeigen {
	text-decoration: none;
	border:none;
	font-size:1.125em;
	cursor:pointer;
	font-weight:normal;
	padding:10px;
	width:auto;
	background:#e30613;
	-webkit-appearance:none;
	border-radius:0;
	display: inline-block;
}

.form-field {
	clear:left;
	margin-bottom:1em;
	font-weight:normal;
	color:#fff;
	overflow:hidden;
	position: relative;
}

.form-field label {
	width: calc(100% - 45px);
	margin-bottom: 10px;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 22px;
	margin-left: 15px;
	cursor: pointer;
	display: block;
	font-family: 'Helvetica-Bold';
}

p.text-overlay-querstion {
    color: #6B0000;
}

@media screen and (min-width: 576px){
	input.absenden, .loesung-zeigen{
		width: calc(70% - 20px);
	}
}

@media screen and (min-width:769px) {
	.form-field label {
		font-size: 1rem;
	}

	.choice .form-field label{
		font-size: 1rem;
	}
}

@media screen and (min-width:1200px) {
	.form-field label {
		margin-bottom: 40px;
		font-size: 15px;
	}
}

.modal-title{
	font-size: 1rem;
}

.modal-title h3{
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
}

.choice {
	clear:left;
	overflow:auto;
	margin-bottom: -10px;
}

@media screen and (max-width:767px) {
	.choice {
		clear:left;
		overflow:auto;
		margin-bottom: 20px;
	}
}

.error, .error-prev {
	float:left;
	color:red;
	padding-left:20px;
}

.error-answer .error, .error-answer .error-prev {
	padding:0;
}

.modal-content{
	border:none;
}

@media screen and (min-width:769px) {
	.questiontext.modal-title{
		font-size: 1.2rem;
		font-weight: 600;
	}

	.modal-title h3{
		font-size: 2rem;
	}
}

@media screen and (min-width:1200px) {
	.modal-title{
		font-size: 1.1rem;
	}

	.modal-title h3{
		font-size: 2.4rem;
	}

	.questiontext.modal-title{
		font-size: 1.4rem;
	}
}

/*** geschenke styles ***/
.overlay .container.container-geschenke{
  display: grid;
  grid-template-columns: repeat(2, calc(67.5% - 5px));
  grid-column-gap: 10px;
 	width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

.item{
	position: relative;
  grid-column: 1;
  width: 100%;
  background: #fff;
  overflow: hidden;
  margin: 5px;
  margin-top: -10vw;
}

.item:nth-child(2n){ margin-left: 50%;}

@media screen and (min-width: 576px){
	.overlay .container.container-geschenke{
	  display: grid;
	  grid-template-columns: repeat(2, calc(50% - 5px));
	}

}

@media(min-width: 2000px){
	.container-footer{
		position: fixed;
		bottom: 0
	}
}

.hidden{
	display: none;
}

.container-geschenke img.position-absolute{
	right: 0;
	bottom: 50%;
	top: 50%;
	max-width: none;
	height: 100%;
	width: auto;
	left: 0;
	margin: auto;
	max-height: 100px;
}

.container-geschenke img.position-absolute.icon-geschenk{
	max-height: none;
}

.overlay-number{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	opacity: 0;
	transition: all .4s;
	background:rgba(107,0,0,.8);
}

.overlay-number:hover{
	opacity: 1;
}


.stars, .twinkling{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:transparent url(../img/stars.png) repeat top center/100% auto;
  z-index:0;
}

.twinkling{
  background:transparent url(../img/twinkling.png) repeat top center;
  background: transparent;
  z-index:1;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.radio-wrapper .radio-wrapper{
	display: none;
}

.radio-wrapper .radio-overlay .radio-wrapper{
	display: block;
}

.col-snowflakes{
	width: 100%;
	height: 100vw;
	display: block;
	margin: auto;
	position: fixed;
}

.snowpane {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}

#snow{
	position: fixed;
	z-index: 0;
	max-width: 100%;
}

#particles-js{
	overflow: hidden;
}

.container-regal{
	clear: both;
	position: relative;
	margin-top: -2vw;
}

.regal-add{
	width: 120px;
	right: 30px;
	bottom: 0px;
	z-index: 0;
}

.r50{
	right: calc(50% - 60px)
}

.l25{
	left: 20%
}

.brenner{
	max-width: 90px
}

.flamme{
	max-width: 20px;
	right: 0;
	top: 0;
	left: 0;
	margin: -45px auto 0;
	opacity: 0;
	transform-origin: 50% 100%;
	transform: scale(.3,.3) rotate(0);
}

.flamme-2{
	opacity: 0;
	transform: scale(.5,.5) rotate(0deg);
	transform-origin: 50% 100%;
}

.brenner:hover .flamme, .brenner.brenner-active .flamme{
	animation: flame 2s linear infinite;
	-webkit-animation: flame 2s linear infinite;
}


.brenner:hover .flamme-2, .brenner.brenner-active .flamme-2{
	animation: flameR 2s linear infinite;
	-webkit-animation: flameR 2s linear infinite;
}

.funke-icon{
	position: absolute;
	max-width: 25px;
	top: 0;
	left: 40%;
	animation: glowF 1s linear infinite;
	-webkit-animation: glowF 1s linear infinite;
}

@keyframes glowF {
	0% {opacity: 0;}
	5% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	100% {opacity: 0;}
}

@-webkit-keyframes glowF {
	0% {opacity: 0;}
	5% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	100% {opacity: 0;}
}

.funke-1{
	transform: rotate(-30deg);
	left: 25%;
	margin-top: -40%;
}
.funke-2{
	transform: rotate(45deg);
	max-width: 15px;
	animation-delay: .1s;
	margin-top: -15%

}
.funke-3{
	max-width: 20px;
	animation-delay: .2s;
	margin-top: -30%;
	left: 60%
}

.brenner-active .funke-icon, .brenner:hover .funke-icon{
	animation:none;
	opacity: 0
}

@keyframes flame {
	0% {opacity:0;transform:rotate(0deg) scale(1);}
	25% {opacity:1;transform:rotate(-5deg) scale(.95);}
	50% {opacity:0;transform:rotate(0deg) scale(1);}
	75% {opacity:1;transform:rotate(5deg) scale(.9);}
	100% {opacity:0;transform:rotate(0deg) scale(1);}
}

@-webkit-keyframes flame {
	0% {opacity:0;transform:rotate(0deg) scale(1);}
	25% {opacity:1;transform:rotate(-5deg) scale(.95);}
	50% {opacity:0;transform:rotate(0deg) scale(1);}
	75% {opacity:1;transform:rotate(5deg) scale(.9);}
	100% {opacity:0;transform:rotate(0deg) scale(1);}
}

@keyframes flameR {
	0% {opacity:1;transform:rotate(0deg) scale(.8);}
	25% {opacity:0;transform:rotate(5deg) scale(1);}
	50% {opacity:1;transform:rotate(0deg) scale(.8);}
	75% {opacity:0;transform:rotate(-5deg) scale(1.1);}
	100% {opacity:1;transform:rotate(0deg) scale(.8);}
}

@-webkit-keyframes flameR {
	0% {opacity:1;transform:rotate(0deg) scale(.8);}
	25% {opacity:0;transform:rotate(5deg) scale(1);}
	50% {opacity:1;transform:rotate(0deg) scale(.8);}
	75% {opacity:0;transform:rotate(-5deg) scale(1.1);}
	100% {opacity:1;transform:rotate(0deg) scale(.8);}
}

.brille{
	max-width: 200px
}



.kugel-blau.kugel-regal{
	top: 130px;
	left: 150px;
	animation:swingKl 2.4s linear infinite;
	-webkit-animation: swingKl 2.4s linear infinite;
}

.kugel-rot{
	position: absolute;
	top: 130px;
	left: -15px;
	max-width: 60px;
	transform-origin: 50% 5%;
	animation:swingKr 2s linear infinite;
	-webkit-animation: swingKr 2s linear infinite;
}

.kugel-rot-r{
	left: initial;
	right: 80px
}

.ast{
	max-width: 100px;
	position: absolute;
	bottom: -30px;
	z-index: 50;
}

.ast.ast-l{
	left: 80px
}

.ast.ast-r{
	transform: rotateY(180deg);
	right: 150px;
}

.leitung .ast{
	top: 9.5vw;
	right: 10.5%;
	max-width: 7vw;
}

.leitung .lichterkette{
	position: absolute;
	top: 4vw;
	width: 47.5%;
	margin-left: 15%;
}

.lichterkette img{
	position: absolute;
}

.lichterkette1, .lichterkette2{
	opacity: 0;
	animation: glow .6s infinite;
	-webkit-animation: glow .6s infinite;
}

.lichterkette2{
	animation-delay: .3s
}

.socke{
	max-width: 70px;
	position: absolute;
	top: 130px;
	right: 40px;
	transform-origin: 25% 2%;
	animation:swing 5s linear infinite;
	-webkit-animation: swing 5s linear infinite;
}

.leitung .socke{
	right: 42.5%;
	top: 6vw
}

.weihnachtsbaum{
	position: absolute;
	bottom: 0;
	width: 70%;
	left: -25%;
	z-index: 1
}

.weihnachtsbaum img{
	position: absolute;
	left: 0;
	bottom: 0;
}

.weihnachtsbaum1,.weihnachtsbaum2,.weihnachtsbaum3,.weihnachtsbaum4{
	opacity: 0;
	animation: glow 1s linear infinite;
	-webkit-animation: glow 1s linear infinite;
}

.weihnachtsbaum2{
	animation-delay: .25s;
}

.weihnachtsbaum3{
	animation-delay: .5s;
}

.weihnachtsbaum4{
	animation-delay: .75s;
}

@keyframes glow {
	0% {opacity: 0;}
	33% {opacity: 1;}
	66% {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes glow {
	0% {opacity: 0;}
	33% {opacity: 1;}
	66% {opacity: 1;}
	100% {opacity: 0;}
}

@media screen and (min-width: 768px){
	.weihnachtsbaum{
		width: 60%;
		left: -20%;
	}
}

@media screen and (min-width: 992px){
	.weihnachtsbaum{
		bottom: -100px;
		width: 50vw;
		left: -2vw;
	}
}

@media screen and (min-width: 1200px){
	.weihnachtsbaum{
		width: 40vw;
		left: -17.5vw;
	}
	.socke{
		max-width: 80px;
	}
}

@media screen and (min-width: 1600px){
	.weihnachtsbaum{
		width: 40vw;
		left: -17.5vw;
	}
	.socke{
		max-width: 100px;
	}
}

@media screen and (min-width: 1921px){
	.leitung .ast{
		max-width: 150px;
		top: 35%;
	}

	.kugel-leitung{
		top: 50%;
	}

	.leitung .lichterkette{
		top: 15%
	}

	.leitung .socke{
		top: 25%
	}

	.weihnachtsbaum{
		width: 800px;
		left: -300px;
		bottom: -10%;
	}

	.spendenbarometer-stand{
		font-size: 2rem
	}
}

#section1{
	float: right;
	width: 300px;
	margin-top: 4vw;
	right: -4%;
}

#section2{
	float: left;
	width: 650px;
	margin-left: 20%;
	z-index: 10
}

#section3{
	float: right;
	width: 400px;
	right: -4%;
}

#section4{
	float: left;
	width: 415px;
	margin-left: 10%;
	z-index: 10
}

#section5{
	float: right;
	width: 576px;
	right: 10%;
	margin-top: -3vw
}

#section6{
	float: left;
	width: 450px;
	margin-left: 20%;
	margin-top: 2vw
}

@media screen and (max-width: 1600px){
	#section3{
		margin-top: 15px;
		right: 0;
	}

	#section4{
		margin-top: -75px;
		margin-left: 15%
	}

	#section5{
		margin-top: 15px;
		right: 5%;
	}
}

@media screen and (max-width: 1440px){
	#section2{
		margin-left: 15%;
		margin-top: 30px;
	}

	#section3{
		right: 5%;
		margin-top: 30px;
	}

	#section4{
		margin-left: 10%;
		margin-top: -50px
	}

	#section5{
		right: -15%
	}

	#section6{
		margin-left: 10%;

		margin-top: 30px
	}
}

@media screen and (max-width: 1200px){
	#section2{
		margin-left: 5%;
		margin-top: 60px;
	}

	#section3{
		right: 10%;
		margin-top: 60px;
		float: left;
		left: 0;
		margin-left: 15%;
	}

	#section4{
		margin-left: 10%;
		margin-top: 30px;
		float: right;
		right: -15%;
	}

	#section5{
		margin-top: 60px;
	}

	#section6{
		margin-left: 0%;
		margin-top: 120px;
		float: right;
		right: 10%;
	}

	.kugel-leitung, .kugel-blau.kugel-regal, .kugel-rot{
		max-width: 50px
	}

	.leitung .socke{
		right: 45%;
		top: 6vw;
	}

	.weihnachtsbaum img{
		left: -25%
	}
}

@media screen and (max-width: 992px){
	#section2, #section3, #section4, #section5, #section6{
		margin-top: 50px
	}

	#section1, #section6{
		right: 5%
	}

	#section4{
		right: 10%;
	}

	.logo-wrapper{
		margin-right: 30px
	}

	.leitung{
		margin-top: 100px
	}

	#section1{
		margin-top: 20px
	}

	#section3{
		float: right;
		right: 0;
		margin-right: 10%;
	}

	#section4{
		float: left;
		right: 0
	}

	#section5{
		float: right;
		right: 5%
	}

	#section6{
		margin-top: 80px;
		right: 0;
		float: left;
		margin-left: 5%;
	}

	.col-spendenbarometer {
    position: relative;
    height: 100%;
    width: 50%;
    float: right;
	}

	.door22, .door16, .door17, .door21, .door5{
		width: 70px
	}


	

	.container-footer{
		position: fixed;
		bottom: 0
	}

	.spendenbarometer-stand{
		font-size: 4vw;
		line-height: 4vw;
	}

	.barometer-sort{
		right: 0;
	}

	h2.text-center{
		font-size: 6vw;
	}

	.overlay-container-question .question-number, .overlay-container-infotext .question-number{
		width: 30%;
		background-size: 100% auto;
		z-index: -1
	}
	.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
			background-size: auto 30%;
	}
	.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
			background-size: auto 50%;
	}
	.overlay-container-infotext .question-number.question24, .overlay-container-question .question-number.question19, .overlay-container-question .question-number.question1, .overlay-container-question .question-number.question14, .overlay-container-question .question-number.question15{
			background-size: 75% auto;
	}
	.weihnachtsbaum img{
		left: 0%
	}
	.leitung{
		display: none;
	}
}

@media screen and (max-width: 768px){
	h3.font-size-15em{
		width: 90%;
		margin: auto;
	}
	.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
			background-size: auto 25%;
			background-position: 0 100%;
	}
	.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
		bottom: 90px;
		width:150px
	}
	.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
			background-size: auto 30%;
	}
	.overlay-container-question .question-number.question7 .number, .overlay-container-question .question-number.question8 .number, .overlay-container-question .question-number.question11 .number, .overlay-container-question .question-number.question12 .number, .overlay-container-question .question-number.question13 .number{
		font-size: 1.4rem
	}
	.overlay-container-question .question-number.question19 .number, .overlay-container-question .question-number.question1 .number, .overlay-container-question .question-number.question14 .number, .overlay-container-question .question-number.question15 .number{
		width: 75%
	}
	.door10 .bubbles, .door6 .bubbles, .door20 .bubbles, .door10 .bubbles, .door18 .bubbles{
		margin-top: -100px;
		height: 150px
	}
	#section1{
		margin-top: 0
	}
}

@media screen and (max-width: 720px){
	#section2, #section5{
		width: calc(100% - 30px);
		margin: 80px 0 0 15px;
		right: 0
	}

	#section5{
		float: left;
	}

	.door3, .door16 {
    left: 50px;
	}

	.door17 {
    margin-right: 0px;
	}

	.door24 {
    margin-left: 120px;
	}

	.socke{
		max-width: 80px;
	}

	.leitung .socke{
		right: 42.5%;
	}

	#section2 .ast.ast-r{
		right: 40%
	}
	.overlay-container-question .question-number{
		width: 30%;
		background-position: 0 100%;
		background-size: 100% auto;
	}

	.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
			background-position: 50% 100%;
	}
}

@media screen and (max-width: 576px){
	.door1{
		margin-right: 5px
	}
	.door3{
		left: 60px;
	}
	.door6{
		margin-right: 0px;
	}
	.door7 {
    left: 120px;
	}
	.door8 {
    right: 90px;
	}
	.door13{
		margin-right: 45px;
	}
	.door16 {
    left: 40px;
	}
	.door24{
		margin-left: 120px
	}

	.door6, .door16, .door17, .door20, .door21, .door22, .door5{
    width: 70px;
    background-size: auto calc(100% - 55px);
	}

	.door24, .door19, .door1, .door15, .door14{
		width: 75px
	}

	.ast.ast-l{
		left: 30%
	}

	.socke{
		max-width: 60px
	}
	.question-number .number{
		bottom: 20px;
		font-size: 2rem
	}
	.form-field{
		padding: 0
	}
	input[type="text"], input[type="email"], textarea{
		width: 100%
	}
	.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
			background-size: 70% auto;
			margin-left: -30px;
	}
	.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
		bottom: 7%;
		width: 70%;
	}



	.text-inner{
		padding-bottom: 12rem !important
	}
}

@media screen and (max-width: 480px){
	#section1, #section3, #section4, #section6 {
    width: calc(100% - 30px);
    float: left;
    right: 0;
    margin-left: 15px;
	}
	.ast{
		max-width: 80px
	}
	#section2 .ast.ast-r {
    right: 30%;
	}
	.ast.ast-l {
    left: 40%;
	}
	.kugel-rot{
		left: 50%
	}
	.kugel-rot-r{
		left: 90%
	}
	.wrapper{
		padding-bottom: 3rem
	}
	.leitung .socke{
		right: 42.5%;
	}
	.leitung .socke {/*** Basic Styles for Carl Roth Adventskalender ***
Version:	1.0
Web:		https://www.goetzinger-komplizen.de
Copyright:	goetzinger + komplizen 2022
****************************************************************/
		@font-face {
			font-family:robotoregular;
			src:url('../fonts/Recoleta.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Helvetica-Bold-Oblique';
			src:url('../Fonts-h/Helvetica-Bold-Oblique.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Helvetica-Bold';
			src:url('../Fonts-h/Helvetica-Bold.woff2') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Helvetica-Light';
			src:url('../Fonts-h/Helvetica-Light.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Helvetica-Oblique';
			src:url('../Fonts-h/Helvetica-Oblique.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Helvetica-Roman';
			src:url('../Fonts-h/Helvetica-Roman.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		/*** global styles ***/


		.hide-on-mobile, .no-mobile .hide-on-desktop {
			display:none;
		}

		.no-mobile .hide-on-mobile, .mobile-view {
			display:block;
		}


		@media screen and (min-width:769px) {
			body {
				font-size:15px;
			}

			.mobile-view {
				display:none;
			}
		}

		@media screen and (min-width:1200px) {
			body {
				font-size:16px;
			}
		}

		* {
			padding:0;
			margin:0;
		}

		h1, h2, h3 {
			font-family: 'Recoleta';
			font-size:1rem;
			font-weight:normal;
			position:relative;
			text-align:left;
			margin-bottom: 1.3rem;
		}

		p {
			font-family: 'Helvetica-Roman';
		}

		h1, h2 {
			line-height: .8em;
			font-size: 2.4rem;
			margin-bottom: 0;
		}

		h2{
			font-size: 1.4rem;
		}

		h2.text-center{
			margin-bottom: .3em
		}

		h3,h4{
			font-size: 1.2rem;
			color: #fff;
			text-align: center !important;
			line-height: .9em;
		}

		.overlay-subtitle{
			font-size: 15px;
			color: #591002;
			line-height: 22px;
			text-align: right !important;
			margin-top: 10px;
			padding-right: 50px;
			max-width: 80%;
			float: right;
		}


		@media screen and (min-width: 576px){
			h1{
				font-size: 3rem;
			}
		}

		@media screen and (min-width: 769px){
			h1{
				margin-bottom:0.3em;
				text-align: center;
			}

			h2{
				font-size: 2rem
			}

			h3,h4{
				font-size: 1.4rem;
			}

			.text-anleitung h3, .infotext h3, .overlay-container-not-active h3, .overlay-container-question h3{
				font-size: 2.2rem;
			}
		}

		@media screen and (min-width: 992px){
			h1{
				font-size: 3rem;
			}

			h2{
				font-size: 2.2rem
			}

			h3, h4{
				font-size: 1.4rem;
			}
		}

		@media screen and (min-width: 1200px){
			h1{
				font-size:5vw;
			}

			h2{
				font-size: 2.4rem;
			}

			h3, h4{
				font-size:2rem;
				margin-bottom:0.3em;
			}


		}

		@media screen and (min-width: 1921px){
			h1{
				font-size:5rem;
			}

			h2{
				font-size: 2.5rem;
			}
		}

		.text.frage li {
			width: 90%;
			max-width:480px;
			font-size:1.1rem;
			line-height:1.3em;
			float:left;
		}

		ul {
			padding-left:15px;
		}
		/*
        img, object {
            width: 100%;
            height: auto;
            display: block;
        }


        a, a:hover, a:active, a:focus {
            color:inherit;
            text-decoration:underline;
            outline:none;
            border:none;
        }
        */
		.subheader-wrapper{
			margin-top: 15px;
			left: 0;
			margin-left: 30px;
			top: 0;
		}

		.subtitle, .sub-title{
			color: #fff;
			font-size: 1rem;
			font-family: 'Recoleta';
		}

		.overlay .sub-title{
			font-size: 1em;
		}

		h3.subtitle{
			text-transform: none;
			margin-bottom: 0;
		}

		h3.font-size-15em{
			font-size: 2rem;
		}

		.cal-day-price .overlay-subtitle{
			font-size: 1em;
			text-align: center !important;
			z-index: 2;
			width: 90%;
			margin: 15px auto;
			color: #6B0000;
			font-family: 'Helvetica';
			font-weight: 100;
		}

		@media screen and (min-width: 576px){
			.subheader-wrapper{
				margin-left: 4vw;
			}
		}

		@media screen and (min-width: 769px){
			.subtitle, .sub-title{
				font-size: 1.1rem;
			}

			.subheader-wrapper .subtitle{
				font-size: 1rem;
			}

			h3.font-size-15em{
				font-size: 2.2rem;
			}
		}

		@media screen and (min-width: 992px){
			.cal-day-price .overlay-subtitle, h3.font-size-15em{
				text-align: left;
			}
		}

		@media screen and (min-width: 1200px){
			.col-intro{
				width: 90%;
			}

			.subtitle{
				font-size: 1.4rem;
			}

			.subheader-wrapper .subtitle{
				font-size: 1.2vw;
			}

			h3.font-size-15em{
				font-size: 2rem;
			}

			.subheader-wrapper{
				margin-left: 30%;
			}
		}

		@media screen and (min-width: 1921px){
			.subheader-wrapper .subtitle{
				font-size: 1.2rem
			}
		}

		.text-inner {
			color:#212529;
			width: 100%;
			position: relative;
			z-index: 101;
		}

		.red-title{
			color: #e30613 !important;
		}

		.red-oblique {
			font-family: 'Helvetica-Bold-Oblique';
			color: #FFFFFF;
			font-size: 20px !important;
		}

		.font-green {
			color: #00AA98;
			text-transform: uppercase;
			position: relative;
			bottom: 1.5rem;
		}

		.title-bold {
			color: #e30613 !important;
			font-family: 'Helvetica-Bold';
			font-size: 15px !important;
		}

		.font-bordeaux{
			color:#591002;
		}

		.font-white {
			color: #00AA98;
			line-height: 37px;
			font-family: 'Helvetica-Bold-Oblique';
		}

		span.title-down-red {
			color: #E00013;
		}


		.font-atlantic{
			font-family: 'Recoleta';
		}

		.bold{
			font-weight: 600;
		}

		@media screen and (min-width: 769px){
			.text-inner{
				padding-bottom: 1.5rem;
			}
		}

		@media screen and (min-width: 1200px){
			.text-inner{
				padding-bottom: 3rem;
			}
		}

		/*** wrapper styles ***/
		.wrapper {
			width:100%;
			position: relative;
			z-index: 1;
			overflow: hidden;
			padding-bottom: 5rem
		}

		@media screen and (min-width: 1921px){
			.wrapper{
				max-width: 1920px;
				margin:auto;
			}
		}

		.leitung{
			width: 100%;
			margin-top: 15px;
		}

		.leitung-xl{
			display: none;
		}

		.leitung img, .leitung #Ebene_1{
			width: calc(80% + 10% + 15px);
		}

		.floating-bubble {
			display: none;
			height: 15px;
			width: 15px;
			offset-path: path('M1720,403.1V230.9c0-15-12.1-27.1-27.1-27.1h-106.2c-15,0-27.1-12.1-27.1-27.1V36.6c0-15-12.1-27.1-27.1-27.1 h-426.4c-15,0-27.1,12.1-27.1,27.1v175c0,15,12.1,27.1,27.1,27.1h108.8c15,0,27.1-12.1,27.1-27.1v-72c0-15-12.1-27.1-27.1-27.1h-366 	c-15,0-27.1,12.1-27.1,27.1v67.2c0,15-12.1,27.1-27.1,27.1H245.1c-15,0-27.1,12.1-27.1,27.1v181.3c0,15-12.1,27.1-27.1,27.1h-45.7 c-15,0-27.1-12.1-27.1-27.1v-64.5c0-15-12.1-27.1-27.1-27.1H0');
			animation: acht 10s infinite linear;
			margin-top: -25.25%
		}
		@keyframes acht {
			0% { offset-distance: 100%;}
			100% { offset-distance: 0%;}
		}

		.logo-wrapper{
			position: relative;
			z-index: 101;
		}

		.logo-wrapper object {
			max-width: 75px;
			margin-left: 10%;
			float: right;
		}

		.logo-link {
			width: calc(100% - 30px);
			height: 100%;
			display: table;
			position: absolute;
			z-index: 2;
			top: 0;
			max-height: 30vw;
		}

		.logo {

			padding-top:15px;
		}



		@media screen and (min-width:992px) {
			.logo-wrapper object {
				width: 100px;
			}
		}

		@media screen and (min-width:992px) {


			.logo-wrapper object {
				width: 10vw;
				padding-right: 0;
				float: left;
			}

			.logo-link {
				max-width: 200px;
				max-height: 200px;
			}
		}

		@media screen and (min-width:1921px){
			.leitung-xl{
				display: block;
				right: calc((100vw - 1550px)/2);
				width: 100%;

			}
			.leitung-m{
				display: none;
			}
		}

		/*** main styles ***/
		.main {
			position:relative;
			margin:auto;
			width:100%;
			z-index: 100;
		}

		.content {
			width:100%;
			height:0;
			position:absolute;
			top:0;
			left:0;
			z-index:102;
			opacity:1;
			transition:0.4s opacity;
			-moz-transition:0.4s opacity;
			-webkit-transition:0.4s opacity;
		}

		.text {
			color:#fff;
		}

		.col-intro-wrapper object {
			width: 90%;
		}

		.col-intro-wrapper{
			position: relative;
			z-index: 99;
		}

		.overlay {
			position:fixed;
			top:0;
			left:0;
			bottom:0;
			right:0;
			width:100%;
			height:100%;
			overflow:auto;
			/* z-index:999; */
		}

		.overlay-bg {
			width:100%;
			height:100%;
			position:fixed;
			display:block;
			z-index:20;
			top:0;
			left:0;
		}

		.overlay-bg:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/*
          background-image: url("../image/general/ROTH-Adv_2025_Hintergrund-Overlay.svg"); 
          opacity: 1; */
          opacity: .8;
          background: #e10817 !important;          
		}

		.pfad-g-bild {

			position: absolute;
			top: 0;
			left: 0;
			margin-left: 5rem;
			margin-top: 13rem;
		}

		img.pfad-r-bild {
			position: absolute;
			top: 0;
			left: 0;
			left: 4rem;
			top: 29rem;
		}

		img.pfad-dr-bild {
			position: absolute;
			right: 0;
			top: 12rem;
		}

		img.pfad-dr-bild.anleitung-pfad {
			margin-right: -3rem;
			margin-top: -4rem;
		}


		@media screen and (max-width: 1540px) {

			.pfad-g-bild {

				display: none;
			}

			img.pfad-dr-bild {

				display: none;
			}

		}

		.overlay-container {
			display: block;
			position: absolute;
			z-index: 99;
			width: 100%;
			height: 100%;
			left: 0;
			right: 0;
		}

		.overlay-content {
			position:absolute;
			left: 0;
			right: 0;
			margin:auto;
			width:90%;
			top:8.333%;
			z-index:9;
			background: transparent;
		}

		@media screen and (max-width: 767px){
			.overlay-content {
				width:100%;
				top: 20vh;
			}
		}

		.overlay-container-geschenke{
			max-width: 1600px;
		}

		@media screen and (max-width: 769px){
			.overlay-content{
				border-radius: 0;
			}

			.main{
				height: auto;
				padding-bottom: 2vw;
			}

			.overlay-container-geschenke{
				width: 90%;
			}
		}

		.container-icon{
			max-width: 960px;
			width: 90%;
			left: 0;
			right: 0;
			margin: auto;
			height: 100%
		}

		.overlay-container-infotext .overlay-content .row.question, .overlay-container-question .overlay-content .row.question, .overlay-container-not-active .overlay-content .row.question{
			min-height: 1vw;
		}

		.overlay-container-anleitung .overlay-content p{
			font-size: 1em;
		}

		@media screen and (max-width:767px) {
			.overlay-container-anleitung .overlay-content p{
				font-size: 15px;
			}
		}

		.overlay-content object{
			position: absolute;
		}

		@media screen and (min-width:769px) {
			.overlay-content {
				top:12.5%;
			}
		}

		/*
        @media screen and (min-width: 992px) {
            .overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content, .overlay-container-not-active .overlay-content{
                min-height: 20vw;
                    clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
                    -webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
            }

            .overlay-container-anleitung .overlay-content{
                    clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
                    -webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
            }

            .overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content{
                min-height: 20vw;
                    clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
                    -webkit-clip-path: polygon(15% 10%, 90% 0, 100% 65%, 90% 100%, 0 100%, 5% 30%);
            }
        }
        */
		@media screen and (min-width: 1440px){
			.overlay-container-infotext .overlay-content, .overlay-container-question .overlay-content, .overlay-container-not-active .overlay-content, .container-icon{
				max-width: 1200px;
			}
		}

		@media screen and (min-width: 1440px){
			.antw{
				max-width: 1200px;
				clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%) !important;
				-webkit-clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%) !important;
				background: unset !important;


			}
		}


		.p-antw {
			position: relative;
			right: 1rem;

		}





		.text.question {
			min-height:300px;
			/*padding: 1rem ;*/
            padding: 1rem 1rem 6rem 1rem;
		}

		.text .question-door {
			font-size:2rem;
			padding-top:50px;
		}

		.question-number {
			font-family: 'Helvetica';
			font-weight: 600;
			color: #fff;
			width: calc(16.6667% + 1.5rem);
			height:100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 100;
		}

		.overlay-container-infotext .question-number, .overlay-container-question .question-number{
			position: absolute;
		}

		.question-number .number{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 50px;
			font-size: 2rem;
			text-align: center;
		}

		/*
        .question-number.question2, .question-number.question3, .question-number.question4, .question-number.question9, .question-number.question23{
            background: transparent url(../img/glas-dreieck-voll.svg) no-repeat 50% 100%/175px auto;
        }

        .question-number.question22, .question-number.question16, .question-number.question17, .question-number.question21, .question-number.question5{
            background: transparent url(../img/glas-rund-voll.svg) no-repeat 50% 100%/175px auto;
        }

        .question-number.question13, .question-number.question12, .question-number.question8, .question-number.question7, .question-number.question11{
            background: transparent url(../img/glas-duenn-voll-overlay.svg) no-repeat 50% 100%/60px auto;
        }

        .question-number.question10, .question-number.question6, .question-number.question20, .question-number.question10, .question-number.question18{
            background: transparent url(../img/glas-kreuz-voll.svg) no-repeat 50% 100%/175px auto;
            left: 30px;
        }

        .question-number.question24, .question-number.question19, .question-number.question1, .question-number.question15, .question-number.question14{
            background: transparent url(../img/glas-viereck-voll.svg) no-repeat 50% 100%/150px auto;
        }

        .question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question10 .number, .question-number.question18 .number{
            bottom: 100px;
        }
        */
		.question-number.anleitung{
			/*background: transparent url(../img/info-solid.png) no-repeat 0 50%/50px auto;*/
			width: 60px;
			height: 60px;
			left: 5%;
			border-radius: 0;
			box-shadow: none;
			-webkit-box-shadow:none;
			border:none;
			position: absolute;
			top: 0;
			margin-top: 15px
		}

		.container-geschenke .overlay-subtitle{
			position: relative;
			z-index: 2;
			margin: auto;
			font-size: 1em;
			padding: 0;
			color: #fff;
		}

		.container-geschenke .question-number{
			z-index: 5;
			margin: 50px auto 15px;
			font-size: 1.2rem;
			right: 0;
			left: 0;
			width: 40px;
			height: 40px;
			line-height: 40px;
			background: #e30613;
			color: #fff;
			border-radius: 50%;
		}

		.questiontext {
			font-size: 1em;
			margin-top: 20px !important;
		}


		@media screen and (min-width: 576px){
			.container-geschenke .overlay-subtitle{
				font-size: 1.1rem;
			}
			.question-number.anleitung{
				/*background: transparent url(../img/info-solid.png) no-repeat 0 50%/80px auto;*/
				width: 100px;
				height: 100px;
			}
		}


		@media screen and (min-width: 992px){
			.question-number.anleitung{
				background-size: 100px auto;
				width: 100px;
				height: 120px;
				margin-top: 60px;
				bottom: 0;
				top: initial;
			}
			.text.question {
				/*padding: 0 3rem !important;*/
                padding: 0 3rem 6rem 3rem !important;
			}
		}

		@media screen and (min-width: 1200px){
			.question-number.anleitung{
				background-size:120px auto;
				width: 120px;
				height: 150px;
			}
		}

		.close {
			background:transparent url(../img/close_white.png) no-repeat;
			position:absolute;
			right:10%;
			top: 15px;
			margin-right: 1rem;
			cursor: pointer;
			display:block;
			width:35px;
			height:35px;
			z-index:999;
			opacity: .8;
			transition: all .4s;
			-webkit-transition: all .4s;
		}

		@media screen and (min-width: 1200px) {
			.close {
				right: 80px;
				top: 100px;
			}
		}

		.close:hover, .close:focus {
			opacity: 1;
		}

		.header-element{
			z-index: 1001;
			left: 0;
			right: 0;
		}

		.text .question-door {
			position:absolute;
			bottom:5%;
			right:5%;
		}

		.container-footer{
			margin: auto;
			overflow: hidden;
			position: absolute;
			z-index: 102;
			background: transparent url(../img/footer-element.svg) no-repeat 50% 100%/100% auto;
		}

		@media screen and (min-width: 992px){
			.overlay-container-geschenke .close{
				right: 40px;
				top: 40px;
			}
		}

		@media screen and (min-width: 1200px){
			.overlay-container-geschenke .close{
				right: calc(41.6667% - 375px);
				top: 15px;
			}
		}


		/*** menu ***/

		/*** doors ***/
		.container-doors{
			width: 100%;
			margin-bottom: 30px;
		}

		.container-regal{
			border-bottom: 25px solid #591002;
			height: 150px
		}

		@media screen and (min-width: 992px){
			.container-doors{
				width: 80%;
				margin-bottom: 0px;
				float: left;
			}
		}

		.container-doors{
			position: relative;
		}

		.z-index-9{
			z-index: 99;
			position: relative;
		}

		.door {
			background: #591002;
			z-index:200;
			opacity:1;
			width:100px;
			height:150px;
			display: block;
			float: left;
			margin: 0 5px;
			position: relative;
			z-index: 1
		}

		.door2, .door3, .door4, .door4, .door9, .door23{
			background: transparent url(../img/glas-dreieck-leer.svg) no-repeat 50% calc(100% - 25px)/100% auto;
			width:80px;
		}

		.door2 a, .door3 a, .door4 a, .door9 a, .door23 a{
			background: transparent url(../img/glas-dreieck-voll-1.svg) no-repeat 0% calc(100% - 25px)/auto 50%;
			clip-path: polygon(50% 40px, 100% calc(100% - 25px), 100% 100%, 0 100%, 0 calc(100% - 25px));
			-webkit-clip-path: polygon(50% 40px, 100% calc(100% - 25px), 100% 100%, 0 100%, 0 calc(100% - 25px));
		}

		.door2:hover a, .door3:hover a, .door4:hover a, .door9:hover a, .door23:hover a, .door2.door-anim a, .door4.door-anim a, .door3.door-anim a, .door23.door-anim a, .door9.door-anim a{
			animation: liquid 6s linear infinite;
			-webkit-animation: liquid 6s linear infinite;
		}

		.door2.day-active, .door3.day-active, .door4.day-active, .door9.day-active, .door23.day-active{
			background: transparent url(../img/baum.svg) no-repeat 50% calc(100% - 25px)/100% auto;
		}
		/*
        .question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
            background: transparent url(../img/baum.svg) no-repeat 10% 10%/12% auto;
        }
        */
		.door22, .door16, .door17, .door21, .door5{
			background: transparent url(../img/glas-rund-leer.svg) no-repeat 0% calc(100% - 25px)/100% auto;
			width:80px;
		}

		.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
			background: transparent url(../img/glas-rund-anim.svg) no-repeat 0% calc(100% - 25px)/auto 40%;
			clip-path: circle(33.25% at 50% 57%);
			-webkit-clip-path: circle(33.25% at 50% 57%);
		}

		.door22:hover a, .door16:hover a, .door17:hover a, .door21:hover a, .door5:hover a, .door22.door-anim a, .door16.door-anim a, .door17.door-anim a, .door21.door-anim a, .door5.door-anim a{
			animation: liquid 4s linear infinite;
			-webkit-animation: liquid 4s linear infinite;
		}

		.door22.day-active, .door16.day-active, .door17.day-active, .door21.day-active, .door5.day-active{
			background: transparent url(../img/kugel.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 35px);
		}
		/*
        .question-icon22, .question-icon16, .question-icon17, .question-icon21, .question-icon5{
            background: transparent url(../image/calend_5.png) no-repeat 10% 5%/10% auto;
            top: 11rem;
            z-index: 99999999;
        }
        */
		.door13, .door12, .door8, .door7, .door11{
			background: transparent url(../img/glas-duenn-leer.svg) no-repeat 5% calc(100% - 25px)/auto calc(100% - 25px);
			width:20px;
		}

		.door13 a, .door12 a, .door8 a, .door7 a, .door11 a{
			background: transparent url(../img/glas-duenn-anim.svg) no-repeat 0% calc(100% - 50px)/auto 55%;
			clip-path: polygon(2px 0, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 3px 100%);
			-webkit-clip-path: polygon(2px 0, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 3px 100%);
		}

		.door13:hover a, .door12:hover a, .door7:hover a, .door8:hover a, .door11:hover a, .door13.door-anim a, .door12.door-anim a, .door7.door-anim a, .door8.door-anim a, .door11.door-anim a{
			animation: liquidR 4s linear infinite;
			-webkit-animation: liquidR 4s linear infinite;
		}

		.door.day-active.door22 a, .door.day-active.door16 a, .door.day-active.door17 a, .door.day-active.door21 a, .door.day-active.door5 a,.door10.day-active a, .door6.day-active a, .door20.day-active a, .door10.day-active a, .door18.day-active a{
			clip-path: initial;
			-webkit-clip-path: initial;
			background: transparent url(../img/kranz.png) no-repeat 50% calc(100% + 0px)/calc(100% - 25px) auto !important;
		}

		@keyframes liquidR {
			0% {background-position: 0 calc(100% - 50px)}
			100% {background-position: 100% calc(100% - 50px)}
		}

		@-webkit-keyframes liquidR {
			0% {background-position: 0 calc(100% - 50px)}
			100% {background-position: 100% calc(100% - 50px)}
		}

		.door13.day-active, .door12.day-active, .door8.day-active, .door7.day-active, .door11.day-active{
			background: transparent url(../img/zuckerstange.svg) no-repeat 5% calc(100% - 25px)/auto calc(100% - 35px);
			width: 50px;
			position: absolute;
		}
		/*
        .question-icon13, .question-icon12, .question-icon8, .question-icon7, .question-icon11{
            background: transparent url(../img/zuckerstange.svg) no-repeat 15% 5%/10% auto;
        }
        */
		.door7.day-active{
			left: 150px
		}

		.door13.day-active{
			right: 50px;
			margin-right: 0;
		}

		.door10, .door6, .door20, .door10, .door18{
			background: transparent url(../img/glas-kreuz-voll.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 50px);
			width:90px;
		}

		.door10.day-active, .door6.day-active, .door20.day-active, .door10.day-active, .door18.day-active{
			background: transparent url(../img/lebkuchenman.svg) no-repeat 50% calc(100% - 25px)/auto calc(100% - 50px);
		}
		/*
        .question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
            background: transparent url(../img/lebkuchenman.svg) no-repeat 12% 0%/15% auto;
            transform: rotate(-15deg);
        }
        */

		.door24, .door19, .door1, .door15, .door14{
			background: transparent url(../img/glas-viereck-leer.svg) no-repeat 0% calc(100% - 25px)/100% auto;
			width:100px;
		}

		.door24 a, .door19 a, .door1 a, .door15 a, .door14 a{
			background: transparent url(../img/glas-viereck-anim.svg) no-repeat 0% calc(100% - 25px)/auto 50%;
			clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%);
			-webkit-clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%);
		}

		.door24:hover a, .door19:hover a, .door1:hover a, .door15:hover a, .door14:hover a,.door24.door-anim a, .door19.door-anim a, .door1.door-anim a, .door15.door-anim a, .door14.door-anim a{
			animation: liquid 4s linear infinite;
			-webkit-animation: liquid 4s linear infinite;
		}

		@keyframes liquid {
			0% {background-position: 0 calc(100% - 25px)}
			100% {background-position: 100% calc(100% - 25px)}
		}

		@-webkit-keyframes liquid {
			0% {background-position: 0 calc(100% - 25px)}
			100% {background-position: 100% calc(100% - 25px)}
		}

		.door24.day-active, .door19.day-active, .door1.day-active, .door15.day-active, .door14.day-active{
			background: transparent url(../img/geschenk-normal.svg) no-repeat 0% calc(100% - 25px)/100% auto;
		}

		.door24.day-active a, .door19.day-active a, .door1.day-active a, .door15.day-active a, .door14.day-active a{
			background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 5px)/auto 50px !important
		}
		/*
        .question-icon19, .question-icon1, .question-icon15, .question-icon14{
            background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 10%/10% auto;
        }

        .question-icon24{
            background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 5%/10% auto;
        }
        */
		.door1, .door2, .door6, .door9, .door13, .door14, .door17, .door20, .door21{
			float: right;
		}

		.door3, .door5, .door7, .door8, .door11, .door23{
			position: absolute !important;
		}

		.door1, .door2{
			margin-right: 30px
		}

		.door3, .door16{
			left: 90px;
		}

		.door5{
			right: 120px
		}

		.door6, .door13{
			margin-right:90px;
		}

		.door7{
			left: 180px
		}

		.door8{
			right: 100px
		}

		.door11{
			margin-left: 125px
		}

		.door12{
			margin-left: 15px
		}

		.door14{
			margin-right: 15px
		}

		.door17{
			margin-right: 60px
		}

		.door18{
			margin-left: 0
		}

		.door23{
			left: 80px;
		}

		.door24{
			margin-left: 150px
		}

		.door.day-active {
			z-index: 99
		}



		.door a {
			display: table;
			height: 100%;
			width: 100%;
			color: inherit;
			text-decoration: none;
		}

		.door a:hover {
			text-decoration: none;
		}

		.door-number {
			display:block;
			font-size: 1rem;
			margin-top: 1em;
			font-family: 'Roboto-Bold-webfont',Arial,Helvetica,sans-serif;
			font-weight: 600;
			text-align: center;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1px;
		}

		.day-active a{
			background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 2px)/auto 50px !important;
			height: calc(100% + 15px);
		}

		.door.day-active a{
			animation:none;
		}

		.download.button{
			border:1px solid #fff;
			padding: 5px 10px;
			width: 50%;
			display: inline-block;
			transition:all .4s;
			margin-top: 15px
		}

		.download.button a{
			font-weight: 600;
			text-decoration:none;
			transition:all .4s;
			color: #000000;
		}
		.download.button:hover{
			background: #fff;
		}

		.download.button:hover a{
			color: #e30613;
			text-decoration:none;
		}

		.bubbles{
			position: absolute;
			width: 100%;
			top: 0;
			height: 200px;
			margin-top: -100px;
			display: none;
		}

		.dot{
			display: none;
		}

		.door:hover .bubbles, .door.door-anim .bubbles, .door:hover .dot, .door.door-anim .dot{
			display: block;
		}

		.bubble{
			width: 15px;
			height: 15px;
			position: absolute;
			border-radius: 50%;
		}

		.door.day-active .dot, .door.day-active  .bubbles{
			display: none;
		}

		@media screen and (max-width: 576px){
			.bubbles{
				height: 150px
			}
			.door22 .dot, .door17 .dot, .door21 .dot, .door16 .dot, .door5 .dot{
				max-width: 60px
			}
		}

		@-webkit-keyframes animateBubble {
			0% {margin-top: 60px;}
			100% {margin-top: -30px;}
		}

		@keyframes animateBubble {
			0% {margin-top: 60px;}
			100% {margin-top: -30px;}
		}

		@-webkit-keyframes animateBubble1 {
			0% {margin-top: 50px;}
			100% {margin-top: -50px;}
		}

		@keyframes animateBubble1 {
			0% {margin-top: 50px;}
			100% {margin-top: -50px;}
		}

		@-webkit-keyframes sideWays {
			0% {margin-left:0px;}
			100% {margin-left:15%;}
		}

		@keyframes sideWays {
			0% {margin-left:0px;}
			100% {margin-left:15%;}
		}

		@-webkit-keyframes sideWays1 {
			0% {margin-left:0px;}
			100% {margin-right:10%;}
		}

		@keyframes sideWays1 {
			0% {margin-left:0px;}
			100% {margin-right:10%;}
		}

		.x1 {
			-webkit-animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
			animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
			left: 30%;
			top: 30%;
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}

		.right-bubbles .x1{
			-webkit-animation: animateBubble 1.4s linear infinite, sideWays 1.2s ease-in-out infinite;
			animation: animateBubble 1.4s linear infinite, sideWays 1.2s ease-in-out infinite;
			left: 30%;
			-webkit-transform: scale(0.3);
			transform: scale(0.3);
		}

		.x2 {
			-webkit-animation: animateBubble 2.4s linear infinite, sideWays 1.2s ease-in-out infinite;
			animation: animateBubble 2.4s linear infinite, sideWays 1.2s ease-in-out infinite;
			left: 25%;
			top: 20%;
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
			animation-delay: .4s;
		}

		.right-bubbles .x2{
			-webkit-animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
			animation: animateBubble 2s linear infinite, sideWays 1s ease-in-out infinite;
			left: 30%;
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}

		.x3 {
			-webkit-animation: animateBubble1 4s linear infinite, sideWays1 1.4s ease-in-out infinite;
			animation: animateBubble1 4s linear infinite, sideWays1 1.4s ease-in-out infinite;
			left: 40%;
			top: 40%;
			-webkit-transform: scale(0.7);
			transform: scale(0.7);
			animation-delay: .2s;
		}

		.right-bubbles .x1{
			-webkit-animation: animateBubble 3s linear infinite, sideWays 1.2s ease-in-out infinite;
			animation: animateBubble 3s linear infinite, sideWays 1.2s ease-in-out infinite;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		.x4 {
			-webkit-animation: animateBubble 3s linear infinite, sideWays 1.4s ease-in-out infinite alternate;
			animation: animateBubble 3s linear infinite, sideWays 1.4s ease-in-out infinite alternate;
			left: 20%;
			top: 10%;
			-webkit-transform: scale(0.3);
			transform: scale(0.3);
		}

		.right-bubbles .x4{
			-webkit-animation: animateBubble 4s linear infinite, sideWays 1.2s ease-in-out infinite;
			animation: animateBubble 4s linear infinite, sideWays 1.2s ease-in-out infinite;
			left: 30%;
			-webkit-transform: scale(0.7);
			transform: scale(0.7);
			animation-delay: .4s;
		}

		.x5 {
			-webkit-animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
			animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
			left: 30%;
			top: 50%;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		.right-bubbles .x5{
			-webkit-animation: animateBubble 1.4s linear infinite, sideWays .8s ease-in-out infinite;
			animation: animateBubble 1.4s linear infinite, sideWays .8s ease-in-out infinite;
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
			animation-delay: .2s;
		}

		.door2 .dot , .door3 .dot, .door4 .dot, .door9 .dot, .door23 .dot{
			width: 75%;
			left: 0;
			right: 0;
			margin: 10% auto 0
		}

		.door2 .bubble, .door3 .bubble, .door4 .bubble, .door9 .bubble, .door23 .bubble, .door2 .dot span, .door3 .dot span, .door4 .dot span, .door9 .dot span, .door23 .dot span{
			background: #00AB98;
		}

		.door22 .bubble, .door17 .bubble, .door21 .bubble, .door16 .bubble, .door5 .bubble, .door22 .dot span, .door17 .dot span, .door21 .dot span, .door16 .dot span, .door5 .dot span{
			background: #C9DDE9;
		}

		.door13 .dot , .door12 .dot, .door8 .dot, .door7 .dot, .door11 .dot{
			width: 15px;
			left: 0;
			right: 0;
			margin: -25px auto 0
		}

		.door13 .dot span:nth-of-type(2), .door12 .dot span:nth-of-type(2), .door8 .dot span:nth-of-type(2), .door7 .dot span:nth-of-type(2), .door11 .dot span:nth-of-type(2),.door13 .dot span:nth-of-type(4), .door12 .dot span:nth-of-type(4), .door8 .dot span:nth-of-type(4), .door7 .dot span:nth-of-type(4), .door11 .dot span:nth-of-type(4){
			display: none;
		}

		.door13 .bubble, .door12 .bubble, .door8 .bubble, .door7 .bubble, .door11 .bubble, .door13 .dot span, .door12 .dot span, .door8 .dot span, .door7 .dot span, .door11 .dot span{
			background: #e30613;
			margin-left: -10px;
		}

		.door13 .dot span, .door12 .dot span, .door8 .dot span, .door7 .dot span, .door11 .dot span{
			margin-left: -2px;
		}

		.door24 .bubble, .door19 .bubble, .door1 .bubble, .door15 .bubble, .door14 .bubble, .door24 .dot span, .door19 .dot span, .door1 .dot span, .door15 .dot span, .door14 .dot span{
			background: #6CA0AE;
		}

		.door10 .bubble, .door6 .bubble, .door20 .bubble, .door10 .bubble, .door18 .bubble, .door10 .dot span, .door6 .dot span, .door20 .dot span, .door10 .dot span, .door18 .dot span{
			background: #7F1810;
		}

		.door10 .dot, .door6 .dot, .door20 .dot, .door10 .dot, .door18 .dot{
			top: 45px
		}

		.door10 .bubbles, .door6 .bubbles, .door20 .bubbles, .door10 .bubbles, .door18 .bubbles{
			margin-top: -125px;
			margin-left: -25%;
		}

		.door10 .bubbles.right-bubbles, .door6 .bubbles.right-bubbles, .door20 .bubbles.right-bubbles, .door10 .bubbles.right-bubbles, .door18 .bubbles.right-bubbles{
			margin-left: 30%;
			transform: rotateY(180deg);
		}

		.col-spendenbarometer .bubbles{
			display: block;
			height: 75%;
			width: 25%;
			left: 0;
			right: 0;
			margin: auto;
			bottom:20%;
			z-index: 10
		}

		.col-spendenbarometer .bubble{
			background: #e30613;
			width: 50px;
			height: 50px
		}

		.col-spendenbarometer .x1 {
			-webkit-animation: animateBubbleA 5s linear infinite, sideWaysA 1s ease-in-out alternate infinite;
			animation: animateBubbleA 5s linear infinite, sideWaysA 1s ease-in-out alternate infinite;
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
			left: 5%;
			top: 80%;
		}

		.col-spendenbarometer .x2 {
			-webkit-animation: animateBubbleA 6s linear infinite, sideWaysA 3s ease-in-out alternate infinite;
			animation: animateBubbleA 6s linear infinite, sideWaysA 3s ease-in-outalternate infinite;
		;
			animation-delay:1s;
			left: 15%;
			top: 70%;
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}

		.col-spendenbarometer .x3 {
			-webkit-animation: animateBubbleA 12s linear infinite, sideWaysA 1.2s ease-in-out alternate infinite;
			animation: animateBubbleA 12s linear infinite, sideWaysA 1.2s ease-in-out alternate infinite;
			animation-delay:.4s;
			left: 10%;
			top: 70%;
			-webkit-transform: scale(0.7);
			transform: scale(0.7);
		}

		.col-spendenbarometer .x4 {
			-webkit-animation: animateBubbleA 14s linear infinite, sideWaysA 3s ease-in-out alternate infinite alternate;
			animation: animateBubbleA 14s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
			animation-delay:.2s;
			left: 5%;
			top: 80%;
			-webkit-transform: scale(0.3);
			transform: scale(0.3);
		}

		.col-spendenbarometer .x5 {
			-webkit-animation: animateBubbleA 10s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
			animation: animateBubbleA 10s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
			animation-delay:1.4s;
			left: 15%;
			top: 75%;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		.col-spendenbarometer .x6 {
			-webkit-animation: animateBubbleA 8s linear infinite, sideWaysA 2.4s ease-in-out infinite alternate;
			animation: animateBubbleA 8s linear infinite, sideWaysA 2.4s ease-in-out infinite alternate;
			animation-delay:2.4s;
			left: 15%;
			top: 80%;
			-webkit-transform: scale(0.6);
			transform: scale(0.6);
		}

		.col-spendenbarometer .x7 {
			-webkit-animation: animateBubbleA 7s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
			animation: animateBubbleA 7s linear infinite, sideWaysA 2s ease-in-out infinite alternate;
			animation-delay:2s;
			left: 15%;
			top: 80%;
			-webkit-transform: scale(0.4);
			transform: scale(0.4);
		}

		.col-spendenbarometer .x8 {
			-webkit-animation: animateBubbleA 12s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
			animation: animateBubbleA 12s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
			animation-delay:.8s;
			left: 15%;
			top: 70%;
			-webkit-transform: scale(0.7);
			transform: scale(0.7);
		}

		.col-spendenbarometer .x9 {
			-webkit-animation: animateBubbleA 8s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
			animation: animateBubbleA 8s linear infinite, sideWaysA 3s ease-in-out infinite alternate;
			left: 20%;
			top: 80%;
			-webkit-transform: scale(0.3);
			transform: scale(0.3);
		}

		.col-spendenbarometer .x10 {
			-webkit-animation: animateBubbleA 6s linear infinite, sideWaysA 1s ease-in-out infinite alternate;
			animation: animateBubbleA 6s linear infinite, sideWaysA 1s ease-in-out infinite alternate;
			left: 10%;
			top: 70%;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		@keyframes animateBubbleA {
			0% {margin-top: 130%;}
			100% {margin-top: -250%;}
		}

		@keyframes sideWaysA {
			0% {margin-left:0px;}
			100% {margin-left:25px;}
		}

		@-webkit-keyframes animateBubbleA {
			0% {margin-top: 130%;}
			100% {margin-top: -250%;}
		}

		@-webkit-keyframes sideWaysA {
			0% {margin-left:0px;}
			100% {margin-left:25px;}
		}

		.dot {
			position: absolute;
			width: 100%;
			height: 40px;
			top: 70px;
			/*display: none;*/
		}

		.dot span {
			border-radius: 50%;
			position: absolute;
			display: block;
			animation: animate 3s ease-in-out infinite;
			-webkit-animation: animate 3s ease-in-out infinite;
		}

		.day-active .dot, .day-active .bubble{
			display: none;
		}

		/*the animation*/
		@keyframes animate {
			0% { transform: translateY(-10px);}
			50% { transform: translateY(10px); transform:scale(1.1);}
			100% {transform: translateY(-10px);}
		}

		@-webkit-keyframes animate {
			0% { transform: translateY(-10px);}
			50% { transform: translateY(10px); transform:scale(1.1);}
			100% {transform: translateY(-10px);}
		}

		.dot span:nth-child(1) {
			top: 25%;
			left: 70%;
			height: 7.5px;
			width: 7.5px;
			opacity: 0.7;
			animation: animate 1.4s linear infinite .3s reverse;
			-webkit-animation: animate 1.4s linear infinite .3s reverse;
		}

		.dot span:nth-child(2) {
			top: 30%;
			left: 15%;
			height: 10px;
			width: 10px;
			opacity: 0.9;
			animation: animate 1.2s linear infinite .5s reverse;
			-webkit-animation: animate 1.2s linear infinite .5s reverse;
		}

		.dot span:nth-child(3) {
			top: 25%;
			left: 35%;
			height: 10px;
			width: 10px;
			opacity: 1;
			animation: animate 2s linear infinite .5s reverse;
			-webkit-animation: animate 2s linear infinite .5s reverse;
		}

		.dot span:nth-child(4) {
			top: 25%;
			left: 50%;
			height: 12px;
			width: 12px;
			opacity: 1;
			animation: animate 1s linear infinite .7s reverse;
			-webkit-animation: animate 1s linear infinite .7s reverse;
		}

		.door10 .dot span:nth-child(1), .door6 .dot span:nth-child(1), .door20 .dot span:nth-child(1), .door10 .dot span:nth-child(1), .door18 .dot span:nth-child(1){
			left: 62.5%
		}

		.door10 .dot span:nth-child(2), .door6 .dot span:nth-child(2), .door20 .dot span:nth-child(2), .door10 .dot span:nth-child(2), .door18 .dot span:nth-child(2){
			left: 30%;
			width: 8px;
			height: 8px;
		}

		.door10 .dot span:nth-child(3), .door6 .dot span:nth-child(3), .door20 .dot span:nth-child(3), .door10 .dot span:nth-child(3), .door18 .dot span:nth-child(3){
			left: 32.5%;
			animation: animate 1.4s linear infinite .5s reverse;
		}

		.door10 .dot span:nth-child(4), .door6 .dot span:nth-child(4), .door20 .dot span:nth-child(4), .door10 .dot span:nth-child(4), .door18 .dot span:nth-child(4){
			left: 55%;
			height: 7px;
			width: 7px;
			animation: animate 1.4s linear infinite .7s reverse;
			-webkit-animation: animate 1.4s linear infinite .7s reverse;
		}
		/*
        @media screen and (max-width: 1440px){
            .question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
                background-position: 12.5% 10%
            }
            .question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
                background-position: 15% 5%
            }
            .question-icon19, .question-icon1, .question-icon15, .question-icon14{
                background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 12%/10% auto;
            }
            .question-icon24{
                background: transparent url(../img/geschenk-normal.svg) no-repeat 15% 10%/10% auto;
            }
            .download.button{
                width: 75%
            }
            .col-spendenbarometer .bubbles{
                bottom: 30%;
                width: 20%
            }
            .col-spendenbarometer .bubble{
                width: 35px;
                height: 35px;
                left: 0
            }
        }
        */

		@media screen and (max-width: 992px){
			.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
				background-position: 30px 5%
			}
			.question-icon22, .question-icon16, .question-icon17, .question-icon21, .question-icon5{
				background-position: 2% 3%
			}
			.question-icon13, .question-icon12, .question-icon8, .question-icon7, .question-icon11 {
				background-position: 0% 5%
			}
			.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
				background-position:100px 15px;
				transform: rotate(-20deg);
				margin-top: -5%;
			}
			/*
            .question-icon19, .question-icon1, .question-icon15, .question-icon14{
                background: transparent url(../img/geschenk-normal.svg) no-repeat 10% 5%/10% auto;
            }

            .question-icon24{
                background: transparent url(../img/geschenk-normal.svg) no-repeat 5% 5%/10% auto;
            }
            */
			.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
				clip-path: circle(30% at 50% 60%);
				-webkit-clip-path: circle(30% at 50% 60%);
			}
			.door.day-active.door22 a, .door.day-active.door16 a, .door.day-active.door17 a, .door.day-active.door21 a, .door.day-active.door5 a{
				clip-path: initial;
				-webkit-clip-path: initial;
				background: transparent url(../img/kranz.png) no-repeat 50% calc(100% - 5px)/calc(100% - 25px) auto !important;
			}
			.door8 a, .door7 a{
				clip-path: polygon(0px 0, calc(100% - 3px) 0%, calc(100% - 2px) 100%, 2px 100%);
				-webkit-clip-path: polygon(0px 0, calc(100% - 3px) 0%, calc(100% - 2px) 100%, 2px 100%);
			}
			.col-spendenbarometer .bubbles{
				bottom: 50%;
				width: 40%
			}
			.col-spendenbarometer .bubble{
				width: 50px;
				height: 50px;
				left: 20%;
			}
		}

		@media screen and (max-width: 768px){
			.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
				background-position: 25px 20px
			}
			.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
				background-position: 35px 15px;
				transform: rotate(0deg);
				margin-top: 0;
			}
			.question-icon19, .question-icon1, .question-icon15, .question-icon14{
				background-position: 10% 3%
			}
		}

		@media screen and (max-width: 576px){
			.question-icon2, .question-icon3, .question-icon4, .question-icon9, .question-icon23{
				background-position: 10px 25px
			}
			.question-icon10, .question-icon6, .question-icon20, .question-icon10, .question-icon18{
				background-position: 35px 5%;
			}
			.question-icon19, .question-icon1, .question-icon15, .question-icon14{
				background-position: 10% 5%
			}
			.door22 a, .door16 a, .door17 a, .door21 a, .door5 a{
				clip-path: circle(25% at 43% 63%);
				-webkit-clip-path: circle(25% at 43% 63%);
			}
			.col-spendenbarometer .bubbles{
				bottom: 50%;
				width: 30%
			}
			.col-spendenbarometer .bubble{
				width: 40px;
				height: 40px;
				left: 10%;
			}
		}
		@media screen and (max-width: 420px){
			.col-spendenbarometer .bubble{
				width: 30px;
				height: 30px;
			}
		}

		.tuer.abgelaufen {
			opacity:0.65;
		}

		.col-spendenbarometer {
			position: relative;
			height: 100%;
		}

		.spendenbarometer-stand{
			bottom: 24vw;
			font-size: 1.2rem;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 99
		}

		.spendenbarometer-stand .font-atlantic{
			font-size: 1.4em
		}

		.spendenbarometer-stand .border-bottom{
			background: #fff;
			position: absolute;
			top: 2.2rem;
			left: 0;
			right: 0;
			margin: auto;
		}

		@media screen and (min-width: 576px){
			.spendenbarometer-stand{
				bottom: calc(25% - 15px);
				font-size: 1.4rem
			}
		}

		@media screen and (min-width: 992px){
			.spendenbarometer-stand{
				font-size:2vw;
				line-height: 1em;
			}
		}

		.date-bulb{
			font-size: .8em;
		}

		.barometer{
			font-size: 1rem;
			list-style: none;
			color: #fff;
			display: block;
			width: 90%;
			clear: both;
			margin: 0;
			font-weight: 600;
			line-height: 18px;
			display: none;
		}

		.barometer-sort {
			z-index: 2;
			position: relative;
			text-align: center;
			right: 0;
		}

		.barometer-sort p {
			font-size: 1.2em
		}

		.barometer>div{
			float: left;
			text-align: center;
			width: calc(70% - 50px);
			margin-right: 30px;
		}

		.barometer>div.clearfix{
			width: 0;
		}

		.spendenbarometer-image{
			margin: 50px auto;
			width: 90%;
			position: relative;
		}

		.spendenbarometer-anim{
			position: absolute;
			bottom: 0;
			width: 100.5%;
			height: 64%;
			animation: liquidG 2s linear infinite;
			-webkit-animation: liquidG 2s linear infinite;
			clip-path: circle(50% at 50% 50%);
			-webkit-clip-path: circle(50% at 50% 50%);
			background:transparent url(../img/glas-gross-anim.svg) repeat no-repeat 0 100%/auto 50%;
		}

		@keyframes liquidG {
			0% {background-position: 0 100%;background-size: auto 50%;}
			50% {background-position: 50% 100%;background-size: auto 40%;}
			100% {background-position: 100% 100%;background-size: auto 50%;}
		}

		@-webkit-keyframes liquidG {
			0% {background-position: 0 100%;background-size: auto 50%;}
			50% {background-position: 50% 100%;background-size: auto 40%;}
			100% {background-position: 100% 100%;background-size: auto 50%;}
		}

		@media screen and (min-width: 768px){
			.spendenbarometer-image{
				margin: 150px auto 0;
				width: 60%;
			}
		}

		@media screen and (min-width: 992px){
			.spendenbarometer-image{
				margin-top: 17vw;
				width: 70%;
			}

			.col-spendenbarometer{
				height: auto;
				width: 20%;
				float:left;
			}
		}

		/*** form styles ***/
		form {
			position:relative;
		}

		input[type=text], input[type=email], textarea {
			border: none;
			font-family: 'Helvetica-Roman';
			font-size: 14px;
			width: calc(100% - 20px);
			float: left;
			/* background: #fff; */
			transform: translateZ(100px);
			-webkit-transform: translateZ(100px);
			z-index: 500;
			padding: 14px;
			/* width: 60%; */
			background: transparent;
			height: 25px;
			margin: 0 auto;
			margin-top: 10px;
			border: none;
			border: solid 1px #6B0000;
			border-radius: 10px;
		}

		::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
			color: #FFFFFF;
			opacity: 1; /* Firefox */
		}

		@media screen and (min-width:992px) {
			input[type=text], input[type=email], textarea {
				font-size:16px;
			}
		}

		input, input:active {
			outline:none;
		}

		input[type=checkbox] {
			font-family:'HelveticaLTPro-Roman';
			float:left;
			border:0;
			width:auto;
			position:relative;
			cursor:pointer;
			margin-bottom:0;
		}

		:focus
		{
			outline-style:none;
		}

		.checkbox, .radio{
			float: left;
			margin-top: 7px;
		}

		.checkbox-wrapper, .radio-wrapper {
			float: left;
			margin: 0;
			padding-top: 2px;
			width: 30px;
			position: absolute;
			left: 15px;
		}

		.checkbox-wrapper input, .radio-wrapper input {
			opacity: 0;
		}

		.checkbox-wrapper img, .radio-wrapper img {
			display: block;
			height: auto;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			max-width: 30px;
		}

		.checkbox-wrapper .image-elem-checked, .radio-wrapper .image-elem-checked {
			display:none;
		}

		.checkbox-wrapper.checked .image-elem-checked, .radio-wrapper.checked .image-elem-checked {
			display:block;
		}

		.checkbox-wrapper.checked .image-elem-unchecked, .radio-wrapper.checked .image-elem-unchecked {
			display:none;
		}

		.form-field label.checkbox-label,.form-field label.radio-label {
			padding-left: 50px;
			position: relative;
			z-index: 5;
			padding-top: 2px;
			overflow: hidden;
			word-break: break-word;
			min-height: 30px;
		}

		.radio-overlay{
			cursor: pointer;
		}

		input.absenden,.loesung-zeigen {
			border: none;
			font-size: 15px;
			text-align: left;
			cursor: pointer;
			font-weight: normal;
			padding: 3px 15px 4px;
			color: #E00013;
			background: var(--white);
			width: 100%;
			transition: all .4s;
			-webkit-transition: all .4s;
			display: block;
			border-radius: 15px;
		}

		input.absenden:hover, .zurueck:hover, .loesung-zeigen:hover {
			color: #red;
			background: green;
			text-decoration: none;
		}

		.loesung-zeigen {
			text-decoration: none;
			border:none;
			font-size:1.125em;
			cursor:pointer;
			font-weight:normal;
			padding:10px;
			width:auto;
			background:#e30613;
			-webkit-appearance:none;
			border-radius:0;
			display: inline-block;
		}

		.form-field {
			clear:left;
			margin-bottom:1em;
			font-weight:normal;
			color:#fff;
			overflow:hidden;
			position: relative;
		}

		.form-field label {
			width: calc(100% - 45px);
			margin-bottom: 10px;
			color: #E00013;
			font-size: 15px;
			line-height: 22px;
			margin-left: 15px;
			cursor: pointer;
			display: block;
			font-family: 'Helvetica-Bold';
		}

		p.text-overlay-querstion {
			color: #6B0000;
		}

		@media screen and (min-width: 576px){
			input.absenden, .loesung-zeigen{
				width: calc(70% - 20px);
			}
		}

		@media screen and (min-width:769px) {
			.form-field label {
				font-size: 1rem;
			}

			.choice .form-field label{
				font-size: 1rem;
			}
		}

		@media screen and (min-width:1200px) {
			.form-field label {
				margin-bottom: 40px;
				font-size: 15px;
			}
		}

		.modal-title{
			font-size: 1rem;
		}

		.modal-title h3{
			color: #fff;
			font-size: 1.4rem;
			text-align: center;
		}

		.choice {
			clear:left;
			overflow:auto;
			margin-bottom: -10px;
		}

		@media screen and (max-width:767px) {
			.choice {
				clear:left;
				overflow:auto;
				margin-bottom: 20px;
			}
		}

		.error, .error-prev {
			float:left;
			color:red;
			padding-left:20px;
		}

		.error-answer .error, .error-answer .error-prev {
			padding:0;
		}

		.modal-content{
			border:none;
		}

		@media screen and (min-width:769px) {
			.questiontext.modal-title{
				font-size: 1.2rem;
				font-weight: 600;
			}

			.modal-title h3{
				font-size: 2rem;
			}
		}

		@media screen and (min-width:1200px) {
			.modal-title{
				font-size: 1.1rem;
			}

			.modal-title h3{
				font-size: 2.4rem;
			}

			.questiontext.modal-title{
				font-size: 1.4rem;
			}
		}

		/*** geschenke styles ***/
		.overlay .container.container-geschenke{
			display: grid;
			grid-template-columns: repeat(2, calc(67.5% - 5px));
			grid-column-gap: 10px;
			width: 100%;
			position: relative;
			margin-left: auto;
			margin-right: auto;
			max-width: none;
		}

		.item{
			position: relative;
			grid-column: 1;
			width: 100%;
			background: #fff;
			overflow: hidden;
			margin: 5px;
			margin-top: -10vw;
		}

		.item:nth-child(2n){ margin-left: 50%;}

		@media screen and (min-width: 576px){
			.overlay .container.container-geschenke{
				display: grid;
				grid-template-columns: repeat(2, calc(50% - 5px));
			}

		}

		@media(min-width: 2000px){
			.container-footer{
				position: fixed;
				bottom: 0
			}
		}

		.hidden{
			display: none;
		}

		.container-geschenke img.position-absolute{
			right: 0;
			bottom: 50%;
			top: 50%;
			max-width: none;
			height: 100%;
			width: auto;
			left: 0;
			margin: auto;
			max-height: 100px;
		}

		.container-geschenke img.position-absolute.icon-geschenk{
			max-height: none;
		}

		.overlay-number{
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
			opacity: 0;
			transition: all .4s;
			background:rgba(107,0,0,.8);
		}

		.overlay-number:hover{
			opacity: 1;
		}


		.stars, .twinkling{
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			width:100%;
			height:100%;
			display:block;
		}

		.stars {
			background:transparent url(../img/stars.png) repeat top center/100% auto;
			z-index:0;
		}

		.twinkling{
			background:transparent url(../img/twinkling.png) repeat top center;
			background: transparent;
			z-index:1;
			-webkit-animation:move-twink-back 200s linear infinite;
			animation:move-twink-back 200s linear infinite;
		}

		.radio-wrapper .radio-wrapper{
			display: none;
		}

		.radio-wrapper .radio-overlay .radio-wrapper{
			display: block;
		}

		.col-snowflakes{
			width: 100%;
			height: 100vw;
			display: block;
			margin: auto;
			position: fixed;
		}

		.snowpane {
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
			z-index:1;
		}

		#snow{
			position: fixed;
			z-index: 0;
			max-width: 100%;
		}

		#particles-js{
			overflow: hidden;
		}

		.container-regal{
			clear: both;
			position: relative;
			margin-top: -2vw;
		}

		.regal-add{
			width: 120px;
			right: 30px;
			bottom: 0px;
			z-index: 0;
		}

		.r50{
			right: calc(50% - 60px)
		}

		.l25{
			left: 20%
		}

		.brenner{
			max-width: 90px
		}

		.flamme{
			max-width: 20px;
			right: 0;
			top: 0;
			left: 0;
			margin: -45px auto 0;
			opacity: 0;
			transform-origin: 50% 100%;
			transform: scale(.3,.3) rotate(0);
		}

		.flamme-2{
			opacity: 0;
			transform: scale(.5,.5) rotate(0deg);
			transform-origin: 50% 100%;
		}

		.brenner:hover .flamme, .brenner.brenner-active .flamme{
			animation: flame 2s linear infinite;
			-webkit-animation: flame 2s linear infinite;
		}


		.brenner:hover .flamme-2, .brenner.brenner-active .flamme-2{
			animation: flameR 2s linear infinite;
			-webkit-animation: flameR 2s linear infinite;
		}

		.funke-icon{
			position: absolute;
			max-width: 25px;
			top: 0;
			left: 40%;
			animation: glowF 1s linear infinite;
			-webkit-animation: glowF 1s linear infinite;
		}

		@keyframes glowF {
			0% {opacity: 0;}
			5% {opacity: 1;}
			20% {opacity: 1;}
			30% {opacity: 0;}
			100% {opacity: 0;}
		}

		@-webkit-keyframes glowF {
			0% {opacity: 0;}
			5% {opacity: 1;}
			20% {opacity: 1;}
			30% {opacity: 0;}
			100% {opacity: 0;}
		}

		.funke-1{
			transform: rotate(-30deg);
			left: 25%;
			margin-top: -40%;
		}
		.funke-2{
			transform: rotate(45deg);
			max-width: 15px;
			animation-delay: .1s;
			margin-top: -15%

		}
		.funke-3{
			max-width: 20px;
			animation-delay: .2s;
			margin-top: -30%;
			left: 60%
		}

		.brenner-active .funke-icon, .brenner:hover .funke-icon{
			animation:none;
			opacity: 0
		}

		@keyframes flame {
			0% {opacity:0;transform:rotate(0deg) scale(1);}
			25% {opacity:1;transform:rotate(-5deg) scale(.95);}
			50% {opacity:0;transform:rotate(0deg) scale(1);}
			75% {opacity:1;transform:rotate(5deg) scale(.9);}
			100% {opacity:0;transform:rotate(0deg) scale(1);}
		}

		@-webkit-keyframes flame {
			0% {opacity:0;transform:rotate(0deg) scale(1);}
			25% {opacity:1;transform:rotate(-5deg) scale(.95);}
			50% {opacity:0;transform:rotate(0deg) scale(1);}
			75% {opacity:1;transform:rotate(5deg) scale(.9);}
			100% {opacity:0;transform:rotate(0deg) scale(1);}
		}

		@keyframes flameR {
			0% {opacity:1;transform:rotate(0deg) scale(.8);}
			25% {opacity:0;transform:rotate(5deg) scale(1);}
			50% {opacity:1;transform:rotate(0deg) scale(.8);}
			75% {opacity:0;transform:rotate(-5deg) scale(1.1);}
			100% {opacity:1;transform:rotate(0deg) scale(.8);}
		}

		@-webkit-keyframes flameR {
			0% {opacity:1;transform:rotate(0deg) scale(.8);}
			25% {opacity:0;transform:rotate(5deg) scale(1);}
			50% {opacity:1;transform:rotate(0deg) scale(.8);}
			75% {opacity:0;transform:rotate(-5deg) scale(1.1);}
			100% {opacity:1;transform:rotate(0deg) scale(.8);}
		}

		.brille{
			max-width: 200px
		}



		.kugel-blau.kugel-regal{
			top: 130px;
			left: 150px;
			animation:swingKl 2.4s linear infinite;
			-webkit-animation: swingKl 2.4s linear infinite;
		}

		.kugel-rot{
			position: absolute;
			top: 130px;
			left: -15px;
			max-width: 60px;
			transform-origin: 50% 5%;
			animation:swingKr 2s linear infinite;
			-webkit-animation: swingKr 2s linear infinite;
		}

		.kugel-rot-r{
			left: initial;
			right: 80px
		}

		.ast{
			max-width: 100px;
			position: absolute;
			bottom: -30px;
			z-index: 50;
		}

		.ast.ast-l{
			left: 80px
		}

		.ast.ast-r{
			transform: rotateY(180deg);
			right: 150px;
		}

		.leitung .ast{
			top: 9.5vw;
			right: 10.5%;
			max-width: 7vw;
		}

		.leitung .lichterkette{
			position: absolute;
			top: 4vw;
			width: 47.5%;
			margin-left: 15%;
		}

		.lichterkette img{
			position: absolute;
		}

		.lichterkette1, .lichterkette2{
			opacity: 0;
			animation: glow .6s infinite;
			-webkit-animation: glow .6s infinite;
		}

		.lichterkette2{
			animation-delay: .3s
		}

		.socke{
			max-width: 70px;
			position: absolute;
			top: 130px;
			right: 40px;
			transform-origin: 25% 2%;
			animation:swing 5s linear infinite;
			-webkit-animation: swing 5s linear infinite;
		}

		.leitung .socke{
			right: 42.5%;
			top: 6vw
		}

		.weihnachtsbaum{
			position: absolute;
			bottom: 0;
			width: 70%;
			left: -25%;
			z-index: 1
		}

		.weihnachtsbaum img{
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.weihnachtsbaum1,.weihnachtsbaum2,.weihnachtsbaum3,.weihnachtsbaum4{
			opacity: 0;
			animation: glow 1s linear infinite;
			-webkit-animation: glow 1s linear infinite;
		}

		.weihnachtsbaum2{
			animation-delay: .25s;
		}

		.weihnachtsbaum3{
			animation-delay: .5s;
		}

		.weihnachtsbaum4{
			animation-delay: .75s;
		}

		@keyframes glow {
			0% {opacity: 0;}
			33% {opacity: 1;}
			66% {opacity: 1;}
			100% {opacity: 0;}
		}

		@-webkit-keyframes glow {
			0% {opacity: 0;}
			33% {opacity: 1;}
			66% {opacity: 1;}
			100% {opacity: 0;}
		}

		@media screen and (min-width: 768px){
			.weihnachtsbaum{
				width: 60%;
				left: -20%;
			}
		}

		@media screen and (min-width: 992px){
			.weihnachtsbaum{
				bottom: -100px;
				width: 50vw;
				left: -2vw;
			}
		}

		@media screen and (min-width: 1200px){
			.weihnachtsbaum{
				width: 40vw;
				left: -17.5vw;
			}
			.socke{
				max-width: 80px;
			}
		}

		@media screen and (min-width: 1600px){
			.weihnachtsbaum{
				width: 40vw;
				left: -17.5vw;
			}
			.socke{
				max-width: 100px;
			}
		}

		@media screen and (min-width: 1921px){
			.leitung .ast{
				max-width: 150px;
				top: 35%;
			}

			.kugel-leitung{
				top: 50%;
			}

			.leitung .lichterkette{
				top: 15%
			}

			.leitung .socke{
				top: 25%
			}

			.weihnachtsbaum{
				width: 800px;
				left: -300px;
				bottom: -10%;
			}

			.spendenbarometer-stand{
				font-size: 2rem
			}
		}

		#section1{
			float: right;
			width: 300px;
			margin-top: 4vw;
			right: -4%;
		}

		#section2{
			float: left;
			width: 650px;
			margin-left: 20%;
			z-index: 10
		}

		#section3{
			float: right;
			width: 400px;
			right: -4%;
		}

		#section4{
			float: left;
			width: 415px;
			margin-left: 10%;
			z-index: 10
		}

		#section5{
			float: right;
			width: 576px;
			right: 10%;
			margin-top: -3vw
		}

		#section6{
			float: left;
			width: 450px;
			margin-left: 20%;
			margin-top: 2vw
		}

		@media screen and (max-width: 1600px){
			#section3{
				margin-top: 15px;
				right: 0;
			}

			#section4{
				margin-top: -75px;
				margin-left: 15%
			}

			#section5{
				margin-top: 15px;
				right: 5%;
			}
		}

		@media screen and (max-width: 1440px){
			#section2{
				margin-left: 15%;
				margin-top: 30px;
			}

			#section3{
				right: 5%;
				margin-top: 30px;
			}

			#section4{
				margin-left: 10%;
				margin-top: -50px
			}

			#section5{
				right: -15%
			}

			#section6{
				margin-left: 10%;

				margin-top: 30px
			}
		}

		@media screen and (max-width: 1200px){
			#section2{
				margin-left: 5%;
				margin-top: 60px;
			}

			#section3{
				right: 10%;
				margin-top: 60px;
				float: left;
				left: 0;
				margin-left: 15%;
			}

			#section4{
				margin-left: 10%;
				margin-top: 30px;
				float: right;
				right: -15%;
			}

			#section5{
				margin-top: 60px;
			}

			#section6{
				margin-left: 0%;
				margin-top: 120px;
				float: right;
				right: 10%;
			}

			.kugel-leitung, .kugel-blau.kugel-regal, .kugel-rot{
				max-width: 50px
			}

			.leitung .socke{
				right: 45%;
				top: 6vw;
			}

			.weihnachtsbaum img{
				left: -25%
			}
		}

		@media screen and (max-width: 992px){
			#section2, #section3, #section4, #section5, #section6{
				margin-top: 50px
			}

			#section1, #section6{
				right: 5%
			}

			#section4{
				right: 10%;
			}

			.logo-wrapper{
				margin-right: 30px
			}

			.leitung{
				margin-top: 100px
			}

			#section1{
				margin-top: 20px
			}

			#section3{
				float: right;
				right: 0;
				margin-right: 10%;
			}

			#section4{
				float: left;
				right: 0
			}

			#section5{
				float: right;
				right: 5%
			}

			#section6{
				margin-top: 80px;
				right: 0;
				float: left;
				margin-left: 5%;
			}

			.col-spendenbarometer {
				position: relative;
				height: 100%;
				width: 50%;
				float: right;
			}

			.door22, .door16, .door17, .door21, .door5{
				width: 70px
			}




			.container-footer{
				position: fixed;
				bottom: 0
			}

			.spendenbarometer-stand{
				font-size: 4vw;
				line-height: 4vw;
			}

			.barometer-sort{
				right: 0;
			}

			h2.text-center{
				font-size: 6vw;
			}

			.overlay-container-question .question-number, .overlay-container-infotext .question-number{
				width: 30%;
				background-size: 100% auto;
				z-index: -1
			}
			.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
				background-size: auto 30%;
			}
			.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
				background-size: auto 50%;
			}
			.overlay-container-infotext .question-number.question24, .overlay-container-question .question-number.question19, .overlay-container-question .question-number.question1, .overlay-container-question .question-number.question14, .overlay-container-question .question-number.question15{
				background-size: 75% auto;
			}
			.weihnachtsbaum img{
				left: 0%
			}
			.leitung{
				display: none;
			}
		}

		@media screen and (max-width: 768px){
			h3.font-size-15em{
				width: 90%;
				margin: auto;
			}
			.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
				background-size: auto 25%;
				background-position: 0 100%;
			}
			.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
				bottom: 90px;
				width:150px
			}
			.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
				background-size: auto 30%;
			}
			.overlay-container-question .question-number.question7 .number, .overlay-container-question .question-number.question8 .number, .overlay-container-question .question-number.question11 .number, .overlay-container-question .question-number.question12 .number, .overlay-container-question .question-number.question13 .number{
				font-size: 1.4rem
			}
			.overlay-container-question .question-number.question19 .number, .overlay-container-question .question-number.question1 .number, .overlay-container-question .question-number.question14 .number, .overlay-container-question .question-number.question15 .number{
				width: 75%
			}
			.door10 .bubbles, .door6 .bubbles, .door20 .bubbles, .door10 .bubbles, .door18 .bubbles{
				margin-top: -100px;
				height: 150px
			}
			#section1{
				margin-top: 0
			}
		}

		@media screen and (max-width: 720px){
			#section2, #section5{
				width: calc(100% - 30px);
				margin: 80px 0 0 15px;
				right: 0
			}

			#section5{
				float: left;
			}

			.door3, .door16 {
				left: 50px;
			}

			.door17 {
				margin-right: 0px;
			}

			.door24 {
				margin-left: 120px;
			}

			.socke{
				max-width: 80px;
			}

			.leitung .socke{
				right: 42.5%;
			}

			#section2 .ast.ast-r{
				right: 40%
			}
			.overlay-container-question .question-number{
				width: 30%;
				background-position: 0 100%;
				background-size: 100% auto;
			}

			.overlay-container-question .question-number.question7, .overlay-container-question .question-number.question8, .overlay-container-question .question-number.question11, .overlay-container-question .question-number.question12, .overlay-container-question .question-number.question13{
				background-position: 50% 100%;
			}
		}

		@media screen and (max-width: 576px){
			.door1{
				margin-right: 5px
			}
			.door3{
				left: 60px;
			}
			.door6{
				margin-right: 0px;
			}
			.door7 {
				left: 120px;
			}
			.door8 {
				right: 90px;
			}
			.door13{
				margin-right: 45px;
			}
			.door16 {
				left: 40px;
			}
			.door24{
				margin-left: 120px
			}

			.door6, .door16, .door17, .door20, .door21, .door22, .door5{
				width: 70px;
				background-size: auto calc(100% - 55px);
			}

			.door24, .door19, .door1, .door15, .door14{
				width: 75px
			}

			.ast.ast-l{
				left: 30%
			}

			.socke{
				max-width: 60px
			}
			.question-number .number{
				bottom: 20px;
				font-size: 2rem
			}
			.form-field{
				padding: 0
			}
			input[type="text"], input[type="email"], textarea{
				width: 100%
			}
			.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
				background-size: 70% auto;
				margin-left: -30px;
			}
			.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
				bottom: 7%;
				width: 70%;
			}



			.text-inner{
				padding-bottom: 7.5rem !important
			}
		}

		@media screen and (max-width: 480px){
			#section1, #section3, #section4, #section6 {
				width: calc(100% - 30px);
				float: left;
				right: 0;
				margin-left: 15px;
			}
			.ast{
				max-width: 80px
			}
			#section2 .ast.ast-r {
				right: 30%;
			}
			.ast.ast-l {
				left: 40%;
			}
			.kugel-rot{
				left: 50%
			}
			.kugel-rot-r{
				left: 90%
			}
			.wrapper{
				padding-bottom: 3rem
			}
			.leitung .socke{
				right: 42.5%;
			}
			.leitung .socke {
				right: 35%;
			}
			.leitung .ast{
				right: 5%;
				max-width: 50px;
			}
			.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
				background-size: 80% auto;
				margin-left: -30px;
			}
			.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
				bottom: 6%;
				width: 80%;
			}

			.door24 a, .door19 a, .door1 a, .door15 a, .door14 a{
				background: transparent url(../img/glas-viereck-anim.svg) no-repeat 0% calc(100% - 25px)/auto 40%;
			}
			.door10 .dot span:nth-child(3), .door6 .dot span:nth-child(3), .door20 .dot span:nth-child(3), .door10 .dot span:nth-child(3), .door18 .dot span:nth-child(3){
				left:30%
			}
			.door10 .dot, .door6 .dot, .door20 .dot, .door10 .dot, .door18 .dot{
				top:70px;
			}
		}



		@media screen and (max-width: 360px){
			.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
				bottom: 4%;
			}
			.ast.ast-l{
				left: 50%
			}
			#section2 .ast.ast-r {
				right: 15%;
			}
		}
		@media screen and (max-width: 320px){
			.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
				bottom: 3%;
			}
		}

		.snowflake{
			position: absolute;
			width: 200px;
			height: 180px;
			background: transparent url(../img/snowflake.png) no-repeat 50% 50%/200px 180px;
		}

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

			.spendenbarometer-anim {
				background: transparent url(../img/glas-gross-voll.svg) repeat no-repeat 0 100%/100% auto;
				height: 100%;
				width: 100%;
				z-index: 99;
				animation: none;
			}
		}
    right: 35%;
	}
	.leitung .ast{
		right: 5%;
		max-width: 50px;
	}
	.overlay-container-question .question-number.question6, .overlay-container-question .question-number.question10, .overlay-container-question .question-number.question20, .overlay-container-question .question-number.question18{
			background-size: 80% auto;
			margin-left: -30px;
	}
	.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
		bottom: 6%;
		width: 80%;
	}

	.door24 a, .door19 a, .door1 a, .door15 a, .door14 a{
		background: transparent url(../img/glas-viereck-anim.svg) no-repeat 0% calc(100% - 25px)/auto 40%;
	}
	.door10 .dot span:nth-child(3), .door6 .dot span:nth-child(3), .door20 .dot span:nth-child(3), .door10 .dot span:nth-child(3), .door18 .dot span:nth-child(3){
		left:30%
	}
	.door10 .dot, .door6 .dot, .door20 .dot, .door10 .dot, .door18 .dot{
		top:70px;
	}
}



@media screen and (max-width: 360px){
	.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
		bottom: 4%;
	}
	.ast.ast-l{
		left: 50%
	}
	#section2 .ast.ast-r {
    right: 15%;
	}
}
@media screen and (max-width: 320px){
	.question-number.question10 .number, .question-number.question6 .number, .question-number.question20 .number, .question-number.question18 .number{
		bottom: 3%;
	}
}

.snowflake{
	position: absolute;
	width: 200px;
	height: 180px;
	background: transparent url(../img/snowflake.png) no-repeat 50% 50%/200px 180px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

   .spendenbarometer-anim {
       background: transparent url(../img/glas-gross-voll.svg) repeat no-repeat 0 100%/100% auto;
       height: 100%;
       width: 100%;
       z-index: 99;
  	 	animation: none;
   }
}