:root {
	--voestalpineBlue: #0082b4;
	--darkBlue: #002d3f;
	--voestalpineLightGrey: #c3c3c3;
	--veryLightGrey: #f0f0f0;
	--bulbBlue: #009fdc;
	--bulbRed: #e35d76;
	--bulbYellow: #f8e07e;
	--radioBackgroundColor: #fceac2;
	--radioForegroundColor: #493329;
	--photoBackgroundColor: #f8e07e;
	--photoForegroundColor: #e35d76;
	--photoLinkColor: #fff;
	--magazineBackgroundColor: #69a3c8;
	--globeBackgroundColor: #d2eebd;
	--sockBackgroundColor: #5ad6ff;
	--sockBorderColor: #fff;
	--sockContentBackgroundColor: #f0f0f0;
	--redBackgroundColor: #bf495f;
	--redLightColor: #e35d76;
	--violetBackgroundColor: #a5a1fc;
	--violetLightColor: #bcb9fc;
	--yellowBackgroundColor: #e2cf30;
	--yellowLightColor: #f8e07e;
	--accordionBackgroundColor: #f0f0f0;
}

body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: 'voestalpine', sans-serif;
	font-size: 1rem;
	font-weight: 200;
	background-color: var(--voestalpineBlue);
	overflow: hidden;
}
body, html {
  height: 100%;
}

@font-face {
  font-family: voestalpine;
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/voestalpine-Light-WebS.eot");
  src: url("../fonts/voestalpine-Light-WebS.eot?#iefix") format("embedded-opentype"), url("../fonts/voestalpine-Light-WebS.woff") format("woff"), url("../fonts/voestalpine-Light-WebS.ttf") format("truetype"), url("../fonts/voestalpine-Light-WebS.svg#SourceSansPro") format("svg");
}
@font-face {
  font-family: voestalpine;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/voestalpine-Regular-WebS.eot");
  src: url("../fonts/voestalpine-Regular-WebS.eot?#iefix") format("embedded-opentype"), url("../fonts/voestalpine-Regular-WebS.woff") format("woff"), url("../fonts/voestalpine-Regular-WebS.ttf") format("truetype"), url("../fonts/voestalpine-Regular-WebS.svg#SourceSansPro") format("svg");
}

#calendar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-image: url('../img/background.svg?v=241122');
}
body.countdown #calendar {
	background-image: url('../img/background-blur.jpg');
	background-color: #a5a5a5;
	background-size: cover;
	background-blend-mode: multiply;
}

.countDownWrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
}
.countDownTitle {
	text-align: center;
	color: #fff;
	font-size: 44px;
	font-weight: 300;
	margin: 0 0 1rem 0;
}
.countDownTitle strong {
	font-weight: 500;
}
.countDown {
	width: 100%;
	height: 140px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}
.countDown div {
	width: 5%;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	background-color: rgba(255,255,255,0.7);
	color: #0082b4;
	border-radius: 8px;
}
.countDown div p:first-child {
	font-weight: 500;
	font-size: 4rem;
	line-height: 5.5rem;
	margin: 0;
	width: 80%;
	text-align: center;
	border-bottom: 1px solid #0082b4;
}
.countDown div p:nth-child(2) {
	font-weight: 400;
	font-size: 1rem;
	margin: 0.5rem 0 1rem 0;
}

#bulbsContainer {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#calendarPopupWrapper {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	display: none;
	opacity: 0;
	transition: opacity ease-in-out 0.5s;
	z-index: 10;
}
#calendarPopup {
	background: #fff;
	border: 2px solid #000;
	box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075);
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	min-height: 200px;
}

