:root {
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Segoe UI", system-ui, -apple-system, sans-serif;
}
#dvbj-wrap {
	position: relative; display: flex; height: 580px;
	border-radius: 30px 30px 30px 6px; overflow: hidden;
	border: 1px solid #e2e8f0; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	font-family: var(--font-sans);
}
#dvbj-map {
	flex: 1; min-width: 0; height: 100%;
}
 
/* ── Sidebar ── */
#dvbj-sidebar {
	width: 280px; flex-shrink: 0;
	display: flex;
	flex-direction: column;
    overflow: hidden;
	border-left: 1px solid #e2e8f0;
	background: #fff;
	transition: width 0.28s ease, opacity 0.28s ease;
}
#dvbj-sidebar.collapsed {
	width: 0;
	opacity: 0;
	pointer-events: none;
	border-left: none;
}
#dvbj-sidebar-header {
	background: #022746; padding: 14px 16px;
	flex-shrink: 0;
}
#dvbj-sidebar-header h3 {
    font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
    color: #fff;
	margin: 0 0 2px;
	white-space: nowrap;
}
#dvbj-count {
	font-size: 11px;
	color: rgba(255,255,255,0.75);
}
#dvbj-search-wrap {
	padding: 10px 12px;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}
#dvbj-search {
    width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
    border: 1px solid #CBD5E0;
	border-radius: 8px;
	font-size: 13px;
    font-family: var(--font-sans);
	background: #F7FAFC;
	color: #2D3748;
	outline: none;
}
#dvbj-search:focus {
	border-color: #022746;
	background: #fff; 
}
#dvbj-list {
	flex: 1;
	overflow-y: auto;
}
 
.dvbj-region-header {
    padding: 5px 12px 4px;
	font-size: 10px;
	font-weight: 700;
    letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	flex-shrink: 0;
}
.dvbj-item {
    padding: 8px 12px;
	border-bottom: 1px solid #F0F4FA;
    cursor: pointer;
	display: flex;
	align-items: center;
	gap: 9px;
	transition: background 0.12s;
}
.dvbj-item:hover {
	background: #EBF3FF;
}
.dvbj-item.active {
	background: #EBF3FF;
	border-left: 3px solid #022746;
	padding-left: 9px; 
}
.dvbj-item-logo {
    width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 5px;
    object-fit: contain;
	background: #f7f8fa;
	border: 1px solid #edf0f5;
	display: block;
}
.dvbj-item-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 5px;
    display: flex;
	align-items: center;
	justify-content: center;
    font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: 0.02em;
}
.dvbj-info {
	flex: 1; min-width: 0;
}
.dvbj-name {
	font-size: 12px;
	font-weight: 500;
	color: #2D3748;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dvbj-city {
	font-size: 11px;
	color: #718096;
	margin-top: 1px;
}
.dvbj-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
 
/* ── Legend & Filter ── */
.legend {
	padding: 8px 10px;
	background: #fff;
	border-top: 1px solid #e2e8f0;
    display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	color: #4A5568;
    align-items: center;
	flex-shrink: 0;
}
.legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.dvbj-filter-bar {
	padding: 6px 10px;
	background: #F7FAFC;
	border-top: 1px solid #e2e8f0;
    display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.dvbj-filter-btn {
    font-size: 11px;
	font-family: var(--font-sans);
	padding: 3px 10px;
    border-radius: 100px;
	border: 1.5px solid #CBD5E0;
	background: #fff;
    color: #718096;
	cursor: pointer;
	font-weight: 500;
	white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-appearance: none;
	outline: none;
}
.dvbj-filter-btn.active {
	background: #022746;
	border-color: #022746;
	color: #fff;
}
.dvbj-filter-btn:hover:not(.active) {
	border-color: #022746;
	background: #022746;
	color: #fff;
}
 
/* ── Toggle Button ── */
#dvbj-toggle-btn {
	position: absolute;
	top: 12px;
	right: 292px;
	z-index: 10;
    width: 34px;
	height: 34px;
	border-radius: 8px;
    background: #022746;
	border: none;
	cursor: pointer;
    display: flex;
	align-items: center;
	justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: right 0.28s ease;
}
#dvbj-toggle-btn:hover {
	background: #033a66;
}
#dvbj-toggle-btn span {
    position: absolute;
	left: 50%;
	height: 2px;
	background: #fff;
    border-radius: 2px;
	transition: all 0.28s ease;
}
/* Sidebar GESCHLOSSEN → 3 Striche */
#dvbj-toggle-btn span:nth-child(1) {
	width: 14px;
	top: 11px;
	transform: translateX(-50%);
}
#dvbj-toggle-btn span:nth-child(2) { 
	width: 14px; 
	top: 17px; 
	transform: translateX(-50%); 
}
#dvbj-toggle-btn span:nth-child(3) { 
	width: 14px; 
	top: 23px; 
	transform: translateX(-50%);
}
/* Sidebar OFFEN → Pfeil nach rechts > */
#dvbj-toggle-btn.open span:nth-child(1) { 
	width: 10px; 
	top: 17px; 
	transform: translateX(-3px) rotate(45deg);  
	transform-origin: right center; 
	transform-origin: right center; 
}
#dvbj-toggle-btn.open span:nth-child(2) { 
	width: 16 px; 
	top: 17px; 
	transform: translateX(-50%); 
	opacity: 1; 
}
#dvbj-toggle-btn.open span:nth-child(3) { 
	width: 10px; 
	top: 17px; 
	transform: translateX(-3px) rotate(-45deg); 
	transform-origin: right center; 
	transform-origin: right center; 
}
 
