/* Turn off parallax scrolling for tablets and phones
@media only screen and (max-device-width: 1600px) {.bgimg-1, .bgimg-2, .bgimg-3 { background-attachment: scroll; min-height: 400px; }}
*/

.topimage-parallax { 
	aspect-ratio: 3 / 1; 
	background-attachment: fixed;
	background-color: rgb(245, 245, 245);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center; /* Horizontale Zentrierung */
	min-width: 400px;
	margin-top:2.8em;
	max-width:100%; 
	position: relative;

}
@media only screen and (max-width: 600px) { .topimage-parallax { aspect-ratio: 3 / 2; background-position: top; background-size: contain; }} 
@media only screen and (min-width: 600px) { .topimage-parallax { aspect-ratio: 3 / 2; }} 
@media only screen and (min-width: 768px) { .topimage-parallax { aspect-ratio: 3 / 1; }} 



/* Next & previous buttons
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
 */
/* Position the "next button" to the right
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
 */
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}
@media (max-width: 600px) { .text { display:none }}




/* SLIDESHOW -> PANORAMA STARTSEITE ENDE */










/* AKTUELL: Modal Close Button **************************************************/
.close {
	color: #f1f1f1;
	top: 15px;
	right: 35px;
	float: right;
	font-size: 40px;
	transition: 0.3s;
	font-weight: bold;
	position:absolute;
	z-index:100000;
}

/* AKTUELL: Modal Close Button Effekt 
.close:hover, .close:focus {
	color: #000;
	cursor: pointer;
	text-decoration: none;
}

**************************************************/
/* AKTUELL 23.07.2024: CSS FÜR VIRTUELLE TOUREN **************************************************/

/*** AKTUELL 23.07.2024 ***/
/*** VIRTUELLE TOUREN ***/
/*** DIV UM PANOROMABILD ***/
.vr-tour-content {
	aspect-ratio: 16 / 9;
	display: block;
	margin: 0px auto;
	margin-top: 0em;
	position: relative;
	width: 95%;
}
@media only screen and (max-width: 680px) { .vr-tour-content { aspect-ratio: 1 / 1; }} 
@media only screen and (min-width: 1200px) { .vr-tour-content { width:100%; }} 

/*** AKTUELL 23.07.2024 ***/
/*** VIRTUELLE TOUREN ***/
/*** HOTSPOT-MARKIERUNG ***/
.hotspot-marker {
	background-color: rgba(82,139,139,0.0);
	border-radius: 0px 0px 0 0;
}
@media only screen and (min-width: 1200px) { .hotspot-marker { color:white; }} 


.triangle-down-left, .triangle-down-center, .triangle-down-right {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 50px solid rgba(82,139,139,0.4);
}

.triangle-down-left {
	margin-left: 0px;
}

.triangle-down-center {
	margin: 0px auto;
}

.triangle-down-right {
	margin-left:calc(100% - 40px);
}

@media only screen and (min-width: 1200px) { .triangle-down-left, .triangle-down-center, .triangle-down-right { display:none; }}