#popupContent {
	width: 100%;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.popupContentMain {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
.popupContentImage {
	display: none;
}
#popupContent.hasImage .popupContentImage {
	display: block;
	min-width: 60px;
}
.popupContentTitle {
	font-size: 26px;
	font-weight: 400;
	color: #fff;
	background-color: #0082b4;
	font-weight: 400;
	border-bottom: 2px solid #000;
}
.popupContentMain,
.popupContentLink {
	width: calc(100% - 5rem);
	padding-left: 3rem;
}
.popupContentImage {
	width: 80px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
}
.popupContentCopy {
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 4px;
	color: #000;
	font-weight: 200;
}
.popupContentCopy p:first-child {
	margin-top: 0;
}
.popupContentCopy p:last-child {
	margin-bottom: 0;
}
.popupContentLink .link {
	background: #0082b4;
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
}
.popupContentLink .link:hover {
	cursor: pointer;
	text-decoration: underline;
}
#popupArrow {
	position: absolute;
	width: 16px;
	height: 30px;
	overflow: hidden;
	z-index: 11;
}
#popupArrow .arrow {
	width: 30px;
	height: 30px;
	margin-left: -26px;
	transform: rotate(45deg);
	background: #fff;
	box-shadow: 0 0 5px 3px rgba(0,130,180,0.1);
	border: 2px solid #000;
}
#popupArrow.left {
	left: auto;
}
#popupArrow.left .arrow {
	margin-left: 6px;
}

/* radio */
#calendarPopup.radio {
	border-radius: 78% 22% 76% 24% / 20% 72% 28% 80%;
	border: 2px solid var(--radioForegroundColor);
}
#calendarPopup.radio #popupContent {
	transform: rotate(-9deg);
}
#calendarPopup.radio .popupContentTitle {
	background-color: var(--radioBackgroundColor);
	color: var(--radioForegroundColor);
	border-bottom: 2px solid var(--radioForegroundColor);
	padding: 1.25rem 0 1rem 3rem;
}
#calendarPopup.radio .popupContentLink {
	margin: 0 0 0.8rem 0;
}
#calendarPopup.radio .popupContentLink .link {
	background-color: var(--radioBackgroundColor);
	color: var(--radioForegroundColor);
}
#popupArrow.radio {
	transform: rotate(-10.5deg);
	margin-left: 2px;
}
body.de #popupArrow.radio {
	transform: rotate(-10.5deg);
	margin-left: 2px;
}
#popupArrow.radio .arrow {
	border: 2px solid var(--radioForegroundColor);
}

/* photo photo */
#calendarPopup.photo {
	border-radius: 39% 61% 60% 40% / 72% 35% 65% 28%;
	border: 2px solid var(--photoForegroundColor);
}
#calendarPopup.photo #popupContent {
	transform: rotate(16deg);
}
#calendarPopup.photo .popupContentTitle {
	background-color: var(--photoBackgroundColor);
	color: var(--photoForegroundColor);
	border-bottom: 2px solid var(--photoForegroundColor);
	padding: 1.5rem 0 0.75rem 5.5rem;
}
#calendarPopup.photo .popupContentCopy {
	margin: 0.4rem;
}
#calendarPopup.photo .popupContentLink {
	margin: 0.4rem 0.4rem 0 2rem;
}
#calendarPopup.photo .popupContentCopy p {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}
#calendarPopup.photo .popupContentCopy p:last-child {
	margin-block-end: 0;
}
#calendarPopup.photo .popupContentLink .link {
	background-color: var(--photoForegroundColor);
	color: var(--photoLinkColor);
}
#popupArrow.photo {
	transform: rotate(14deg);
	margin-left: 2px;
}
#popupArrow.photo.left {
	transform: rotate(6deg);
	margin-left: -6px;
}
body.de #popupArrow.photo {
	transform: rotate(14deg);
	margin-left: 2px;
}
body.de #popupArrow.photo.left {
	transform: rotate(6deg);
	margin-left: -6px;
}
#popupArrow.photo .arrow {
	border: 2px solid var(--photoForegroundColor);
}

/* magazine */
#calendarPopup.magazine {
	border-radius: 16% 84% 12% 88% / 86% 12% 88% 14%;
}
#calendarPopup.magazine #popupContent {
	transform: rotate(6deg);
}
#calendarPopup.magazine .popupContentTitle {
	background-color: var(--magazineBackgroundColor);
	padding: 1rem 0 0.75rem 3rem;
}
#calendarPopup.magazine .popupContentCopy,
#calendarPopup.magazine .popupContentLink {
	margin: 0;
}
#calendarPopup.magazine .popupContentCopy p {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}
#calendarPopup.magazine .popupContentCopy p:last-child {
	margin-block-end: 0;
}
#calendarPopup.magazine .popupContentLink .link {
	background-color: var(--magazineBackgroundColor);
}
#popupArrow.magazine {
	transform: rotate(4deg);
	margin-left: 2px;
}
body.de #popupArrow.magazine {
	transform: rotate(3deg);
	margin-left: 2px;
}

