:root {
	/*------------------*/
	/* Eingabeparameter */
	/*------------------*/
	/* HOME */
  	--home_x: 6400;		/*Bildbreite*/
  	--home_y: 3600;		/*Bildhöhe*/

  	--person_x: 1690; 	/*Breite Person in Bild - zur Zeit nicht benötigt*/
  	--person_y: 2220;	/*Höhe Person in Bild*/

  	--person_facecenter_x: 3380;	/*Gesichtsmitte gezählt vom linken Bildrand*/
  	--person_borderright_x: 4080; 	/*Körperende rechts gezählt vom linken Bildrand*/
  	--person_margin_x: 30;			/*Mindestabendstand "Körperende rechts" <> "Webseite Ende rechts" für --x_fix */

  	--person_cut: 0.09;		/*Anteil des Körpers (von unten aus in y-Richtung), der nicht sichtbar sein soll 1 = 100%*/
  	--navhöhe: 56rem;		/*Höhe der Navigationsleiste bzw. Abstand Kopf zum oberen Ende der Webseite*/

	/*---------------------------*/
	/*   Berechnungen HOME Bild  */
	/*---------------------------*/
  	--personresthöhe: calc(var(--person_y)*(1 - var(--person_cut)));
  
  	--höhe_min: calc(100vw*var(--home_y)/var(--home_x));
  	--höhe_flex: calc((100vh - var(--navhöhe))*var(--home_y)/var(--personresthöhe));
  	--höhe_html: calc(100vw*var(--personresthöhe)/var(--home_x) + var(--navhöhe));
  	--höhe: max(var(--höhe_flex), var(--höhe_min));

  	--breite: calc(var(--höhe)*var(--home_x)/var(--home_y));

  	--x_slide: calc(65vw - var(--breite)*0.5);
  	--x_fix: calc(100vw - var(--breite)*(var(--person_borderright_x) + var(--person_margin_x))/var(--home_x));
  	--x_center: calc(50vw - var(--breite)*var(--person_facecenter_x)/var(--home_x));
  	--x: min(var(--x_slide), max(var(--x_fix), var(--x_center)), 0px);

  	--y_bottom_fix: calc(100vh - var(--höhe)*(1 - var(--person_cut)*var(--person_y)/var(--home_y)));
  	--y_top_fix: calc(-100vw*(var(--home_y) - var(--person_y))/var(--home_x) + var(--navhöhe)); /*Zur Zeit nicht genutzt*/
  	--y: calc(var(--y_bottom_fix) + max(var(--höhe_min) - var(--höhe_flex),0px)*var(--personresthöhe)/var(--home_y));
}

html {
	background-repeat: no-repeat;
}

#adan {
	position: fixed;
	top: 60px;
	right: 10vw;
	height: 100vh;
	width: auto;
	z-index: -1;
}

@media (max-aspect-ratio: 1/1) {
	#adan {
		left: 50%;
		right: auto;
		transform: translateX(-60%);
	}
}

#homeImg {
	background-image: url('../media/home.jpg');
	background-size: auto var(--höhe);
	background-position: var(--x) var(--y);
	background-position-x: var(--x);
	background-position-y: var(--y);
	height: var(--höhe_html);
}

[class*="bgFullscreen"] {
	background-attachment: fixed;
	background-size: cover;
	background-position: center top;
}

.bgFullscreenDark{
	background-color: rgba(0, 0, 0, .5);
	background-blend-mode: darken;
}

.bgTransparent {
	background-color: rgba(0,0,0,0.3);
}

.bgBlueGrey {
	background-image: linear-gradient(-25deg, #A1A1A1 0%, #C3DCE1 100%);
}

.bgWhite {
	background-image: white;
}

.bgMusic, .bgIndex, .bgSpace, .bgCristal {
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.bgIndex{
	background-image: url('../media/indexbg.jpg');
}

.bgMusic{
	background-image: url('../media/dunkel_bg.jpg');
	filter: brightness(50%);
}

.bgSpace{
	background-image: url('../media/unused/space_background.jpg');
	background-size: 100vw 900px;
/*	filter: blur(4px);*/
}

.bgCristal{
	background-image: url('../media/unused/cristalRed_background.jpg');
	background-attachment: fixed;
}

.bgLightGrey{
	background-image: linear-gradient(45deg, #f0f0f0, #c0c0c0);
}

.bgLightBlue{
	background-image: linear-gradient(45deg, #2020f0, #4040e0);
}