:root {
  --Breite-Calender: 17.5rem;
  --Kantenlaenge-Tag: 2.3rem;
  --Abstand-Tage: 0.1rem;
}

#calender {
    width:var(--Breite-Calender);
    border: 2px solid var(--secondary-color-tint);
    border-radius: 1rem;
    max-width: 75vw;
    padding: 1rem;
    text-shadow: none;
    background-color: var(--background-color-dark);
    background-image: url(../img/texture/clean-gray-paper.png);
}

#calender div.after,
#calender div.before {
    color: inherit;
    background-color: inherit;
    transition-property: background-color, color, opacity;
    transition-duration: 0ms;
    transition-timing-function: ease-in-out;
    cursor: pointer;
    border: none;
    margin: var(--Abstand-Tage) calc(var(--Abstand-Tage) + 1px);
    width: calc(var(--Kantenlaenge-Tag) - 2px);
    height: calc(var(--Kantenlaenge-Tag) - 2*var(--Abstand-Tage) - 2px);
    line-height: calc(var(--Kantenlaenge-Tag) - 2px);
}



#calender div.after:first-child,
#calender div.before:first-child {
	/* width: calc(2.1rem); */
	margin-left: 0;
}

#calender div.after:last-child,
#calender div.before:last-child {
	margin-right: 0;
}


#calender>a{
    color: var(--secondary-color-dark);
    background-color: var(--secondary-color);
    float: left;
    box-sizing: border-box;
    border: solid 1px var(--secondary-color-tint);
    border-radius: 0.5rem;
    margin: var(--Abstand-Tage);
    background-image: url(../img/texture/clean-gray-paper.png);
    padding: 0;
    white-space: unset;
    width: unset;
}

#calender>a:hover, #calender>a:hover+a {
    color:var(--accent-color);
    background-color:var(--accent-color-light);
	text-shadow:    1px  1px 5px var(--accent-color-dark),
				    1px -1px 5px var(--accent-color-dark),
				   -1px  1px 5px var(--accent-color-dark),
				   -1px -1px 5px var(--accent-color-dark) !important;
}

.day {
    float:left;
    width: var(--Kantenlaenge-Tag);
    height: var(--Kantenlaenge-Tag);
    line-height: var(--Kantenlaenge-Tag);
    text-align: center;
    background-color: var(--primary-color);
    cursor: default;
    border-radius: 0.5rem;
    margin: var(--Abstand-Tage);
    border: solid 1px var(--primary-color-dark);
    box-sizing: border-box;
    position: relative;
    color: var(--primary-color-light);
    background-image: url(../img/texture/clean-gray-paper.png);
}

.day[onclick]{
    cursor: pointer;
}

.day[onclick]:hover{
    cursor: pointer;
    color: var(--accent-color);
    background-color: var(--accent-color-light);
    transition-property: background-color, color;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out;
}

.day.headline {
	background: unset;
	font-weight:bold;
	color: var(--secondary-color-dark);
	border-radius: 0;
	border: none;
}

.day.current {
    font-weight:bold;
    background-color: var(--primary-color-tint);
    color: var(--primary-color);
    border: solid 2px var(--accent-color-dark);
    box-shadow: 0 0 0.5rem 0 var(--accent-color-dark);
}
.day.passed {
    color:var(--background-color-dark);
    background-color: var(--background-color-tint);
}

.day.ausgebucht {
	opacity: 0.5;
}

.day.fastausgebucht {
	opacity: 0.7;
	background: repeating-linear-gradient(
				  -45deg,
				  var(--primary-color) 25px,
				  var(--primary-color-tint) 50px
				  );
}

.day.Feiertag.passed {
    color: var(--background-color-dark);
    background-color: var(--background-color-light);
}


.day.Feiertag {
    color: var(--primary-color-dark);
    background-color: var(--primary-color-tint);
}

.day.Feiertag>span {
	position: absolute;
	top: calc(var(--Kantenlaenge-Tag) / 3);
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.5rem;
	width: 100%;
	height: 0;
	text-align: center;
}
.day.Feiertag>span+span {
	top: calc(-1 * var(--Kantenlaenge-Tag) / 3);
}

.calender-headline {
	background: var(--secondary-color);
	display: table;
	border-radius: 0.7rem;
	margin: 0 -0.2rem 0.5rem -0.2rem;
	padding: 0 0.2rem;
	background-image: url(../img/texture/clean-gray-paper.png);
}

.calender-headline .headline:last-child {
	margin-left: 0.05rem;
}

div.day.before.Monat_zurueck, div.day.after.Monat_vor {
    width: calc((var(--Kantenlaenge-Tag) * 7) + (var(--Abstand-Tage) * 11));
    font-size: 2rem;
    line-height: 1.75rem;
    border-radius: 0.7rem;
}

#calender .clear {
    clear:left;
}
.pagination {
    text-align: center;
    margin-bottom: 0.5rem;
    min-height: 1.8rem;
    width: 100%;
    line-height:100%;
    font-weight: bold;
    display: table;
    background-color: var(--background-color-tint);
    background-image: url(../img/texture/clean-gray-paper.png);
    border-radius: 0.7rem;
}

.pagihead, #calender .pagination a {
   display:table-cell;
   text-align: center;
   height: 100%;
   font-size: 1rem;
   color: var(--secondary-color);
   text-shadow:    1px  1px 1px var(--secondary-color-light),
				   1px -1px 1px var(--secondary-color-light),
				  -1px  1px 1px var(--secondary-color-light),
				  -1px -1px 1px var(--secondary-color-light);
   white-space: nowrap;
}


#calender .pagination a {
    font-size: 1.8rem;
    transform: translateY(6%);
    background: none;
    width: unset;
}

#calender .pagination a:hover {
    color: var(--accent-color);
}