/* globe */
#calendarPopup.globe {
	border-radius: 24% 76% 18% 82% / 75% 31% 69% 25%;
}
#calendarPopup.globe #popupContent {
	transform: rotate(10deg);
}
#calendarPopup.globe .popupContentTitle {
	background-color: var(--globeBackgroundColor);
	color: #333;
	padding: 1.25rem 0 0.75rem 0;
	text-align: center;
}
#calendarPopup.globe .popupContentCopy,
#calendarPopup.globe .popupContentLink {
	margin: 0;
}
#calendarPopup.globe .popupContentCopy p {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}
#calendarPopup.globe .popupContentCopy p:last-child {
	margin-block-end: 0;
}
#calendarPopup.globe .popupContentLink .link {
	background-color: var(--globeBackgroundColor);
	color: #333;
	margin: 0 auto;
}
#popupArrow.globe {
	transform: rotate(4deg);
	margin-left: -4px;
}
body.de #popupArrow.globe {
	transform: rotate(4deg);
	margin-left: -4px;
}

/* middle sock */
#calendarPopup.sock-2 {
	border-radius: 76% 24% 80% 20% / 24% 68% 32% 76%;
	border: 2px solid var(--sockBorderColor);
	background-color: var(--sockContentBackgroundColor);
}
#calendarPopup.sock-2 #popupContent {
	transform: rotate(-8deg);
}
#calendarPopup.sock-2 .popupContentTitle {
	background-color: var(--sockBackgroundColor);
	color: var(--darkBlue);
	border-bottom: 2px solid var(--sockBorderColor);
	padding: 1.5rem 0 0.5rem 3rem;
	line-height: 30px;
}
#calendarPopup.sock-2 .popupContentCopy {
	margin: 0;
}
#calendarPopup.sock-2 .popupContentLink {
	margin: 0.4rem 0;
}
#calendarPopup.sock-2 .popupContentCopy p {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}
#calendarPopup.sock-2 .popupContentCopy p:last-child {
	margin-block-end: 0;
}
#calendarPopup.sock-2 .popupContentLink .link {
	background-color: var(--sockBackgroundColor);
	color: var(--darkBlue);
}
#popupArrow.sock-2 {
	transform: rotate(-14deg);
	margin-left: 5px;
}
body.de #popupArrow.sock-2 {
	transform: rotate(-14deg);
	margin-left: 5px;
}
#popupArrow.sock-2 .arrow {
	border: 2px solid var(--sockBorderColor);
	background-color: var(--sockContentBackgroundColor);
}

/* violet present */
#calendarPopup.present-violet {
	border-radius: 21% 79% 22% 78% / 76% 26% 74% 24%;
	border: 2px solid #fff;
	background-color: var(--violetLightColor);
}
#calendarPopup.present-violet #popupContent {
	transform: rotate(10deg);
}
#calendarPopup.present-violet .popupContentTitle {
	background-color: var(--violetBackgroundColor);
	color: #fff;
	border-bottom: 2px solid #fff;
	padding: 1.75rem 0 1rem 4rem;
}
#calendarPopup.present-violet .popupContentLink {
	margin: 0 0 0 calc(60px + 1rem);
}
#calendarPopup.present-violet .popupContentLink .link {
	color: #333;
	background-color: #fff;
}
#popupArrow.present-violet {
	transform: rotate(10deg);
	margin-left: 2px;
}
#popupArrow.present-violet.left {
	transform: rotate(5deg);
	margin-left: -10px;
}
body.de #popupArrow.present-violet {
	transform: rotate(12deg);
	margin-left: 1px;
}
body.de #popupArrow.present-violet.left {
	transform: rotate(3deg);
	margin-left: -11px;
}
#popupArrow.present-violet .arrow {
	border: 2px solid #fff;
	background-color: var(--violetLightColor);
}

