* {
	margin: 0;
}

*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-default-family);
	font-weight: var(--font-default-weight);
	font-size: var(--font-default-size);
	background-color: var(--color-white);
	color: var(--color-text);
	min-width: var(--body-min-width);
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
	box-sizing: border-box;
	max-width: 100%;
}

b, strong {
	font-weight: var(--font-default-weight-bold);
}

i, em {
	font-style: var(--font-default-italic);
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

.content hr {
	margin: 1em 0;
	height: 0;
	border: 0;
	border-top: 1px solid var(--color-grey);
}

.width {
	width: 100%;
	max-width: var(--content-max-width);
	padding: 0 40px;
	box-sizing: border-box;
	margin: 0 auto;
}

	.width-wide {
		max-width: var(--content-max-width-wide);
	}

	@media ( max-width: 680px ) {

		.width {
			padding-left: 20px;
			padding-right: 20px;
		}

	}

.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 9999;
	padding: 10px 20px;
	background-color: var(--color-black);
	color: var(--color-white);
}

	.screen-reader-text:focus {
		top: 0;
	}

.content {
	line-height: var(--font-default-line-height);
}

	.content ul,
	.content ol {
		margin: 0;
		padding-left: 20px;
	}

		.content ul {
			list-style-type: disc;
		}

		.content ol {
			list-style-type: decimal;
		}

	.content ul.no-list-style,
	.content ol.no-list-style {
		padding: 0;
		list-style-type: none;
	}

	.content * + p,
	.content * + ul,
	.content * + ol,
	.content * + img,
	.content * + picture,
	.content * + svg,
	.content * + video,
	.content * + blockquote,
	.content * + dl,
	.content * + figure,
	.content * + form,
	.content * + h1,
	.content * + h2,
	.content * + h3,
	.content * + h4,
	.content * + h5,
	.content * + h6,
	.content * + hr,
	.content * + nav,
	.content * + pre,
	.content * + table {
		margin-top: 1em;
	}

	.content h2:not(:first-child) {
		margin-top: 2em;
	}

	.content h3:not(:first-child) {
		margin-top: 1.8em;
	}

	.content h4:not(:first-child),
	.content h5:not(:first-child),
	.content h6:not(:first-child) {
		margin-top: 1.5em;
	}

	.content a {
		color: var(--color-highlight);
		text-decoration: none;
	}

		.content a:hover {
			text-decoration: underline;
		}

img {
	max-width: 100%;
	height: auto;
}

.content .button,
body .content .wp-element-button {
	text-transform: uppercase;
	background: var(--color-highlight) !important;
	color: var(--color-text) !important;
	padding: 10px 20px;
	border: 0 !important;
	display: inline-block;
	border-radius: 0;
	text-decoration: none !important;
}

	.content .button:hover,
	.content .button:focus,
	body.page-template-spielplan .header .button-spielplan,
	body .content .wp-element-button:hover,
	body .content .wp-element-button:focus {
		color: var(--color-highlight) !important;
		background: var(--color-text) !important;
	}

.wp-block-buttons {
	margin: 1em 0;
}

