@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-image: url("../bilder/aufbau/Hintergrund_600.jpg");
	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);
}



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

#leerraum_oben,
#hintergrund {
	position: relative;
	z-index: -1;
	width: 100%;
	height: 100%;
}
#hintergrund::after {
	content: "";
	display: block;
	position: fixed;
	z-index: -1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	/*
	background-image: url("../bilder/aufbau/Hintergrund_1200.jpg");
	*/
	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_500.png");
	background-image: url("../bilder/aufbau/Aufkleber.svg");
	*/
	background-image: url("../bilder/aufbau/Aufkleber_online.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;
	/* zu groß:
	background-image: url("../bilder/aufbau/Logo_Leiste_Vektor.svg");
	*/
	background-image: url("../bilder/aufbau/Logo_Leiste.png");
	background-position: center bottom 10px;
	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%;
	}
}



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

#inhalt_rahmen {
	position: relative;
	z-index: 3;
	background-color: #FFF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#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: #E7343F;
	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;
}
#corona_rahmen p.english {
	color: #E7343F;
}



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

#intro_rahmen {
}

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



/********** Programm **********/

#programm_rahmen {
}

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

#programm_rahmen div.spalte {
	position: relative;
}

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

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

#programm_rahmen div.eintrag > a {
	position: absolute;
	z-index: 1;
	top: -7px;
	left: -7px;
	width: calc(100% + 14px);
	height: calc(100% + 12px);
	mix-blend-mode: multiply;
	border-radius: 4px;
}
#programm_rahmen div.eintrag > a:hover {
	background-color: rgba(0,0,0,0.06);
}

#programm_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 {
	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 {
	position: relative;
	width: 100%;
	margin: 0px 0px 0px 0px;
	border-radius: 3px;
}

#programm_rahmen div.spalte div.eintrag h2 {
	font-size: 22px;
	line-height: 24px;
	font-weight: 900;
	color: #E7343F;
	/*
	padding-bottom: 5px;
	border-bottom: 2px solid #111;
	text-decoration: underline;
	*/
}

#programm_rahmen div.spalte div.eintrag div.datum {
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: #E7343F;
}

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

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

#programm_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 {
	font-size: 11px;
	font-weight: 400;
	color: #777;
	white-space: nowrap;
}

#programm_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 {
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	color: #E7343F;
	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: #E7343F;
	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: #E7343F;
	margin: 0px 0px 5px 0px;
}

#infos_rahmen p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	margin: 0px 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: #E7343F;
	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 {
		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 #E7343F;
	*/
}
a.link:hover {
	color: #E7343F;
}
a.link.partner,
a.tel {
	text-decoration: none!important;
}
a.link.partner:hover,
a.tel:hover {
	text-decoration: underline!important;
}
p.english a.link {
	/*
	border-bottom: 2px solid #111;
	*/
}
p.english a.link:hover {
	color: #111!important;
}

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