/* red present */
#calendarPopup.present-red {
	border-radius: 78% 22% 82% 18% / 16% 82% 18% 84%;
	border: 2px solid #fff;
	background-color: var(--redLightColor);
}
#calendarPopup.present-red #popupContent {
	transform: rotate(-8deg);
}
#calendarPopup.present-red .popupContentTitle {
	background-color: var(--redBackgroundColor);
	color: #fff;
	border-bottom: 2px solid #fff;
	padding: 1rem 0 1rem 3rem;
}
#calendarPopup.present-red .popupContentCopy {
	color: #fff;
	margin-right: 1rem;
}
#calendarPopup.present-red .popupContentLink {
	margin: 0 0 0 calc(60px + 1rem);
}
#calendarPopup.present-red .popupContentLink .link {
	color: var(--redBackgroundColor);
	background-color: #fff;
}
#popupArrow.present-red {
	transform: rotate(-1deg);
	margin-left: 9px;
}
#popupArrow.present-red.left {
	transform: rotate(-15deg);
	margin-left: 6px;
}
body.de #popupArrow.present-red {
	transform: rotate(-2deg);
	margin-left: 9px;
}
body.de #popupArrow.present-red.left {
	transform: rotate(-15deg);
	margin-left: 7px;
}
#popupArrow.present-red .arrow {
	border: 2px solid #fff;
	background-color: var(--redLightColor);
}

/* yellow present */
#calendarPopup.present-yellow {
	border-radius: 64% 36% 70% 30% / 26% 72% 28% 74%;
	border: 2px solid #fff;
	background-color: var(--yellowLightColor);
}
#calendarPopup.present-yellow #popupContent {
	transform: rotate(-12deg);
}
#calendarPopup.present-yellow .popupContentTitle {
	background-color: var(--yellowBackgroundColor);
	color: #333;
	border-bottom: 2px solid #fff;
	padding: 1rem 0 1rem 3rem;
	margin-top: -0.25rem;
}
#calendarPopup.present-yellow .popupContentCopy {
	margin-right: 1rem;
}
#calendarPopup.present-yellow .popupContentLink {
	margin: 0 0 0 calc(60px + 1rem);
}
#calendarPopup.present-yellow .popupContentLink .link {
	color: #333;
	background-color: #fff;
}
#popupArrow.present-yellow {
	transform: rotate(-10deg);
	margin-left: 4px;
}
body.de #popupArrow.present-yellow {
	transform: rotate(-10deg);
	margin-left: 3px;
}
#popupArrow.present-yellow .arrow {
	border: 2px solid #fff;
	background-color: var(--yellowLightColor);
}

/* title */
#mainTitle {
	position: absolute;
	width: 100%;
	height: 100px;
	left: 0;
	top: 0;
	text-align: center;
	top: 30px;
	z-index: 10;
}
body.countdown #mainTitle {
	top: calc(50% - 200px);
}

#mainTitle .headline {
	display: inline-block;
	padding: 1rem 2rem;
	color: #fff;
	font-size: 44px;
	font-weight: 300;
	text-shadow: 0 0 20px rgb(0,130,180,1);
}
#mainTitle .headline strong {
	font-weight: 500;
}

.bulbWrapper {
	position: absolute;
}

.bulbWrapper.r1 {
	transform: rotate(10deg);
}
.bulbWrapper.r2 {
	transform: rotate(20deg);
}
.bulbWrapper.r3 {
	transform: rotate(30deg);
}
.bulbWrapper.r-1 {
	transform: rotate(-10deg);
}
.bulbWrapper.r-2 {
	transform: rotate(-20deg);
}
.bulbWrapper.r-3 {
	transform: rotate(-30deg);
}

.bulbWrapper.active, .bulbWrapper.today {
	cursor: pointer;
}

