#calendar {
	width: 300px;
	position: relative;
	height: 100px;
}

#calendar [type="radio"] {
 	display: none;
}

#calendar [for^="p-cal"] {
    position: absolute;
    top: 0;
    min-width: 65px;
    height: 18px;
}

#calendar [for="p-cal-1"] {
	left: 0px;
	width: 70px;
	height:20px;
	line-height:20px;
	letter-spacing:1px;
	background-color:#d6d6d6;
	font-family: 'calibri';
	font-size: 10px;
	color: #5a5a59;
	text-align: center;
	padding: 4px;
}

#calendar [for="p-cal-2"] {
	left: 75px;
	width: 70px;
	height:20px;
	line-height:20px;
	letter-spacing:1px;
	background-color:#d6d6d6;
	font-family: 'calibri';
	font-size: 10px;
	color: #5a5a59;
	text-align: center;
	padding: 4px;
}

#calendar [for="p-cal-3"] {
	left: 150px;
	width: 70px;
	height:20px;
	line-height:20px;
	letter-spacing:1px;
	background-color:#d6d6d6;
	font-family: 'calibri';
	font-size: 10px;
	color: #5a5a59;
	text-align: center;
	padding: 4px;
}

#calendar [for="p-cal-4"] {
	left:225px;
	width: 70px;
	height:20px;
	line-height:20px;
	letter-spacing:1px;
	background-color:#d6d6d6;
	font-family: 'calibri';
	font-size: 10px;
	color: #5a5a59;
	text-align: center;
	padding: 4px;
}

#calendar .p-cal-content {
    position: absolute;
    top: 30px;
  	width:100%;
    opacity:0;
	height:140px;
	overflow: auto:
	scrollbar-width: thin;
}

#calendar input:checked + label {
	text-align: center;  
	font-family: "Calibri"; 
	font-size: 10px; 
	color: #d6d6d6; 
	text-transform: uppercase;
	letter-spacing:1px;
	padding: 4px;
	display: inline-block;
	height:20px;
	line-height:20px;
	background-color:#5a5a59;
}

#calendar input:checked + label + .p-cal-content {
    z-index: 5;
    opacity: 1;
}

.calendarbox {
	height: 140px;
	padding: 10px;
	overflow: auto;
	scrollbar-width:thin;
}

.day{
	height: 17px; 
		padding: 3px; 
	font-weight: 400;
	text-align: right;
	background-color: rgba(146, 158, 170, 0.3);
}

.dayn{
	height: 17px; 
	padding: 3px; 
	font-weight: 400;
	text-align: right;
	background-color: rgba(146, 158, 170, 0.1);
}

.daye{
	height: 17px; 
	padding: 3px; 
	font-weight: 700;
	text-align: right;
	background-color:rgba(220, 122, 122, 0.2);
}


/*POPUP KALENDER*/
.accpop {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:hsla(0,0%,0%,0.3);
    z-index: 99;
    opacity:0;
    -webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    pointer-events:none;
}


.accpop:target {
    opacity:1;
    pointer-events: auto;
}

/* Hier wird das Popup definiert! */
.accpop>.pop {
	font-family: Calibri;
	color: #000;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 400;
    position:relative;
    margin:10% auto;
    width:400px;
   	height:200px;
    box-sizing:border-box;
    padding:20px;
    background: #d1d1d1;
    border: 3px solid #a6a6a6;
    text-align:justify;
    overflow:auto;
    z-index:999;
}

.accpop>.closepop {
    position:absolute;
    right:-5px;
    top:-5px;
    width:100%;
    height:100%;
    z-index: 1;
}