@charset "UTF-8";

/********** Soundwatch CSS **********/

html,
body {
	width: 100%;
	height: 100%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	/*
	scroll-behavior: smooth;
	*/
}

body {
	overflow-x: hidden;
	overflow-y: auto;
	/*
	background-color: #F8BFD3;
	*/
	background-color: #FACCDC;
	/*
	background-image: url("../bilder/aufbau/Hintergrund_Vektor.svg");
	background-position: center;
	background-size: cover;
	*/
}
body.lock_screen {
	overflow-y: hidden!important;
	touch-action: none;
	-webkit-overflow-scrolling: none;
	overscroll-behavior: none;
}
body.lock_screen::-webkit-scrollbar {
	display: none;
}

*.hidden {
	display: none;
}

*.nobr,
*.nowrap {
	color: inherit;
	white-space: nowrap;
}

* {
	font-family: Open_Sans, sans-serif;
	letter-spacing: 0.013em;
	color: #111;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
*:focus {
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

*.farbe {
	color: #E50051!important;
}



/********** Hintergrund **********/

/*
#leerraum_oben {
	position: relative;
	z-index: -1;
	width: 100%;
	height: 100vh;
	pointer-events: none!important;
}
*/
#hintergrund {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100vh;
}
#hintergrund::after {
	content: "";
	display: block;
	position: fixed;
	z-index: -1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	background-image: url("../bilder/aufbau/Hintergrund_Vektor.svg");
	background-position: center;
	background-size: cover;
}
#aufkleber {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#aufkleber::after {
	content: "";
	display: block;
	position: fixed;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	/*
	background-image: url("../bilder/aufbau/Aufkleber_2021_online.svg");
	*/
	background-image: url("../bilder/aufbau/Aufkleber_2021.svg");
	background-position: center;
	background-repeat: no-repeat;
}
#logo_leiste {
	position: absolute;
	z-index: 0;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#logo_leiste::after {
	content: "";
	display: block;
	position: fixed;
	z-index: 0;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	mix-blend-mode: multiply;
	/* zu groß:
	background-image: url("../bilder/aufbau/Logo_Leiste_2021_Vektor.svg");
	*/
	background-image: url("../bilder/aufbau/Logo_Leiste_2021.png");
	background-position: center bottom 5px;
	background-repeat: no-repeat;
}
@media screen and (max-width: 700px) {
	#aufkleber::after {
		background-size: 70%;
	}
	#logo_leiste::after {
		background-size: calc(100% - 50px);
	}
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
	#aufkleber::after {
		background-size: 42%;
	}
	#logo_leiste::after {
		background-size: calc(100% - 70px);
	}
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#aufkleber::after {
		background-size: 34%;
	}
	#logo_leiste::after {
		background-size: 86%;
	}
}
@media screen and (min-width: 1201px) {
	#aufkleber::after {
		background-size: 28%;
	}
	#logo_leiste::after {
		background-size: 78%;
	}
}
#logos_neu {
	position: fixed;
	z-index: 2;
	bottom: 20px;
}
#logos_neu #logos_links,
#logos_neu #logos_rechts {
	position: absolute;
	bottom: 0px;
	line-height: 1px;
	margin: 0px;
	mix-blend-mode: multiply;
	opacity: 0.85;
}
#logos_neu #logos_links {
	left: -1px;
}
#logos_neu #logos_rechts {
	right: -1px;
}
#logos_neu a + a {
	margin-left: 30px;
}
@media screen and (max-width: 910px) {
	#logos_neu {
		left: 25px;
		width: calc(100% - 50px);
	}
	#logos_neu a + a {
		margin-left: 22px!important;
	}
}
@media screen and (min-width: 911px) and (max-width: 1024px) {
	#logos_neu {
		left: 35px;
		width: calc(100% - 70px);
	}
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#logos_neu {
		left: 7%;
		width: 86%;
	}
}
@media screen and (min-width: 1201px) {
	#logos_neu {
		left: 11%;
		width: 78%;
	}
}