.bulbInner {
	position: absolute;
	left: 0;
	top: 0;
	display: table;
	text-align: center;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.bulbInner.s18 {
	width: 38px;
	height: 38px;
}
.bulbInner.s22 {
	width: 44px;
	height: 44px;
}
.bulbInner.s26 {
	width: 50px;
	height: 50px;
}

.bulbInner.s18.blue {
	background-image: url('../img/bulb-18-blue.svg');
}
.bulbInner.s18.red {
	background-image: url('../img/bulb-18-red.svg');
}
.bulbInner.s18.yellow {
	background-image: url('../img/bulb-18-yellow.svg');
}
.bulbInner.s22.blue {
	background-image: url('../img/bulb-22-blue.svg');
}
.bulbInner.s22.red {
	background-image: url('../img/bulb-22-red.svg');
}
.bulbInner.s22.yellow {
	background-image: url('../img/bulb-22-yellow.svg');
}
.bulbInner.s26.blue {
	background-image: url('../img/bulb-26-blue.svg');
}
.bulbInner.s26.red {
	background-image: url('../img/bulb-26-red.svg');
}
.bulbInner.s26.yellow {
	background-image: url('../img/bulb-26-yellow.svg');
}

.bulbInner span {
	display: table-cell;
	vertical-align: middle;
	font-size: 1rem;
	font-weight: 300;
	color: #fff;
	transform: translateY(1px);
	transition: all 0.2s ease-in-out;
}
.bulbInner.s22 span {
	font-size: 1.3rem;
	transform: translateY(2px);
}
.bulbInner.s26 span {
	font-size: 1.6rem;
	transform: translateY(3px);
}
.bulbWrapper.inactive .bulbInner span {
	color: #c34a60;
}
.bulbWrapper.active .bulbInner span {
	color: black;
}
.bulbWrapper.today .bulbInner span {
	color: white;
	font-weight: 600;
}
.bulbWrapper.active:hover .bulbInner.s18 span,
.bulbWrapper.today:hover .bulbInner.s18 span {
	font-size: 1.2rem;
}
.bulbWrapper.active:hover .bulbInner.s22 span,
.bulbWrapper.today:hover .bulbInner.s22 span {
	font-size: 1.5rem;
}
.bulbWrapper.active:hover .bulbInner.s26 span,
.bulbWrapper.today:hover .bulbInner.s26 span {
	font-size: 1.8rem;
}

.bulbPulse {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	box-shadow: 0px 0px 1px 1px #0000001a;
}
.bulbPulse.s18 {
	width: 30px;
	height: 30px;
	transform: translateX(4px) translateY(5px);
}
.bulbPulse.s22 {
	width: 38px;
	height: 38px;
	transform: translateX(3px) translateY(6px);
}
.bulbPulse.s26 {
	width: 43px;
	height: 43px;
	transform: translateX(4px) translateY(7px);
}

.bulbWrapper.active .bulbPulse.s18 {
	animation: bulb-pulse-yellow 2s .2s infinite;
}
.bulbWrapper.active .bulbPulse.s22 {
	animation: bulb-pulse-yellow 2s .5s infinite;
}
.bulbWrapper.active .bulbPulse.s26 {
	animation: bulb-pulse-yellow 2s .8s infinite;
}
.bulbWrapper.today .bulbPulse {
	animation: bulb-pulse-blue 2s 1s infinite;
}

@keyframes bulb-pulse-yellow {
	0% {box-shadow: 0 0 0 0px rgba(248, 224, 126, 0.6);}
  100% {box-shadow: 0 0 0 16px rgba(248, 224, 126, 0);}
}
@keyframes bulb-pulse-blue {
	0% {box-shadow: 0 0 0 0px rgba(0, 159, 220, 1);}
  100% {box-shadow: 0 0 0 20px rgba(0, 159, 220, 0);}
}

#objectsContainer {
	position: absolute;
	left: 0px;
	top: 0px;
}

#objectsContainer .object {
	position: absolute;
}
#objectsContainer .object.contents:hover {
	cursor: pointer;
}

#objectsContainer .object.r1 {
	transform: rotate(10deg);
}

#objectsContainer .object.cat {
	background-image: url('../img/cat-sleep.svg');
}
#objectsContainer .object.cat:hover {
	background-image: url('../img/cat-eye.svg');
}

/* socks */
#objectsContainer .object.sock-1 {
	background-image: url('../img/sock-1.svg');
}
#objectsContainer .object.sock-2 {
	background-image: url('../img/sock-2-small.svg');
	transform-origin: 60% 40%;
	animation-name: swinging;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 4s;
	animation-duration: 3s;
}
#objectsContainer .object.sock-2:hover,
#objectsContainer .object.sock-2.active {
	background-image: url('../img/sock-2-full.svg');
	animation: none;
}
#objectsContainer .object.sock-3 {
	background-image: url('../img/sock-3.svg');
}