/* ── Zoom (natives NavigationControl) ── */
.maplibregl-ctrl-group {
    margin-top: 30px !important; 
	margin-left: 30px !important;
    border-radius: 6px !important; 
	overflow: hidden !important;
    border: 1px solid #CBD5E0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    background: #fff !important;
  }
.maplibregl-ctrl-group button {
    width: 32px !important;
	height: 32px !important;
    background: #fff !important; 
	border: none !important;
    border-radius: 0 !important; 
	cursor: pointer !important;
    display: flex !important; 
	align-items: center !important; 
	justify-content: center !important;
}
.maplibregl-ctrl-group button + button { 
	border-top: 1px solid #CBD5E0 !important; 
}
.maplibregl-ctrl-group button:hover { 
	background: #EBF3FF !important;
}
 
/* ── Attribution ── */
.maplibregl-ctrl-attrib {
    font-size: 10px !important; 
	background: rgba(255,255,255,0.85) !important;
    padding: 2px 6px !important; 
	border-radius: 4px 0 0 0 !important;
  }
.maplibregl-ctrl-attrib a { 
	  color: #022746 !important; 
}
 
  /* ── Marker ── */
.dvbj-marker {
	width: 20px; 
	height: 20px;
    display: flex; 
	align-items: center; 
	justify-content: center;
    cursor: pointer !important;
  }
.dvbj-pin {
    width: 14px; 
	height: 14px; 
	border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: none;
}
.dvbj-marker:hover .dvbj-pin  { 
	transform: scale(1.4); 
	box-shadow: 0 2px 10px rgba(0,0,0,0.42); 
}
.dvbj-marker.active .dvbj-pin { 
	transform: scale(1.7); 
	box-shadow: 0 3px 12px rgba(0,0,0,0.48); 
}
 
/* ── Popups ── */
.maplibregl-popup {
	z-index: 200 !important;
}
.maplibregl-popup-content {
    padding: 0 !important; 
	border-radius: 12px !important; 
	overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14) !important;
    width: 210px !important; 
	font-family: var(--font-sans);
  }
.maplibregl-popup-tip { 
	border-top-color: #fff !important; 
}
.maplibregl-popup-close-button { 
	color: #73bcdb !important; 
	font-size: 18px; 
	padding: 4px 8px; 
	line-height: 1; 
	z-index: 201 !important; 
}
.maplibregl-popup-close-button:hover { 
	color: #4fa8c8 !important; 
	background: transparent; 
}
.dvbj-popup-header { 
	background: #022746; 
	padding: 10px 13px 8px; 
}
.dvbj-popup-header h4 { 
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700; 
	color: #fff;
	margin: 0 0 2px;
}
.dvbj-popup-header p { 
	font-size: 11px; 
	color: rgba(255,255,255,0.75); 
	margin: 0; 
}
.dvbj-popup-body {
	padding: 9px 13px 11px;
	background: #fff;
}
.dvbj-popup-logo {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
	border-radius: 6px;
	margin-bottom: 7px;
	display: block;
}
.dvbj-popup-row { 
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 4px;
}
.dvbj-popup-row span:first-child { 
	color: #718096;
}
.dvbj-popup-row span:last-child {
	font-weight: 500; 
	color: #2D3748; 
}
.dvbj-badge { 
	display: inline-block;
	margin-top: 6px;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 500; 
	background: #81cbea;
	color: #022746;
}
 
@media (max-width: 600px) {
    #dvbj-wrap { 
		height: 480px;
		border-radius: 16px 16px 16px 4px;
	}
    #dvbj-sidebar {
		width: 240px;
	}
    #dvbj-toggle-btn {
		right: 252px;
	}
}