.header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
	height: var(--header-height);
	background: var(--color-white);
}

	.header .width {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: calc(var(--header-height) - var(--topbar-height));
	}

	.header a {
		color: var(--color-black);
		text-decoration: none;
	}

		.header a:hover,
		.header a:focus,
		.header .current-menu-item > a,
		.header .current-menu-parent > a {
			color: var(--color-highlight);
		}

	.header .topbar {
		background: var(--color-grey-light);
		text-align: right;
		height: var(--topbar-height);
		box-sizing: border-box;
	}

	.header .logo {
		display: inline-block;
		margin: 0 10px 0 0;
		color: transparent !important;
		width: 280px;
		height: 66px;
		vertical-align: middle;
		overflow: hidden;
		background: url(../img/logo.svg) no-repeat center center / contain;
	}

	.header .menu {
		display: inline-block;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		.header .menu li {
			display: inline;
			margin: 0;
			position: relative;
		}

			.header .menu li a {
				display: inline-block;
				padding: 5px;
			}
			
				.header .menu li .sub-menu li {
					display: block;
					white-space: nowrap;
				}

	.header nav {
		display: none;
	}

		.header.menu-open nav {
			display: block;
			position: absolute;
			left: 0;
			top: var(--header-height);
			z-index: 100;
			background: var(--color-white);
			width: 100%;
			max-height: calc(100vh - var(--header-height));
			overflow-y: auto;
		}

			.header.menu-open nav .menu {
				width: 100%;
				text-align: center;
				padding-bottom: 20px;
				font-size: 1.1em;
			}

			.header.menu-open nav .menu li {
				display: block;
			}
			
			.header.menu-open nav .menu a {
				display: block;
			}

			.header.menu-open nav .menu li.menu-item-has-children .sub-menu {
				display: block;
				font-size: 0.8em;
				padding: 5px 0;
				display: none;
			}
			
				.header.menu-open nav .menu li.menu-item-has-children.sub-menu-open .sub-menu {
					display: block;
				}

	.header .menu-icon {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: 20px;
		width: 30px;
		height: 40px;
		cursor: pointer;
		z-index: 50;
	}

		.header .menu-icon .icon,
		.header .menu-icon .icon:before,
		.header .menu-icon .icon:after {
			pointer-events: none;
			display: block;
			height: 3px;
			background: var(--color-black);
			width: 100%;
			left: 0;
			top: 50%;
			position: absolute;

			-moz-transform: translate(0px, -50%);
			-webkit-transform: translate(0px, -50%);
			-o-transform: translate(0px, -50%);
			-ms-transform: translate(0px, -50%);
			transform: translate(0px, -50%);

			-webkit-transition: all 200ms ease-in-out;
			-o-transition: all 200ms ease-in-out;
			transition: all 200ms ease-in-out;
		}

			.header .menu-icon .icon:before,
			.header .menu-icon .icon:after {
				content: "";
			}

			.header .menu-icon .icon:before {
				margin-top: -8px;
			}

				.header .menu-icon:hover .icon:before,
				.header .menu-icon:focus .icon:before {
					margin-top: -6px;
				}

			.header .menu-icon .icon:after {
				margin-top: 8px;
			}

				.header .menu-icon:hover .icon:after,
				.header .menu-icon:focus .icon:after {
					margin-top: 6px;
				}

		.header.menu-open .menu-icon .icon {
			background-color: transparent;
		}

			.header.menu-open .menu-icon .icon:before {
				margin-top: 0;

				-moz-transform: rotate(45deg) translate(0px, 0px);
				-webkit-transform: rotate(45deg) translate(0px, 0px);
				-o-transform: rotate(45deg) translate(0px, 0px);
				-ms-transform: rotate(45deg) translate(0px, 0px);
				transform: rotate(45deg) translate(0px, 0px);
			}

			.header.menu-open .menu-icon .icon:after {
				margin-top: 0;

				-moz-transform: rotate(-45deg) translate(0px, 0px);
				-webkit-transform: rotate(-45deg) translate(0px, 0px);
				-o-transform: rotate(-45deg) translate(0px, 0px);
				-ms-transform: rotate(-45deg) translate(0px, 0px);
				transform: rotate(-45deg) translate(0px, 0px);
			}

		body.header-small .header .menu-icon {
			top: 0;
		}

	@media ( max-width: 680px ) {

		.header .topbar {
			display: none;
		}

			.header.menu-open .topbar {
				display: block;
				height: auto;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
				z-index: 200;
			}

		:root {
			--topbar-height: 0;
			--header-height: 50px;
		}

		.header > .width {
			height: 100%;
		}

		.header .logo {
			width: 140px;
			height: 38px;
		}

	}

.footer {
	height: var(--footer-height);
	background: var(--color-aquamarine);
	color: var(--color-black);
	padding: 20px 0;
	box-sizing: border-box;
	font-size: 0.9em;
}

	.footer a {
		color: var(--color-black);
		text-decoration: none;
	}

		.footer a:hover,
		.footer .current-menu-item a {
			text-decoration: underline;
		}

	.footer .menu {
		display: inline-block;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		.footer .menu li {
			display: inline;
			padding: 5px;
			margin: 0;
		}

	.footer #menu-social li {
		padding: 0;
	}

		.footer #menu-social a {
			display: inline-block;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			color: transparent;
			overflow: hidden;
			padding: 0;
			background: var(--color-black);
		}
		
			.footer #menu-social a:hover {
				background: var(--color-white);
			}

		.footer #menu-social .facebook a {
			mask: url(../img/icons/social/facebook.svg) no-repeat center center / contain;
		}

		.footer #menu-social .instagram a {
			mask: url(../img/icons/social/instagram.svg) no-repeat center center / contain;
		}

		.footer #menu-social .soundcloud a {
			mask: url(../img/icons/social/soundcloud.svg) no-repeat center center / contain;
		}

		.footer #menu-social .youtube a {
			mask: url(../img/icons/social/youtube.svg) no-repeat center center / contain;
		}

	.footer .columns {
		align-items: center;
		gap: 20px;
		justify-content: space-between;
		flex-wrap: wrap;
	}

		.footer .columns .column {
			flex: none;
		}

	.footer .footer-column-social {
		text-align: center;
	}

	.footer .menu + .menu {
		margin-left: var(--spacing);
	}

	@media ( max-width: 1080px ) {

		:root {
			--footer-height: auto;
		}

	}