/* swinging animation */
@keyframes swinging {
    0% {transform: rotate(0);}
		3% {transform: rotate(5deg);}
    6% {transform: rotate(-2deg);}
    9% {transform: rotate(5deg);}
		12% {transform: rotate(0);}
}

/* adventkranz */
#objectsContainer .object.plate {
	background-image: url('../img/plate.svg');
}
#objectsContainer .object.candle-1,
#objectsContainer .object.candle-2,
#objectsContainer .object.candle-4 {
	background-image: url('../img/candle-violet.svg');
}
#objectsContainer .object.candle-1.burns,
#objectsContainer .object.candle-2.burns,
#objectsContainer .object.candle-4.burns {
	background-image: url('../img/candle-violet-burns.svg');
}
#objectsContainer .object.candle-3 {
	background-image: url('../img/candle-pink.svg');
}
#objectsContainer .object.candle-3.burns {
	background-image: url('../img/candle-pink-burns.svg');
}
#objectsContainer .object.candle-1:hover,
#objectsContainer .object.candle-2:hover,
#objectsContainer .object.candle-3:hover,
#objectsContainer .object.candle-4:hover {
	cursor: initial;
}

/* radio */
#objectsContainer .object.radio {
	background-image: url('../img/radio.svg');
	animation: radiowaves 2s .5s infinite;
}
/* radiowaves animation */
@keyframes radiowaves {
	0% {filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));}
  100% {filter: drop-shadow(0px 0px 26px rgba(255, 255, 255, 0.4));}
}

/* photo picture */
#objectsContainer .object.photo.v1 {
	background-image: url('../img/photo-1.svg');
}
#objectsContainer .object.photo.v2 {
	background-image: url('../img/photo-2.svg');
}
#objectsContainer .object.photo.v3 {
	background-image: url('../img/photo-3.svg');
}
#objectsContainer .object.photo.v4 {
	background-image: url('../img/photo-4.svg');
}
#objectsContainer .object.photo.v5 {
	background-image: url('../img/photo-5.svg?v=2');
}
#objectsContainer .object.photo.v6 {
	background-image: url('../img/photo-6.svg');
}

/* magazine */
#objectsContainer .object.magazine {
	background-image: url('../img/magazine-closed.svg');
	animation-name: openclose;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 4s;
	animation-duration: 5s;
}
#objectsContainer .object.magazine:hover,
#objectsContainer .object.magazine.active {
	background-image: url('../img/magazine-open.svg');
	animation: none;
}
/* open-close animation */
@keyframes openclose {
    0% {background-image: url('../img/magazine-closed.svg'); background-size: contain;}
		10% {background-image: url('../img/magazine-open.svg'); background-size: 100%;}
    20% {background-image: url('../img/magazine-closed.svg'); background-size: contain;}
}

/* globe */
#objectsContainer .object.globe {
	background-image: url('../img/globe.svg');
}

/* star */
#objectsContainer .object.star {
	background-image: url('../img/star.svg');
	animation: radiowaves 3s .75s infinite;
}

#objectsContainer .light-1,
#objectsContainer .light-2,
#objectsContainer .light-3 {
	background-image: url('../img/light-on.svg');
	animation-name: onoff;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 4s;
	animation-duration: 5s;
}
#objectsContainer .light-2 {
	animation-name: onoff-2;
	animation-delay: 2s;
	animation-duration: 4s;
}
#objectsContainer .light-3 {
	animation-delay: 3s;
	animation-duration: 6s;
}
#objectsContainer .r1 {
	transform: rotate(10deg);
}
#objectsContainer .r2 {
	transform: rotate(20deg);
}
#objectsContainer .r-1 {
	transform: rotate(-10deg);
}
#objectsContainer .r-2 {
	transform: rotate(-20deg);
}

/* on-off animation */
@keyframes onoff {
    0% {background-image: url('../img/light-on.svg'); background-size: contain;}
		10% {background-image: url('../img/light-off.svg'); background-size: 100%;}
    11% {background-image: url('../img/light-on.svg'); background-size: contain;}
}
@keyframes onoff-2 {
    0% {background-image: url('../img/light-on.svg'); background-size: contain;}
		20% {background-image: url('../img/light-off.svg'); background-size: 100%;}
    40% {background-image: url('../img/light-on.svg'); background-size: contain;}
}

