@charset "UTF-8";
/* CSS Document */


@media all and (pointer:none), (pointer:coarse) and (orientation:portrait) {
	
	:root {--MapHeightA: calc(100% - (8vw * 3) - (4.5vw * 3) - (4px * 3))}
	:root {--MapHeightB: calc(100% - 29vw)}

	:root {--NavHeightA: calc((1.5vw * 3) + (8vw * 3) + (4vw * 3) + (4px * 3))}
	:root {--NavHeightB: calc(100% - ((1.5vw * 3) + (8vw * 3) + (4vw * 3) + (4px * 3)) - (1.3vw + 8vw + 2vw + 4px))}
	
	:root {--MobNavLineA: solid 4px var(--black)}
	
	:root {--CloserPadding: 2vw 2vw 1.3vw 2vw}

	html {
		-webkit-tap-highlight-color: rgba(0,0,0,0.00);
		   -moz-tap-highlight-color: rgba(0,0,0,0.00);
		     -o-tap-highlight-color: rgba(0,0,0,0.00);
		        tap-highlight-color: rgba(0,0,0,0.00);
	}
	
	/* Animations */
	#MenuContainerMobile,
	#MobileNavCloser,
	#MobileNavKunstler,
	#MobileNavPartner,
	#MobileNavProgramm,
	#MobileListKunstler,
	#MobileListPartner,
	#MobileListProgramm,
	#MobileMapMonitorContent,
	#LeftContainer{
		-webkit-transition: 0.5s;
		   -moz-transition: 0.5s;
		     -o-transition: 0.5s;
		        transition: 0.5s;
		
	}
	
	#MenuContainerMobile,
	#LeftContainer{
		-webkit-transition-delay: 0.5s;
		   -moz-transition-delay: 0.5s;
		     -o-transition-delay: 0.5s;
		        transition-delay: 0.5s;
	}

	
	/* Paragraph Styles */
	body, p{
		font-size: 5vw;
		margin-block-end: 0.5em;
	}
	
	h1{
		font-size: 8vw;
		margin-block-end: 0.8em;
	}
	
	h2{
		font-size: 2.5vw;
		letter-spacing: 0.01vw;
	}
	
	a:link.ArtBtn,
	a:visited.ArtBtn {
		font-size: 5vw;
		padding: 1.2vw 1.6vw 1vw 1.6vw;
		margin-bottom: 4vw;
		width: calc(100% - 4vw);
		text-align: center;
	}
	
	a:link#ProjektButton,
	a:visited#ProjektButton,
	a:hover#ProjektButton{
		display: block;
		position: fixed;
		bottom: 4vw;
		right: 4vw;
		left: auto;
		width: 25vw;
		height: 25vw;
		background: url("../assets/buttons/hier_zum_projekt.svg");
		z-index: 40;
	}
	
	a:active#ProjektButton {
		background: url("../assets/buttons/hier_zum_projekt_hover.svg");
	}
	
	/* Containers */
	
	#LeftContainer{
		position: fixed;
		width: 100%;
		height: var(--MapHeightA);
	}	
	
	#RightContainer{
		display: none;
	}
	
	#MobileContent{
		position: fixed;
		background: var(--red);
		padding: 2vw;
		width: calc(100% - 4vw);
		height: calc(100% - 4vw);
		overflow: scroll;
	}
	
	/* Mobile Navigation */
	#MenuContainerDesk,
	.SeperatorLine{
		display: none;
	}
	
	#MenuContainerMobile{
		display: block;
		position: fixed;
		width: 100%;
		height: var(--NavHeightA);
		background: var(--lgrey);
		bottom: 0;
		z-index: 30;
	}
	
	#MobileNavCloser,
	#MobileNavKunstler,
	#MobileNavPartner,
	#MobileNavProgramm{
		font-size: 8vw;
		line-height: 8vw;
		font-weight: 700;
		text-transform: uppercase;
		border-top: var(--MobNavLineA);
		overflow: hidden;
		padding: 4vw 2vw 1.5vw 2vw;
		height: 8vw;
		background: var(--lgrey);
	}
	
	#MobileNavCloser{
		height: 0;
		padding: 0;
		text-align: center;
		border-top: 0;
	}
		
	#MobileListKunstler,
	#MobileListPartner,
	#MobileListProgramm{
		display: block;
		width: calc(100% - 4vw);
		height: 0;
		background: var(--red);
		overflow: scroll;
		border-top: 0;
		padding-left: 2vw;
		padding-right: 2vw;
	}
	
	#MobileListProgramm{
		height: var(--NavHeightB);
		border-top: var(--MobNavLineA);
	}
	
	#MobileMapMonitor{
		position: fixed;
		display: block;
		width: 100%;
		height: auto;
		bottom: 0;
		z-index: 20;
		background: var(--lgrey);
	}
	
	#MobileMapMonitorCloser{
		width: 100%;
		font-size: 8vw;
		line-height: 8vw;
		font-weight: 700;
		border-top: var(--MobNavLineA);
		padding: 4vw 2vw 1.5vw 2vw;
		text-align: center;
	}
	
	#MobileMapMonitorContent{
		padding: 0vw 2vw 0vw 2vw;
		border-top: 0;
		height: 0;
		width: calc(100% - 4vw + 1px);
		background: var(--lgrey);
		overflow: scroll;
	}
	
	.MobileMapMonitorContentOpen{
		height: 200px;
	}
	
	.HideThis{
		display: none;
	}
		
	/* Graphic Elements */

	#ZoomInButton,
	#ZoomOutButton,
	#InfoButton,
	#CloseButton{
		width: 15vw;
		height: 15vw;
		margin: 2vw;
	}
	
	#InfoButton,
	#CloseButton{
		position: fixed;
		display: block;
		right: 0;
		z-index: 20;
	}
	
	#CoviButton,
	#CoviButton:active{
		position: fixed;
		width: 30vw;
		height: 30vw;
		margin: 2vw;
		right: 0;
		bottom: 0;
		z-index: 40;
		background: url("../assets/buttons/jetzt_live.svg");
		-webkit-animation: rotation 10s infinite linear;
		   -moz-animation: rotation 10s infinite linear;
            -ms-animation: rotation 10s infinite linear;
             -o-animation: rotation 10s infinite linear;
                animation: rotation 10s infinite linear;
	}
		
	@-webkit-keyframes rotation {
		from {
			-webkit-transform: rotate(0deg);
			   -moz-animation: rotate(0deg);
				-ms-animation: rotate(0deg);
				 -o-animation: rotate(0deg);
					animation: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(359deg);
			   -moz-animation: rotate(359deg);
				-ms-animation: rotate(359deg);
				 -o-animation: rotate(359deg);
					animation: rotate(359deg);
		}
	}
	
	.MobLiveNot{
		display: none;
	}
	
	.MobLiveNow{
		display: block;
	}
	
	#InfoButton,
	#InfoButton:active{
		background: url("../assets/buttons/info_btn_off.svg");
	}
	
	#InfoButton:hover{
		background: url("../assets/buttons/info_btn_hover.svg");
	}
	
	#CloseButton,
	#CloseButton:active{
		background: url("../assets/buttons/close_btn_off.svg");
		bottom: 0px;
	}
	
	#CloseButton:hover{
		background: url("../assets/buttons/close_btn_hover.svg");
	}
	
	#LaufbandContainer{
		display: none;
	}
	
	.ListLetter{
		float: right;
		width: 8vw;
		height: 16vw;
		text-align: right;
		display: inline-block;
	}
	
	.MobileListLetterA,
	.MobileListLetterB,
	.MobileListLetterB,
	.MobileListLetterC,
	.MobileListLetterD,
	.MobileListLetterE,
	.MobileListLetterF,
	.MobileListLetterG,
	.MobileListLetterH,
	.MobileListLetterI,
	.MobileListLetterJ,
	.MobileListLetterK,
	.MobileListLetterL,
	.MobileListLetterM,
	.MobileListLetterN,
	.MobileListLetterO,
	.MobileListLetterP{
		display: block;
		height: 14vw;
		width: 14vw;
		float: right;
		background-repeat: no-repeat;
	}
	
	.MobileListLetterA{background: url("../assets/buttons/marker_off_A.svg");}
	.MobileListLetterB{background: url("../assets/buttons/marker_off_B.svg");}
	.MobileListLetterC{background: url("../assets/buttons/marker_off_C.svg");}
	.MobileListLetterD{background: url("../assets/buttons/marker_off_D.svg");}
	.MobileListLetterE{background: url("../assets/buttons/marker_off_E.svg");}
	.MobileListLetterF{background: url("../assets/buttons/marker_off_F.svg");}
	.MobileListLetterG{background: url("../assets/buttons/marker_off_G.svg");}
	.MobileListLetterH{background: url("../assets/buttons/marker_off_H.svg");}
	.MobileListLetterI{background: url("../assets/buttons/marker_off_I.svg");}
	.MobileListLetterJ{background: url("../assets/buttons/marker_off_J.svg");}
	.MobileListLetterK{background: url("../assets/buttons/marker_off_K.svg");}
	.MobileListLetterL{background: url("../assets/buttons/marker_off_L.svg");}
	.MobileListLetterM{background: url("../assets/buttons/marker_off_M.svg");}
	.MobileListLetterN{background: url("../assets/buttons/marker_off_N.svg");}
	.MobileListLetterO{background: url("../assets/buttons/marker_off_O.svg");}
	.MobileListLetterP{background: url("../assets/buttons/marker_off_P.svg");}
	
	.ProgrammBlock{
		margin-top: 4vw;
	}
		
	.HauptProListe{
		padding-right: 1vw;
		margin-top: 4vw;
		float: left;
	}
	.HauptProListe.half{
		width: calc(100% / 2 - 1vw);
	}
	
	.HauptProListe.third{
		width: calc(100% / 2 - 1vw);
	}
	
	.LiveVideoFrame{
		width: calc(100vw - 6vw);
		height: calc((100vw - 6vw) / 16 * 9);
	}
	
	.LiveMarker{
		color: var(--blue);
	}
		
	.CalendarMarkerA,
	.CalendarMarkerB,
	.CalendarMarkerC,
	.CalendarMarkerD,
	.CalendarMarkerE,
	.CalendarMarkerF,
	.CalendarMarkerG,
	.CalendarMarkerH,
	.CalendarMarkerI,
	.CalendarMarkerJ,
	.CalendarMarkerK,
	.CalendarMarkerL,
	.CalendarMarkerM,
	.CalendarMarkerN,
	.CalendarMarkerO,
	.CalendarMarkerX{
		display: none;
	}
		
	.CalendarRow1,
	.CalendarRow2{
		width: 50%;
		float: left;
	}
	
	.CalendarRow3{
		margin-top: 2vw;
		width: 100%;
	}
	
	.CalendarRow3 > h2 {
		margin-top: 2vw;
		width: 50%;
	}
	
	.Line01{
		height: 2px;
		margin-bottom: 4vw;
	}
	
	#ListKunstlerMobile > div > h1{
		font-size: 6vw;
		line-height: 7vw;
		margin-block-end: 0em;
	}
	
	/* Person Page */
	
	#MobPersHead{
		position: absolute;
		display: block;
		float: top;
		width: 100%;
		height: 100%;
		z-index: 50;
	}
	
	#PersDeskContent{
		position: absolute;
		top: 100vh;
	}
	
	#PersMobTitle{
		padding: 2vw;
		background: var(--red);
		font-size: 7vw;
		line-height: 8vw;
		font-weight: 700;
		min-height:  16vw;
		height: auto;
	}
	
	#PersMobTitle #CloseButton{
		bottom: auto;
		top: 0;
	}
	
	#MobPersHead > .MobImageSlider{
		position: absolute;
		width: 100%;
		height: calc(100vh - (16vw / 2));
		background: var(--red);
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}
	
	.MobPersPortrait{
		position: absolute;
		display: block;
		float: left;
		top: 0px;
		left: 80%;
		width: 80%;
		height: 100%;
		scroll-snap-align: start;
	}
	
	.MobPersPortrait:first-of-type {
		left: 0;
	}
	
	.MobPersPortrait img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		overflow: hidden;
	}
	
	
	#KunstlerContainer,
	#PartnerContainer,
	.PersonContent{
		position: relative;
		width: 100%;
		float: left;
		height: auto;
		overflow: visible;
	}
	
	#PartnerContainer{
		background: var(--red);
		-webkit-hyphens: none;
		   -moz-hyphens: none;
            -ms-hyphens: none;
             -o-hyphens: none;
                hyphens: none;
	}
	
	#PartnerContainer a:link,
	#PartnerContainer a:visited{
		color: var(--black);
	}
	
	.TwoLineContainer > .left,
	.TwoLineContainer > .right{
		width: 100%;
		margin-bottom: 5vw;
	}
	
	.PersonContent,
	.Fundstucke{
		padding: 2vw;
		width: calc(100% - 4vw);
	}
	
	.PersonHeadder{
		display: none;
	}
	
	.portrait{
		display: none;
	}
	
	.Mutterschaft {
		max-width: 100%;
	}
	
}