/********** Inhalt Rahmen **********/

#inhalt_rahmen {
	position: relative;
	z-index: 3;
	background-color: #FFF;
	margin: 100vh 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
/* Schatten oben und unten:
#inhalt_rahmen::before,
#inhalt_rahmen::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	left: 0px;
	width: 100%;
	height: 20px;
	mix-blend-mode: multiply;
}
#inhalt_rahmen::before {
	top: -20px;
	background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
}
#inhalt_rahmen::after {
	bottom: -20px;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
}
*/
/********** Mobile **********/
@media screen and (max-width: 700px) {
	#inhalt_rahmen {
		padding: 0px 25px 0px 25px;
	}
}

/********** mid Screen **********/
@media screen and (min-width: 701px) and (max-width: 1024px) {
	#inhalt_rahmen {
		padding: 0px 35px 0px 35px;
	}
}

/********** Big Screens **********/
@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#inhalt_rahmen {
		padding: 0px 7% 0px 7%;
	}
}

/********** Very Big Screens **********/
@media screen and (min-width: 1201px) {
	#inhalt_rahmen {
		padding: 0px 11% 0px 11%;
	}
}



/********** Inhalt **********/

div.inhalt {
	position: relative;
	padding: 30px 0px 60px 0px;
}
div.inhalt p {
	margin: 0px 0px 0px 0px;
}

h2.rubrik_titel {
	position: relative;
	font-size: 22px;
	line-height: 26px;
	font-weight: 400;
	color: #E50051;
	margin: 0px 0px 60px 0px;
}
h2.rubrik_titel strong {
	font-weight: 700;
	color: inherit;
}



/********** Typo allgemein **********/

*.normal {
	font-weight: 400!important;
	color: inherit!important;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}



/********** Corona-Info **********/

#corona_rahmen {
}

#corona_rahmen p {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}
#corona_rahmen p + p {
	margin-top: 20px;
}



/********** Intro **********/

#intro_rahmen {
}

#intro_rahmen div.text_en,
#intro_rahmen div.text_en * {
	color: #E50051;
}

#intro_rahmen p {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}
#intro_rahmen p + p {
	margin-top: 20px;
}



/********** Programm + VoD **********/

#programm_rahmen,
#vod_rahmen {
}

#programm_rahmen div.download,
#vod_rahmen div.download {
	position: relative;
	margin: 0px 0px 40px 0px;
}
#programm_rahmen div.download h5,
#vod_rahmen div.download h5 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: #E50051;
	margin: 0px 0px 5px 0px;
}

#programm_rahmen div.spalte,
#vod_rahmen div.spalte {
	position: relative;
}

#programm_rahmen div.spalte div.eintrag,
#vod_rahmen div.spalte div.eintrag {
	position: relative;
	padding: 0px 0px 0px 0px;
}

#programm_rahmen div.spalte div.eintrag + div.eintrag,
#vod_rahmen div.spalte div.eintrag + div.eintrag {
	margin-top: 40px;
}
#programm_rahmen div.spalte > div.extra,
#vod_rahmen div.spalte > div.extra {
	margin-top: 70px!important;
}

#programm_rahmen div.eintrag > a,
#vod_rahmen div.eintrag > a {
	position: absolute;
	z-index: 1;
	/*
	top: -7px;
	left: -7px;
	width: calc(100% + 14px);
	height: calc(100% + 12px);
	*/
	top: -8px;
	left: -8px;
	width: calc(100% + 16px);
	height: calc(100% + 14px);
	mix-blend-mode: multiply;
	border-radius: 6px;
}
/*
#programm_rahmen div.eintrag > a:hover,
#vod_rahmen div.eintrag > a:hover {
*/
#programm_rahmen div.eintrag:hover a,
#vod_rahmen div.eintrag:hover a {
	/*
	background-color: rgba(0,0,0,0.06);
	*/
	background-color: rgba(229,0,81,0.12);
	/*
	border: 1px solid #E50051;
	*/
}