.main {
	padding-top: calc(var(--header-height) + var(--spacing));
	padding-bottom: var(--spacing);
	box-sizing: border-box;
	min-height: calc(100vh - var(--footer-height));
}

	@media ( max-width: 680px ) {

		.main {
			padding-top: calc(var(--header-height) + var(--spacing-half));
		}

	}

.youtube-embed {
	background: var(--color-black);
	width: 100%;
	height: auto;
}

	.youtube-embed iframe {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

.columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--spacing);
}

	.columns .column {
		flex: 1;
	}

.nav-links {
	text-align: center;
	padding: 20px 0;
}

.main .slideshow {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
}

	.main .slideshow li + li {
		margin-top: 1em;
	}

		.main .tns-outer .slideshow li + li {
			margin: 0;
		}

	.tns-outer {
		position: relative;
	}

		.tns-outer .tns-controls button {
			position: absolute;
			left: 0;
			top: 0;
			height: calc(100% - 20px);
			min-width: 20%;
			box-sizing: border-box;
			border: 0;
			padding: 0;
			outline: none;
			z-index: 10;
			cursor: pointer;
			color: transparent !important;
			background: transparent !important;
		}
		
			.tns-outer .tns-controls button + button {
				left: auto;
				right: 0;
			}

		.tns-outer .tns-nav {
			display: block;
			width: 100%;
			text-align: center;
		}

			.tns-outer .tns-nav button {
				display: inline-block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				padding: 0;
				border: 0;
				outline: none;
				background: var(--color-grey-light-mid);
				margin: 0 2px;
				cursor: pointer;
			}

				.tns-outer .tns-nav button.tns-nav-active,
				.tns-outer .tns-nav button:hover {
					background: var(--color-black);
				}

		.tns-outer button[data-action="start"],
		.tns-outer button[data-action="stop"] {
			display: none;
		}

.main-columns {
	padding: 0 var(--spacing);
	align-items: stretch;
}

	.main-columns .column-1 {
		position: relative;
	}

		.main-columns .column-1 .side-image {
			position: sticky;
			top: calc(var(--header-height) + var(--spacing-half));
		}

	@media ( max-width: 1080px ) {

		.main-columns {
			padding-left: var(--spacing-half);
			padding-right: var(--spacing-half);
			gap: var(--spacing-half);
		}

		.main-columns .column-1 {
			flex-basis: 35%;
			flex-shrink: 1;
		}

		.main-columns .column-2 {
			flex-basis: 65%;
			flex-grow: 1;
		}

	}

	@media ( max-width: 580px ) {

		.main-columns {
			flex-wrap: wrap;
		}

		.main-columns .column-1 {
			flex-basis: 100%;
			max-width: 100%;
		}
		
		.main-columns .column-2 {
			flex-basis: 100%;
			max-width: 100%;
		}

	}

.side-image {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center center;
}

