/* Eigene Karte (MapLibre). Farben über die Variablen anpassen. */
.cmap { --accent: #e8743b; --ink: #0b1a1f; --radius: 22px; position: relative; border-radius: var(--radius); overflow: hidden; background: #0f2228; aspect-ratio: 1 / 1; min-height: 380px; color: #f1e6d8; isolation: isolate; }
.cmap .cmap-canvas { position: absolute !important; inset: 0; width: 100%; height: 100%; }   /* !important: maplibre-gl.css setzt position:relative */
.cmap-fallback { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding: 20px; font-size: .95rem; opacity: .75; }
.cmap.ready .cmap-fallback { display: none; }
.cmap-legend { position: absolute; left: 10px; top: 10px; z-index: 3; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(11,26,31,.88); font-size: .78rem; line-height: 1.2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 20px); pointer-events: none; }
.cmap-legend .lg-ci { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 4px; background: var(--accent); }
.cmap-legend .lg-ci img { width: 14px; height: auto; }
.cmap-legend .lg-tram { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); margin-left: 6px; }
.mk-ci { display: grid; justify-items: center; cursor: default; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.mk-ci img { box-sizing: content-box; width: 40px; height: auto; padding: 9px 12px; background: var(--accent); border-radius: 12px; display: block; }
.mk-ci i { width: 14px; height: 14px; background: var(--accent); transform: rotate(45deg); margin-top: -8px; border-radius: 0 0 3px 0; }
.mk-tram { display: flex; align-items: center; gap: 6px; cursor: default; }
.mk-tram .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; flex: none; }
.mk-tram .dot svg { width: 14px; height: 14px; }
.mk-tram .nm { font-size: .78rem; font-weight: 700; line-height: 1.1; color: #f1e6d8; text-shadow: 0 0 4px var(--ink), 0 0 4px var(--ink), 0 0 2px var(--ink); white-space: nowrap; }
.mk-tram .nm small { display: block; font-weight: 500; opacity: .75; font-size: .7rem; }
.cmap .maplibregl-ctrl-group { background: var(--ink); border: 1px solid rgba(255,255,255,.15); box-shadow: none; }
.cmap .maplibregl-ctrl-group button { background-color: transparent; }
.cmap .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,.15); }
.cmap .maplibregl-ctrl-icon, .cmap .maplibregl-ctrl-attrib-button { filter: invert(1); }
.cmap .maplibregl-ctrl-attrib, .cmap .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(11,26,31,.85); color: #9db6bb; font-size: .65rem; }
.cmap .maplibregl-ctrl-attrib a { color: #cfe0e3; }
@media (max-width: 720px) { .cmap { min-height: 300px; } .mk-tram .nm small { display: none; } .mk-ci img { width: 32px; } }