@charset "utf-8";
/* CSS Document */

.kalender {
	color: var(--color);
	/* background: var(--bg-color-trans); */
	user-select: none;
}

.monthdom {
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	/* outline: solid 1px var(--color); */
}

.monthdom[is-current] {
	display: flex;
}

.daydoms {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.daydom,
.weekname {
	width: calc(100% / 7);
	/* background: var(--bg-color-trans); */
	outline: solid 1px white;
	min-height: 90rem;
	font-size: 0.8em;
	line-height: 1.2em;
}

.daydoms,
.weekname {
	background: var(--bg-color-trans);
}

.weekname {
	font-family: 'medium';
	padding: 10rem;
	z-index: 1;
	min-height: 45rem;
	/* background: rgb(48 48 48 / 79%); */
}

.daydom {
	display: flex;
	flex-direction: column;
}

.daydom:before {
	position: relative;
	padding: 4rem;
	padding-left: 8rem;
	font-family: 'medium';
	font-size: 1.25em;
	color: var(--light-grey);
	color: var(--color);
	content: attr(day-in-month);
	/* background: #ffffff21; */
	/* outline: 1px solid var(--bg-color); */
}

.daydom[month-info="current"][day-in-month="1"]:before {
	font-size: 1.25em;
	content: attr(day-in-month)'. ' attr(month-name);
}

.daydom:not([month-info="current"])>* {
	display: none;
}

.daydom:not([month-info="current"])>*,
.daydom:not([month-info="current"]):after,
.daydom:not([month-info="current"]):before {
	opacity: 0.333;
}

.daydom:not([month-info="current"]):before {
	/* opacity:0.25; */
}

body[device-mode="mobile"] .daydom[is-older-than-yesterday] {
	display: none;
}

body:not([device-mode="mobile"]) .daydom[is-older-than-yesterday] {
	opacity: 0.333;
}

.event {
	padding: 8rem;
	height: 100%;
	color: var(--color);
	transition: 0.4s 0.1s color, 0.6s 0.1s outline;
	cursor: pointer;
}

body:not([device-mode="mobile"]) .event:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-image: var(--thumb-url);
	background-size: cover;
	background-position: center center;
	filter: brightness(0.4);
	opacity: 0;
	transition: 0.6s 0.1s opacity;
	border-top: solid 1px transparent;
}

@media (hover:none) {
	body:not([device-mode="mobile"]) .event:before {
		opacity: 1;
		filter: brightness(0.3);
	}

	body:not([device-mode="mobile"]) .event {
		border-top: solid 1px var(--color);
	}

	body:not([device-mode="mobile"]) .event .location {
		opacity: 0;
	}
}

body:not([device-mode="mobile"]) .event[is-hovered] {
	color: white;
	outline: solid 1px var(--color);
}


body:not([device-mode="mobile"]) .event[is-hovered]:before {
	opacity: 0.5;
}

body:not([device-mode="mobile"]) .event[is-hovered]:hover:before {
	opacity: 1;
}

.event[event-page-type="jott"],
body:not([device-mode="mobile"]) .event[event-page-type="jott"][is-hovered] {
	--color: var(--jott-color);
	color: var(--jott-color);
}

.event .title {
	font-family: 'medium';
	transition: 0.6s 0.1s filter;
	pointer-events: none;
}

body[device-mode="tablet"] .event .title {
	font-size: 0.8em;
	line-height: 1.2em;
	clip-path: inset(-8rem);
}

.event:not(:first-of-type) {
	outline: solid 1px var(--color);
}

.event .location {
	opacity: 0;
	font-size: 0.8em;
	line-height: 1.34em;
	pointer-events: none;
}

.event[is-hovered] .location {
	opacity: 1;
	transition: 0.6s 0.1s opacity;
}

.event .genre {
	display: none;
	pointer-events: none;
}

.event .group {
	display: none;
	pointer-events: none;
}

.montheader {
	width: 100%;
	display: flex;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-top: 8rem;
	margin-bottom: 8rem;
	position: sticky;
	top: 0;
	z-index: 99999;
	pointer-events: none;
}

.montheader>* {
	pointer-events: all;
}

body[device-mode="desktop"] .montheader {
	top: 48rem;
	transition: 0.3s filter;
}

