		aside.inline-popup {
			position: relative;
			background: rgb(252, 232, 145);
			color: #000;
			padding: 40px 20px;
			width: auto;
			max-width: 800px;
			margin: 20px auto;
		}

		aside h1 {
			font-size: 1.3em;
		}

		aside h2 {
			margin-top: 1.5em;
		}

		aside p {
			margin: .5em 0;
			font-size: 1em;
		}

		aside em {
			display: block;
			font-variant: normal;
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			margin-bottom: 1.1em;
		}

		aside li {
			margin: 1em;
			list-style-position: inside;
		}

		aside.info-sheet {
			background: rgb(220, 220, 220);
		}

		/* ======Move-from-top effect====== */

		.mfp-move-from-top .mfp-content {
			vertical-align: top;
		}

		.mfp-move-from-top .mfp-with-anim {
			opacity: 0;
			transition: all 0.2s;
			transform: translateY(-100px);
		}

		.mfp-move-from-top.mfp-bg {
			opacity: 0;
			transition: all 0.2s;
		}

		.mfp-move-from-top.mfp-ready .mfp-with-anim {
			opacity: 1;
			transform: translateY(0);
		}

		.mfp-move-from-top.mfp-ready.mfp-bg {
			opacity: 0.8;
		}

		.mfp-move-from-top.mfp-removing .mfp-with-anim {
			transform: translateY(-50px);
			opacity: 0;
		}

		.mfp-move-from-top.mfp-removing.mfp-bg {
			opacity: 0;
		}

		.mfp-title {
			position: absolute;
		}

		/* END: ======Move-from-top effect====== */

		/* ======= Für die tickets-seite: ein und ausblenden ====== */

		/* overlay at start */

		.mfp-fade.mfp-bg {
			opacity: 0;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}

		/* overlay animate in */

		.mfp-fade.mfp-bg.mfp-ready {
			opacity: 0.8;
		}

		/* overlay animate out */

		.mfp-fade.mfp-bg.mfp-removing {
			opacity: 0;
		}

		/* content at start */

		.mfp-fade.mfp-wrap .mfp-content {
			opacity: 0;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}

		/* content animate it */

		.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
			opacity: 1;
		}

		/* content animate out */

		.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
			opacity: 0;
		}

		.mfp-iframe-scaler-info {
			position: relative;
			padding: 40px 20px;
			width: auto;
			max-width: 800px;
			margin: 20px auto;
			height: 0;
			padding-top: 56.25%;
		}

		.mfp-iframe-scaler-info iframe {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			background: rgb(252, 232, 145);
			padding: .5em;
			/* padding-right: .5em; */
		}

		@media only screen and (max-width: 60em) {

			/* 960 px */
			.mfp-iframe-scaler-info {
				padding-top: 100%;
			}
		}

		@media only screen and (max-width: 28em) {

			/* 448 px */
			.mfp-iframe-scaler-info {
				padding-top: 150%;
			}
		}

		@media only screen and (min-height: 800px) and (min-width: 600px) {

			/* iframe-window opens with more height on desktop (viewport-width > 600px)  */
			.mfp-iframe-scaler-info {
				padding-top: 80%;
			}
		}

		/* alles oberhalb von hier: nur benutzt für das Popup */

		html {
			font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif;
		}

		html, body {
			height: 100%;
			/* scroll-behavior: smooth; nur für Desktopbrowser siehe unten */
		}

		body {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			background-color: #001833;
			color: #fff;
		}

		html, body, p, ul {
			margin: 0;
			padding: 0;
		}

		#wrapper {
			padding: 0 .5em;
			padding-bottom: 2em;
			background: url(../img/pageback.jpg) no-repeat top;
			background-color: rgb(0, 41, 76);
			background-size: contain;
		}

		.sponsor-top figure {
			text-align: center;
		}

		.sponsor-top figure img {
			width: 24%;
			margin-top: 1.5em;
		}

		@media only screen and (min-width: 28em) {
			.sponsor-top figure img {
				width: 19%;
				margin-top: 2.5em;
			}
		}

		@media only screen and (min-width: 38em) {
			.sponsor-top figure img {
				width: 16%;
				margin-top: 3.5em;
			}
		}

		.sponsor-top figure figcaption {
			font-size: .8em;
			margin-top: .7em;
		}

		header h1 {
			height: 210px;
			background: url(../img/oak_logo_termin_2026.png) no-repeat top;
			background-size: contain;
			text-indent: 300%;
			white-space: nowrap;
			overflow: hidden;
			border: none;
			padding: 0;
			margin-top: 1em;
		}

		@media only screen and (min-width: 38em) {
			header h1 {
				height: 240px;
				margin: 1.5em 0;
			}
		}

		.location-pics {
			margin: 2em 0;
		}

		.location-pics li {
			width: 100%;
			overflow: auto;
		}

		.location-pics li img {
			width: 140%;
			max-width: none;
		}

		.location-pics figcaption {
			float: right;
			font-size: .8em;
			color: #c2c2c2;
			margin: .5em .5em 0 0;
		}

		.location-pics .bx-controls a {
			float:left;
			margin-right: 1em;
			margin-top: .5em;
			font-size: .8em;
		}

		@media only screen and (min-width: 25em) {

			/* 400 px */
			.location-pics li img {
				width: 100%;
			}	
		}

		.programlist {
			margin: 2em auto;
			width: 90%;
			background: #FCDF5D;
			padding: .5em;
			color: rgb(0, 16, 85);
			text-align: center;
		}

		.programlist h1 {
			font-size: 1.3em;
		}

		.programlist p {
			background: rgba(255, 255, 255, .5);
			font-size: .9em;
			border-radius: 3px;
			margin: .5em 0;
			padding: .2em 0;
		}

		.programlist a {
			display: block;
			font-size: 1.1em;
			color: #16167C;
		}

		@media only screen and (min-width: 45em) {
			.programlist {
				width: 70%;
			}

			.programlist p {
				width: 80%;
				margin: .5em auto;
			}
		}

		.sponsor-main {
			margin: 2em 0;
		}

		.sponsor-main figure {
			text-align: center;
		}

		.sponsor-main img {
			width: 90%;
		}

		@media only screen and (min-width: 30em) {

			/* 400 px */
			.sponsor-main figure img {
				width: 80%;
			}
		}

		@media only screen and (min-width: 45em) {

			/* 720 px */
			.sponsor-main figure img {
				width: 45%;
			}
		}

		.gastro {
			margin-top: 2em;
		}

		.gastro h2 {
			text-align: center;
			font-size: 1.2em;
		}

		.gastro figure {
			text-align: center;
		}

		.gastro figure img {
			width: 90%;
		}

		.gastro-menu-button a, .gastro-menu-button a:visited {
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			display: block;
			width: 90%;
			margin: 1em auto 0;
			padding: .5em;
			border-radius: 5px;
			text-align: center;
			background: rgba(255, 255, 255, .1);
			background: #FCE891;
			color: #FF9341;
			color: #600;
		}

		.gastro-menu-button a:hover, .gastro-menu-button a:focus {
			background: #ffe054;
		}


		@media only screen and (min-width: 30em) {

			/* 400 px */
			.gastro figure img {
				width: 80%;
			}

			.gastro-menu-button a {
				width: 80%;
			}
		}

		@media only screen and (min-width: 45em) {

			/* 720 px */
			.gastro h2 {
				font-size: 1.5em;
			}

			.gastro figure img {
				width: 45%;
			}

			.gastro-menu-button a {
				width: 45%;
			}
		}

		.headlines, .endline {
			margin: 2em auto;
			width: 90%;
			background: rgba(255, 255, 255, .1);
			padding: 1em;
		}

		.headlines h2, .endline h2 {
			text-align: center;
			font-size: 1.05em;
		}

		.headlines p {
			margin: .5em 0;
			text-align: center;
		}

		.headlines p:first-of-type {
			margin-top: 1.5em;
		}

		.headlines a[href^="mailto:"] {
			display: block;
			margin: .5em 0;
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			color: rgb(252, 222, 177);
		}

		.headlines .clock {
			float: left;
			width: 30%;
			margin-right: 1em;
			margin-bottom: 8em;
		}

		@media only screen and (min-width: 25em) {
			.headlines .clock {
				width: 22%;
				margin-bottom: 4em;
			}
		}

		@media only screen and (min-width: 35em) {
			.headlines .clock {
				width: 14%;
			}
		}

		@media only screen and (min-width: 45em) {
			.headlines, .endline {
				width: 70%;
			}

			.headlines h2, .endline h2 {
				font-size: 1.3em;
			}

			.headlines .clock {
				width: 13%;
				position: relative;
				top: -5px;
				margin-bottom: 0;
			}
		}

		.sm {
			margin: 1em 0 -1em 0;
		}

		.sm .left {
			float: left;
			width: 40%;
			text-align: right;
		}

		.sm .left img {
			width: 42px;
			padding-top: 1px;
		}

		.sm .right {
			float: right;
			width: 40%;
			text-align: left;
		}

		.sm .right img {
			width: 40px;
		}

		@media only screen and (min-width: 45em) {
			.sm .left, .sm .right {
				width: 45%;
			}
		}

		.bike {
			background: rgba(255, 255, 255, .1);
			margin: 2em auto;
			width: 90%;
			padding: 1em;
		}

		.bike .bike-logo {
			text-align: center;
		}

		.bike .bike-logo img {
			width: 80%;
		}

		.bike p {
			width: 90%;
			margin: .5em auto;
			text-align: center ;
		}

		@media only screen and (min-width: 25em) {

			/* 400 px */
			.bike .bike-logo img {
				width: 50%;
			}

		}

		@media only screen and (min-width: 33em) {

			/* 528 px */
			.bike .bike-logo img {
				width: 40%;
			}

		}

		@media only screen and (min-width: 45em) {

			.bike {
				width: 70%;
			}

			/* 720 px */
			.bike .bike-logo {
				float: left;
				width: 35%;
				margin-right: 30px;
				margin-top: 10px;
			}

			.bike .bike-logo img {
				width: 100%;
			}

			.bike p {
				float: left;
				width: 55%;
				text-align: left;
				font-size: 1em;
			}
		}

		@media only screen and (min-width: 58em) {

			/* 960 px */
			.bike .bike-logo {
				width: 35%;
				margin-right: 30px;
				margin-top: 0;
			}

			.bike .bike-logo img {
				width: 90%;
			}

			.bike p {
				float: left;
				width: 60%;
				text-align: left;
				font-size: 1.2em;
			}
		}


		.lounge figure {
			margin: 0 auto;
			text-align: center;
		}

		.lounge img {
			width: 100%;
		}

		.lounge h2 {
			color: rgb(90, 206, 255);
			margin: 0;
			margin: 1em 0 -.5em 0;
			font-size: 1.2em;
		}
		.lounge .button {
			margin: 0 auto -.5em;
		}		
		
		@media only screen and (min-width: 45em) {

			.lounge img {
				width: 60%;
			}
			.lounge h2 {
				font-size: 1.4em;
			}			
			.lounge .button {
				margin: 1em auto -.5em;
			}		

		}

		aside#lounge {
			background: rgba(0, 25, 72, 0.883);
			color: #fff;
		}

		aside#lounge .mfp-close {
			color: #fff;
		}

		aside#lounge {
			text-align: center;
		}
		aside#lounge figure img {
			width: 100%;
		}

		aside#lounge h1 {
			color: rgb(90, 206, 255);
			margin-top: 1em;
		}

		aside#lounge p {
			margin: 1em 0;
			line-height: 1.6;
		}

		@media only screen and (min-width: 45em) {

			aside#lounge figure img {
				width: 80%;
			}			
			
			aside#lounge h1 {
				font-size: 1.6em;
			}
			aside#lounge p {
				font-size: 1em;
				line-height: 1.8;				
			}			

		}

		.pairlogos, .singlelogo {
			background: rgba(255, 255, 255, .1);
			margin: 2em auto;
			width: 90%;
			padding: 1em;
		}

		@media only screen and (min-width: 45em) {
			.pairlogos {
				width: 70%;
			}

			.singlelogo {
				width: 70%;
			}
		}

		.pairlogos h2, .singlelogo h2 {
			font-size: .9em;
			text-align: center;
			margin-bottom: 1em;
		}

		.pairlogos .left {
			float: left;
			width: 49%;
		}

		.pairlogos .right {
			float: right;
			width: 49%;
		}

		.singlelogo .oscars-logo {
			text-align: center;
			margin-top: -.6em;
		}

		.pairlogos .kinokult-logo {
			text-align: right;
			margin-right: 1em;
		}

		.pairlogos .karlskaserne-logo {
			text-align: left;
			margin-left: 1em;
		}

		.singlelogo .oscars-logo img {
			width: 35%;
		}

		.pairlogos .kinokult-logo img {
			width: 85%;
		}

		.pairlogos .karlskaserne-logo img {
			width: 85%;
		}

		@media only screen and (min-width: 38em) {

			/* 608 px */
			.pairlogos h2, .singlelogo h2 {
				font-size: 1em;
			}

			.singlelogo .oscars-logo img {
				width: 25%;
			}

			.pairlogos .kinokult-logo img {
				width: 60%;
			}

			.pairlogos .karlskaserne-logo img {
				width: 60%;
			}
		}

		@media only screen and (min-width: 45em) {

			/* 720 px */
			.pairlogos h2 {
				font-size: 1em;
			}

			.singlelogo .oscars-logo img {
				width: 25%;
			}

			.pairlogos .kinokult-logo img {
				width: 50%;
			}

			.pairlogos .karlskaserne-logo img {
				width: 55%;
			}
		}

		.film {
			position: relative;
			background: linear-gradient(rgb(252, 232, 145), rgb(252, 223, 93));
			padding: 1em;
			margin: 3em auto;
			color: #222;
			border-top: 4px solid #fff;
			border-bottom: 4px solid #fff;
		}

		.film dd {
			margin: .5em 0;
		}

		.film .poster {
			text-align: center;
			margin: 0 auto 1em;
			width: 55%;
			background: #fff;
			padding: .4em;
		}

		.film .section {
			display: block;
			padding-bottom: .4em;
		}

		.film .poster img {
			width: 100%;
		}

		@media only screen and (min-width: 30em) {

			/* 480 px */
			.film .poster {
				width: 40%;
			}
		}

		@media only screen and (min-width: 37em) {

			/* 480 px */
			.film .poster {
				width: 35%;
			}
		}

		@media only screen and (min-width: 45em) {

			/* 720 px */
			.film .poster {
				width: 26%;
				margin: 0 2%;
				float: left;
				margin-top: 3em;
			}
		}

		.film .termin {
			text-align: center;
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
		}

		.film .termin span {
			display: inline-block;
			font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif;
			margin-left: 1em;
			color: #666;
		}

		.film dt {
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			font-size: 1.5em;
			text-align: center;
			color: #000;
		}

		.film dt span {
			display: block;
			font-size: .8rem;
			text-transform: uppercase;
			font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif;
		}

		.film .textbox, .film .tickettext-box {
			background: rgb(255, 241, 179);
			padding: .2em 1em;
			margin: 1em 0;
			text-align: center;
		}

		.film .tickettext-box {
			color: red;
		}

		.film .filmtext {
			display: none;
		}

		.film .teasertext, .film .filmtext {
			font-size: 1em;
		}

		.film .credits {
			display: block;
			margin: 1.3em 0;
			font-family: 'OpenSans-Italic', Arial, Helvetica, sans-serif;
			text-align: center;
			font-size: .9em;
			color: #5a5a5a;
			background: rgba(255, 255, 255, .4);
			padding: .5em;
			border-radius: 8px;
		}

		.film .soldout {
			position: absolute;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			width: 260px;
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			color: #fff;
			font-size: 1.6em;
			text-align: center;
			background: rgba(85, 85, 85, 1);
			border: 1px solid #fff;
			border-radius: 5px;
			box-shadow: 4px 4px 4px #5a5a5a;
			padding: .2em 1em;
			transform: rotate(-5deg);
		}

		@media only screen and (min-width: 45em) {
			.film .soldout {
				width: 600px;
				top: 30%;
			}
		}

		.arrow-down {
			display: block;
			margin: .5em auto 0;
			width: 0;
			height: 0;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
			border-top: 15px solid rgb(174, 212, 255);
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		.arrow-up {
			display: block;
			margin: .5em auto 0;
			width: 0;
			height: 0;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
			border-bottom: 15px solid rgb(174, 212, 255);
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		.button {
			text-align: center;
		}

		.button a, .button a:visited {
			display: inline-block;
			text-align: center;
			width: 9em;
			margin: 1em .6em .2em;
			padding: .3em .8em;
			border: 2px solid transparent;
			border-radius: 25px;
			color: #fff;
			background: #007AE5;
			font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
			font-size: 1em;
		}

		.button a:hover, .button a:focus {
			background: #0D0E80;
			text-shadow: 1px 1px 2px #000066;
			border: 2px solid #007AE5;
			color: #FAE16D;
		}

		.info-button a {
			width: 13em;
			margin: .6em 1em;
		}

		.infilm a, .infilm a:visited {
			background: #0D0E80;
		}

		.infilm a:hover, .infilm a:focus {
			background: #007AE5;
		}

		/*! for desktop screens */

		@media only screen and (min-width: 45em) {	
			/* 720 px */

			html, body {
				scroll-behavior: smooth;
			}		

			#wrapper {
				max-width: 68em;
				min-width: 45em;
				margin: 0 auto;
				padding: 0;
				padding-bottom: 2em;
			}

			.sponsor-top figure img {
				width: 14%;
				margin-top: 3em;
			}

			.sponsor-top figure figcaption {
				margin-top: 1.5em;
			}

			header h1 {
				height: 300px;
				margin-top: 2em;
			}

			.location-pics {
				margin: 4em auto 3em;
				width: 90%;
			}

			.location-pics li img {
				width: 100%;
			}

			.sponsor-main {
				margin-bottom: 3em;
			}

			.sponsor-main figure {
				margin: .5em;
				text-align: center;
			}

			.sponsor-main img {
				width: 70%;
			}

			.film .filminfos {
				float: left;
				width: 70%;
				padding: 0 2em;
			}

			.film .termin {
				text-align: left;
			}

			.film dt {
				font-size: 1.7em;
				text-align: left;
			}

			.film .teasertext {
				font-family: 'OpenSans-Bold', Arial, Helvetica, sans-serif;
				font-size: 1em;
				margin: 1em 0;
			}

			.film .teasertext span {
				display: none;
			}

			.film .filmtext {
				display: block !important;
				font-size: 1em;
			}

			.film .credits {
				font-size: 1em;
				margin-left: 1em;
				margin-top: 1em;
				text-align: left;
				background: none;
				padding: 0;
			}

			.button a, .button a:visited {
				margin: 0 0 .5em;
				margin-right: 2em;
			}

			.button {
				text-align: left;
			}

			.info-button {
				text-align: center;
			}

			.info-button a {
				width: 11em;
				margin: 1em 2em;
			}

			.mfp-iframe-holder .mfp-content {
				max-width: 1050px;
			}
		}