html{ font-size: 22px;  color: var(--clr-all-tp); background-color: var(--clr-browser); align-content: center; justify-content: center; }
body{
	background-color: var(--clr-browser);
	display: flex; align-content: center; justify-content: center;
	cursor: none;
	width: 100%; max-height: 100vh; max-width: 100vw;
	margin: 0;
	overflow: hidden;
}
*{ margin: 0; padding: 0; box-sizing: border-box; }
/*Variablen*/
:root {
	--tp-parabolica: 'parabolica', sans-serif;
		--tp-p-s77: 1.44rem;
		--tp-p-w77: 500;
		--tp-p-ls77: 0.1pt;
		--tp-p-lh77: 1.44rem;

		--tp-p-s777: 1.728rem;
		--tp-p-lh777: 1.728rem;

		--tp-p-s7: 0.6rem;
		--tp-p-w7: 500;
		--tp-p-ls7: 0.37pt;
		--tp-p-lh7: 0.79rem;

		--tp-p-s-nav: 0.72rem;
		--tp-p-w-nav: 500;
		--tp-p-ls-nav: 0.34pt;
		--tp-p-lh-nav: 0.792rem;

		--tp-p-s-Txt2: 0.75rem;
		--tp-p-lh-Txt2: 1.1rem;
		--tp-p-ls-Txt2: -.35pt;
		--tp-p-w-Txt2: 300;

		--tp-p-ws-Txt: -.1pt;

		--tp-p-w7-lgt: 400;

	--tp-spectral: 'spectral', serif;
		--tp-s-s77: 1.59rem;
		--tp-s-w77: 200;
		--tp-s-ls77: -0.6pt;
		--tp-s-lh77: 1.4rem;

		--tp-s-s777: 1.87rem;
		--tp-s-lh777: 1.68rem;

		--tp-s-s7: 0.66rem;
		--tp-s-w7: 300;
		--tp-s-ls7: -0.2pt;
		--tp-s-lh7: 0.85rem;
		--tp-s-ls-space: 0.4pt;

		--tp-s-sTxt2: 0.85rem;
		--tp-s-lhTxt2: 1.1132rem;

		--tp-s-sTxt: 0.77rem;
		--tp-s-wTxt: 400;
		--tp-s-lsTxt: 0.15pt;
		--tp-s-lhTxt: 1.012rem;

		--tp-s-sTxt-Var1: 2.45vw;
		--tp-s-lhTxt-Var1: 3.225vw;

		--tp-italic-ls: -0.1pt;
	
	--clr-grid: #FEFFFE;
	--clr-grid-rgb-0: rgba(254,255,254, 0);
	--clr-grid-rgb-100: rgba(254,255,254, 1);

	--clr-all-tp: #500AF0;
	--clr-violett: #500AF0;
	--clr-browser: #FCFFF7;
	--clr-cursor-hover: #FFF;
	--clr-border: 1.3px solid #500AF0;
	--clr-border-small: 1.4px solid #500AF0;
}
/*Typografie*/
.p77{font-display: swap; font-family: var(--tp-parabolica); font-size: var(--tp-p-s777); font-weight: var(--tp-p-w77); letter-spacing: var(--tp-p-ls77); line-height: var(--tp-p-lh777); transition: 0.3s; padding-top: 0.35rem;}
.p7{font-display: swap; font-family: var(--tp-parabolica); font-size: var(--tp-p-s7); font-weight: var(--tp-p-w7); letter-spacing: var(--tp-p-ls7); line-height: var(--tp-p-lh7); color: var(--clr-all-tp);}
.p-nav{font-family: var(--tp-parabolica); font-size: var(--tp-p-s-nav); font-weight: var(--tp-p-w-nav); letter-spacing: var(--tp-p-ls-nav); line-height: var(--tp-p-lh-nav); color: var(--clr-all-tp);}
.p7-lgt{font-display: swap; font-family: var(--tp-parabolica); font-size: var(--tp-p-s7); font-weight: var(--tp-p-w7-lgt); letter-spacing: var(--tp-p-ls7); line-height: var(--tp-p-lh7); color: var(--clr-all-tp);}
.s77{font-display: swap; font-family: var(--tp-spectral); font-size: var(--tp-s-s777); font-weight: var(--tp-s-w77); letter-spacing: var(--tp-s-ls77); line-height: var(--tp-s-lh777); transition: 0.3s;}
.s7{font-display: swap; font-family: var(--tp-spectral); font-size: var(--tp-s-s7); font-weight: var(--tp-s-w7); letter-spacing: var(--tp-s-ls7); line-height: var(--tp-s-lh7); color: var(--clr-all-tp);}
.pTxt{font-display: swap; font-family: var(--tp-parabolica); font-size: var(--tp-p-s-Txt2); font-weight: var(--tp-p-w77); letter-spacing: var(--tp-s-lsTxt); line-height: var(--tp-p-lh-Txt2); color: var(--clr-all-tp); text-indent: 1.25rem;  word-spacing: var(--tp-p-ws-Txt);}
.studioTxt{font-family: var(--tp-parabolica); font-size: 1.25rem; font-weight: var(--tp-p-w77); letter-spacing: var(--tp-s-lsTxt); line-height: 1.40rem; color: var(--clr-all-tp); text-indent: 0rem;  word-spacing: var(--tp-p-ws-Txt);}
.sTxt{font-display: swap; font-family: var(--tp-spectral); font-size: var(--tp-s-sTxt2); font-weight: var(--tp-p-w-Txt2); letter-spacing: var(--tp-p-ls-Txt2); line-height: var(--tp-p-lh-Txt2); color: var(--clr-all-tp); text-indent: 1.25rem; }
.no-mark{user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.no-scroll{-ms-overflow-style: none; scrollbar-width: none;}
.uppercase{text-transform: uppercase;}
.space{letter-spacing: var(--tp-s-ls-space);}
.less-pad{margin-bottom: -1.5rem; text-indent: 0 !important}
.blocksatz{text-align: justify;hyphens: auto; letter-spacing: clamp(-0.45pt, -0.35pt, -0.25pt) !important; word-spacing: clamp(-2pt, -1pt, -0.35pt) !important;  }
i{letter-spacing: var(--tp-italic-ls);}
/* Dialog */
dialog{ z-index: 15; border: var(--clr-border); top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; padding: 0.3rem 0.5rem 1px 0.5rem; }
dialog:focus{ outline: none; }
.dialog-container{ width: min(1000px, 95vw); height: 96svh; background: var(--clr-grid); color: var(--clr-violett); display: grid; grid-template-columns: 50% 50%; grid-template-rows: 2.5rem auto; }
.dialog-rechts{grid-row: 2; display:flex;overflow-y: auto;overflow-x: hidden; position: relative;padding-top: 2px;}
.dialog-links{grid-row: 2; display: flex; justify-content:center; align-items:center; max-width:100%; } 
.dialog-links img{ max-width:35vw; max-height:60vh; }
.dialog-navigation{grid-row: 1; grid-column: span 2; display: inline-flex; justify-content:space-between; align-items:flex-start; flex-wrap:nowrap; white-space: nowrap;}
.dialog-navigation a{ padding-left: 0.3rem; background-image: linear-gradient(to right, var(--clr-grid-rgb-0), var(--clr-grid-rgb-100), var(--clr-grid-rgb-100)); }
.dialog-txt {display:flex; gap: 2rem; padding: 3rem 0.3rem 3rem 0.3rem; overflow-y: auto;justify-content:flex-start; align-items:flex-start;} .x-padding{padding-top: 3rem}
.dialog-txt-item{display:flex; gap: 2rem;flex-wrap: wrap; }
.active-info-nav{ left: 0;background: var(--clr-grid-rgb-100);margin: 0 0.1rem 0 0.1rem !important;font-family: var(--tp-parabolica)!important; font-size: var(--tp-p-s777)!important; font-weight: var(--tp-p-w77)!important; letter-spacing: var(--tp-p-ls77)!important; line-height: var(--tp-p-lh777) !important;}
#d-n-l{ display:inline-flex;gap:0.75rem; flex-grow:0; overflow-x: auto; overflow-y: hidden}
#d-n-l p {height: 2.2rem; font-family: var(--tp-spectral); font-size: var(--tp-s-s777); font-weight: var(--tp-s-w77); letter-spacing: var(--tp-s-ls77); line-height: var(--tp-s-lh777); transition: margin 0.3s;}
#d-n-l p:hover {margin: 0 0.1rem 0 0.1rem; font-family: var(--tp-parabolica); font-size: var(--tp-p-s777); font-weight: var(--tp-p-w77); letter-spacing: var(--tp-p-ls77); line-height: var(--tp-p-lh777);}
.verlauf-info{position: absolute; top: -0.15rem; width: 100%; height: 50px; background-image: linear-gradient(to top, var(--clr-grid-rgb-0), var(--clr-grid-rgb-100), var(--clr-grid-rgb-100)); z-index: 3;}
/* Cursor */
.cursor{
	position: fixed;
	top: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--clr-browser);
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	pointer-events:  none;
	z-index: 100;
	opacity: 0;
	border: var(--clr-border);
}
::-webkit-scrollbar { display: none;}
.seecursor{width: 100%; height: 100%; border-radius: 100%;}
.hoveredCursor{background: var(--clr-cursor-hover) !important;width: 12px !important;height: 12px !important;border: var(--clr-border);}
.hoveredCursor2{ background: var(--clr-grid);}
.hoveredCursor3{background: var(--clr-all-tp) !important;width: 0px !important;height: 0px !important;}
.hoveredTired{background: var(--clr-cursor-hover) !important;width: 15px !important;height: 15px !important;border: var(--clr-border);}
.cursor.cursor_visible { opacity: 1; }
.cursor.cursor_hidden { opacity: 0; }
/* Container */
.container{
	background-color: var(--clr-grid);
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-rows: 2rem 4.5rem auto ;
	grid-template-columns: auto;
}
.first{margin-left: 0.35rem}
/* KOPFZEILE */
/* Einteilung */
.info-para{
	display: inline-flex;
	flex-wrap: nowrap;
	width: min(500px, 90vw);
	gap: 1rem;
	width: 530px;
	hyphens: none;
}
.info{
	display: flex;
	flex-wrap: nowrap;
	place-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0.5rem 0.3rem 0.45rem;
	width: 100vw;
	hyphens: none;
}
/*.infoU{transition: 0.15s;font-family: var(--tp-spectral); font-size: 0.81rem; font-weight: var(--tp-p-w-Txt2); letter-spacing: -.45pt; line-height: var(--tp-p-lh-Txt2); color: var(--clr-all-tp);}*/
.infoU{transition: 0.05s;font-family: var(--tp-parabolica); font-size: var(--tp-p-s-Txt2); font-weight: var(--tp-p-w77); letter-spacing: var(--tp-s-lsTxt); line-height: var(--tp-p-lh-Txt2); color: var(--clr-all-tp);}
/* Homepage */
.info1 a, .infoU a, .info2 a, .langB a, .langA a {
	text-decoration: none;
	color: var(--clr-all-tp);
	transition: letter-spacing 0.3s;
	margin: 0;
	cursor: none;
}
.info1 a:hover, .info2 a:hover {
	letter-spacing: 0.31pt;
	color: var(--clr-violett);
	border-bottom: var(--clr-border-small);
}
.infoU a:hover{letter-spacing: -.15pt;}
/* Dropdown-Menu */
.info3 {
	width: auto;
	display: inline-flex; 
	flex-wrap: nowrap;
	justify-content: flex-start; 
	align-items: flex-start;
	gap: 0.2rem;
	position: relative;
}
#langA{ display: flex;margin: 0; justify-content: flex-start; align-items: flex-start;}
.activeLang{ display: inline-flex; flex-wrap: nowrap; gap: 0.2rem;}
.info3:hover .caret-lang { border-top: 4.5px solid var(--clr-violett); }
.caret-lang{
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4.5px solid var(--clr-all-tp);
	margin-top: 0.33rem;
	transform: rotate(0deg);
	transition: 0.3s;
	z-index: 10;
}
.langB{
	display: inline-flex; 
	flex-wrap: nowrap;
	justify-content: flex-start; 
	align-items: flex-start;
	gap: 0.5rem;
	display: none;
	z-index: 9;
	background: var(--clr-grid);
}
.langA:hover { border-bottom: var(--clr-border-small); padding-bottom: 0.08rem;}
.langB a:hover { border-bottom: var(--clr-border-small);}
/* Dropdown */
.dropdown-container{ display: inline-flex; justify-content: flex-start; align-items: flex-start; }
.dropdown{ display: inline-flex; margin: 0; justify-content: flex-start; align-items: flex-start; }
.dropdown *{ box-sizing: border-box; } 
#activeSelect{ display: flex;margin: 0; justify-content: flex-start; align-items: flex-start;}
.select{
	display: inline-flex;
	margin: 0;
	background: var(--clr-grid);
	color: var(--clr-all-tp);
	justify-content: flex-start;
	align-items: flex-start;
}
.select-clicked { color: var(--clr-violett); }
.select:hover{ letter-spacing: 0.31pt; color: var(--clr-violett);}
.select a {	transition: 0.3s; margin: 0;padding-bottom: 0.08rem;}
.select a:hover{ border-bottom: var(--clr-border-small);}
.caret{
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4.5px solid var(--clr-all-tp);
	margin-top: 0.33rem;
	transform: rotate(0deg);
	transition: 0.3s;
	z-index: 10;
	margin-right: 0.2rem;
}
.select:hover .caret{ border-top: 4.5px solid var(--clr-violett); }
.caret-rotate{ transform: rotate(-90deg); border-top: 4.5px solid var(--clr-violett); }
.menu{
	margin-left: 0rem;
	list-style: none;
	background: var(--clr-grid);
	color: var(--clr-all-tp);
	opacity: 0;
	display: none;
	transition: 0.2s;
}
.menu li { 
	padding: 0 0.3rem 0 0;
}
.menu li p{ 
	padding-bottom: 0.09rem;
}
.menu li:hover p {
	border-bottom: var(--clr-border-small);
}
.active{ background: var(--clr-grid); }
.menu-open {
	display: inline-flex;
	transition: 1s;
	opacity: 1;
	z-index: 6;
}
/* PROJEKT-LISTE */
/*Liste*/
.list{
	background-color: var(--clr-grid);
	width: 100vw;
	grid-row: 2;
		align-items: flex-start; 
		justify-content: flex-start;
		overflow-x: auto;
		display: inline-flex;
		gap: 0.75rem;
		white-space: nowrap;
}
.list::-webkit-scrollbar{ display: none; }
.list-item{
	flex-shrink: 0;
	width: auto;
	height: 4.46rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: 0.3s;
	color: var(--clr-all-tp);
}
.list-item:hover{ color: var(--clr-violett); padding: 0 0.1rem 0 0.1rem; }
.list-item p{ margin: 0; }
.aktuell{ color: #838383; }
.active2{ 
	left: 0;
	background: var(--clr-grid-rgb-100);
	transition: 0.3s;
	z-index: 2;
	color: var(--clr-violett);
	margin: 0 0.5rem 0 0.35rem !important;
	border-bottom: var(--clr-border);
}
/* INHALTE */
/*Start Bildwechsel*/
.start-container{
	display: flex;
	grid-row: 1;
	grid-column: span 2;
	z-index: 4;
	position: relative;
	place-content: center;
	align-items: center; 
	transition: opacity 1s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.start-container.visible{ opacity: 1; visibility: visible; }
.start-img{
	position: absolute;
	z-index: 11;
	inset: 50%;
	transform: translate(-50%, -50%);
	max-width: 55vw;
	max-height: 70vh;
	transition: opacity 1s ease-in-out;
	opacity: 0;
}
.start-img-active{ opacity: 1; }
.start-container-hide{ display: none !important; }
/* Contain */ 
.contentContainer{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto 540px;
	overflow-x: hidden;
	overflow-y: auto;
}
.contentItem{
	grid-row: 1;
	grid-column: 2;
	overflow: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.deactiveItem{ display: none; }
/* Images */ 
.contentImages{
	grid-row: 1;
	grid-column: 1;
	z-index: 4;
	position: relative;
	place-content: center;
	cursor: none;
}
.img_css{
	position: absolute;
	inset: 50%;
	transform: translate(-50%, -50%);
	max-width: 45vw;
	max-height: 70vh;
}
/* Verläufe */ 
.verlauf{
	position: absolute;
	top: 6.45rem;
	width: 100vw;
	height: 50px;
	background-image: linear-gradient(to top, 
		var(--clr-grid-rgb-0),     
		var(--clr-grid-rgb-100),    
		var(--clr-grid-rgb-100));
	z-index: 3;
}
/* Mengentext */ 
.beschrieb{ padding-top: 3rem; }
.beschrieb-rohsatz{ 
	margin: auto;
	padding-top: 3rem;
  display: none;
}
/*Impressum*/
.text-item p{ margin: 0; }
.text-item {
	width: min(500px, 95%);
	display: flex;
	flex-direction: column;
	gap: 2rem;
	overflow-x: hidden;
	overflow-y: visible;
	-ms-overflow-style: none; scrollbar-width: none;
}
.texts::-webkit-scrollbar{ display: none; }
.text-impressum{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: space-evenly;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
}
.text-impressum-item{ background-color: var(--clr-grid); width: 30%; }
.text-impressum-item p{ margin: 0; hyphens: auto; }
.text-copyright{ background-color: var(--clr-grid); margin-bottom: 1.5rem; }
.text-copyright p{ margin: 0; hyphens: auto; }
/* ------ RESPONSIVE------- */
@media only screen and (max-width: 1200px) {
	.info-para{width: 520px}
	.img_css{ max-width: 40vw; max-height: 500px; inset: 50%; transform: translate(-50%, -50%); }
	.impressum{ grid-template-columns: auto auto auto; }
	.contentContainer{ grid-template-columns: auto 525px; }
	.beschrieb-rohsatz{ display: none; }
}
@media only screen and (max-width: 950px) {
  html{ background-color: white; max-width: 100vw; height: 100svh; }
  body{ width: 100vw; height: 100svh; }
	.verlauf-info{position: absolute;}
	.container{height: 100dvh;}
	.dialog-container{padding: 0 0 0 0;grid-template-rows: 2.5rem auto auto;grid-template-columns: auto;overflow-y: auto;display: flex;flex-wrap: wrap;}
	.dialog-txt{padding: 0rem 0.3rem 0rem 0.3rem;}
	.dialog-navigation {overflow-x: hidden; width: 100%;}
	.dialog-links img{max-height:70svh; max-width:75%;}
	.dialog-links{margin-top: 2.5rem;grid-row: 2;width: 100%;overflow-y: unset;heigth: auto;}
	.dialog-rechts{
		grid-row: 3;
		display: flex;
		width: 100%;
		overflow-y: visible;
		justify-content: center;
		align-items: center;
		padding-bottom: 3rem;
	}
	.dialog-txt-item{width: min(500px, 95vw);}
  .info-para{justify-content: flex-end; width: auto}
	.info{ padding: 0.3rem 0.5rem 0.3rem 0.5rem; }
	.contentContainer{
		height: auto;
		place-content: center;
		grid-template-rows: auto auto;
		grid-template-columns: auto;
		overflow-x: hidden;
		overflow-y: visible;
		margin-bottom: 0.5rem;
	}
	.start-img{ max-width: 80vw; max-height: 70vh; }
	.contentImages{
		position: relative;
		grid-row: 1;
		grid-column: 2;
		align-content: center;
		justify-content: center;
		width: 100%;
		height: 95vh;
	}
	.img_css{ max-width: 80vw; max-height: 70vh; }
	.contentItem{
		margin: auto;
		grid-row: 2;
		grid-column: 2;
		overflow-x: hidden;
		overflow-y: visible;
  	place-items: center;
	}
	.verlauf{ z-index: 5; grid-row: 1; position: absolute; height: 40px; }
	.active2{ position: relative; z-index: 12; }
	.beschrieb-rohsatz{ display: none; }
}
@media (pointer: fine) {.cursor.cursor_visible { opacity: 1; }}
@media (pointer: coarse) {.cursor.cursor_visible { opacity: 0; }}
@media only screen and (max-width: 800px) {
	.contentItem{
		margin: auto;
	  place-content: center;
	}
	.start-img{ max-width: 85vw; }
	.contentImages{ width: 100%; height: 95vh; }
	.img_css{ max-width: 85vw; inset: 50%; transform: translate(-50%, -50%);}
	.beschrieb-rohsatz{ display: none; }
}
@media only screen and (max-width: 600px) {
	.impressum{
		display: grid;
		width: 80vw;
		justify-content: space-between;
		align-content: flex-start;
		grid-template-columns: repeat(2, 1fr);
	}
	.dialog-container{ width: 90vw; height: 96dvh;}
	.beschrieb{ display: none; }
	.beschrieb-rohsatz{ 
		display: unset;
 		margin: auto;
  	text-indent: 1.22rem;
  	word-spacing: 0pt;
  	hyphens: auto;
	}
	.contentItem{
		margin: auto;
		grid-row: 2;
		grid-column: 2;
		overflow-x: hidden;
		overflow-y: visible;
	}
}
@media only screen and (max-width: 480px) {
	.container{
		width: 100svh;
		overflow-y: auto;
	}
	.infoU{display: none;}
	.info{ justify-content: flex-end; padding: 0.3rem 0.5rem 0.3rem 0.5rem; }
	.dialog-txt{padding: 0 0 0 0 ;}
	.dialog-txt-item{width: 100%; overflow-wrap: break-word;}
	.container{ grid-template-rows: 2rem 4.5rem auto ;}
	.info1{display: none;}
	.list-item{ height: 4.46rem; }
	.beschrieb{ display: none; }
	.contentItem{ width: 98vw; }
	.verlauf{ position: absolute; top: 135px; padding-bottom: 20px; height: 40px; }
	.text-copyright{ margin-bottom: 4.5rem; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (-webkit-min-device-pixel-ratio: 2 ) and (-webkit-min-device-pixel-ratio: 4 ) {
	.container{
		width: 100svh;
		overflow-y: auto;
	}
	.info{ justify-content: flex-end; padding: 0.3rem 0.5rem 0.3rem 0.5rem; }
	.dialog-txt{padding: 0 0 0 0 ;}
	.dialog-txt-item{width: 100%; overflow-wrap: break-word;}
	.container{ grid-template-rows: 2rem 4.5rem auto ;}
	.info1{display: none;}
	.list-item{ height: 4.46rem; }
	.beschrieb{ display: none; }
	.contentItem{ 
		width: 98vw; 
		margin: auto;
		grid-row: 2;
		grid-column: 2;
		overflow-x: hidden;
		overflow-y: visible;
	}
	.verlauf{ position: absolute; top: 135px; padding-bottom: 20px; height: 40px; }
}