.content .credits-list {
	display: block;
	padding: 0;
	list-style-type: none;
	text-wrap: balance;
}

	.content .credits-list li {
		display: inline;
	}

.event-status {
	display: inline-block;
	vertical-align: middle;
	color: transparent;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-grey);
	cursor: default;
}

	.event-status.tickets-available {
		background: var(--color-ticket-status-green);
	}
	.event-status.remaining-tickets {
		background: var(--color-ticket-status-yellow);
	}
	.event-status.sold-out {
		background: var(--color-ticket-status-red);
	}

.content .schedule-legend {
	display: block;
	text-align: right;
	font-size: 0.8em;
	margin-bottom: 10px;
}

	.schedule-legend li {
		display: inline-block;
		vertical-align: middle;
	}
	
		.schedule-legend li + li {
			margin-left: 1em;
		}

.schedule-table {
	border-collapse: collapse;
	width: 100%;
	--cell-padding: 8px;
	margin-left: calc(-1 * var(--cell-padding));
	margin-right: calc(-1 * var(--cell-padding));
}

	.schedule-table--condensed {
		--cell-padding: 5px;
		font-size: 0.9em;
	}

	.schedule-table td {
		padding: var(--cell-padding);
		border-bottom: 1px solid var(--color-black);
		vertical-align: middle;
	}

		.schedule-table tr:last-child td {
			border-bottom: 0;
		}

	.schedule-table__datetime {
		width: 140px;
	}

	.schedule-table__status,
	.schedule-table__link,
	.schedule-table__seniors {
		line-height: 1;
		width: 20px;
	}

	.schedule-table time {
		display: flex;
		justify-content: space-between;
		gap: 5px;
	}
	
		.schedule-table time .event-day {
			flex-grow: 1;
		}

	.content .schedule .event-link {
		display: inline-block;
		vertical-align: middle;
		color: transparent;
		overflow: hidden;
		width: 20px;
		height: 20px;
		background: url(../img/icons/tickets.svg) no-repeat center center / contain;
	}

	.content .schedule .seniors {
		display: inline-block;
		vertical-align: middle;
		color: transparent;
		overflow: hidden;
		width: 20px;
		height: 20px;
		background: url(../img/icons/seniors.svg) no-repeat center center / contain;
	}

	@media ( max-width: 580px ) {

		.schedule-table {
			--cell-padding: 3px;
		}

		.schedule-table__datetime {
			width: 100px;
			min-width: 100px;
		}

		.schedule-table time {
			display: block;
		}

		.schedule-table__title {
			min-width: 150px;
		}

		.schedule-wrapper {
			margin-left: -10px;
			margin-right: -10px;
			overflow-x: auto;
		}

	}

.content .productions-list {
	list-style-type: none;
	margin: 40px 0 0;
	padding: 0;
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

	.content .productions-list li {
		flex-basis: 200px;
		flex-shrink: 1;
		flex-grow: 1;
	}

	.content .productions-list li img {
		aspect-ratio: 8/15;
		object-fit: cover;
		object-position: center center;
		display: block;
		width: 100%;
		height: auto;
	}

	.content .productions-list__image {
		display: block;
		background: var(--color-black);
		aspect-ratio: 8/15;
	}

	.content .productions-list__title {
		display: block;
		margin: 5px 0 0;
		text-wrap: balance;
	}

.news-overview {
}

	.news-overview h1 {
		margin-bottom: 40px;
	}

.newslist {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

	.newslist .newspost {
		width: calc(100% / 3 - 20px);
		margin-bottom: 20px;
	}

	.newslist a {
		color: var(--color-text);
		display: block;
	}

		.newslist a .newspost-title {
			color: var(--color-highlight);
		}

		.newslist a:hover,
		.newslist a:focus {
			text-decoration: none;
		}

			.newslist a:hover .newspost-title,
			.newslist a:focus .newspost-title {
				color: inherit;
			}

	@media ( max-width: 980px ) {

		.newslist .newspost {
			width: calc(100% / 2 - 20px);
		}

	}

	@media ( max-width: 680px ) {

		.newslist .newspost {
			width: 100%;
		}

	}