:root {
      --bg: #0e1117; --surface: #161b22; --border: #30363d;
      --text: #e6edf3; --text-muted: #8b949e;
      --accent: #58a6ff; --accent-soft: #1a3a5c;
      --green: #3fb950; --green-soft: #1a3828;
      --yellow: #d29922; --yellow-soft: #3d2e00;
      --red: #f85149; --red-soft: #3d1418;
      --purple: #bc8cff; --purple-soft: #2d1f4e;
      --orange: #db6d28;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .container { max-width:900px; margin:0 auto; padding:1.5rem 1rem 3rem; }
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }
    .header { text-align:center; margin-bottom:1.2rem; }
    .header h1 { font-size:2.8rem; font-weight:800; letter-spacing:-0.04em; background:linear-gradient(90deg, #58a6ff 0%, #3fb950 40%, #58a6ff 60%, #3fb950 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 5s linear infinite; user-select:none; }
    .header .sub { color:var(--text-muted); font-size:0.95rem; margin-top:0.5rem; }
    .tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:1rem; }
    .tab { padding:0.7rem 1.2rem; font-size:0.9rem; font-weight:500; color:var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; transition:all 0.15s; font-family:inherit; }
    .tab:hover { color:var(--text); }
    .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
    .tab-content { display:none; }
    .tab-content.active { display:block; }
    .card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.2rem; margin-bottom:1rem; }
    .card-title { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.8rem; }
    #map { width:100%; height:50vh; min-height:300px; border-radius:8px; border:1px solid var(--border); margin-bottom:0; }
    label { display:block; font-size:0.85rem; color:var(--text-muted); margin-bottom:0.3rem; }
    select,input[type="text"] { width:100%; padding:0.6rem 0.8rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; font-size:0.9rem; font-family:inherit; outline:none; }
    select:focus,input[type="text"]:focus { border-color:var(--accent); }
    .search-input { width:100%; padding:0.8rem 1rem; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:1rem; font-family:inherit; outline:none; }
    .search-input:focus { border-color:var(--accent); }
    .search-input::placeholder { color:var(--text-muted); }
    .search-results { margin-top:0.5rem; max-height:400px; overflow-y:auto; }
    .search-result { display:flex; align-items:flex-start; gap:0.8rem; padding:0.8rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:0.5rem; cursor:pointer; transition:border-color 0.15s,background 0.15s; }
    .search-result:hover { border-color:var(--accent); background:var(--accent-soft); }
    .search-result.selected { border-color:var(--green); background:var(--green-soft); }
    .result-icon { width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; color:#fff; font-weight:600; }
    .result-info { flex:1; min-width:0; }
    .result-name { font-weight:500; font-size:0.95rem; }
    .result-detail { font-size:0.78rem; color:var(--text-muted); margin-top:0.15rem; word-break:break-word; }
    .result-badges { display:flex; gap:0.4rem; margin-top:0.3rem; flex-wrap:wrap; }
    .badge { font-size:0.68rem; padding:0.15em 0.6em; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
    .badge.boundary { background:var(--green-soft); color:var(--green); }
    .badge.bbox { background:var(--yellow-soft); color:var(--yellow); }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.7rem 1.2rem; border-radius:8px; font-size:0.95rem; font-weight:500; font-family:inherit; cursor:pointer; border:1px solid transparent; transition:all 0.15s; }
    .btn-primary { background:var(--accent); color:#000; width:100%; margin-top:1rem; }
    .btn-primary:hover:not(:disabled) { background:#79bcff; }
    .btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
    .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); flex:1; }
    .btn-outline:hover { border-color:var(--accent); color:var(--accent); }
    .btn-sm { padding:0.4rem 0.8rem; font-size:0.82rem; }
    .export-row,.download-row { display:flex; gap:0.5rem; margin-top:0.8rem; }
    .info-badge { display:inline-block; font-size:0.72rem; padding:0.2em 0.7em; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-left:0.5rem; }
    .aoi-info { display:flex; align-items:center; gap:0.8rem; padding:0.6rem 0; font-size:0.85rem; color:var(--text-muted); }
    .aoi-info strong { color:var(--text); }
    .maplibregl-map { font-family:inherit; }
    .maplibregl-ctrl-group { background-color:var(--surface)!important; border:1px solid var(--border)!important; }
    .maplibregl-ctrl-group button { color:var(--text)!important; }
    .maplibregl-ctrl-group button:hover { background-color:var(--accent-soft)!important; }
    .maplibregl-ctrl-attrib { background:rgba(14,17,23,0.7)!important; color:var(--text-muted)!important; font-size:0.65rem!important; }
    .maplibregl-ctrl-attrib a { color:var(--accent)!important; }
    .maplibregl-popup-content { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
    .maplibregl-popup-tip { border-top-color:var(--surface); }
    .maplibregl-popup-close-button { color:var(--text-muted); font-size:1.2rem; padding:4px 8px; }
    .maplibregl-popup-close-button:hover { color:var(--text); background:none; }
    .mapbox-gl-draw_ctrl-draw-btn { background-color:var(--surface)!important; border-color:var(--border)!important; filter:invert(1) hue-rotate(180deg); cursor:pointer!important; pointer-events:auto!important; }
    .mapbox-gl-draw_ctrl-draw-btn:hover { background-color:var(--accent-soft)!important; }
    .mapbox-gl-draw_ctrl-draw-btn.active { background-color:var(--accent-soft)!important; }
    .mapboxgl-ctrl-group.mapbox-gl-draw_ctrl-top-left { position:relative; z-index:10; pointer-events:auto!important; }
    .footer { text-align:center; margin-top:2rem; font-size:0.78rem; color:var(--text-muted); }
    .footer a { color:var(--accent); text-decoration:none; }
    .spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.6s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .hint { font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; }
    .upload-zone { border:2px dashed var(--border); border-radius:8px; padding:1.2rem; text-align:center; cursor:pointer; transition:border-color 0.15s,background 0.15s; margin-bottom:0.8rem; }
    .upload-zone:hover,.upload-zone.dragover { border-color:var(--accent); background:var(--accent-soft); }
    .upload-zone input[type="file"] { display:none; }
    .upload-zone-text { font-size:0.85rem; color:var(--text-muted); }
    .upload-zone-text strong { color:var(--accent); }
    .upload-success { color:var(--green); font-size:0.85rem; margin-top:0.4rem; }
    .street-label { background:rgba(0,0,0,0.7)!important; color:#fff!important; border:none!important; box-shadow:none!important; font-size:10px!important; padding:1px 4px!important; white-space:nowrap!important; }
    .street-label::before { display:none!important; }
    /* Designer layer panel */
    .designer-bar { background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; margin-bottom:1rem; }
    .designer-tabs { display:flex; align-items:center; padding:0 0.8rem; border-bottom:1px solid var(--border); }
    .dtab { padding:0.55rem 0.9rem; font-size:0.82rem; font-weight:500; color:var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; font-family:inherit; transition:color 0.15s; }
    .dtab:hover { color:var(--text); }
    .dtab.active { color:var(--accent); border-bottom-color:var(--accent); }
    .dtab-content { display:none; padding:0.6rem 0.8rem; max-height:45vh; overflow-y:auto; }
    .dtab-content.active { display:block; }
    .designer-export { margin-left:auto; display:flex; gap:0.4rem; padding:0.3rem 0; }
    .layer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0.3rem; }
    .hidden-info { display:inline-flex; align-items:center; gap:0.2rem; margin-left:auto; flex-shrink:0; }
    .hidden-count { font-size:0.62rem; color:var(--yellow); white-space:nowrap; }
    .hidden-reset { background:none; border:1px solid var(--yellow); color:var(--yellow); cursor:pointer; font-size:0.7rem; padding:0 0.25rem; border-radius:3px; line-height:1.3; transition:all 0.15s; }
    .hidden-reset:hover { background:var(--yellow); color:#000; }
    .layer-item { display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0.5rem; border-radius:6px; cursor:pointer; font-size:0.8rem; transition:background 0.15s; }
    .layer-item:hover { background:var(--accent-soft); }
    .layer-item input[type="checkbox"] { width:auto; accent-color:var(--accent); flex-shrink:0; }
    .color-pick { width:16px; height:16px; border:1px solid var(--border); padding:0; cursor:pointer; background:none; border-radius:3px; flex-shrink:0; -webkit-appearance:none; }
    .color-pick::-webkit-color-swatch-wrapper { padding:0; }
    .color-pick::-webkit-color-swatch { border:none; border-radius:2px; }
    .layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .layer-count { font-size:0.68rem; color:var(--text-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
    .layer-btns { margin-left:auto; display:flex; gap:0.15rem; align-items:center; flex-shrink:0; }
    .layer-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem; padding:0 0.2rem; line-height:1; opacity:0.5; transition:opacity 0.15s,color 0.15s; }
    .layer-btn.order-btn { font-size:0.6rem; padding:0 0.15rem; }
    .layer-btn:hover { opacity:1; color:var(--accent); }
    .layer-btn.danger:hover { color:var(--red); }
    .layer-btn.active { opacity:1; color:var(--accent); }
    .dash-btn { font-size:0.7rem; padding:0.1rem 0.3rem; border:1px solid var(--border); border-radius:3px; background:none; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:all 0.15s; min-width:24px; text-align:center; flex-shrink:0; font-family:monospace; }
    .dash-btn:hover { border-color:var(--accent); color:var(--accent); }
    .layer-settings { display:none; padding:0.5rem 0.6rem 0.6rem 1.7rem; margin:0 0 0.3rem 0; border-left:2px solid var(--border); font-size:0.72rem; }
    .layer-settings.open { display:block; }
    .layer-settings .ls-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.35rem; }
    .layer-settings .ls-row:last-child { margin-bottom:0; }
    .layer-settings .ls-label { color:var(--text-muted); width:62px; flex-shrink:0; }
    .layer-settings input[type="range"] { flex:1; height:4px; accent-color:var(--accent); min-width:60px; }
    .layer-settings .ls-val { font-variant-numeric:tabular-nums; color:var(--text); width:30px; text-align:right; flex-shrink:0; }
    .layer-settings select { background:var(--bg-1); color:var(--text); border:1px solid var(--border); border-radius:3px; padding:0.15rem 0.3rem; font-size:0.72rem; font-family:monospace; flex:1; }
    .layer-settings .ls-zoom { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:3px; padding:0.2rem 0.5rem; cursor:pointer; font-size:0.7rem; transition:all 0.15s; }
    .layer-settings .ls-zoom:hover { border-color:var(--accent); color:var(--accent); }
    .clip-btn { font-size:0.65rem; padding:0.1rem 0.35rem; border:1px solid var(--border); border-radius:3px; background:none; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:all 0.15s; }
    .clip-btn:hover { border-color:var(--accent); color:var(--accent); }
    .clip-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .layer-section-title { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin:0.6rem 0 0.2rem; }
    .layer-section-title:first-child { margin-top:0; }
    .aerial-row { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0.5rem; font-size:0.8rem; border:1px solid var(--border); border-radius:6px; margin-bottom:0.3rem; }
    .aerial-row input[type="range"] { width:70px; height:4px; accent-color:var(--accent); }
    .overlay-group { margin-bottom:0.5rem; }
    .overlay-group-title { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.2rem; display:flex; align-items:center; gap:0.4rem; }
    .overlay-group-count { font-size:0.62rem; color:var(--border); }
    .fe-popup { font-family:inherit; min-width:240px; }
    .fe-popup .fe-title { font-weight:600; font-size:0.85rem; margin-bottom:0.5rem; color:#111; }
    .fe-popup .fe-label-row { display:flex; gap:0.4rem; margin-bottom:0.6rem; }
    .fe-popup .fe-label-input { flex:1; padding:0.35rem 0.5rem; border:1.5px solid #58a6ff; border-radius:5px; font-size:0.85rem; font-family:inherit; background:#f0f7ff; }
    .fe-popup .fe-label-input:focus { outline:none; border-color:#3b82f6; }
    .fe-popup .fe-props { border-top:1px solid #e0e0e0; padding-top:0.4rem; margin-top:0.2rem; }
    .fe-popup .fe-row { display:flex; gap:0.3rem; margin-bottom:0.3rem; align-items:center; }
    .fe-popup .fe-key,.fe-popup .fe-val { padding:0.25rem 0.4rem; border:1px solid #d0d0d0; border-radius:4px; font-size:0.78rem; font-family:inherit; }
    .fe-popup .fe-key { width:80px; background:#f5f5f5; }
    .fe-popup .fe-val { flex:1; }
    .fe-popup .fe-del { background:none; border:none; color:#999; cursor:pointer; font-size:0.9rem; padding:0 0.2rem; }
    .fe-popup .fe-del:hover { color:#e33; }
    .fe-popup .fe-actions { display:flex; gap:0.4rem; margin-top:0.5rem; }
    .fe-popup .fe-btn { padding:0.3rem 0.7rem; border-radius:5px; font-size:0.78rem; font-family:inherit; cursor:pointer; border:1px solid #d0d0d0; background:#fff; }
    .fe-popup .fe-btn-add { color:#58a6ff; border-color:#58a6ff; }
    .fe-popup .fe-btn-save { background:#58a6ff; color:#fff; border-color:#58a6ff; font-weight:600; }
    .custom-tooltip { background:rgba(0,0,0,0.75)!important; color:#fff!important; border:none!important; box-shadow:0 1px 4px rgba(0,0,0,0.3)!important; font-size:11px!important; padding:2px 6px!important; border-radius:3px!important; white-space:nowrap!important; }
    .custom-tooltip::before { display:none!important; }
    .layer-section-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin:0.5rem 0 0.25rem; }
    .layer-section-title:first-child { margin-top:0; }
    .controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media (max-width:600px) { .controls-grid { grid-template-columns:1fr; } }

    /* ── POI-Suche ── */
    .poi-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.4rem 0.8rem; }
    .poi-cat-item { display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; cursor:pointer; padding:0.15rem 0; }
    .poi-cat-item input { accent-color:var(--accent); }
    .poi-tag-row { display:flex; gap:0.3rem; align-items:center; margin-bottom:0.3rem; }
    .poi-tag-row input { flex:1; padding:0.3rem 0.45rem; border:1px solid var(--border); border-radius:4px; background:var(--bg-1); color:var(--text); font-size:0.82rem; font-family:inherit; }
    .poi-tag-row input:focus { outline:none; border-color:var(--accent); }
    .poi-tag-row .poi-tag-del { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:4px; padding:0.15rem 0.45rem; cursor:pointer; font-size:0.9rem; line-height:1; }
    .poi-tag-row .poi-tag-del:hover { border-color:var(--red); color:var(--red); }
    .poi-result-list { max-height:380px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; }
    .poi-result-item { padding:0.4rem 0.6rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; }
    .poi-result-item:last-child { border-bottom:none; }
    .poi-result-item:hover { background:var(--accent-soft); }
    .poi-result-item.excluded { opacity:0.45; }
    .poi-result-item.excluded .poi-result-name { text-decoration:line-through; }
    .poi-result-name { font-size:0.84rem; color:var(--text); font-weight:500; }
    .poi-result-meta { font-size:0.72rem; color:var(--text-muted); margin-top:0.1rem; }