/* CSS-Stile */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background-color: black;
}

.image-zentral {
	position: relative;
	width: 100%;
	height: 100%;
	justify-content: center; /* Horizontal zentrieren */
    /*align-items: center;  Vertikal zentrieren */
}

.center-image, .left-image, .right-image, .top-image, .bottom-image {
	position: absolute;

	max-width: 100vw; /* Maximal Viewport-Breite */
    max-height: 100vh; /* Maximal Viewport-Höhe */
	width: auto; /* Breite automatisch anpassen */
    height: auto; /* Höhe automatisch anpassen */
    object-fit: contain; /* Seitenverhältnis beibehalten */
	z-index: 1;
}

.center-image {
	top: var(--Img-top);
	left: 50%; /* Startposition: Mitte des Bildschirms */
	transform: translateX(-50%); /* Zentrierung */
	z-index: 2;
	cursor: grab; /* Zeigt an, dass das Bild draggable ist */
}


.right-image {
	top: var(--Img-top);
    left: calc(50% + (0.5 * var(--image-width)) + var(--Img-gap)); /* 25px nach rechts verschoben */
	z-index: 5;
}

.top-image {
    top: calc(-100% - var(--Img-gap-vert)); /* 25px weiter nach oben */
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
}

.bottom-image {
    bottom: calc(-100% - var(--Img-gap-vert)); /* 25px weiter nach unten */
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
}

	.debug {
		position: none; /* Statische Positionierung */
		top: 0px; /* Vertikal in der Mitte */
		left: 50%; /* Horizontal am linken Rand des zentralen Bildes */
		transform: translateX(-50%); /* Zentrierung vertikal */
		height: auto;
		width: 200px;
		background-color: rgba(0, 0, 0, 1); /* Halbtransparenter Hintergrund */
			opacity: 0;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		color: white;
		z-index: 10; /* Über allen anderen Elementen */
	}

/* Stile für die statischen Divs */
.bottom-control, .top-control, .left-control,.right-control {
	position: absolute; /* Statische Positionierung */
	/*background-color: rgba(0, 0, 0, 1);  Halbtransparenter Hintergrund 
	opacity: 1;*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: white;
	z-index: 10; /* Über allen anderen Elementen */
	cursor: grab; /* Zeigt an, dass das Bild draggable ist */
}
	
	.right-control {
		top: 20%; /* Vertikal in der Mitte */
		left: calc(50% + 0.5 * var(--image-width)); /* Horizontal am linken Rand des zentralen Bildes */
		transform: translateY(-100%); /* Zentrierung vertikal */
		transform: translateX(-100%); /* Zentrierung vertikal */
		height: 60%;
		width:calc(0.3 * var(--image-width)); /* Horizontal am linken Rand des zentralen Bildes */
		background-color: rgba(100, 0, 0, 100); /* Halbtransparenter Hintergrund */
		z-index: 11;
	}

	.right-control2 {
		top: 0%; /* Vertikal in der Mitte */
		left: calc(50% + var(--image-width)); /* Horizontal am linken Rand des zentralen Bildes */
		transform: translateY(-100%); /* Zentrierung vertikal */
		transform: translateX(-100%); /* Zentrierung vertikal */
		height: 100%;
		width:50%; /* Horizontal am linken Rand des zentralen Bildes */
		background-color: rgba(200, 0, 0, 100); /* Halbtransparenter Hintergrund */
		z-index: 11;
	}
	
	.left-control {
		top: 50%; /* Vertikal in der Mitte */
		left: calc(50% - 0.5 * var(--image-width)); /* Horizontal am linken Rand des zentralen Bildes */
		transform: translateY(-50%); /* Zentrierung vertikal */
		height: 60%;
		width:calc(0.3 * var(--image-width)); /* Horizontal am linken Rand des zentralen Bildes */
		background-color: rgba(0, 0, 0, 100); /* Halbtransparenter Hintergrund */
		z-index: 11;
	}

	.top-control {
		top: 0; /* Am oberen Bildschirmrand */
		height: 50%;
		width: 100%;
	}

	.bottom-control {
		bottom: 0; /* Am unteren Bildschirmrand */
		height: 50%;
		width: 100%;
	}
		
.buttons {
	position: fixed; /* Statische Positionierung */
	bottom: 0px; /* Am oberen Bildschirmrand */

	padding: 10px 10px;
	background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
	border-radius: 5px;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	z-index: 10; /* Über allen anderen Elementen */
}
	.buttons.map-button {
		left: calc(50% - (0.5 * var(--image-width)) + 25px); /* 25px nach rechts verschoben */
		transform: translateX(-50%); /* Zentrierung horizontal */
	}
	.buttons.toggle-button {
		left: calc(50% - (0.5 * var(--image-width)) + 79px); /* 25px nach rechts verschoben */
		transform: translateX(-50%); /* Zentrierung horizontal */
	}
	.buttons.overview-button {
		left: calc(50% + (0.5 * var(--image-width)) - 77px); /* Horizontal am rechten Rand des zentralen Bildes */
		transform: translateX(-50%); /* Zentrierung horizontal */
	}
	.buttons.first-folie-button {
		left: calc(50% + (0.5 * var(--image-width)) - 25px); /* Horizontal am rechten Rand des zentralen Bildes */
		transform: translateX(-50%); /* Zentrierung horizontal */
}

/* Overlay-Stil */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.9); /* Dunkles Overlay */
	display: none; /* Standardmäßig ausgeblendet */
	justify-content: center;
	align-items: center;
	z-index: 1000; /* Über allem anderen */
}

	/* Bild im Overlay */
	.overlay img {
		max-height: 100vh;
		max-width: 100vw;
		cursor: pointer; /* Zeigt an, dass das Bild klickbar ist */
	}