/* Global styles */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

b, p, span {
    font-size:12px;
}

path.leaflet-interactive {
    pointer-events: auto;
}


/* Map */
#map {
    position: fixed;  /* oder relative, je nach Layout */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10; /* je nach Bedarf */
}


/* Toolbar */
#map_toolbar,
.map_toolbar {
	position: relative;
	width: 100%;
	height: 50px;
	padding-top: 5px;
	box-shadow: 0 0 10px 2px #010101;
	background: rgba(255, 255, 255, 0.31);
	backdrop-filter: blur(4.4px);
	-webkit-backdrop-filter: blur(4.4px);
	z-index: 1010;
}

#map_toolbar {
	padding-right: 5px;
}

.toolbarOptions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.toolbarOptions button, button {background-color: #44c767; border: 2px solid #18ab29;margin:0}

/* Sidebar */
#map_sidebar {
	position: relative;
	display: block;
	float: right;
	width: 380px;
	margin: 10px 15px 0 0;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px 2px #010101;
	background: rgba(255, 255, 255, 0.31);
	backdrop-filter: blur(4.4px);
	-webkit-backdrop-filter: blur(4.4px);
	z-index: 1010;
}

/* Tabs */
.menuTabrow {
	margin: 0;
	cursor: pointer;
}
.menuTabrow li {
	display: inline-block;
	width: 120px;
	margin: 0 -5px;
	padding: 5px 0;
	text-align: center;
	list-style: none;
	border: 1px solid #aaa;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 1px 0 #fff inset;
	background: linear-gradient(to bottom, #ececec 50%, #d1d1d1 100%);
	text-shadow: 0 1px #fff;
}
.menuTabrow li a {
	font-size: 13px;
	color: #555;
	text-decoration: none;
	text-shadow: 0 1px #fff;
}
.menuTabrow li.selected {
	z-index: 2;
	color: #333;
	background: #fff;
	border-bottom-color: #f4f4f4;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.menuTabrow li.selected a {
	color: #4caf50;
	font-weight: bold;
}

.tabAuswahl {
	padding: 0 20px;
	overflow-x: hidden;
	overflow-y: visible;
	max-height: 330px;
}
.tabDetail {
	width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
    font-size: 12px;
}


/* Tabs hidden */
.tab2,
.tab3 {
	display: none;
}
.tab3 {
	background: #fff;
	cursor: pointer;
	margin: 2px 20px;
}

/* Buttons */
button,
.standard_button,
.menu_item {
	display: block;
	cursor: pointer;
	border-radius: 10px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	margin: 15px;
	padding: 8px 10px 5px;
}

#markers1 {background-color:#2ECC40;border: 2px solid #18ab29;}
#markers2 {background-color:#1E88E5;border: 2px solid #2a5893;}
#markers3 {background-color:#E53935;border: 2px solid #c14a4a;}
#markers4 {background-color:#625f5f;border: 2px solid #242424;}

/* Icons */
.ico-position,
.ico-list2,
.ico-search-minus,
.ico-search-plus {
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
}

.ico-position {
	background-image: url("../images/position.svg");
}
.ico-list2 {
	background-image: url("../images/menu.svg");
}
.ico-search-minus {
	background-image: url("../images/zoom_out.svg");
}
.ico-search-plus {
	background-image: url("../images/zoom_in.svg");
}

/* Map search */
#mapSearch {
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Input und Button */
  margin: 10px 0 10px 20px;
  flex-wrap: nowrap; /* verhindert Umbruch */
}

#autocomplete-input {
	width: 167px;
	height: 35px;
	font-size: 20px;
	line-height: 22px;
	padding: 2px;
}
#suggestions {
	position: absolute;
	border: 1px solid #ccc;
	background: #fff;
	max-height: 200px;
	width: 200px;
	overflow-y: auto;
	display: none;
}
.suggestion {
	padding: 5px;
	cursor: pointer;
}
.suggestion:hover,
.suggestion.selected {
	background: #f0f0f0;
}

/* Tooltip */
#elevationTooltip {
	position: absolute;
	background: #fff;
	border: 1px solid #ccc;
	padding: 2px 6px;
	font-size: 12px;
	pointer-events: none;
	display: none;
}

/* Utility */
.placeholder {
	width: 320px;
}

/* gallery */

#gallery {
    width: 100%;
    height: auto;
}

.gallery-image-container {
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
}

@media (min-width: 768px) {
	.tabDetail {
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}
}
@media (max-width: 767px) {
	#map_sidebar {
		width: 100%;
	}
}

@media (max-width: 480px) {
  #mapSearch {
    flex-direction: column;
    align-items: stretch;
  }
}