/* @group FONTS */

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
 	font-family: 'Reenie Beanie';
  src: url('../fonts/ReenieBeanie-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--body-min-width: 320px;
	
	--color-primary: 			#FD7127; /* Orange */
	--color-secondary: 		#011966; /* Blue */
	
	--color-base: 					var(--color-secondary);
	--color-white: 				#fff;
	--color-grey: 					#9b9b9b;
	--color-grey-light:		#cccccc;
	--color-grey-subtle: 	#ededed;
	
	--font-family: 						'Open Sans', Helvetica, Arial, sans-serif;
	--font-family-handwrite: 	'Reenie Beanie', Times, serif;
	
	--font-sm: 	400 clamp(13px, 1.6vw, 16px)/1.4em var(--font-family);
	--font: 		400 clamp(15px, 1.9vw, 19px)/1.5em var(--font-family);
	
	--font-handwrite-xs: 	400 clamp(18px, 2.4vw, 24px)/1em var(--font-family-handwrite); /* Logo, Menu-toggle */
	--font-handwrite-sm: 	400 clamp(24px, 2.8vw, 28px)/1em var(--font-family-handwrite); /* Links */
	--font-handwrite: 		400 clamp(32px, 3.6vw, 36px)/1em var(--font-family-handwrite); /* H2 */
	--font-handwrite-lg: 	400 clamp(36px, 4.8vw, 48px)/1em var(--font-family-handwrite); /* H1 */
	
	--spacing-block-sm: 	clamp(1rem, 4vw, 2rem);
	--spacing-block: 		clamp(2rem, 8vw, 4rem);
	--spacing-block-lg:	clamp(3rem, 12vw, 6rem);

	--spacing-inline: 		 	clamp(1.5rem, 6vw, 3rem);
	--spacing-inline-lg: 	clamp(2rem, 8vw, 4rem);
	
	--shadow: 		.05em .05em .15em rgba(0,0,0,.25);
	--shadow-lg:		.05em .05em .3em rgba(0,0,0,.5);
}

/* @end */

/* @group BASE */

html,
body {
	min-width: 320px;
	font: var(--font);
	color: var(--color-base);
}

body {
	overflow: hidden;
}

strong {
	font-weight: 700;
}

h1 {
	font: var(--font-handwrite-lg);
}

h1:not(:last-child) {
	margin-bottom: .7em;
}

h2 {
	margin-left: -.15em;
	font: var(--font-handwrite);
}

h2:not(:first-child) {
	margin-top: 1em;
}

h2:not(:last-child) {
	margin-bottom: .5em;
}

h3 {
	font-weight: 700;
}

h3:not(:first-child) {
	margin-top: 1.5em;
}

h3:not(:last-child) {
	margin-bottom: .5em;
}

h4 {
	font: var(--font-sm);
	font-weight: 700;
}

h4:not(:first-child) {
	margin-top: 1.5em;
}

h4:not(:last-child) {
	margin-bottom: .5em;
}

p:not(:last-child) {
	margin-bottom: 1em;
}

p:has(a):not(:last-child) {
	margin-bottom: .5em;
}

p:has(a.arrow-right):not(:first-child) {
	margin-top: 3em;
}

.text ul:not(:last-child) {
	margin-bottom: 1em;
}

.text li {
   display: flex;
}

.text li:not(:last-child) {
	margin-bottom: .5em;
}

	.text li::before {
		content: "•";
	  flex: 0 0 0.5em;
	  margin-right: 0.5em;
	}

/* @end */

/* @group Links & Buttons */

.button {
	display: inline-block;
	padding-block: .6em;
	padding-inline: 1.2em;
	border-radius: 1.2em;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: .9em;
	font-weight: 700;
	line-height: 1;
}

.button--soldout {
	background-color: var(--color-base);
}

.offcanvas a {
	transition: color .2s ease-in-out;
}

.offcanvas a:hover {
	color: var(--color-primary);
}

.teaser a,
.main a:not(.button) {
	color: var(--color-primary);
}

.main a:not(.button):hover,
.teaser a:hover,
.newsticker a:not(.button):hover {
	text-underline-offset: .1em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-colo	r: var(--color-primary);
}

a.arrow-left,
a.arrow-right,
.submenu a,
.show a,
.links-block a {
	display: flex;
	width: 100%;
	color: var(--color-primary);
	text-align: left;
}

