@charset "UTF-8";

/********** Kalender [ö] **********/

#kalender {
	position: relative;
	width: 100%;
}
@media screen and (max-width: 850px) {
	#kalender {
		padding: 0px 0px 0px 0px;
	}
}
@media screen and (min-width: 851px) {
	#kalender {
		padding: 0px 0px 30px 0px;
	}
}

#kalender_heute {
	position: relative;
	/*
	border-top: 2px solid rgb(var(--farbe_2));
	*/
}

#kalender_rest {
	position: relative;
	overflow: hidden;
	height: 0px;
	transition: height 0.3s;
	border-bottom: 2px solid rgb(var(--farbe_2));
}
#kalender_rest_innen {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#kalender div.kal_tag.heute {
	display: none;
}
#kalender div.kal_tag.heute div,
#kalender div.kal_monat,
#kalender div.kal_ausblick {
	position: relative;
	grid-column: 1 / span 2;
	margin: 0px 0px 0px 0px;
	font-size: 24px;
	line-height: 24px;
	white-space: nowrap;
}
#kalender div.kal_tag.heute div {
	padding: 7px 0px 7px 0px;
	font-family: "Archivo_SemiCondensed", sans-serif;
	font-weight: 600;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_monat {
	padding: 25px 0px 7px 0px;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_ausblick {
	padding: 25px 0px 7px 0px;
	font-family: "Archivo", sans-serif;
	font-weight: 500;
	color: rgb(var(--farbe_1));
}

#kalender div.kal_tag {
	position: relative;
	display: grid;
	border-top: 2px solid rgb(var(--farbe_2));
}
/*

#kalender div.kal_tag + div.kal_tag,
#kalender_rest_innen div.kal_tag:first-child {
	border-top: 2px solid rgb(var(--farbe_2));
}
*/
#kalender h4.kal_datum {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 6px 0px 0px 0px;
	font-family: "Archivo_ExtraCondensed", sans-serif;
	font-weight: 100;
	font-size: 28px;
	line-height: 28px;
	color: rgb(var(--farbe_2));
	white-space: nowrap;
}
#kalender h4.kal_datum > span {
	display: block;
	position: absolute;
	padding: 6px 0px 0px 0px;
	top: 0px;
	right: 7px;
	font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/*
#kalender h4.kal_datum > span > span {
}
*/
@media screen and (max-width: 540px), (min-width: 851px) {
	#kalender div.kal_tag {
		grid-template-columns: 60px 1fr;
	}
	#kalender h4.kal_datum > span > span {
		display: none;
	}
}
@media screen and (min-width: 541px) and (max-width: 850px) {
	#kalender div.kal_tag {
		grid-template-columns: 100px 1fr;
	}
}
#kalender div.kal_tagesprogramm {
	position: relative;
	border: 0px;
	width: 100%;
}
#kalender div.kal_tagesprogramm {
	font-family: "Archivo_Condensed", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: rgb(var(--farbe_2));
}
#kalender a.kal_zeile {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	cursor: pointer;
	color: rgb(var(--farbe_2));
	text-decoration: none;
	padding-top: 3px;
	padding-bottom: 4px;
	background-color: rgba(var(--farbe_2), 0);
	transition: background-color 0.15s;
}
#kalender a.kal_zeile:hover {
	background-color: rgba(var(--farbe_2), 0.1);
}
#kalender a.kal_zeile:first-child {
	padding-top: 11px!important;
}
#kalender a.kal_zeile:last-child {
	padding-bottom: 11px!important;
}

#kalender a.kal_zeile.extra {
	background-color: rgba(var(--farbe_1), 0.1)!important;
}
#kalender a.kal_zeile.extra:hover {
	background-color: rgba(var(--farbe_1), 0.2)!important;
}
#kalender a.kal_zeile.extra.titel {
	grid-template-columns: 1fr!important;
	padding-left: 3px;
	padding-right: 3px;
	font-weight: 700;
	color: rgb(var(--farbe_1))!important;
}

#kalender a.kal_zeile > * {
	mix-blend-mode: multiply;
}
#kalender div.kal_uhrzeit,
#kalender div.kal_vorstellung {
	position: relative;
	/* brauchen wir nicht:
	box-sizing: content-box;
	box-sizing: border-box;
	*/
}
#kalender a.kal_zeile + a.kal_zeile {
	border-top: 1px solid rgba(var(--farbe_2), 0.3);
	border-top: 1px solid rgba(var(--farbe_1), 1);
}

#kalender div.kal_uhrzeit {
	padding-left: 3px;
	color: rgb(var(--farbe_1));
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/*
#kalender div.kal_uhrzeit span.zeichen {
	margin: 0px 1px 0px 1px;
}
*/

#kalender div.kal_vorstellung {
	padding-right: 3px;
}
#kalender div.kal_vorstellung > div {
	position: relative;
}
#kalender div.kal_vorstellung div.kal_filmreihe {
	font-weight: 700;
	color: rgb(var(--farbe_1));
}
/*
#kalender div.kal_vorstellung div.kal_filmreihe span.normal {
	font-weight: 700!important;
}
*/
#kalender div.kal_vorstellung div.kal_uebertitel_klein {
	/*
	font-family: "Archivo_ExtraCondensed", sans-serif;
	*/
	font-style: italic;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_titel_frei,
