.settings {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 300px;
	background: rgba(255,255,255,0.95);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	padding: 12px;
	z-index: 1000;
	backdrop-filter: blur(4px);
}
.settings.hidden{ display:none; }
.settings h3 { margin:0 0 8px 0; font-size:20px; }
.row { display:flex; align-items:center; justify-content:space-between; margin:8px 0; }
.control { display:flex; gap:8px; align-items:center; }

.divider {
	border: 0;
	border-top: 1px solid #e2e8f0;
	margin: 12px 0;
}

.switch { 
	--w:46px; --h:24px; --pad:2px; 
	width:var(--w); height:var(--h); border-radius:calc(var(--h)/2);
	background:#d0d4d9; cursor:pointer; transition: background .18s; 
	/* Dies erzwingt die vertikale Zentrierung des Knupsies */
	display: flex; 
	align-items: center; 
}
.switch .knob { width: calc(var(--h) - (var(--pad) * 2)); height: calc(var(--h) - (var(--pad) * 2));
	background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transform: translateX(0); transition: transform .18s; }
.switch.on { background: #3b82f6; }
.switch.on .knob { transform: translateX(calc(var(--w) - var(--h))); }

select { padding:6px 8px; border-radius:6px; border:1px solid #cbd5e1; font-size:14px; }

.foot { font-size:12px; color:#475569; margin-top:8px; display:flex; justify-content:space-between; align-items:center;}
.btn { padding:6px 10px; background:#111827;color:white;border-radius:6px;border:none;cursor:pointer;}
.btn.secondary { background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0; }

.settings .close-btn { position:absolute; top:8px; right:10px; background:transparent; border:0; cursor:pointer; padding:4px; }
.settings .close-btn svg{ width:16px; height:16px; fill:#334155; }

/* Ensure control button matches MapLibre structure */
.maplibregl-ctrl.settings-control button{ width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; }
.maplibregl-ctrl.settings-control svg{ width:18px; height:18px; fill:#111827; }

.maplibregl-ctrl button.maplibregl-ctrl-settings .maplibregl-ctrl-icon {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23333' aria-hidden='true'%3E%3Cpath d='M17 0c-1.071 0-2 .8-2 1.758v4.8c0 .962.884 1.758 2.007 1.758 1.123 0 2.007-.796 2.007-1.758V1.758C19.014.8 18.086 0 17 0zM0 3.316v1.679h15.586V3.316H0zM22.352 3.316v1.679H24V3.316h-1.648zM6.984 7.989c-1.123 0-2.007.8-2.007 1.758v4.8c0 .962.884 1.758 2.007 1.758s2.007-.796 2.007-1.758V9.747C8.991 8.789 8.107 7.989 6.984 7.989zM0 10.976v1.679h3.566v-1.679H0zM9.966 10.976v1.679H24v-1.679H9.966zM17 14.628c-1.123 0-2.007.8-2.007 1.758v4.8c0 .962.884 1.758 2.007 1.758 1.123 0 2.007-.796 2.007-1.758V16.147C19.014 14.889 18.086 14.628 17 14.628zM0 17.007v1.679h15.586v-1.679H0zM22.352 17.007v1.679H24v-1.679h-1.648z'/%3E%3C/svg%3E");}