body{
			font-family: Tahoma,Verdana,Arial,sans-serif;
			line-height: 1.1;
			background-image : url(../img/background.gif);
		}
		
		.container-kalender{
			padding: 1rem;
			border-radius: 1rem;
			background-color: rgba(158, 158, 158, 0.5);
			display: grid;
			/*grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));*/
			grid-template-columns: repeat(2, 1fr);
			max-width: 120rem;
			grid-gap: 12px;
		}
		
		
		.d02{
			background-color: rgb(255, 200, 0);
			color: #fff;
			height: 100px;
			border-radius: 1.0rem;
			box-shadow: inset 0 0 4em rgba(41, 45, 54, 0.8);
			transition: transform .2s; /*Animation*/
			width: 95%;
			max-width: 30em;
		}	
		
		.d02:hover{
			transform: scale(1.05); /*(110% zoom)*/
		}
		

		
		.d0{
			display: none;
			background-color: rgb(255, 200, 0) /*rgb(216, 177, 86) rgb(41, 45, 54) rgb(255, 200, 0) rgb(116, 168, 166) rgb(180,214,215) #2a2463*/;
			border-radius: 50%;
		}
		.d0 .content .shadow_d0{
			border-radius: 50%;
		}

		.shadow_d0{
			content: "";
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			box-shadow: inset 0 0 3em rgba(41, 45, 54, 0.8) /*rgba(0, 184, 150, 0.8)*/;
		}
		
		@media screen and (min-width:992px) {
		 /*nur für größere Screens anwenden*/
			
			.container-kalender{
				grid-template-columns: repeat(4, 1fr);
				align-content: center;
			}
			
		 }
		 
		 @media screen and (min-width:1200px) {
		 /*	Tannenabum-Layout
			nur für größte Screens anwenden*/
			
			.container-kalender{
				  display: grid;
				  /*grid-template-columns: repeat(10, 1fr);
				  grid-template-areas:
					'. . . . a1 a1 . . . .'
					'. . . a2 a2 b2 b2 . . .'
					'. . a3 a3 b3 b3 c3 c3 . .'
					'. a4 a4 b4 b4 c4 c4 d4 d4 .'
					'a5 a5 b5 b5 c5 c5 d5 d5 e5 e5'
					'. a6 a6 b6 b6 c6 c6 d6 d6 .'
					'. . a7 a7 b7 b7 c7 c7 . .'
					'. . a8 a8 b8 b8 c8 c8 . .';
				  */
				  grid-template-columns: repeat(12, 1fr);
				  grid-template-areas:
					'. . . . . a1 a1 . . . . .'
					'. . . . a2 a2 b2 b2 . . . .'
					'. . . a3 a3 b3 b3 c3 c3 . . .'
					'. . a4 a4 b4 b4 c4 c4 d4 d4 . .'
					'. a5 a5 b5 b5 c5 c5 d5 d5 e5 e5 .'
					'a6 a6 b6 b6 c6 c6 d6 d6 a7 a7 b7 b7'
					'. . c7 c7 a8 a8 b8 b8 c8 c8 . .';

			}
			.d02{display: none;}
			.d0 { grid-area: a1; 
				display: inline;}
			.d1 { grid-area: a2; }
			.d2 { grid-area: b2; }
			.d3 { grid-area: a3; }
			.d4 { grid-area: b3; }
			.d5 { grid-area: c3; }
			.d6 { grid-area: a4; }
			.d7 { grid-area: b4; }
			.d8 { grid-area: c4; }
			.d9 { grid-area: d4; }
			.d10 { grid-area: a5; }
			.d11 { grid-area: b5; }
			.d12 { grid-area: c5; }
			.d13 { grid-area: d5; }
			.d14 { grid-area: e5; }
			.d15 { grid-area: a6; }
			.d16 { grid-area: b6; }
			.d17 { grid-area: c6; }
			.d18 { grid-area: d6; }
			.d19 { grid-area: a7; }
			.d20 { grid-area: b7; }
			.d21 { grid-area: c7; }
			.d22 { grid-area: a8; }
			.d23 { grid-area: b8; }
			.d24 { grid-area: c8; }
		 }
		
		.door {
			/*padding-top: 95%;*/
			/*background-color: #2a2463;*/
			color: #fff;
			position:relative;
			width: 100%;
			transition: transform .2s; /*Animation*/
		}
		.door:before {
			content: "";
			display:block;
			padding-top: 95%;
		}
		
		.door:hover {
			transform: scale(1.05); /*(110% zoom)*/
			box-shadow: 5px 5px 15px rgba(94, 94, 94,0.9);
		}
		
		.content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden
		}
		
		
		img.open {
			-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
			filter: grayscale(100%);
			opacity: 0.8;
			flex-shrink: 0;
			height: 100%;
			
		}

		.content div.label{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgb(41, 45, 54, 0.4);
			color: #fff;
			text-align: center;
			opacity: 0.7;
			
		}
		
		.content:hover img.open, .content:hover div.label{
			-webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
			filter: grayscale(20%);
			opacity: 0.8;
			background-color: rgb(41, 45, 54, 0.8);
		}
		
		.content .postip {
			--size: 2rem;
			position: absolute;
			/*color: var(--bgcolor);*/
			color: #fff;
			font-size: calc(var(--size) * .75);
			/*font-weight: bold;*/
			right: calc(var(--size) * .25);
			top: calc(var(--size) * .25);
			line-height: var(--size);
			width: var(--size);
			height: var(--size);
			/*padding: calc(var(--size) * .01);*/
			transform: rotate(10deg);
			background-color: rgb(41, 45, 54, 0.8);
			border-radius: 20%;
			text-align: center;
			box-shadow: calc(var(--size) * .05) calc(var(--size) * .05) 0 #6d6f70;
		}

		img.closed {
			flex-shrink: 0;
			height: 100%;
			width: 100%;
		}
		
		.shadow:hover:after {
			content: "";
			position: absolute;
			height: 100%;
			width: 100%;
			box-shadow: inset 0 0 30px rgba(0, 184, 150, 0.8) /*rgba(52, 143, 46, 0.8) rgba(42, 36, 99, 0.8)*/;
			top: 0;
			left: 0;
			z-index: 1;
		}
		
		.d0 .content img {
			position: absolute;
			top: 2em;
			left: 0;
			width: 100%;
		}	
		.d0 .content div {
			position: absolute;
			bottom: 1.4em;
			font-size: 1.5rem;
			font-weight: 400;
			color: white;
			text-shadow: 2px 2px 4px #000000;
		}
		
		/*--------------------------------------------------------*/
		/*                     ZUSÄTZE                            */
		
		div.infos {
			background-color: rgb(221, 184, 116 /*216,177,86*/);
			color: rgb(41, 45, 54);
			padding: 1.2em 1.5em 1.2em 1.5em;
			border-radius: 1em;
			margin-left: 1.5em;
			margin-right: 2em;
			margin-bottom: 1.5em;
			box-shadow: 5px 5px 15px rgba(94, 94, 94,0.9);
		}
		
		button.infos{
			background-color: rgb(191, 155, 71) /*rgb(216,177,86)*/;
			color: #fff;
			margin-top: 1rem;
		}
		
		.infos .head{
			display: block;
			font-weight: bold;
			padding-top: 1em;			
		}
		 .infos a {
			color: #fcfcfc;
			text-decoration: underline;
		 }
		
		.no_underline:hover{
			text-decoration: none;
		}
		
		div.headline{
			/*background-color: rgb(245, 222, 181 /*247, 215, 156 /*216,177,86);*/
			color: rgb(41, 45, 54);
			padding: 0.2em 0.2em 0.2em 0.8em;
			margin-bottom: 1em;
			margin-top: 0.5em;
			font-size: 1.5em;
			font-weight: bold;
			border-bottom:1px solid gray;
			text-shadow: 2px -2px 2px rgb(191, 155, 71, 0.9);
			box-shadow: 0px 2px 2px rgb(191, 155, 71, 0.9);
		}
		
		div.infobox {
			background-color: rgb(221, 184, 116);
			color: rgb(41, 45, 54);
			padding: 0.5em 0.5em 0.5em 0.5em;
			border-radius: 1em;
			box-shadow: 5px 5px 15px rgba(94, 94, 94,0.9);
			margin:auto;
			width: 16em;
		}
		
		.formular{
			padding: 1rem;
			border-radius: 1rem;
			background-color: rgba(/*232, 223, 190,*//* 133, 132, 130,*//*200,200,200,*//* 23,162,184,*/141, 189, 196, 0.2);
		}
		
		@media (prefers-color-scheme: dark) {
		/* CSS Code wenn Dark Mode aktiv */ 
			.infos a {
				color: #fcfcfc;
			}
			div.infos {
				background-color: rgb(221, 184, 116);
				color: rgb(41, 45, 54);
				box-shadow: 5px 5px 15px rgba(94, 94, 94,0.9);
			}
			button.infos{
				background-color: rgb(191, 155, 71)
				color: #fff;
			}
			body{
				color: rgb(41, 45, 54);
			}
		}
		
		a.back{
			color: gray;
			font-size: 0.9em;
		}