/* presents */
#objectsContainer .object.present-violet {
	background-image: url('../img/present-violet.svg');
}
#objectsContainer .object.present-red {
	background-image: url('../img/present-red.svg');
	transform-origin: 60% 40%;
}
#objectsContainer .object.present-yellow {
	background-image: url('../img/present-yellow.svg');
}
#objectsContainer .object.present-violet,
#objectsContainer .object.present-red,
#objectsContainer .object.present-yellow {
	animation-name: wiggle;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-duration: 9s;
}
#objectsContainer .object.present-red {
	animation-delay: 2s;
	animation-duration: 8s;
}
#objectsContainer .object.present-yellow {
	animation-delay: 3s;
	animation-duration: 7s;
}
/* wiggle animation */
@keyframes wiggle {
    0% {transform: rotate(0);}
		1% {transform: rotate(5deg);}
    2% {transform: rotate(-2deg);}
    3% {transform: rotate(5deg);}
		4% {transform: rotate(0);}
}

#language {
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding-right: 8px;
	height: 40px;
	width: 89px;
	left: -49px;
	top: calc(50% - 160px);
	box-sizing: border-box;
	border-radius: 8px;
	background-color: rgba(0,130,180,0.9);
	transition: all 0.2s linear;
	box-shadow: 0 4px 20px -8px rgba(0,45,63,0.5);
	border: 1px solid rgba(0,130,180,0.2);
}
body.en #language {
	width: 98px;
	left: -58px;
}
#language:hover {
	left: -20px;
	background-color: rgba(0,45,63,0.9);
}
body.en #language:hover {
	left: -20px;
}
#language .icon {
	width: 24px;
	height: 24px;
	background-image: url('../img/world.svg');
	background-size: 24px;
	background-position: center;
}
#language:hover .icon {
	display: none;
}
#language .link {
	display: none;
}
#language:hover .link {
	display: block;
}
#language a {
	font-size: 16px;
	color: #fff;
}
#language a:hover {
	text-decoration: none;
}

#feedback {
	position: absolute;
	height: 66px;
	box-sizing: border-box;
	left: -26px;
	padding: 32px 20px 10px 20px;
	border-radius: 8px;
	top: 50%;
	background-color: rgba(0,130,180,0.9);
	transform: rotate(-90deg);
	transform-origin: left top 0;
	transition: all 0.2s linear;
	box-shadow: 0 4px 20px -8px rgba(0,45,63,0.5);
	border: 1px solid rgba(0,130,180,0.2);
}
#feedback:hover {
	left: -20px;
	background-color: rgba(0,45,63,0.9);
}
#feedback a {
	font-size: 16px;
	color: #fff;
}
#feedback:hover a {
	text-decoration: none;
}

#hiddenImages {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