#programm_rahmen div.eintrag div.bild_rahmen,
#vod_rahmen div.eintrag div.bild_rahmen {
	position: relative;
	margin: 0px 0px 6px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 0px;
}
#programm_rahmen div.eintrag div.bild_rahmen.spezial::after,
#vod_rahmen div.eintrag div.bild_rahmen.spezial::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(231,52,63,1);
	mix-blend-mode: color;
	border-radius: 3px;
}
#programm_rahmen div.eintrag div.bild_rahmen img,
#vod_rahmen div.eintrag div.bild_rahmen img {
	position: relative;
	width: 100%;
	margin: 0px 0px 0px 0px;
	border-radius: 3px;
}
#programm_rahmen div.bild_rahmen div.bild_credits,
#vod_rahmen div.bild_rahmen div.bild_credits {
	position: absolute;
	z-index: 1;
	top: 2px;
	left: -5px;
	width: 1px;
	height: 1px;
	transform: rotate(-90deg);
	font-size: 11px;
	line-height: 11px;
}
#programm_rahmen div.eintrag:hover div.bild_credits,
#vod_rahmen div.eintrag:hover div.bild_credits {
	/*
	display: none;
	opacity: 0.5;
	*/
}
#programm_rahmen div.bild_rahmen div.bild_credits div,
#vod_rahmen div.bild_rahmen div.bild_credits div {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 10px;
	line-height: 10px;
	text-align: right;
	opacity: 0.6;
	white-space: nowrap;
}
#programm_rahmen div.spalte div.eintrag h2,
#vod_rahmen div.spalte div.eintrag h2 {
	font-size: 22px;
	line-height: 24px;
	font-weight: 900;
	color: #E50051;
	/*
	padding-bottom: 5px;
	border-bottom: 2px solid #111;
	text-decoration: underline;
	*/
}
#programm_rahmen div.spalte div.eintrag div.datum,
#vod_rahmen div.spalte div.eintrag div.datum {
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: #E50051;
}

#programm_rahmen div.spalte div.eintrag div.kino,
#vod_rahmen div.spalte div.eintrag div.kino {
	font-size: 15px;
	line-height: 20px;
	font-weight: 400;
	color: #E50051;
}

#programm_rahmen div.spalte h4,
#vod_rahmen div.spalte h4 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	margin: 0px 0px 0px 0px;
}
#programm_rahmen div.spalte h4.extra,
#vod_rahmen div.spalte h4.extra {
	font-weight: 900!important;
	color: #E50051;
}

#programm_rahmen div.spalte h3,
#vod_rahmen div.spalte h3 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 900;
	margin: 0px 0px 0px 0px;
}

#programm_rahmen div.spalte h3 span.omu,
#vod_rahmen div.spalte h3 span.omu {
	font-size: 11px;
	font-weight: 400;
	color: #777;
	white-space: nowrap;
}

#programm_rahmen div.spalte div.credits,
#vod_rahmen div.spalte div.credits {
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	color: #777;
	margin: 0px 0px 0px 0px;
}

#programm_rahmen div.spalte div.infos_extra,
#vod_rahmen div.spalte div.infos_extra {
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	color: #E50051;
	margin: 1px 0px 0px 0px;
}

#programm_rahmen div.spalte div.infos_vod,
#vod_rahmen div.spalte div.infos_vod {
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	margin: 1px 0px 0px 0px;
}



/********** Spielorte **********/

#spielorte_rahmen {
}

#spielorte_rahmen div.eintrag + div.eintrag {
	margin-top: 30px;
}

#spielorte_rahmen h3 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: #E50051;
	margin: 0px 0px 7px 0px;
}

#spielorte_rahmen p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
}

#spielorte_rahmen p.logo_kino {
	margin: 10px 0px 10px -1px;
}