a.arrow-left,
a.arrow-right,
.links-block a {
	font: var(--font-handwrite);
}

	a.arrow-left::before,
	a.arrow-right::before,
	.submenu a::before,
	.show a::before,
	.links-block a::before {
		content: '';
		flex-shrink: 0;
		flex-grow: 0;
		width: 1em;
    height: 1em;
		margin-right: .5em;
		-webkit-mask-image: url(../images/arrow-right.svg);
		mask-image: url(../images/arrow-right.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-color: var(--color-base);
		vertical-align: top;
	}
	
	.submenu a::before {
		width: 1.5em;
		height: 1.5em;
	}
	
	a.arrow-right::before {
		transform: rotate(180deg);
	}

/* @end */

/* @group Menu toggle */

.menu-toggle {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	background-color: var(--color-white);
	box-shadow: var(--shadow);
	font: var(--font-handwrite-sm);
}

.menu-toggle:hover {
	cursor: pointer;
}
	
	.menu-toggle::before {
	  content: "";
		display: inline-block;
		-webkit-mask-image: url(../images/burger.svg);
		mask-image: url(../images/burger.svg);
	  -webkit-mask-size: cover;
	  mask-size: cover;
		width: 1.8em;
		height: 1.8em;
		background-color: currentColor;
	  vertical-align: top;
	}
	
	.menu-toggle--open::before {
		-webkit-mask-image: url(../images/close.svg);
		mask-image: url(../images/close.svg);
	}

/* @end */

/* @group Logo */

.logo {
	z-index: 50;
	display: flex;
	align-items: center;
	width: 8em;
	height: 3.75em; /* Menu-toggle */
	margin-left: 4.75em;
	font: var(--font-handwrite-xs);
}

.body--home .logo,
.body--stageshows .logo,
.body--broadcastshows .logo,
.body--contact .logo {
	color: var(--color-white);
}

	.logo svg {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
		
	@media (max-width: 999px) {

		.logo {
			position: absolute;
			top: 0;
		}
		
		.body--events .logo {
			display: none;
		}
	}
		
	@media (min-width: 1000px) {
		
		.logo {
			position: fixed;
			top: 0;
			left: 0;
		}
		
		.body--home .logo a {
			display: none;
		}
		
		.body--home .logo::before {
			content: "";
			display: block;
			-webkit-mask-image: url(../images/menu-arrow.svg);
			mask-image: url(../images/menu-arrow.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
			width: 5rem;
			height: 5rem;
			margin-left: 1rem;
			background-color: var(--color-base);
			vertical-align: top;
			animation-name: wiggle-and-move;
	    animation-duration: 1000ms;
	    animation-iteration-count: infinite;
	    animation-direction: alternate;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	    animation-delay: 0ms;
		}
		
	}

/* @end */

/* @group Offcanvas */

.offcanvas {
	position: fixed;
	z-index: 60;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 320px;
	max-height: 100vh;
	overflow: hidden;
	margin-top: -100vh;
	padding: 2em 1em;
  background-color: var(--color-white);
	color: var(--color-base);
	transition: margin .3s ease-in-out 0s;
}

.offcanvas--open {
	margin-top: 0;
}

	.offcanvas::before {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: -5%;
		right: 0;
		height: 14rem;
		aspect-ratio: 1 / 1;
		background-image: url(../images/coffeering.png);
		background-size: cover;
		transform: rotate(-90deg);
	}

	.offcanvas::after {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: 0;
		right: 0;
		height: 2.2rem;
		aspect-ratio: 12 / 1;
		background-image: url(../images/pencil.png);
		background-size: cover;
		transform: rotate(18deg) translate3d(20px, 10px, 0);
    transform-origin: right center;
	}
	
		@media (max-width: 1199px) {
			
			.offcanvas::after {
				right: unset;
				left: 60%;
			}
			
		}

	.offcanvas__menu {
		margin-top: auto;
	}
	
	.offcanvas__social {
		display: flex;
		column-gap: 1em;
		margin-top: auto;
		margin-bottom: 1em;
	}
	
	.offcanvas__footer-links {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: .4em;
	font: 400 clamp(32px, 6vw, 60px)/1em var(--font-family-handwrite);
}

	.menu__item.active {
		
	}

	.menu__item::after,
	.menu__item::before {
		display: inline-block;
	  -webkit-mask-size: cover;
	  mask-size: cover;
		background-color: var(--color-grey);
		vertical-align: top;
		animation: wiggle 2s infinite alternate ease forwards;
    animation-play-state: paused;
	}
	
	.menu__item:hover::after,
	.menu__item:hover::before {
		background-color: currentColor;
		animation-play-state: running;
	}
	
	.menu__item--buehne::before {
		content: "";
		width: 1.5em;
		height: 1.5em;
		margin-top: -.25em;
		margin-bottom: -.25em;
		-webkit-mask-image: url(../images/book.svg);
		mask-image: url(../images/book.svg);
		margin-right: 5vw;
		margin-left: calc(-1.5em - 5vw);
		transform: rotate(-20deg);
	}
	
	.menu__item--tv-radio::after {
		content: "";
		width: 1.5em;
		height: 1.5em;
		margin-top: -.25em;
		margin-bottom: -.25em;
		-webkit-mask-image: url(../images/radio.svg);
		mask-image: url(../images/radio.svg);
		margin-right: calc(-1.5em - 8vw);
		margin-left: 8vw;
		transform: rotate(20deg);
	}
	
	.menu__item--projekte::before {
		content: "";
		-webkit-mask-image: url(../images/heart.svg);
		mask-image: url(../images/heart.svg);
		width: 1.5em;
		height: 1.5em;
		margin-right: 1vw;
		margin-left: calc(-1.5em - 1vw);
		margin-top: -.25em;
		margin-bottom: -.25em;
	}
	
	.menu__item--kontakt::after {
		content: "";
		-webkit-mask-image: url(../images/plane.svg);
		mask-image: url(../images/plane.svg);
		width: 3em;
		height: 1em;
		margin-right: -3em;
	}

/* @end */

/* @group Social */

.social {
	display: flex;
	column-gap: 1rem;
	font-size: 1.5rem;
}

	.social a[href*="instagram"],
	.social a[href*="facebook"],
	.social a[href*="youtube"],
	.social a[href*="tiktok"] {
		width: 1em;
		height: 1em;
		overflow: hidden;
		line-height: 1;
		white-space: nowrap;
	}
	
		.social a[href*="instagram"]::before,
		.social a[href*="facebook"]::before,
		.social a[href*="youtube"]::before,
		.social a[href*="tiktok"]::before {
		  content: "";
			display: inline-block;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1em;
		  height: 1em;
			background-color: currentColor;
		  vertical-align: top;
			transition: transform .15s ease-in-out 0s;
		}
	
		.social a[href*="instagram"]::before {
			-webkit-mask-image: url(../images/instagram.svg);
			mask-image: url(../images/instagram.svg);
		}
		
		.social a[href*="facebook"]::before {
			-webkit-mask-image: url(../images/facebook.svg);
			mask-image: url(../images/facebook.svg);
		}
		
		.social a[href*="youtube"]::before {
			-webkit-mask-image: url(../images/youtube.svg);
			mask-image: url(../images/youtube.svg);
		}
		
		.social a[href*="tiktok"]::before {
			-webkit-mask-image: url(../images/tiktok.svg);
			mask-image: url(../images/tiktok.svg);
		}
		
		.social a[href^="tel:"]:hover::before,
		.social a[href^="mailto:"]:hover::before,
		.social a[href*="tidycal"]:hover::before {
			transform: scale(1.1);
		}

/* @end */

/* @group Home */

@media (min-width: 1000px) {
	
	.body--home {
		position: relative;
    min-height: 100vh;
    z-index: 1;
    overflow: hidden;
	}
	
}

/* @end */

/* @group Cover */

.cover {
	
}

	.cover__picture {
		display: block;
		height: 100vh;
	}

		.cover__picture img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: right center;
		}

	.cover__caption {
		position: absolute;
		font: 400 clamp(24px, 4.8vw, 48px)/1em var(--font-family-handwrite);
		white-space: nowrap;
	}
	
	.cover__logo {
		width: 10em;
		height: auto;
		color: var(--color-white);
	}
	
		.cover__logo svg {
			width: 100%;
			height: auto;
		}
		
	.cover__subheading {
			line-height: 1.1em;
			transform: rotate(-6deg);
		}
	
		.cover__subheading  svg {
			width: auto;
			height: 1.2em;
			margin-left: -.5em;
			vertical-align: top;
		}
		
	.cover__newsticker {
		
	}
	
	@media (max-width: 999px) {
		
		.cover {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			min-height: 100vh;
			overflow: hidden;
		}
		
		.cover:not(:has(.cover__newsticker)) {
			height: 100vh;
		}
		
			.cover__picture {
				position: fixed;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
			}
				
				.cover__picture img {
					object-position: center center;
				}
		
			.cover__caption {
				display: none;
				top: 4.5rem;
				left: 1.5rem;
			}
			
			.cover__newsticker {
				position: absolute;
				z-index: 12;
				top: 100dvh;
				transform: translateY(calc(-100% - var(--spacing-inline)));
			}
			
			.cover__teaser {
				max-width: min-content;
				top: 100dvh;
				left: 0;
				transform: rotate(-5deg) translateY(calc(-100% + 1rem));
			}
			
			.cover__newsticker + .cover__teaser {
				position: relative;
				display: none;
			}
			
			.cover__caption + .cover__teaser {
				position: absolute;
			}
		
	}
		
	@media (min-width: 1000px) {
			
		.cover {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
		}
		
			.cover__caption {
				top: 35%;
				left: 35%;
				transform: translate(-50%, -50%);
			}
			
			.cover__teaser {
				position: absolute;
				z-index: 10;
				top: calc(100dvh + 1.6rem);
				/*bottom: -1.6rem;*/
				left: 0;
				width: 50%;
				max-width: 30rem;
				transform: rotate(-5deg) translateY(-100%);
			}
			
			.cover__newsticker {
				position: absolute;
				z-index: 12;
				top: 95dvh;
				right: 5vw;
				width: 30rem;
				max-width: calc(50% - 5vw - 2rem);
				transform: translateY(-100%);
			}
		
	}
		
/* @end */

/* @group Teaser */

.teaser {
	padding-top: clamp(1rem, 4vw, 2rem);
	padding-bottom: clamp(4rem, 8vw, 6rem);
	padding-inline: clamp(2rem, 8vw, 3rem);
	background-color: #f8f8f8;
	background-image: url(../images/coffeering.png);
  background-size: 160px;
  background-repeat: no-repeat;
  background-position: bottom right;
	font: var(--font-handwrite);
}

	.teaser::before {
		content: '';
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    height: 2.55rem;
    background-image: url(../images/ringhead.png);
    background-size: 1rem 2.55rem;
    background-repeat: repeat-x;
    background-position: top right;
	}
	
	.teaser__links {
		display: flex;
		flex-direction: column;
		row-gap: .5em;
	}
	
		.teaser__links a {
			transition: color .15s ease-in-out 0s;
		}
	
		.teaser__links a:hover {
			color: var(--color-primary);
		}
		
		.teaser__links a.kontakt {
			align-self: flex-end;
			white-space: nowrap;
		}
	
			.teaser a.kontakt::after {
				content: '';
				display: inline-block;
		    height: 1em;
				width: 3em;
				margin-left: .25em;
				-webkit-mask-image: url(../images/plane.svg);
				mask-image: url(../images/plane.svg);
				-webkit-mask-size: cover;
				mask-size: cover;
				background-color: var(--color-base);
				vertical-align: top;
			}

/* @end */

/* @group Newsticker */

.newsticker {
	background-color: var(--color-white);
	box-shadow: var(--shadow-lg);
	padding: 1.5rem 2rem .5rem 2rem;
	border-radius: 1rem;
}

	.newsticker p:has(a) {
		margin-top: -.5em;
		text-align: right;
	}

	.newsticker a {
		white-space: nowrap;
	}
	
		.newsticker__title:not(:last-child) {
			margin-bottom: .3em;
		}

		.newsticker__title::before {
			content: '';
			display: inline-block;
			margin-block: -.25em;
			margin-left: calc(-.5 * var(--spacing-inline));
			width: 1.5em;
	    height: 1.5em;
			margin-right: .25em;
			-webkit-mask-image: url(../images/megaphone.svg);
			mask-image: url(../images/megaphone.svg);
			-webkit-mask-size: cover;
			mask-size: cover;
			background-color: var(--color-base);
			vertical-align: top;
			animation: inlove 560ms infinite alternate linear forwards;
		}

	@media (max-width: 999px) {
		
		.newsticker {
			margin-inline: var(--spacing-inline);
		}
		
	}

/* @end */

/* @group Main */

.main {
	padding-bottom: var(--spacing-block);
	padding-inline: var(--spacing-inline);
}

	@media (max-width: 999px) {
		
		.main {
			max-width: max-content;
			margin-inline: auto;
		}
		
		.offcanvas + .main {
			margin-top: 7rem;
		}
		
	}

	@media (min-width: 1000px) {
		
		.main {
			margin-left: 50%;
			padding-top: var(--spacing-block-lg);
			padding-bottom: var(--spacing-block);
		}
		
		.body--events .main {
			padding-top: 5rem;
		}
		
		.main--center {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 100vh;
		}
		
		.main--lg,
		.body--events .main {
			margin-left: 40%;
		}
		
		.main--lg {
			max-width: 40rem;
		}
		
	}


/* @group Detail page */

.poster + .main {
	position: relative;

}

	.main--pencil::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		height: 2.2rem;
		aspect-ratio: 12 / 1;
		background-image: url(../images/pencil.png);
		background-size: cover;
		transform: rotate(-45deg) translateX(70%);
	  transform-origin: right center;
	}
	
	.main--eiffel-tower::before {
		content: '';
		position: absolute;
		top: 1rem;
		right: 1rem;
		width: calc(var(--spacing-block-lg) / 2);
    height: calc(var(--spacing-block-lg));
		-webkit-mask-image: url(../images/eiffel-tower.svg);
		mask-image: url(../images/eiffel-tower.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-color: var(--color-base);
		animation: inlove 560ms infinite alternate linear forwards;
	}
	
	@media (max-width: 999px) {
		
		.map + .main,
		.poster + .main {
			padding-top: var(--spacing-block);
		}
		
			.main--pencil::before {
				top: calc(-2 * var(--spacing-block) - .5rem);
			}
			
			.main--eiffel-tower::before {
				top: -4rem;
				right: 8vw;
				width: 3rem;
		    height: 6rem;
			}
		
	}

/* @end */

/* @end */

/* @group Aside */

.aside {
	
}

	@media (max-width: 999px) {
		
		.aside {
			text-align: center;
		}
		
			.aside__page-title {
				display: inline-block;
				transform: translateY(-50%) rotate(-6deg);
			}
			
			.aside__page-title:first-child { /* Page-title before Gallery */
				position: relative;
				z-index: 20;
				margin-top: 6rem;
				transform: rotate(-6deg);
			}
			
			.aside__gallery {
				margin-bottom: 1em;
			}
		
	}

	@media (min-width: 1000px) {
		
		.aside {
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			width: 50vw;
			height: 100vh;
		}
		
			.aside__page-title {
				position: absolute;
				top: 2rem;
				z-index: 2;
		    right: 0;
		    transform: translateX(50%) rotate(-6deg);
			}
		
	}

/* @end */

/* @group Splide */

.splide {
	
}

		.splide__slide img {
		  width: 100%;
		  height: auto;
		}
	
	.splide__pagination {
		line-height: 1;
	}
	
		.splide__pagination > * {
			display: unset;
		}
		
			.splide__pagination > *::before {
				content: "";
				display: none;
				width: unset;
			}
			
			.splide__pagination__page {
				width: 2em;
				height: 2em;
				transition: all .15s ease-in-out 0s;
			}
			
				.splide__pagination__page::before {
					content: "";
					display: block;
					margin-left: .25em;
					margin-right: .25em;
					width: .75em;
					height: .75em;
					background-color: currentColor;
					border-radius: 50%;
				}
				
				.splide__pagination__page.is-active::before {
					background-color: var(--color-primary);
				}
			
				.splide__pagination__page:not(.is-active):hover {
					cursor: pointer;
				}
				
					.splide__pagination__page:hover::before {
						background-color: var(--color-primary);
					}

/* @end */

/* @group Gallery */

.gallery {
	width: 80%;
	margin-inline: auto;
	transform: rotate(-2deg);
}

/* @end */

/* @group Poster */

.poster {
	padding-inline: var(--spacing-inline);
	text-align: center;
}

	.poster img {
		width: 100%;
		height: auto;
		box-shadow: var(--shadow-lg);
		transform: rotate(-3deg);
	}

	.poster__caption {
		margin-top: 2em;
	}
	
	.poster a {
		position: relative;
	}
	
	@media (max-width: 999px) {
		
		.poster {
			margin-top: calc(4.5rem + var(--spacing-block));
			margin-bottom: var(--spacing-block);
		}
		
			.poster img {
				width: 80%;
				max-width: 30rem;
			}
		
	}

	@media (min-width: 1000px) {
		
		.poster {
			position: fixed;
			top: 0;
			left: 0;
			width: 40%;
			height: 100vh;
			padding-block: var(--spacing-block-lg);
		}
		
			.poster img {
				width: auto;
				max-width: 20rem;
				max-height: calc(100vh - var(--spacing-block-lg) - 6em);
			}
		
			.poster a::after {
				content: '';
				position: absolute;
				right: -5.5em;
				top: -.9em;
				display: block;
				width: 4em;
		    height: 4em;
				-webkit-mask-image: url(../images/arrow-left.svg);
				mask-image: url(../images/arrow-left.svg);
				-webkit-mask-size: cover;
				mask-size: cover;
				background-color: var(--color-base);
				vertical-align: top;
				animation: wiggle-and-move 1s infinite alternate ease-in-out backwards;
			}
			
	}
	

/* @end */

/* @group Map */

.map {
	z-index: 10;
	display: grid;
	grid-template-rows: 1fr min-content;
}

	.map iframe {
		width: 100%;
		height: 100%;
	}
	
	@media (max-width: 999px) {
		
		.map {
			position: relative;
			width: 100%;
			height: 60vh;
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.map {
			position: fixed;
			top: 5rem;
			left: 0;
			width: 40%;
			height: calc(100vh - 5rem);
		}
		
			.map iframe {
				width: 100%;
				height: 100%;
			}
		
	}

/* @end */

/* @group Legend */

.legend {
	display: grid;
	row-gap: .25em;
	background-color: var(--color-grey-subtle);
	padding: 1em;
	font: var(--font-sm);
}

	.legend__item {
		display: flex;
		column-gap: .5em;
	}

	.legend__color {
		display: inline-block;
		flex: 0 0 .8em;
		height: .8em;
		margin-top: .25em;
		border-radius: 50%;
		align-self: flex-start;
	}

/* @end */

/* @group Hero */

.hero {
	height: 100%;
}
		
	@media (max-width: 999px) {
		
		.hero img {
			width: 100%;
			height: auto;
		}
			
	}
	
	@media (min-width: 1000px) {
		
			.hero img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: top center;
			}
		
	}

/* @end */

/* @group Page-title */

.page-title {
	padding: .5em .75em;
	background-color: var(--color-white);
	box-shadow: var(--shadow);
	font: var(--font-handwrite);
	transform-origin: center;
}

	.page-title h1 {
		font: var(--font-handwrite);
	}
	
	.page-title h1::after {
		content: "";
		display: inline-block;
	  -webkit-mask-size: cover;
	  mask-size: cover;
		width: 1.5em;
		height: 1.5em;
		margin-top: -.25em;
		margin-bottom: -.25em;
		margin-left: .5em;
		background-color: currentColor;
		vertical-align: top;
	}
	
	.page-title h1.news::after {
		-webkit-mask-image: url(../images/megaphone.svg);
		mask-image: url(../images/megaphone.svg);
	}
	
	.page-title h1.buehne::after {
		-webkit-mask-image: url(../images/book.svg);
		mask-image: url(../images/book.svg);
	}
	
	.page-title h1.tv-radio::after {
		-webkit-mask-image: url(../images/radio.svg);
		mask-image: url(../images/radio.svg);
	}
	
	.page-title h1.projekte::after {
		-webkit-mask-image: url(../images/heart.svg);
		mask-image: url(../images/heart.svg);
	}
	
	.page-title h1.kontakt::after {
		-webkit-mask-image: url(../images/plane.svg);
		mask-image: url(../images/plane.svg);
		width: 3em;
		height: 1em;
		margin-top: unset;
		margin-bottom: unset;
	}

/* @end */

/* @group Cta */

.cta {
	margin-top: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	text-align: center;
}

	.cta__button {
		box-shadow: var(--shadow);
	}
	
	@media (max-width: 999px) {
		
		
	}

	@media (min-width: 1000px) {
		
		.cta {
			/*position: fixed;
			z-index: 20;
			left: 25%;
			bottom: 0;
			transform: translateX(-50%);*/
		}
		
	}

/* @end */

/* @group Sketchpad */

.sketchpad {
	font: var(--font-handwrite);
}

.sketchpad:not(:first-child) {
	margin-top: var(--spacing-block-sm);
}

	.sketchpad__header {
		aspect-ratio: 7 / 1;
		background: url(../images/sketchpad-top.png) left top no-repeat;
		background-size: 100% 100%;
	}
	
	.sketchpad__main {
		background: url(../images/sketchpad-center.png) left top no-repeat;
		background-size: 100% 100%;
		padding-inline: 18%;
	}
	
	.sketchpad__footer {
		aspect-ratio: 7 / 3;
		background: url(../images/sketchpad-bottom.png) left top no-repeat;
		background-size: 100% 100%;
	}
		

	@media (max-width: 999px) {
		
		.sketchpad {
			margin-inline: -10%;
			transform: rotate(2deg);
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.sketchpad {
			transform: rotate(-4deg);
		}
		
	}

/* @end */

/* @group Submenu */

.submenu {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	font: var(--font);
	font-weight: 500;
	color: var(--color-primary);
}

		.submenu a::before {
			margin-right: .5em;
			animation: backandforth 700ms infinite alternate ease-in-out backwards;
		}
		
		.submenu a:nth-child(4n+2)::before {
			animation-delay: 200ms;
		}
		
		.submenu a:nth-child(4n+3)::before {
			animation-delay: 400ms;
		}
		
		.submenu a:nth-child(4n)::before {
			animation-delay: 600ms;
		}
		
/* @end */

/* @group Post */

.post {
	position: relative;
	max-width: 30rem;
}

	.post::before { /* Pencil */
		content: "";
		position: absolute;
		top: -3em;
		right: 0;
		height: 2.2rem;
		aspect-ratio: 12 / 1;
		background-image: url(../images/pencil.png);
		background-size: cover;
		transform: rotate(-45deg) translateX(80%);
	  transform-origin: right center;
	}

	.post__date {
		font: var(--font-sm);
		font-weight: 700;
	}
	
	h2.post__title {
		margin-top: .5em;
	}

/* @end */

/* @group Shows & Show */

.shows {
	max-width: 40rem;
	padding-top: 6em;
}

	.shows::before {
		content: "";
		float: right;
		-webkit-mask-size: cover;
	  mask-size: cover;
		width: 6em;
		height: 6em;
		margin-top: -4.5em;
		margin-left: auto;
		background-color: currentColor;
	  vertical-align: top;
	}
	
	.shows--tv::before {
		-webkit-mask-image: url(../images/tv.svg);
		mask-image: url(../images/tv.svg);
		animation: swing .5s infinite alternate linear forwards;
	}
	
	.shows--radio::before {
		-webkit-mask-image: url(../images/radio.svg);
		mask-image: url(../images/radio.svg);
		animation: swing .5s infinite alternate linear forwards;
		animation-delay: .5s;
	}
	
	@media (max-width: 999px) {
		
		.shows:first-child {
			margin-top: -2em;
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.shows::before {
			margin-right: 15%;
		}
		
		.shows:first-child {
			margin-top: -3em;
		}
		
	}

.show {
	
}

.show:not(:last-child) {
	margin-bottom: var(--spacing-block-sm);
}

	.show a {
		font: var(--font-handwrite);
	}
	
	.show a[title*="YouTube"]::before {
		animation: backandforth 700ms infinite alternate ease-in-out backwards;
	}
	
	h1.show__title {
		margin-bottom: .2em;
	}
	
	@media (max-width: 599px) {
		
		.show:not(:last-child) {
			margin-bottom: var(--spacing-block);
		}
		
	}
	
	@media (min-width: 600px) {
		
		.show:nth-of-type(odd) {
			padding-right: 15%;
		}
		
		.show:nth-of-type(even) {
			padding-left: 15%;
		}
		
	}
	

/* @end */

/* @group Projects & Project */

.projects {
	max-width: 40rem;
}

	.projects::before {
		content: "";
		display: block;
		-webkit-mask-image: url(../images/lighthouse.svg);
		mask-image: url(../images/lighthouse.svg);
		-webkit-mask-size: cover;
	  mask-size: cover;
		width: 6em;
		height: 6em;
		margin-top: 1em;
		margin-bottom: 1.5em;
		margin-inline: auto;
		background-color: currentColor;
	  vertical-align: top;
		animation: swing .5s infinite alternate linear forwards;
	}
	
	@media (min-width: 1000px) {
		
		.projects {
			margin-top: -6em;
		}

	}
	
.project:not(:last-child) {
	margin-bottom: var(--spacing-block);
}

/* @end */

/* @group Blocks */

[class$="block"]:not(:last-child) {
  margin-bottom: 1.5em;
}

/* @group Text-block */

.text-block {
	
}

/* @end */

/* @group Quote-block */

.quote-block {
	margin-bottom: 2em;
}

.quote-block:first-of-type {
	position: relative;
	margin-top: 2em;
	padding-top: 7em; /* for Icon */
}

	.quote-block:first-of-type::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		display: block;
		-webkit-mask-image: url(../images/pierced-heart.svg);
		mask-image: url(../images/pierced-heart.svg);
	  -webkit-mask-size: cover;
	  mask-size: cover;
		width: 6em;
		height: 6em;
		margin-inline: auto;
		background-color: currentColor;
	  vertical-align: top;
		transform: translateX(-50%);
	}

	.quote-block p:not(:last-child) {
		margin-bottom: .5em;
	}

		.quote-block p::before {
			content: "„";
		}
		
		.quote-block p::after {
			content: "“";
		}
	
	.quote-block footer {
		font: var(--font-sm);
		font-weight: 700;
	}
	
	@media (min-width: 600px) {
		
		.quote-block:nth-of-type(odd) {
			padding-left: 15%;
		}
		
		.quote-block:nth-of-type(even) {
			padding-right: 15%;
		}
		
	}

/* @end */

/* @group Handwrite-block */

.handwrite-block {
	position: relative;
	padding-right: 15%;
	font: var(--font-handwrite);
}

.handwrite-block:not(:first-child) {
	margin-top: 1em;
}

	.handwrite-block::before { /* Pencil */
		content: "";
		position: absolute;
		bottom: 1.2em;
		right: 0;
		height: 2.2rem;
		aspect-ratio: 12 / 1;
		background-image: url(../images/pencil.png);
		background-size: cover;
		transform: rotate(-25deg) translateX(75%);
	  transform-origin: right center;
	}
	
	@media (max-width: 599px) {
		
		.handwrite-block {
			padding-left: 5%;
		}
	}
	
	@media (min-width: 600px) {
		
		.handwrite-block {
			padding-left: 15%;
			padding-right: 20%;
		}
		
	}

/* @end */

/* @group Social-block */

.social-block a[href*="youtube"],
.social-block a[href*="facebook"],
.social-block a[href*="instagram"],
.social-block a[href*="tiktok"] {
	white-space: nowrap;
	display: inline-block;
	margin-block: .25em;
}

	.social-block a[href*="youtube"]::before,
	.social-block a[href*="facebook"]::before,
	.social-block a[href*="instagram"]::before,
	.social-block a[href*="tiktok"]::before {
	  content: "";
		display: inline-block;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1.5em;
	  height: 1.5em;
		margin-right: .4em;
	  background-color: currentColor;
	  vertical-align: middle;
	}

	.social-block a[href*="youtube"]::before {
	  -webkit-mask-image: url(../images/youtube.svg);
	  mask-image: url(../images/youtube.svg);
	}

	.social-block a[href*="facebook"]::before {
	  -webkit-mask-image: url(../images/facebook.svg);
	  mask-image: url(../images/facebook.svg);
		margin-right: .1em;
	}
	
	.social-block a[href*="instagram"]::before {
	  -webkit-mask-image: url(../images/instagram.svg);
	  mask-image: url(../images/instagram.svg);
	}
	
	.social-block a[href*="tiktok"]::before {
	  -webkit-mask-image: url(../images/tiktok.svg);
	  mask-image: url(../images/tiktok.svg);
		margin-right: .2em;
	}

/* @end */

/* @group Video-block */

.video-block {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-block:not(:first-child) {
	margin-top: 2em;
}

.video-block:not(:last-child) {
	margin-bottom: 2em;
}

	.video-block iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}

/* @end */

/* @group Image-block */

.image-block {
	text-align: center;
}

.image-block:not(:first-child) {
	margin-top: 2em;
}

.image-block:not(:last-child) {
	margin-bottom: 2em;
}

	.image-block img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}

/* @end */

/* @group Line-block */

.line-block {
	border-top: 1px solid var(--color-base);
}

.line-block:not(:last-child) {
  margin-bottom: 2em;
}

/* @end */

/* @end */

/* @group Leaflet */

.leaflet-control-attribution {
	display: none;
}

.leaflet-popup-content {
	margin: 1em 2.5em 1em 1em;
	font: var(--font-sm);
}

	.leaflet-popup a:not(.button) {
		color: var(--color-primary);
		-webkit-tap-highlight-color: var(--color-primary);
	}
	
	.leaflet-popup a.leaflet-popup-close-button {
		content: "";
		-webkit-mask-image: url(../images/close.svg);
		mask-image: url(../images/close.svg);
		-webkit-mask-size: cover;
	  mask-size: cover;
		position: absolute;
		top: .5em;
		right: .5em;
		border: none;
		text-align: center;
		width: 1.25em;
		height: 1.25em;
		font: var(--font);
		color: var(--color-base);
		background: var(--color-base);
	}
	
	.leaflet-popup__show {
		display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
		color: var(--color-primary);
	}
	
	.leaflet-popup__show,
	.leaflet-popup__date,
	.leaflet-popup__city {
		font-weight: 700;
	}
	
	.leaflet-popup__tickets {
		margin-top: .5em;
	}
	
		.leaflet-popup__tickets a {
			color: var(--color-white);
		}
	
a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out {
	color: var(--color-base);
}
	
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	color: var(--color-base);
	box-shadow: var(--shadow);
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: none;
		box-shadow: var(--shadow);
}
	
.leaflet-control-zoom {
	color: var(--color-base);
}

/* @end */

/* @group Filters */

.filters {
	display: flex;
	column-gap: 1em;
	row-gap: 1em;
	margin-bottom: 2em;
	font: var(--font-sm);
}

	@media (max-width: 999px) {
		
		.filters {
			flex-direction: column;
		}
		
	}
	
	@media (min-width: 1000px) {
		
		/*.filters > * {
			width: calc((100% - 2em) / 3);
		}*/
		
		.filters > *:nth-child(1) {
			width: calc((100% - 2em) / 10*3);
		}
		
		.filters > *:nth-child(2) {
			width: calc((100% - 2em) / 10*4);
		}
		
		.filters > *:nth-child(3) {
			width: calc((100% - 2em) / 10*3);
		}
			
	}

/* @end */

/* @group No events found */

.no-events-found {
	
}

/* @end */

/* @group Events & Event */

.events {
	
}

.event {
	display: grid;
	grid-template-columns: 6em 1fr 8em;
	column-gap: 1em;
	row-gap: .5em;
	padding-block: .5em;
	border-top: 1px solid currentColor;
}

	.event > *:nth-child(2) {
		min-width: 0; /* needed for text truncation of event show */
	}

	.event > *:nth-child(3) {
		text-align: center;
	}
	
	.event__weekday,
	.event__time {
		font: var(--font-sm);
		line-height: 1.5rem;
	}

	.event__date {
		font-weight: 700;
	}
	
	.event__show {
		display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 1;
		color: var(--color-primary);
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
	}
		
	.event__city {
		font-weight: 700;
	}
	
	.event__tickets {
		font-weight: 700;
		text-align: right;
	}
		
	@media (max-width: 599px) {
		
		.event {
			grid-template-columns: 6em 1fr;
			padding-bottom: 1em;
		}
		
			.event > *:nth-child(1) {
				
			}
		
			.event > *:nth-child(3) {
				grid-column: 2;
			}
			
			.event__show {
				-webkit-line-clamp: 2;
			}
			
			.event__tickets {
				text-align: left;
			}
		
	}

/* @end */

/* @group Form */

select,
input {
	padding-block: .2em;
	padding-inline: .6em;
	border: 1px solid currentColor;
	font-weight: 700;
}

input::placeholder {
	font-weight: 350;
	color: currentColor;
}

select {
	overflow: hidden;
	text-overflow: ellipsis;
}

input[type="text"] {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* @end */

/* @group Animations */
	
	@keyframes wiggle {
	
		0% {
		    transform: rotate(0d);
		}
		
		25% {
		    transform: rotate(35deg);
		}
		
		50% {
		    transform: rotate(-35deg);
		}
		
		75% {
		    transform: rotate(0);
		}

	}
	
	@keyframes swing {
	
		0% {
			transform: rotateZ(-10deg);
		}
		
		100% {
		  transform: rotateZ(8deg);
		}
	
	}
	
	@keyframes backandforth {
	
		0% {
		  transform: translateX(.3em);
		}
		
		100% {
		  transform: translateX(-.3em);
		}
	
	}
	
	@keyframes wiggle-and-move {
	
		0% {
	    transform: rotate(0) translateX(0);
		}
		25% {
	    transform: rotate(-15deg) translateX(-1rem);
		}
		50% {
	    transform: rotate(0) translateX(-1rem);
		}
		75% {
	    transform: rotate(15deg) translateX(-1rem);
		}
		100% {
	    transform: rotate(0) translateX(0);
		}
	
	}
	
	@keyframes inlove {
	
		0% {
	    transform: rotateZ(9deg);
		}
		
		100% {
		  transform: rotateZ(-4deg);
		}
		
	}
	
	
	/* @end */