:root{
	--verylight: hsl(48,39%,96%); /*original: hsl(48,39%,72%) */
	--light: hsl(48,39%,92%); /*original: hsl(48,39%,72%) */
	--dark: hsl(206,40%, 12%); /*#0D1216;*/
	--verydark: hsl(206,40%,8%);
	--mid: #825332;
	--red: hsl(15,51%,47%);
	--lightred: hsl(15,75%,77%);
	--bulma-link-text: var(--lightred);
	--bulma-title-color: var(--verydark);
	--bulma-text: var(--light);
	--bulma-body-background-color): var(--verydark)
	--bulma-scheme-main: var(--verydark);
	scrollbar-color: rgba(200, 200, 200, 0.3) rgba(12, 21, 29, 0.4);
}
html{
	background-color:var(--verydark);
}
body{
	background-color:var(--verydark);
	color:var(--dark);
	font-family: "Overlook", sans-serif;
	font-weight: 200;
	font-style: normal;
}

h1{
	font-size: 22px;
	padding-bottom:8px;
}

.box {
    --bulma-scheme-main: var(--verylight);
	--bulma-radius-large:0;
	--bulma-shadow:none;
}

.navbar-menu.is-active {
	display: block;
}

.navbar{
	background-color: var(--verydark);
	color: var(--light);
	
	--bulma-navbar-burger-color: var(--light);
}

.is-autohide{
	transition: opacity 1s, transform 1s;
}
.navbar-hidden{
	transform:translateY(-8vh);
	opacity:0;
}

.navbar-item{
	text-align: center;
	font-size:1em;
}
.navbar-item:hover{
	background-color: var(--light);
	color: var(--dark);
}
.navbar{
    box-shadow: 0 1px 2px var(--verydark);
}

.navbar-icon:hover img{
	filter: invert(1);
}

.footer{
	background-color: var(--verydark);
	color: var(--light);
	--bulma-link-text: var(--lightred);
}

.pc {display:block;
	width:100vw;
    max-width: 200vh;
    margin: auto;
}
.mobile {
	display:none;
	width:100vw;
}
.youtubeframe {
	width:56vw;height:33vw;margin:auto;
}
@media (orientation: portrait){
	.pc{display:none;}
	.mobile {display:block;}
	.youtubeframe {
		width:78vw;height:47vw;
	}
}

a:hover{
	text-decoration:underline;
}
#sections{
	position: relative;
}
/*
.section{
	color: var(--verylight);
	background-color:var(--dark);
	padding: 2vh;
	position:absolute;
	top:0;
	transition: opacity 1s;
	width:100%;
	justify-content:center;
	min-height:90vh;
	opacity:0;
}
*/
.section{
	color: var(--verylight);
	background-color:var(--dark);
	padding: 2vh;
	padding-bottom: 6vh;
	width:100%;
	justify-content:center;
	min-height:60vh;
}
section:nth-child(even){
	background-color:var(--verydark);
}

.title{
    padding-bottom: 1vh;
    border-bottom: var(--dark) solid 1px;
    margin-bottom: 2vh!important;
}

.column:not(:last-child){
	/* border-bottom: var(--dark) solid 1px; */ 
}

@media screen and (min-width: 769px), print {
    .column:not(:last-child){
		/* border-right: var(--dark) solid 1px; */
		/* border-bottom: none; */
    }
}

#hero_old{
    display: flex;
	padding:0;
	position:relative;
}

.fullsize{
	padding:0;
	margin:0;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
#hero{
	position:relative;
	height:100vh;
}

.parallaxSection{
	position: relative;
	width:100%;
	height:50vh;
	background-color:rgb(0,0,200);
}
.parallax {
    position: relative;
    height: 100%;
    background-attachment: fixed;
    background-image: url(photos/neu1.jpg);
    background-position-x: 30%;
    /*filter: saturate(0.5) blur(3px);*/
}

@media (orientation: portrait){
.parallax {
    background-size: auto 100lvh;
}
}

/* Obere Linie von rechts 
.section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 2px;
  background-color: grey;
}

/* Untere Linie von links
.section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background-color: grey;
}
*/

div.parallax::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('overlay_2.png');
  background-size: .75em;
  background-attachment: fixed;
  z-index: 1;
  pointer-events: none; /* Damit Klicks durchgehen */
}

#parallax1{
    background-image: url(theater/kreuz.webp);
}
#parallax2{
    background-image: url(photos/neu2.jpg);
    background-position: 50% 30%;
}
#parallax5{
    background-image: url(photos/neu5.jpg);
    background-position: 54% 20%;
}
#parallax9{
    background-image: url(photos/neu9.jpg);
}
#parallax10{
    background-image: url(photos/neu10.jpg);
	background-position-x: right;
}
#parallax11{
    background-image: url(photos/neu11.jpg);
	background-position-x: right;
}
#parallax12{
    background-image: url(photos/neu12.jpg);
    background-position: 80% 40%;
}
#parallaxSpaeti{
    background-image: url(photos/title.jpg);
	background-position-x: 69%;
}
#parallaxLazarus{
    background-image: url(theater/lazarus.webp);
    background-position: 60% 20%;
    
    
    
