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

/* Variables */
:root {--pink: #FF59A8;}
:root {--red: #FD4C00;}
:root {--green: #37A561;}
:root {--blue: #2B0BDC;}
:root {--black: #303030;}
:root {--dgrey: #8B8B8B;}
:root {--mgrey: #B2B2B2;}
:root {--lgrey: #D9D9D9;}
:root {--white: #FFFFFF;}

::-webkit-scrollbar {
	background: var(--black);
    width: 0.3vw;
	height: 0px;
}

::-webkit-scrollbar-track {
}
 
::-webkit-scrollbar-thumb {
	background: var(--blue);
}
	

::-webkit-scrollbar-thumb:hover {
	background: var(--red);
	}

#LeftContainer,
#RightContainer{
	overflow-x: hidden;
}

/* Hide Mobile Elements */

#MenuContainerMobile,
#MobileMapMonitor,
#MobPersHead{
	display: none;
}


@media all {
	
	body{
		margin: 0;
		background: var(--black);
		-webkit-hyphens: auto;
		   -moz-hyphens: auto;
            -ms-hyphens: auto;
             -o-hyphens: auto;
                hyphens: auto;
	}

	
	/* Paragraph Styles */
	body{
		font-family: "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
		font-weight: 600;
		font-style: normal;
		font-size: 1.35vw;
		color: var(--black);
	}
	
	p{
		margin-block-start: 0em;
		margin-block-end: 1em;
	}
	
	a:link.ArtBtn,
	a:visited.ArtBtn {
		color: var(--black);
		background: var(--pink);
		font-weight: 700;
		font-size: 1.35vw;
		padding: 1.2vw 1.6vw 1vw 1.6vw;
		margin-bottom: 1vw;
		display: inline-block;
		
		-webkit-hyphens: none;
		   -moz-hyphens: none;
            -ms-hyphens: none;
             -o-hyphens: none;
                hyphens: none;
	}
	
	a:hover.ArtBtn {
		background: var(--green);
	}
	
	a:active.ArtBtn {
		background: var(--blue);
	}
	
	a:link#ProjektButton,
	a:visited#ProjektButton {
		display: block;
		position: fixed;
		bottom: 10vw;
		left: calc(50% - 12vw);
		width: 10vw;
		height: 10vw;
		background: url("../assets/buttons/hier_zum_projekt.svg");
		z-index: 40;
	}
	
	a:hover#ProjektButton {
		background: url("../assets/buttons/hier_zum_projekt_hover.svg");
	}
	
	a:link#ProjektButton.KP,
	a:visited#ProjektButton.KP {
		background: url("../assets/buttons/to_the_project.svg");
	}
	
	a:hover#ProjektButton.KP {
		background: url("../assets/buttons/to_the_project_hover.svg");
	}
	
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
     -moz-animation: rotating 20s linear infinite;
      -ms-animation: rotating 20s linear infinite;
       -o-animation: rotating 20s linear infinite;
          animation: rotating 20s linear infinite;
}	
	h1{
		font-weight: 700;
		font-size: 2.7vw;
		line-height: 1.2;
		margin-block-start: 0em;
		margin-block-end: 0.4em;
		-webkit-hyphens: none;
		   -moz-hyphens: none;
            -ms-hyphens: none;
             -o-hyphens: none;
                hyphens: none;
	}
	
	.ListContainer > h1 {
		margin-block-end: 0.8em;
	}
		
	h2{
		font-weight: 700;
		font-size: 0.8vw;
		letter-spacing: 0.03vw;
		line-height: 1.3;
		margin-block-start: 0em;
		margin-block-end: 0.4em;
	}
	
	a:link,
	a:visited{
		color: var(--blue);
		text-decoration: none;
	}
	
	a:hover{
		color: var(--green);
	}
	
	.italics{
		font-style: italic;
	}
	
	
	/* Menu Elements */
	
	#MenuKunstlerDesk,
	#MenuPartnerDesk,
	#MenuProgrammDesk,
	#MenuInfoDesk{
		position: relative;
		float: left;
		font-weight: 700;
		text-transform: uppercase;
		padding: 1vw 1vw 0vw 1vw;
		font-size: 1vw;
		letter-spacing: 0.03em;
		transition:  0.2s;
		transition-timing-function: ease;
	}
	
	
	#MenuInfoDesk{
		position: absolute;
		right: 0;
	}
	
	#MenuKunstlerDesk:hover,
	#MenuPartnerDesk:hover,
	#MenuProgrammDesk:hover,
	#MenuInfoDesk:hover{
		cursor: pointer;
	}
		
	.MenuMarker,
	.MenuHover{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0vw;
		background: var(--black);
		transition:  0.2s;
		transition-timing-function: ease;
	}
	
	#MenuKunstlerDesk:hover > .MenuHover,
	#MenuPartnerDesk:hover > .MenuHover,
	#MenuProgrammDesk:hover > .MenuHover,
	#MenuInfoDesk:hover > .MenuHover{
		height: 0.7vw;
	}
	
	.MenuText{
		position: relative;
	}
	
	
	#MenuKunstlerDesk:hover > .MenuMarker,
	#MenuPartnerDesk:hover > .MenuMarker,
	#MenuProgrammDesk:hover > .MenuMarker,
	#MenuInfoDesk:hover > .MenuMarker{
		transition:  0.2s;
		transition-timing-function: ease;
	}
	
	#MenuProgrammDesk > .MenuMarker{
		height: 100%;
	}
	
	#MenuProgrammDesk{
		color: var(--lgrey);
	}
			
	
	/* Containers */
	
	#MenuContainerDesk{
		position: fixed;
		right: 0;
		width: 50%;
		background: var(--lgrey);
		z-index: 20;
		transition:  0.2s;
		transition-timing-function: ease;
	}
		
	#LeftContainer,
	#RightContainer{
		position: fixed;
		width: 50%;
		height: calc(100% - 4vw);
		z-index: 10;
		overflow-y: scroll;
	}
	
	#LeftContainer{
		left: 0;
		background: var(--pink);
		overflow: hidden;
	}
		
	#RightContainer{
		right: 0;
		background: var(--lgrey);
		transition:  0.2s;
		transition-timing-function: ease;
	}
	
	#LaufbandContainer{
		display: block;
		position: fixed;
		width: 100%;
		height: calc(3vw - 1vw);
		bottom: 0;
		background: var(--green);
		z-index: 20;
		overflow: hidden;
		padding: 1vw;
		font-size: 3vw;
		line-height: 3vw;
		text-transform: uppercase;
		font-weight: 700;
		border-top: 2px solid var(--black);
	}

	#LaufbandContainer:hover{
		background: var(--blue);
			cursor: pointer;
	}
	
	#LaufbandContainer:hover > .ticker_wrap > .ticker_move {
		animation-play-state: paused;
	}
	
	.ticker_wrap {
		width: 100%;
		padding-left: 0%;
}
	@keyframes ticker {
		0% { transform: translate3d(100, 0, 0); }
		100% { transform: translate3d(-50%, 0, 0); }
	}
	
	.ticker_move {
		display: none;
		white-space: nowrap;
		padding-right: 100%;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-name: ticker;
		animation-duration: 100s;
	}
	
	.LiveNowTick{
		display: inline-block;
	}
	
	.ticker_item{
		display: inline-block;
		padding: 0 2rem;
	}
	
	#KunstlerContainer,
	#PartnerContainer{
		position: fixed;
		width: 50%;
		height: 100%;
		z-index: 10;
		overflow: scroll;
	}
	
	#KunstlerContainer{
		left: 0;
	}
	
	#PartnerContainer{
		right: 0;
	}
	
	.ListContainer{
		padding: 4vw 1vw 1vw 1vw;
	}
	
	.ImpressumListe{
		width: calc(50% - 0.5vw);
		float: left;
		
		-webkit-hyphens: none;
		   -moz-hyphens: none;
            -ms-hyphens: none;
             -o-hyphens: none;
                hyphens: none;
	}
	
	.ImpressumListe.L{
		padding-right: 0.5vw;
	}
	
	.ImpressumListe.R{
		padding-left: 0.5vw;
	}
	
	.HauptProListe{
		padding-right: 1vw;
		float: left;
		
		-webkit-hyphens: none;
		   -moz-hyphens: none;
            -ms-hyphens: none;
             -o-hyphens: none;
                hyphens: none;
	}
	.HauptProListe.half{
		width: calc(100% / 2 - 1vw);
	}
	
	.HauptProListe.third{
		width: calc(100% / 3 - 1vw);
	}
	
	.NoClick:hover{
		cursor: default !important;
		color: var(--dgrey);
	}
	
	.YesClick:hover{
		cursor: pointer!important;
		color: var(--red);
	}
	
	.ProgrammBlock{
		width: 100%;
		display: inline-block;
	}
	
	/* Graphic Elements */
	
	.Line01{
		float: left;
		width: 100%;
		height: 1px;
		background: var(--black);
		margin: 1vw 0vw 1vw 0vw;
	}
	
	.Spacer01,
	.Spacer02{
		position: relative;
		display: block;
		width: 100%;
		height: 5vw;
	}
	

	.Spacer02{
		height: 10vw;
	}
	
	#ZoomInButton,
	#ZoomOutButton{
		position: fixed;
		width: 4.5vw;
		height: 4.5vw;
		z-index: 20;
		margin: 1vw;
	}
	
	#ZoomInButton{
		display: block;
		background: url("../assets/buttons/zoom_in_btn_off.svg");
	}
	
	#ZoomInButton:hover{
		background: url("../assets/buttons/zoom_in_btn_hover.svg");
		cursor: pointer;
	}
	
	#ZoomOutButton{
		display: none;
		background: url("../assets/buttons/zoom_out_btn_off.svg");
		display: none;
	}
	
	#ZoomOutButton:hover{
		background: url("../assets/buttons/zoom_out_btn_hover.svg");
		cursor: pointer;
	}
	
	.ListLetter{
		float: left;
		width: 4vw;
		height: 7vw;
	}
	
	.ListLetter.extra{
		height: 11vw;
	}
	
	.SeperatorLine{
		position: fixed;
		width: 2px;
		height: 100%;
		background: var(--black);
		z-index: 20;
		left:  calc(50% - 1px);
	}
	
	/* Karten */
	
	#map_luzern {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.StandortHover {
		cursor: pointer;
	}

	.StandortHover > .st19,
	.StandortHover > .st20{
		fill: var(--white);
	}
	
	.ListeHover,
	.ListeHover > body,
	.ListeHover > p,
	.ListeHover > h1,
	.ListeHover > h2,
	.ListeHover > .HauptProListe,
	.ListeHover > .CalendarIten{
		color: var(--red) !important;
		cursor: pointer;
	}
	
	/* Calendar */
	
	.CalendarIten{
		display: inline-block;;
		width: 100%;
	}
	
	.CalendarRow1,
	.CalendarRow2,
	.CalendarRow3 {
		float: left;
	}
	
	.CalendarRow1{
		width: calc(100% / 14 * 3);
	}
	
	.CalendarRow2{
		width: calc(100% / 14 * 3);
	}
	
	.CalendarRow3{
		width: calc(100% / 14 * 7);
	}
	
	.CalendarLine {
		float: left;
		width: 100%;
		height: 1px;
		background: var(--black);
		margin: 1vw 0vw 1vw 0vw;
	}
	
	.CalendarIten:hover > .CalendarMarkerA,
	.CalendarIten:hover > .CalendarMarkerB,
	.CalendarIten:hover > .CalendarMarkerC,
	.CalendarIten:hover > .CalendarMarkerD,
	.CalendarIten:hover > .CalendarMarkerE,
	.CalendarIten:hover > .CalendarMarkerF,
	.CalendarIten:hover > .CalendarMarkerG,
	.CalendarIten:hover > .CalendarMarkerH,
	.CalendarIten:hover > .CalendarMarkerI,
	.CalendarIten:hover > .CalendarMarkerJ,
	.CalendarIten:hover > .CalendarMarkerK,
	.CalendarIten:hover > .CalendarMarkerL,
	.CalendarIten:hover > .CalendarMarkerM,
	.CalendarIten:hover > .CalendarMarkerN,
	.CalendarIten:hover > .CalendarMarkerO,
	.CalendarIten:hover > .CalendarMarkerP,
	.CalendarIten:hover > .CalendarMarkerX,
	.ListeHover > .CalendarMarkerX,
	.ListeHover > .CalendarMarkerA,
	.ListeHover > .CalendarMarkerB,
	.ListeHover > .CalendarMarkerC,
	.ListeHover > .CalendarMarkerD,
	.ListeHover > .CalendarMarkerE,
	.ListeHover > .CalendarMarkerF,
	.ListeHover > .CalendarMarkerG,
	.ListeHover > .CalendarMarkerH,
	.ListeHover > .CalendarMarkerI,
	.ListeHover > .CalendarMarkerJ,
	.ListeHover > .CalendarMarkerK,
	.ListeHover > .CalendarMarkerL,
	.ListeHover > .CalendarMarkerM,
	.ListeHover > .CalendarMarkerN,
	.ListeHover > .CalendarMarkerO,
	.ListeHover > .CalendarMarkerP,
	.ListeHover > .CalendarMarkerX{
		background: url("../assets/buttons/marker_hover.svg");
		background-repeat: no-repeat;
	}
	
	.CalendarMarkerA{background: url("../assets/buttons/marker_off_A.svg");}
	.CalendarMarkerB{background: url("../assets/buttons/marker_off_B.svg");}
	.CalendarMarkerC{background: url("../assets/buttons/marker_off_C.svg");}
	.CalendarMarkerD{background: url("../assets/buttons/marker_off_D.svg");}
	.CalendarMarkerE{background: url("../assets/buttons/marker_off_E.svg");}
	.CalendarMarkerF{background: url("../assets/buttons/marker_off_F.svg");}
	.CalendarMarkerG{background: url("../assets/buttons/marker_off_G.svg");}
	.CalendarMarkerH{background: url("../assets/buttons/marker_off_H.svg");}
	.CalendarMarkerI{background: url("../assets/buttons/marker_off_I.svg");}
	.CalendarMarkerJ{background: url("../assets/buttons/marker_off_J.svg");}
	.CalendarMarkerK{background: url("../assets/buttons/marker_off_K.svg");}
	.CalendarMarkerL{background: url("../assets/buttons/marker_off_L.svg");}
	.CalendarMarkerM{background: url("../assets/buttons/marker_off_M.svg");}
	.CalendarMarkerN{background: url("../assets/buttons/marker_off_N.svg");}
	.CalendarMarkerO{background: url("../assets/buttons/marker_off_O.svg");}
	.CalendarMarkerP{background: url("../assets/buttons/marker_off_P.svg");}
	.CalendarMarkerX{background: url("../assets/buttons/marker_off_X.svg");}
	
	.CalendarMarkerA,
	.CalendarMarkerB,
	.CalendarMarkerC,
	.CalendarMarkerD,
	.CalendarMarkerE,
	.CalendarMarkerF,
	.CalendarMarkerG,
	.CalendarMarkerH,
	.CalendarMarkerI,
	.CalendarMarkerJ,
	.CalendarMarkerK,
	.CalendarMarkerL,
	.CalendarMarkerM,
	.CalendarMarkerN,
	.CalendarMarkerO,
	.CalendarMarkerP,
	.CalendarMarkerX{
		float: left;
		width: calc(100% / 14 * 1);
		height: 1.56vw;
		background-repeat: no-repeat;
	}
	
	.LiveMarker{
		display: none;
		color: var(--red);
	}
	
	.LiveVideoFrame{
		display: none;
		width: calc(100vw / 2 - 2vw);
		height: calc((100vw / 2 - 2vw) / 16 * 9);
	}
	
	.LiveVideoFrame.16by9 {
		height: calc((100vw / 2 - 2vw) / 16 * 9);
	}

	.LiveNow{
		display: inline-block;
	}
		
	/* Person Page */
	
	.portrait{
		position: relative;
		width: 100%;
		height: calc(100% - 3.5vw);
		float: left;
		top: 0;
		left: 0;
		z-index: 50;
	}
	
	.portrait img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		overflow: hidden;
	}
	
	.PersonContent{
		position: relative;
		width: calc(100% - 2vw);
		float: left;
		padding: 1vw;
	}
	
	.PersonHeadder{
    position: -webkit-sticky;
		position: sticky;
    top: 0;
		float: left;
		width: calc(100% - 2vw);
		height: 1.5vw;
		padding: 1vw;
		background: var(--red);
		text-transform: uppercase;
		padding-top: 1.2vw;
		z-index: 50;
	}
	
	.left,
	.right{
		position: relative;
		display: inline-block;
		width: 50%;
		float: left;
	}
	
	.PersonHeadder > .left,
	.PersonHeadder > .right{
		width: calc(50% - 1vw);
	}
	
	.return{
		float: left;
		width: 2vw;
	}
	
	.return:hover{
		color: var(--white);
		cursor: pointer;
	}
	
	.PersonImgS{
		width: 70%;
	}
	
	.PersonImgM{
		width: 85%;
	}
	
	.PersonImgL{
		width: 100%;
	}
	
	.PersonImgL{
		width: 100%;
	}
	
	.MapsLink:hover{
		cursor: pointer;
		color: var(--blue);
	}
	
	.MapsLink.duet:hover{
		cursor: inherit;
		color: inherit;
	}
	
	.MapsLink.duet > div:hover{
		cursor: pointer;
		color: var(--blue);
	}
	
	.TwoLineContainer{
		display: inline-block;
		width: 100%;
	}
	
	.HeadderFix{
    display: none;
		position: fixed;
		width: calc(50% - 2vw);
		top: 0;
		bottom: auto;
		z-index: 20;
	}
	
	.Kurzbio{
		background: var(--red);
		position: absolute;
		width: calc(100% - 2vw);
		left: 0;
		padding: 1vw;
		padding-bottom: 0;
		z-index: 40;
	}
	
	.Kurzbio > div > div > p > a:link,
	.Kurzbio > div > div > p > a:visited{
		color: var(--black);
	}
	
	.Kurzbio > div > div > p > a:hover {
		color: var(--blue);
	}
	
	.Kurzbio > div > div > p > a:active {
		color: var(--green);
	}
	
	span.quelle{
		color: var(--black);
		background: var(--pink);
		padding: 0.3vw 0.25vw 0.15vw 0.3vw;
		font-size: 0.7vw;
		vertical-align: text-top;
	}
	
	span.quelle:hover {
		background: var(--blue);
		cursor: help;
	}
	
	h2.quelle {
		width: calc(50% - 2vw);
		float: left;
		padding-right: 1vw;
	}
	
	h2.quelle.an {
		color: var(--blue);
	}
	
	.Mutterschaft {
		max-width: 100%;
	}
	
	.LogoContainer{
		padding-top: 5vw;
	}	
	
	img.logo {
		width: 10vw;
	}
	
	.nospace {
		margin-block-start: 0em;
		margin-block-end: 0em;
	}
	
}