/* ============================================
	 360° VR STARTSEITE - Hauptcontainer

.vr-content {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 95%;
}

@media only screen and (min-width: 1200px) {
	.vr-content {
		width: 100%;
	}
}
============================================ */

/* 360° VR STARTSEITE - Filterbereich */
.filter {
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

/* 360° VR STARTSEITE - Filterelemente */
.filter-elements1, .filter-elements2 {
	padding: 0.5em;
	text-align: center;
	width: 100%;
}

/* 360° VR STARTSEITE - Filterelemente */
.filter-elements1 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}



/* Container für Alphabet-Filter */
.filter-elements2 {
	display: flex;
	justify-content: center; /* Zentriert den Inhalt horizontal */
	align-items: center; /* Zentriert den Inhalt vertikal */
	overflow: hidden; /* Verhindert vertikalen Scrollbalken */
	white-space: nowrap; /* Keine Umbrüche */
	position: relative; /* Für die Pfeile */
	width: 100%;
}

/* Wrapper für Scrollfunktion */
.filter-elements2-inner {
	width: 95%;
	display: flex;
	gap: 10px; /* Abstand zwischen Elementen */
	overflow-x: auto;
	scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
}

/* Scrollbar ausblenden */
.filter-elements2-inner::-webkit-scrollbar {
	display: none;
}

/* Alphabet-Buttons */
.abc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff !important;
	border: 1px solid #6E6E6E;
	border-radius: 50% !important;
	color: #000 !important;;
	font-size: 1.1rem !important;
	width: 35px;
	height: 35px;
	text-align: center;
	text-transform: uppercase;
	margin: 0.25rem;
}


/* ANFANG: 360VR - DIV mit Buchstaben ABC - Pfeile rechts und links */
.scroll-arrow {
	/* Positionierung */
	position: absolute;
	top: 50%;
	bottom: 0;
	z-index: 2;
	transform: translateY(-50%);

	/* Box-Größe & Layout */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 100%;

	/* Abstand */
	padding: 0.8em 0.8em;

	/* Typografie */
	font-size: 2rem;
	color: #444;

	/* Darstellung */
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #6E6E6E;

	/* Verhalten */
	cursor: pointer;
	user-select: none;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.scroll-arrow.visible {
	/* Verhalten */
	opacity: 1;
	pointer-events: auto;
}

.scroll-arrow.left {
	/* Positionierung */
	left: 0;
}

.scroll-arrow.right {
	/* Positionierung */
	right: 0;
}
/* ENDE: 360VR - DIV mit Buchstaben ABC - Pfeile rechts und links */





























/* 360° VR STARTSEITE - Orte alphabetisch */
.orte-abc {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	margin: 2.5em 0 2em;
	width: 100%;
}

/* 360° VR STARTSEITE - Alphabet-Container */
.pano-abc {
	background-color: white;
	text-align: center;
}

@media only screen and (max-width: 600px) {
	.pano-abc {
		flex-basis: 100%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
	.pano-abc {
		flex-basis: calc(50% - 10px);
	}
}

@media only screen and (min-width: 992px) {
	.pano-abc {
		flex-basis: calc(32.98% - 10px);
	}
}

/* 360° VR STARTSEITE - Überschrift über Orte */
.pano-abc-top {
	background-color: rgb(69, 90, 100);
	border-bottom: 2px solid #404040;
	color: #000 !important;
	padding: 0rem;
	font-size: 1.1rem !important;
	text-align: center;
	text-transform: uppercase;
}






/* 360° VR STARTSEITE - Filterbare Ortsnamen */
.filterDiv {
	display: none;
	margin: 0;
	padding: 0.4em 0.6em 0.2em 0.6em;
	text-align: left;
	white-space: nowrap;
	font-size: 1rem; 
}

/* Flaggen vor Ortsnamen */
.orte-abc .filterDiv.land-a span::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 13px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("https://www.wernerpietschmann.de/360vr/img/flag-a.gif") no-repeat center/contain;
}

.orte-abc .filterDiv.land-d span::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 13px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("https://www.wernerpietschmann.de/360vr/img/flag-d.gif") no-repeat center/contain;
}

.orte-abc .filterDiv.land-h span::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 13px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("https://www.wernerpietschmann.de/360vr/img/flag-h.gif") no-repeat center/contain;
}






/* 360°VR SEITE ORT UEBERSICHT - Panorama-Container */
.vr-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 95%;
  margin: 2.5em auto 2em;
}

@media only screen and (max-width: 400px) {
  .vr-gallery {
    grid-template-columns: 1fr;
  }
}