/********** Infos **********/

#infos_rahmen {
}

#infos_rahmen h5 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: #E50051;
	margin: 0px 0px 5px 0px;
}

#infos_rahmen p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
}
#infos_rahmen p + p {
	margin: 7px 0px 0px 0px;
}

#infos_rahmen div.eintrag + div.eintrag {
	margin-top: 30px;
}

#infos_rahmen #logos {
	margin-top: 45px;
}
#infos_rahmen #logos a {
	line-height: 63px;
}
#infos_rahmen #logos a {
	margin-right: 30px;
}
a.link.logo img {
	opacity: 0.6;
}
a.link.logo:hover img {
	opacity: 1;
}



/********** Kontakt / Impressum **********/

#kontakt_rahmen {
}

#kontakt_rahmen h4 {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: #E50051;
	margin: 0px 0px 5px 0px;
}

#kontakt_rahmen p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
}

div.impressum {
	padding-top: 2px;
}
div.impressum * {
	font-size: 10px!important;
	line-height: 16px!important;
	color: #777;
}
div.impressum div + div {
	margin-top: 15px;
}
div.impressum p {
	font-weight: 300!important;
}
div.impressum strong {
	font-weight: 500!important;
}
div.impressum a {
	text-decoration: none;
}
div.impressum a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 800px) {
	div.impressum + div.impressum {
		margin-top: 35px!important;
	}
}
@media screen and (min-width: 801px) {
	div.impressum div {
		padding-right: 25px;
	}
}



/********** allgemein **********/

@media screen and (max-width: 800px) {
	div.grid div.spalte + div.spalte,
	div.grid_2 div.spalte + div.spalte {
		margin-top: 70px;
	}
	div.grid div.spalte + div.spalte.ohne,
	div.grid_2 div.spalte + div.spalte.ohne {
		margin-top: 0px!important;
	}
	#programm_rahmen div.grid div.spalte + div.spalte,
	#vod_rahmen div.grid div.spalte + div.spalte {
		margin-top: 40px!important;
	}
	#spielorte_rahmen div.grid div.spalte + div.spalte {
		margin-top: 30px!important;
	}
	#infos_rahmen div.grid div.spalte + div.spalte {
		margin-top: 30px!important;
	}
}
@media screen and (min-width: 801px) and (max-width: 1200px) {
	div.grid,
	div.grid_2 {
		display: grid;
		grid-gap: 40px;
	}
	div.grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	div.grid_2 {
		grid-template-columns: 1fr 1fr;
	}
	div.grid div.spalte.span {
		grid-column: span 2;
	}
}
@media screen and (min-width: 1201px) {
	div.grid,
	div.grid_2 {
		display: grid;
		grid-gap: 60px;
	}
	div.grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	div.grid_2 {
		grid-template-columns: 1fr 1fr;
	}
	div.grid div.spalte.span {
		grid-column: span 2;
	}
}

div.scrollanker {
	position: absolute;
	top: -45px;
}
div.scrollanker.start {
	top: -30vh!important;
}

a {
	/*
	word-break: break-all;
	*/
	word-break: break-word;
}
a.link {
	color: inherit;
	text-decoration: underline;
	/*
	padding-bottom: 0px;
	border-bottom: 1px solid #E50051;
	*/
}
a.link:hover {
	color: #E50051;
}
a.link.partner,
a.tel {
	text-decoration: none!important;
}
a.link.partner:hover,
a.tel:hover {
	text-decoration: underline!important;
}

*.english,
*.english * {
	color: #E50051;
}
*.english a.link {
	/*
	border-bottom: 2px solid #111;
	*/
}
*.english a.link:hover {
	color: #111!important;
}

hr.trennlinie_dick {
	position: relative;
	height: 0px;
	border: 0px;
	border-top: 2px solid #E50051;
	margin: 0px 0px 0px 0px;
	/*
	display: none;
	*/
}