#accordion {
	display: none;
	padding: 1rem;
}
#accordion .headline {
	box-sizing: content-box;
	height: 30px;
	padding: 11px 14px 8px 14px;
	background: #0082b4;
	border-radius: 8px;
	margin-bottom: 8px;
	cursor: pointer;
	box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.05),
      0 2px 2px hsl(0deg 0% 0% / 0.05),
      0 4px 4px hsl(0deg 0% 0% / 0.05),
      0 8px 8px hsl(0deg 0% 0% / 0.05),
      0 16px 16px hsl(0deg 0% 0% / 0.05);
}
#accordion .item.text .headline {
	cursor: auto;
}
#accordion .item.text .headline,
#accordion .item.lang .headline,
#accordion .item.feedback .headline {
	box-shadow: none;
	padding: 0;
}
#accordion .item.text .headline h2 {
	color: #fff;
}
#accordion .item.bulb.blue {
	margin-bottom: 24px;
}
#accordion .item.bulb.yellow .headline {
	background-color: var(--bulbYellow);
}
#accordion .item.bulb.blue .headline {
	background-color: var(--bulbBlue);
}
#accordion .item.bulb.blue .headline h2 {
	color: #fff;
}
#accordion .item.magazine .headline,
#accordion .item.magazine .link {
	background-color: var(--magazineBackgroundColor);
}
#accordion .item.magazine .headline h2,
#accordion .item.magazine .link {
	color: #fff;
}
#accordion .item.globe .headline,
#accordion .item.globe .link {
	background-color: var(--globeBackgroundColor);
}
#accordion .item.radio .headline,
#accordion .item.radio .link {
	background-color: var(--radioBackgroundColor);
}
#accordion .item.sock-2 .headline,
#accordion .item.sock-2 .link {
	background-color: var(--sockBackgroundColor);
}
#accordion .item.photo .headline,
#accordion .item.photo .link {
	background-color: var(--photoBackgroundColor);
}
#accordion .item.present-violet .headline {
	background-color: var(--violetBackgroundColor);
}
#accordion .item.present-violet .main {
	background-color: var(--violetLightColor);
}
#accordion .item.present-red {
	margin-bottom: 1rem;
}
#accordion .item.present-red .headline {
	background-color: var(--redBackgroundColor);
}
#accordion .item.present-red .main {
	background-color: var(--redLightColor);
}
#accordion .item.present-red .headline h2 {
	color: #fff;
}
#accordion .item.present-yellow .headline {
	background-color: var(--yellowBackgroundColor);
}
#accordion .item.present-yellow .main {
	background-color: var(--yellowLightColor);
}
#accordion .item .link {
	cursor: pointer;
}
#accordion .item.present-violet .link,
#accordion .item.present-red .link,
#accordion .item.present-yellow .link {
	background-color: #fff;
	color: #333;
}
#accordion .item.lang.de,
#accordion .item.lang.en {
	display: none;
}
body.de #accordion .item.lang.de {
	display: block;
}
body.en #accordion .item.lang.en {
	display: block;
}
#accordion .item.lang.de a,
#accordion .item.lang.en a,
#accordion .item.feedback a {
	color: #fff;
	text-decoration: underline;
}
#accordion h2 {
	margin-top: 3px;
	color: #333;
	font-size: 1rem;
	font-weight: 500;
}
#accordion .image {
	width: 100%;
	height: 100px;
}
#accordion .main {
	display: none;
	margin-bottom: 12px;
	border-radius: 0 0 8px 8px;
	background-color: var(--accordionBackgroundColor);
	padding: 1rem;
}
#accordion .image {
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 1rem;
}
#accordion .content p:first-child {
	margin-top: 0;
}
#accordion .link {
	color: #333;
	margin-top: 1rem;
	text-align: center;
	padding: 12px;
	border-radius: 4px;
}
#accordion .item.open .headline {
	margin-bottom: 0;
	border-radius: 8px 8px 0 0;
}
#accordion .item.open .main {
	display: block;
}

@media all and (max-width: 700px) {
	body {
		overflow-y: auto;
	}
	#mainTitle {
		position: relative;
		height: 30px;
	}
	#calendar {
		position: relative;
		background-size: 116%;
		background-color: #0082b4;
	}
	#accordion {
		display: block;
	}
	#bulbsContainer,
	#objectsContainer,
	#language,
	#feedback {
		display: none;
	}
	#mainTitle {
		top: 0;
		padding-top: 10px;
		background-color: #0082b4;
	}
	#mainTitle .headline {
		font-size: 26px;
		line-height: 30px;
		padding: 0 1.5rem;
	}
	.countDownTitle {
		font-size: 32px;
		padding: 0 1rem;
		margin: 0;
	}
	.countDown {
		gap: 1rem;
	}
	.countDown div {
		min-width: 90px;
	}
	.countDown div p:first-child {
		font-size: 2.5rem;
		line-height: 4rem;
	}
	.countDown div p:nth-child(2) {
		font-size: 0.8rem;
		margin: 0.5rem 0 0.75rem 0;
	}
}

@media all and (max-width: 500px) {
	.countDown {
		gap: 0.7rem;
	}
	.countDown div {
		min-width: 60px;
	}
	.countDown div p:first-child {
		font-size: 2rem;
		line-height: 3.5rem;
	}
	.countDown div p:nth-child(2) {
		font-size: 0.6rem;
	}
}