@media only screen and (min-width: 400px) and (max-width: 992px) {
  .vr-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  .vr-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 360°VR SEITE ORT UEBERSICHT - Vorschau Einelpanorama */
.vr-thumb {
	display: flex;
	flex-direction: column;
	text-align: center;
	vertical-align: top;
	margin: 0;   /* figure default margin killen */
	padding: 0;  /* sicherheitshalber */
}

/* 1 Spalte auf sehr kleinen Geräten */
@media only screen and (max-width: 400px) {
	.vr-thumb {
		flex: 1 1 100%;
	}
}
/*
@media only screen and (min-width: 400px) and (max-width: 600px),
only screen and (min-width: 600px) and (max-width: 992px) {
 .vr-thumb {
	flex: 1 1 100%;
 }
}
*/

/* 2 Spalten mit 20px gap */
@media only screen and (min-width: 400px) and (max-width: 992px) {
	.vr-thumb {
		flex: 1 1 calc((100% - 20px) / 2);
	}
}

/* 3 Spalten mit 20px gap */
@media only screen and (min-width: 992px) {
	.vr-thumb {
		flex: 1 1 calc((100% - 40px) / 3);
	}
}

@media only screen and (min-width: 1200px) {
	.vr-thumb {
		flex: 1 1 calc((100% - 40px) / 3);
	}
}







/* 360° VR SEITE ORT VORSCHAU EINZELPANORAMEN - Bildcontainer */
.vr-thumb-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 2 / 1;
}

/* 360° VR SEITE ORT VORSCHAU EINZELPANORAMEN - Bild */
.vr-thumb-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text unter Bild */
.vr-thumb figcaption {
	margin-top: 0.5em;
	font-size: 0.95em;
	display: block;
}





/* 360° VR EINZELSEITE - umspannendes DIV um den Panorama-Content  */
.vr-content2 {
	aspect-ratio: 16 / 9;
	display: block;
	margin: 0 auto;
	width: 95%;
}

@media only screen and (max-width: 680px) {
	.vr-content2 {
		aspect-ratio: 1 / 1;
	}
}

@media only screen and (min-width: 1200px) {
	.vr-content2 {
		width: 100%;
	}
}


/* 360° VR EINZELSEITE - Viewer für Panorama */
#viewer {
	height: 100%;
	width: 100%;
	}

/* 360° VR EINZELSEITE - Ladeanimation */
#loader {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(#fff, #bfbfbf);
	color: #555;
	font-size: 2rem;
	font-weight: 600;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

/* 360° VR EINZELSEITE - Infobox */
.infobox {
	display: flex;
	flex-direction: row;
	width: 100%;
	font-size: 0.9rem;
}

/* 360° VR EINZELSEITE - Details Box */
.box-details {
	border: 0px solid rgb(9, 72, 103);
/*	color: #282830;	*/
	color: inherit;
		margin: 0 auto;
	display: flex;
}

@media only screen and (max-width: 600px) {
	.box-details {
		display: block;
	}
}

/* 360°VR EINZELSEITE - Länderumrisse für Panorama-Details */
#land-a, #land-d, #land-h, #AT, #DE, #HU {
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 280px !important;
}

#land-a, #AT {
	background-image: url("https://www.wernerpietschmann.de/360vr/img/austria-outline.gif");
	height: 164px;
}

#land-d, #DE {
	background-image: url("https://www.wernerpietschmann.de/360vr/img/deutschland-outline.gif");
	height: 230px;
}

#land-h, #HU {
	background-image: url("https://www.wernerpietschmann.de/360vr/img/ungarn-outline.gif");
	height: 200px;
}

/* 360°VR EINZELSEITE Positionssymbole auf Karte */
.location-icon {
	height: 35px;
	width: 35px;
	position: absolute;
	transform: translate(-50%, -50%);
}

/* 360°VR EINZELSEITE -  Tabellen für Einzelinfos */
.details {
	background-colorx: transparent;
	display: flex;
	padding: 0 1em;
}

@media only screen and (max-width: 600px) {
	.details {
		display: block;
		width: 100%;
		margin: 0 auto;
	 }
}

.details-table {
	display: table;
	margin: 0 auto;
}

.details-table tr, td {
	border-collapse: collapse;
	height: 1.4em;
	line-height: 1.4;
	padding: 0;
}

.details-table-row {
	border-collapse: collapse;
	height: 1.4em;
	line-height: 1.3;
	padding:0;
}

/* 360°VR EINZELSEITE - Tabellezelle mit Einzelinfos links (Vorgabe) */
.details1 {
	display: table-cell;
	font-weight: 500;
	padding: 0 0.5em 0 0; 
	text-align: right;
	text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
	.details1 {
		padding: 0em;
	}
} 

/* 360°VR EINZELSEITE -  Tabellezelle mit Einzelinfos links (Variable) */
.details2 {
	text-align: left;
}