.montheader>* {
	font-family: 'medium';
	background: var(--bg-color-trans);
	/* outline: solid 1px black; */
}

.kalender[is-first] .montheader>.prevbt,
.kalender .monthdom:has(.daydom[is-older-than-yesterday]) .montheader>.prevbt {
	color: rgb(255 255 255 / 0.1);
	pointer-events: none;
}

.kalender[is-last] .montheader>.nextbt {
	color: rgb(255 255 255 / 0.1);
	pointer-events: none;
}

.montheader>.prevbt {
	margin-left: auto;
	cursor: pointer;
	transition: color 0.3s;
}

.montheader>.nextbt {
	margin-right: auto;
	cursor: pointer;
	transition: color 0.3s;
}

.montheader>.nextbt:hover,
.montheader>.prevbt:hover {
	color: var(--hover-color);
}

.monthname {
	width: 230rem;
	text-align: center;
	pointer-events: none;
}

.monthname[hide-year] .year {
	display: none;
}

.eventheader {
	width: 100%;
	display: flex;
	height: 1.2em;
	pointer-events: none;
	z-index: 99;
	margin-bottom: 4rem;
}

.uhrzeit {
	font-size: 0.8em;
}

.location2 {
	display: none;
}

.ticketbt {
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	top: -5rem;
	right: -5rem;
	transform: scale(1.2);
	cursor: pointer;
	pointer-events: all;
	opacity: 0;
	transition: opacity 0.5s 0.1s;
}

.ticketbt[href=""] {
	display: none;
}

body:not([device-mode="desktop"]) .ticketbt {
	pointer-events: all;
	opacity: 1;
	transition: 0.3s transform, 0.4s 0.1s opacity;
}

body[device-mode="desktop"] .ticketbt:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	border: 1.25em solid transparent;
	border-right: 1.25em solid var(--bg-color-trans);
	border-top: 1.25em solid var(--bg-color-trans);
	box-sizing: content-box;
}

body[device-mode="desktop"] .event[is-hovered] .ticketbt {
	pointer-events: all;
	opacity: 1;
}

.ticketbt[not-bookable] {
	pointer-events: none !important;
	filter: contrast(0.25) !important;
}

.ticketbt .svgicon {
	--svgicon-url: var(--icon-ticket);
	background: var(--color);
	transition: 0.3s background;
}

.ticketbt[not-bookable] .svgicon {
	--svgicon-url: var(--icon-ticket-sold);
}

.ticketbt:not([not-bookable]):hover .svgicon {
	background: var(--logo-color);
}



/* mobile */
body[device-mode="mobile"] .monthdom {
	display: block;
	flex: none;
}

body[device-mode="mobile"] .monthdom[is-past] {
	display: none;
}

body[device-mode="mobile"] .montheader {
	margin: 0;
	outline: solid 1px var(--color);
	min-height: 56rem;
	line-height: 56rem;
}

body[device-mode="mobile"] .montheader .monthname {
	width: 100%;
}

body[device-mode="mobile"] .montheader>.prevbt,
body[device-mode="mobile"] .montheader>.nextbt,
body[device-mode="mobile"] .weekname,
body[device-mode="mobile"] .daydom:not([month-info='current']),
body[device-mode="mobile"] .daydom[has-no-events] {
	display: none;
}

body[device-mode="mobile"] .daydom {
	width: 100%;
}

body[device-mode="mobile"] .daydom:before {
	content: attr(weekname-short)' ' attr(day-in-month)'.';
	font-size: 1em;
	padding-bottom: 0;
}

body[device-mode="mobile"] .event .title {
	padding-right: 40rem;
}

body[device-mode="tablet"] .event .ticketbt,

body[device-mode="mobile"] .event .ticketbt {
	width: 1.5em;
	height: 1.5em;
}

body[device-mode="mobile"] .event .location {
	display: none;
}

body[device-mode="mobile"] .event .location2 {
	display: block;
	font-size: 0.8em;
	margin-left: 8rem;
}

body[device-mode="mobile"] .event .location2 {
	display: block;
	font-size: 0.8em;
	margin-left: 8rem;
}


span.premiere {
	color: var(--logo-color);
}

.bg {
	filter: blur(8px);
}