#parallax10{
    background-image: url(photos/neu10.jpg);
    background-position-x: right;
};
}

.fullsize{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url("photos/neu1.jpg");
  transition:opacity 4s;
}

.phototext{
	text-align:right;
	font-size:min(4.5vw, 6vh);
	font-weight: bold;

	position:absolute;
	top:2vh;
	left:0;
	right:0;
	transform:translateX(-6vh);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
	text-shadow: 1px 1px 2px var(--dark);
}
.phototitle{
	transition:background-color 2s;
	padding-right:2vh;
	margin-right:-2vh;
	padding-left:2vh;
}
.phototitle:hover{	
	background-color:rgba(255,255,255,0.2);
	cursor:pointer;
}
.mybutton{
	margin-top:2vh;
    padding: 0 2%;
	background-color:rgba(255,255,255,0.1);
    border: 1px solid transparent;
	transition:background-color 2s;
	transition: border 2s;
	font-size:min(3vw, 4vh);
	font-weight: normal;
}
.mybutton:hover{
    border: 1px solid var(--light);
	background-color:rgba(255,255,255,0.2);
	cursor:pointer;
}

#newsx{
	transition:opacity 4s;
	position:absolute;
	bottom:2vh;
	left:0;
	right:0;
	text-align:center;
	text-shadow: 1px 1px 1px var(--dark);
	opacity:0;
	font-size:min(6vw, 4vh);
}
#news{
    transition: opacity 4s;
    position: absolute;
    bottom: 2vh;
    left: 0;
    right: 0;
    text-align: center;
    text-shadow: 1px 1px 1px var(--dark);
    opacity: 0;
    font-size: min(6vw, 4vh);
    font-weight: 600;
    font-stretch: semi-expanded;
    font-variant-caps: petite-caps;
    padding: 2vw;
}
#news p{
	font-size:min(5vw, 3vh);
}

@media (orientation: portrait){
	#hero{
		flex-direction: column;
		align-items: center;
	}
	.phototext{
		position:absolute;
		top:2vh;
		left:2vh;
		right:2vh;
		text-align:right;
		font-size:min(6vw, 4vh);
		transform:none;
	}
	.mybutton{
		font-size:min(5vw, 3vh);
	}
	#news{
		bottom:10vh;
	}
}

	
#backButton{
	position:fixed;
	z-index:100;
	opacity:0.001;
	right:1em;
	bottom:1em;
	width:4em;
	height:4em;
	background-color:var(--dark);
	pointer-events:auto;
}
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  
  border-bottom: 2em solid var(--light);
}
.vitaTable td {padding-right:1rem;}
.articleimage {
	aspect-ratio: 9/11;
	width:100%;
	object-fit: cover; 
	overflow: hidden;
}
.articleimage img{
	height:100%;
	object-fit: cover; 
}

table.theater1 {
	width: 100%;
	text-shadow: 1px 1px black;
}
table.theater1 tr td:nth-child(1) {
	width: 70px;
	text-align:right;
	padding-right:1em;
}
table.theater1 tr td:nth-child(2) {
	width: *;
	padding-right:1em;
}
table.theater1 tr td:nth-child(3) {
	width: 160px;
	padding-right:1em;
}
table.theater1 tr td:nth-child(4) {
	width: 140px;
}

table.theater2 {
	width: 100%;
	text-shadow: 1px 1px black;
}
table.theater2 tr td:nth-child(1) {
	width: *;
	padding-right:1em;
}
table.theater2 tr td:nth-child(2) {
	width: 160px;
	padding-right:1em;
}
table.theater2 tr td:nth-child(3) {
	width: 140px;
}

#theaterTable .cell{
	/*
	text-overflow: ellipsis;
    text-wrap-mode: nowrap;
    overflow: hidden;
	*/
	justify-self:left;
}
#theaterTable .cell:nth-child(4n) {
	justify-self:right;
	text-align: end;
}
#theaterTable .cell:nth-child(4n-3) {
	justify-self:right;
	text-align: end;
}

#theaterTable .fixedGrid{
	margin-bottom:2em
}

#theaterTable h2{
	margin-bottom:.5em
}

div.theaterGrid{
	grid-template-columns: 3fr 7fr 3fr;
	row-gap:0;
	text-shadow:1px 1px black;
}
#theaterTable .cell:nth-child(4n) {
	display: none;
}

@media (min-width: 550px){
	div.theaterGrid{
		grid-template-columns: 3fr 5fr 3fr 3fr;
	}
	#theaterTable .cell:nth-child(4n) {
		display: block;
	}
}
@media (min-width: 769px){
	div.theaterGrid{
		grid-template-columns: 3fr 7fr 3fr;
	}
	#theaterTable .cell:nth-child(4n) {
		display: none;
	}
}
@media (min-width: 1024px){
	div.theaterGrid{
		grid-template-columns: 3fr 5fr 3fr 3fr;
	}
	#theaterTable .cell:nth-child(4n) {
		display: block;
	}
}

p.address{
	padding-left:1em;
}
p.addressNoPad{
	padding-left:0em;
}