/* 360°VR EINZELSEITE DIV um flaches Panorama am Seitenende */
.flatpano {
	aspect-ratio: 2 / 1;
	margin: 2em auto 0em auto;
	max-width: 1200px;
	max-height: 600px;
	height: auto;
}

/* 360°VR EINZELSEITE flaches Panorama am Seitenende */
.flatpano-img {
	aspect-ratio: 2 / 1;
	height: auto;
	max-height: 600px;
	max-width:1200px;  
	width: 100%;
}

/* 360°VR EINZELSEITE Bilduntewrschrift unter flachem Panorama am Seitenende*/
.flatpano .bu {
	text-align: left;
}

/* 360°VR - Positionen DEUTSCHLAND */
#arnshausen {
	top:128px;
	left:130px;
}

#bayrischzell, #elbach, #fischbachau, #wilparting {
	top: 186px;
	left: 170px;
}
#biberbach{
	top: 165px;
	left: 150px;
}

#bopfingen, #schlossberg {
	top: 166px;
	left: 138px;
}

#cham, #chammuenster {
	top: 145px;
	left: 175px;
}

#eschenlohe {
	top: 190px;
	left: 156px;
}

#eurasburg {
	top: 183px;
	left: 162px;
}

#garmisch-partenkirchen {
	top: 193px;
	left: 154px;
}

#graefenhainichen {
	top: 92px;
	left: 175px;
}

#gross-rosenburg {
	top: 80px;
	left: 157px;
}

#hamburg {
	top: 40px;
	left: 128px;
}

#jachenau {
	top: 192px;
	left: 160px;
}

#kaisheim {
	top: 166px;
	left: 148px;
}

#kloster-banz {
	top:130px;
	left:155px;
}

#lenggries, #fall {
	top: 190px;
	left: 162px;
}

#magdeburg {
	top: 80px;
	left: 157px;
}

#mansfeld {
	top: 90px;
	left: 157px;
}

#muehldorf-inn, #muehldorf-am-inn {
	top: 171px;
	left: 178px;
}

#noerdlingen {
	top: 166px;
	left: 140px;
}

#polling, #etting {
	top: 185px;
	left: 160px;
}

#schaeftlarn, #hohenschaeftlarn, #kloster-schaeftlarn {
	top:185px;
	left:160px;
}

#sielenbach {
	top: 165px;
	left: 155px;
}

/* 360°VR - Position ORTE REGION MUENCHEN */
#muenchen, #dachau, #fuerstenfeldbruck, #gruenwald, #grosshesselohe, #pliening, #oberschleissheim {
	top: 180px;
	left: 160px;
}

/* 360°VR - Position ORTE REGION AMMERSEE */
#aidenried, #breitbrunn-ammersee,  #breitbrunn-am-ammersee, #paehl, #raisting {
	top: 180px;
	left: 155px;
}

/* 360°VR - Position ORTE REGION STARNBERGERSEE */
#assenhausen, #berg, #degerndorf, #holzhausen-starnbergersee, #holzhausen-am-starnbergersee,
#muensing, #possenhofen, #starnberg, #tutzing, #jenhausen {
	top: 180px;
	left: 160px;
}

/* 360°VR - Position ORTE REGION KOCHELSEE */
#kochel-see, #kochel-am-see, #grossweil, #urfeld, #wackersberg {
	top: 190px;
	left: 160px;
}

/* 360°VR - Positionen ÖSTERREICH */
#andau, #tadten {
	top: 57px; 
	left: 263px; 
}

#apetlon, #illmitz {
	top: 61px;
	left: 258px;
}

#bruckneudorf {
	top: 48px; 
	left: 253px; 
}

#donnerskirchen {
	top: 52px; 
	left: 252px; 
}

#ehrwald {
	top: 98px;
	left: 55px;
}

#frauenkirchen {
	top: 58px; 
	left: 260px; 
}
#gols, #moenchhof {
	top: 54px; 
	left: 260px; 
}

#halbturn {
	top: 56px; 
	left: 263px; 
}

#hinterriss {
	top: 95px;
	left: 77px;
}

#kematen-innbach, #kematen-am-innbach {
	top: 55px;
	left: 145px;
}

#kuehtai {
	top: 110px;
	left: 60px;
}

#mannersdorf, #mannersdorf-am-leithagebirge {
	top: 52px; 
	left: 250px; 
}

#neusiedl-see, #neusiedl-am-see, #parndorf {
	top: 53px; 
	left: 255px; 
}

#pichl-bei-wels {
	top: 58px;
	left:158px;
}

#podersdorf-am-see {
	top: 59px;
	left: 258px;
}

#ranshofen {
	top: 52px;
	left: 127px;
}

#wallern-im-burgenland {
	top: 57px;
	left: 263px;
}

