#map { height:100%; width:100%; }

/* CML: Wrapper – alle UI-Overlays werden relativ dazu positioniert */
#wrapper{
  position: relative;
  overflow: hidden;
}

/* CML: Debug Overlay */
#debugOverlay{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(560px, calc(100% - 24px));
  max-height: min(55%, 560px);
  overflow: auto;
  background: rgba(0,0,0,0.86);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display:none;
}
#debugOverlay .hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
#debugOverlay button{
  cursor:pointer;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 12px;
}
#debugOverlay button:hover{ background: rgba(255,255,255,0.18); }
#debugJson{
  display:none;
  width:100%;
  min-height:220px;
  resize:vertical;
  background: rgba(255,255,255,0.06);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:10px;
  font-family: inherit;
  font-size:12px;
  line-height:1.35;
  outline: none;
  box-sizing: border-box;
  white-space: pre;
}

/* CML: StreetView Overlay */
#svOverlay{
  position: absolute;
  right: 12px;
  top: 12px;
  width: min(420px, calc(100% - 24px));
  height: min(280px, calc(100% - 24px));
  background: #111;
  overflow: hidden;
  border-radius: 12px;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: none;
}
#svHdr{
  position:absolute;
  left:0; right:0; top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0));
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  z-index: 2;
  pointer-events: none;
}
#svHdr .btn{
  pointer-events: auto;
  cursor:pointer;
  border:0;
  border-radius: 10px;
  padding:6px 10px;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 12px;
}
#svHdr .btn:hover{ background: rgba(255,255,255,0.18); }
#pano{ position:absolute; left:0; right:0; top:0; bottom:0; }

/* CML: Fullscreen Helper Button */
#btnFs{
  position: absolute;
  left: 12px;
  top: 82px;
  z-index: 7;
  cursor:pointer;
  border:0;
  border-radius: 12px;
  padding:10px 12px;
  background: rgba(0,0,0,0.60);
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
#btnFs:hover{ background: rgba(0,0,0,0.70); }

/* CML: Route Overlay Button */
#btnRoute{
  position: absolute;
  left: 12px;
  top: 132px;
  z-index: 8;
  cursor:pointer;
  border:0;
  border-radius: 12px;
  padding:10px 12px;
  background: rgba(0,0,0,0.60);
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
#btnRoute:hover{ background: rgba(0,0,0,0.70); }

/* CML: Route Panel */
#routePanel{
  position: absolute;
  left: 12px;
  top: 182px;
  width: min(420px, calc(100% - 24px));
  max-height: min(70%, calc(100% - 210px));
  overflow:auto;
  background: rgba(0,0,0,0.86);
  color:#fff;
  border-radius: 12px;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display:none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#routePanel .rp-hdr{
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.92);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#routePanel .rp-hdr .ttl{ font-weight:800; font-size:14px; }
#routePanel .rp-hdr .btn{
  cursor:pointer;
  border:0;
  border-radius: 10px;
  padding:6px 10px;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 12px;
}
#routePanel .rp-hdr .btn:hover{ background: rgba(255,255,255,0.18); }
#routePanel .rp-body{ padding: 10px 12px; font-size: 13px; line-height: 1.35; }
#routePanel .muted{ opacity: .78; font-size: 12px; }
#routePanel .sec{ margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.10); }
#routePanel .rowx{ display:flex; justify-content:space-between; gap:10px; }
#routePanel .pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 12px;
}
#routePanel a{ color:#fff; text-decoration: underline; }

/* CML: Meta Editor Modal */
#metaModal{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000000;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
#metaCard{
  width: min(520px, calc(100% - 24px));
  background: rgba(0,0,0,0.92);
  color:#fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#metaCard .mc-hdr{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#metaCard .mc-hdr .ttl{ font-weight:800; font-size:14px; }
#metaCard .mc-body{ padding: 12px 14px; font-size: 13px; }
#metaCard textarea{
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  outline: none;
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
}
#metaCard label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  cursor:pointer;
  user-select:none;
}
#metaCard input[type="checkbox"]{ margin-top: 3px; }
#metaCard .mc-ftr{
  padding: 12px 14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
#metaCard .btn{
  cursor:pointer;
  border:0;
  border-radius: 10px;
  padding:8px 10px;
  background: rgba(255,255,255,0.12);
  color:#fff;
  font-size: 12px;
}
#metaCard .btn.primary{
  background: rgba(255,122,0,0.95);
  color:#111;
  font-weight:800;
}
#metaCard .btn:hover{ background: rgba(255,255,255,0.18); }
#metaCard .btn.primary:hover{ background: rgba(255,122,0,1); }

/* CML: Fullscreen-only visibility */
.fullscreen-only{ display:none; }
.is-fullscreen .fullscreen-only{ display:block; }



#routePanelBackdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 2147482000;
	display: none;
}

@media (max-width: 999.98px){
	#routePanel{
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		height: 100% !important;
		max-height:none;
		width: min(420px, 92%) !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform .22s ease;
		z-index: 2147483000;
		background: rgba(15,15,15,.98);
		color: #fff;
		padding: 12px;
		box-shadow: -10px 0 30px rgba(0,0,0,.35);
		display: block !important; /* CML: wichtig: nicht per display verstecken */
	}
	body.routepanel-open #routePanel{
		transform: translateX(0);
	}
}

/* CML: InfoWindow Close-Button kleiner */
.gm-style button.gm-ui-hover-effect{
	top: 0px !important;
	right: 0 !important;
	width: 28px !important;
	height: 28px !important;
	opacity: .7 !important;
	border-radius: 8px !important;
	outline:0 !important;
}
.gm-style button.gm-ui-hover-effect:hover{
	opacity: 1 !important;
	background: rgba(0,0,0,.06) !important;
}
.gm-style button.gm-ui-hover-effect > span{
	transform: scale(.75) !important;
	margin:0 !important;
}