#kalender div.kal_vorstellung div.kal_haupttitel {
	font-weight: 700;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_preview {
	font-weight: 700;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_uebertitel {
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_uebertitel em {
	font-family: "Archivo_Condensed", sans-serif;
	font-style: italic;
}
#kalender div.kal_vorstellung div.kal_titel {
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_subtitel {
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_subtitel_klein {
	/*
	font-family: "Archivo_ExtraCondensed", sans-serif;
	*/
	font-style: italic;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_titel span.omu {
	font-size: 14px;
	line-height: 14px;
}

#kalender div.kal_vorstellung div.kal_anwesenheit {
	/*
	font-family: "Archivo_ExtraCondensed", sans-serif;
	*/
	font-weight: 700;
	color: rgb(var(--farbe_2));
}
#kalender div.kal_vorstellung div.kal_anwesenheit::before {
	content: "";
	display: block;
	position: absolute;
	left: -40px;
	top: 3px;
	width: 31px;
	height: 13px;
	background-color: rgb(var(--farbe_2));
	-webkit-mask-image: url("../bilder/_aufbau/hand.svg");
	mask-image: url("../bilder/_aufbau/hand.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
#kalender div.kal_vorstellung div.kal_info_extra {
	font-family: "Archivo_ExtraCondensed", sans-serif;
	font-style: italic;
	color: rgb(var(--farbe_2));
}

#kalender div.kal_vorstellung sup {
	font-family: "Archivo", sans-serif!important;
	color: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 0;
}

/* alt Anfang */
#kalender div.kal_vorstellung div.kal_regie {
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_info_extra_1 {
	font-style: italic;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_vorfilm {
	font-style: italic;
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_info_extra_1,
#kalender div.kal_vorstellung div.kal_info_extra_2,
#kalender div.kal_vorstellung div.kal_info_extra_3 {
	font-weight: 400;
}
#kalender div.kal_vorstellung div.kal_info_extra_1 {
	color: rgb(var(--farbe_1));
}
#kalender div.kal_vorstellung div.kal_info_extra_2 {
	color: rgb(var(--farbe_2));
}
#kalender div.kal_vorstellung div.kal_info_extra_3 {
	color: rgb(var(--farbe_2));
}
/* alt Ende */

#kalender a.kal_zeile:first-child > div.tickets {
	margin-top: 7px;
}
@media screen and (max-width: 540px), (min-width: 851px) {
	#kalender div.kal_vorstellung > div:first-child {
		margin-right: 30px;
	}
	#kalender div.tickets span {
		display: none;
	}
	#kalender div.tickets::after {
		margin-left: 0px!important;
	}
}
@media screen and (min-width: 541px) and (max-width: 650px) {
	#kalender div.kal_vorstellung > div {
		margin-right: 30px;
	}
	#kalender div.kal_vorstellung > div:first-child {
		margin-right: 85px!important;
	}
}
@media screen and (min-width: 651px) and (max-width: 850px) {
	#kalender div.kal_vorstellung > div {
		margin-right: 85px;
	}
}

#kalender div.kal_keine_vorstellung {
	padding: 11px 0px 11px 3px;
	font-family: "Archivo_Condensed", sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	line-height: 20px;
	color: rgb(var(--farbe_1));
}

#kalender div.kalender_klappe {
	position: relative;
	padding: 12px 0px 12px 63px;
	font-family: "Archivo_Condensed", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: rgb(var(--farbe_2));
	border-top: 2px solid rgb(var(--farbe_2));
	cursor: pointer;
}
@media (hover: hover) { /* nicht bei Touch-Geräten */
	#kalender div.kalender_klappe:hover {
		color: rgb(var(--farbe_1));
	}
	#kalender div.kalender_klappe:hover::after {
		background-color: rgb(var(--farbe_1))!important;
	}
}
#kalender div.kalender_klappe.auf::before {
	display: inline;
	content: "Programm-Kalender erweitern";
	content: "Programm-Kalender ansehen";
	content: "Das gesamte Programm ansehen";
}
#kalender div.kalender_klappe.zu::before {
	display: inline;
	content: "Programm-Kalender reduzieren";
	content: "Programm reduzieren";
}
#kalender div.kalender_klappe::after {
	content: "";
	display: block;
	position: absolute;
	left: 30px;
	width: 20px;
	height: 11px;
	background-color: rgb(var(--farbe_2));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
#kalender div.kalender_klappe.auf::after {
	-webkit-mask-image: url("../bilder/_aufbau/kalender_klappe_auf.svg");
	mask-image: url("../bilder/_aufbau/kalender_klappe_auf.svg");
	top: 16px;
}
#kalender div.kalender_klappe.zu::after {
	-webkit-mask-image: url("../bilder/_aufbau/kalender_klappe_zu.svg");
	mask-image: url("../bilder/_aufbau/kalender_klappe_zu.svg");
	top: 15px;
}