#ybbs, #maria-taferl {
	top: 53px;
	left: 195px;
}

/* 360°VR - Position ORTE REGION ACHENSEE */
#achenkirch, #eben-achensee, #eben-am-achensee, #maurach-achensee, #maurach-am-achensee, #pertisau, #steinberg-am-rofan {
	top: 90px;
	left: 83px;
}

/* 360°VR - Position ORTE UNGARN */
#albertkazmerpuszta {
	top: 60px;
	left: 46px;
}

#hedervar {
	top: 70px;
	left: 85px;
}

#hegykoe {
	top: 70px;
	left: 40px;
}

#komarom {
	top: 72px;
	left: 56px;
}

#fertoehomok, #fertoeszeplak, #lebeny {
	top: 68px;
	left: 60px;
}

#kapuvar {
	top: 69px;
	left: 42px;
}








/**************** AKTUALISIERT 23.06.2025 ***************/



/* ============================================
   360VR - Alphabet Navigation
   Erstellt: 23.06.2025
============================================ */

/* === Außencontainer für die Alphabet-Filterleiste === */
.filterbox-outside {
	/* Positionierung */
	position: relative;

	/* Breite & Layout */
	width: 100%;
	display: flex;
	justify-content: center; /* Zentriert horizontal */
	align-items: center;     /* Zentriert vertikal */

	/* Überlauf & Zeilenumbruch */
	overflow-x: hidden;      /* Kein horizontaler Scrollbalken */
	white-space: nowrap;     /* Kein automatischer Umbruch */
}

/* === Innencontainer für horizontale Scroll-Leiste === */
.filterbox-inside {
	position: relative;
	padding: 0.5em 0;
	width: 80%;

	/* Flexlayout für Buchstaben-Links */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	flex: 1;

	/* Scrollverhalten */
	overflow-x: auto;
	white-space: nowrap;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Scrollbar ausblenden */
	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* IE 10+ */
}
.filterbox-inside::-webkit-scrollbar {
	display: none;                 /* Chrome, Safari, Edge */
}

/* === Platzhalter am Anfang und Ende des Scrollbereichs === */
.filterbox-inside::before,
.filterbox-inside::after {
	content: '';
	display: block;
	width: 2.5em;
	height: 1px;      /* Kann angepasst werden oder ganz entfernt */
	flex-shrink: 0;
}

/* === Buchstaben-Links A–Z === */
a.abc-link {
	display: inline-block;
	padding: 0.4em 0.8em;
	width: auto;

	font-size: 1.1rem !important;
	font-weight: bold;
	color: #333;
	text-decoration: none;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #6E6E6E;
	border-radius: 4px; /* Alternativ: 50% für Kreise */
}

a.abc-link:hover {
	background-color: #eee;
}

/* ============================================
   Alphabetische Listencontainer
============================================ */

/* === Gesamter Block pro Anfangsbuchstabe === */
.abc-container {
	margin-bottom: 2em;
	text-align: center;
	background-color: white;
}

/* === Responsives Verhalten für Listenblöcke === */
@media only screen and (max-width: 600px) {
	.abc-container {
		flex-basis: 100%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
	.abc-container {
		flex-basis: calc(50% - 10px);
	}
}

@media only screen and (min-width: 992px) {
	.abc-container {
		flex-basis: calc(32.98% - 10px);
	}
}

/* === Querbalken oberhalb jeder Gruppe (z. B. A, B, C) === */
.abc-container-top {
	padding: 0rem;
	border-bottom: 2px solid #404040;
	text-align: center;

	font-size: 1.1rem !important;
	font-weight: bold;
	text-transform: uppercase;
	color: #000 !important;

	background-color: rgb(69, 90, 100);
}

/* === Einträge innerhalb einer Gruppe (Liste von Orten) === */
.a-z {
	line-height: 1.em;
	color: #404040;
}

.a-z a {
	display: block;
	margin: 2px 0;
}

/* === Für einfache visuelle Abwechslung innerhalb alphabetischer Liste === */
.a-z a:nth-of-type(even) {
	background: rgba(47, 79, 79, 0.1);
}

/* ============================================
   Anzeige-Logik beim Filtern
============================================ */

/* Elemente, die beim Filtern ausgeblendet werden */
.filterDiv.hidden {
	display: none;
}

/* ============================================
   Abwechselnde Hintergrundfarben für Gruppenliste
   (wird via JS dynamisch zugewiesen)
============================================ */

/* Gerade Zeile – Weißer Hintergrund */
.filterDiv.even {
	background-color: #ffffff;
}

/* Ungerade Zeile – Grauer Hintergrund mit Transparenz */
.filterDiv.odd {
	background-color: rgba(47, 79, 79, 0.1);
}