/* atlas-cell-inspector.css — Cell-Inspector Sidepanel (Klick auf 1km-Cell → POI-Liste).
 * Verwendet in de_1km.html, *_3d.html (Per-Kreis), bl_*_3d.html.
 */
/* Floating-Card links neben der rechten Sidebar (340px) — siehe Sprint 2026-06-03.
 * right:360 = 340 Sidebar + ~20 Abstand. max-height begrenzt; body scrollt intern. */
.cell-inspector { position:fixed; top:69px; right:360px; width:304px;
  max-width:calc(100vw - 380px); max-height:calc(100vh - 120px);
  background:rgba(20,29,51,.86); backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  color:#cdd9ec; border-radius:12px; border:1px solid rgba(74,144,226,.32);
  box-shadow:0 12px 40px rgba(0,0,0,.55); z-index:500; display:flex; flex-direction:column;
  font-size:12px; animation:ci-slide-in .22s ease; }
.cell-inspector[hidden] { display:none; }
@keyframes ci-slide-in { from{transform:translateX(12px); opacity:0} to{transform:translateX(0); opacity:1} }
@media (max-width: 1100px) {
  /* schmale Viewports: Card schiebt zur Map-Mitte, Sidebar bleibt sichtbar */
  .cell-inspector { right:auto; left:280px; width:300px; }
}
.ci-h { display:flex; justify-content:space-between; align-items:flex-start; padding:13px 14px 11px;
  border-bottom:1px solid rgba(255,255,255,.08); gap:10px; flex-shrink:0; }
.ci-h-actions { display:flex; gap:4px; align-items:flex-start; }
.ci-title { font-size:13px; font-weight:700; color:#fff; }
.ci-sub { font-size:12px; color:#9fb3d1; margin-top:3px; line-height:1.5; }
.ci-bm { background:transparent; color:#9fb3d1; border:1px solid rgba(74,144,226,.32); border-radius:4px;
  font-size:14px; cursor:pointer; padding:2px 7px; line-height:1; }
.ci-bm:hover { color:#fff; background:rgba(74,144,226,.18); }
.ci-bm[hidden] { display:none; }
.ci-x { background:transparent; color:#9fb3d1; border:0; font-size:22px; cursor:pointer; padding:0 4px; line-height:1; }
.ci-x:hover { color:#fff; }
.ci-body { padding:8px 12px 14px; overflow-y:auto; flex:1; }
.ci-empty { color:#9fb3d1; font-size:12px; padding:8px; text-align:center; }
.ci-loading { color:#9fb3d1; font-size:12px; padding:14px; text-align:center; }
.ci-poi { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06); }
.ci-poi:last-child { border-bottom:0; }
.ci-poi-name { font-weight:600; color:#fff; font-size:12px; margin-bottom:3px; }
.ci-poi-sub { color:#9fc8ff; font-size:12px; margin-bottom:3px; }
.ci-poi-adr { color:#9fb3d1; font-size:12px; margin-bottom:3px; }
.ci-poi-meta { font-size:12px; color:#7da2d4; display:flex; gap:10px; flex-wrap:wrap; margin-top:3px; }
.ci-poi-meta a { color:#9fc8ff; text-decoration:none; }
.ci-poi-meta a:hover { text-decoration:underline; }
.ci-poi-meta .ci-h-hours { color:#7fdb9c; }
.ci-cat-tabs { display:flex; gap:4px; padding:8px 12px 0; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px; padding-bottom:8px; }
.ci-cat-btn { padding:4px 9px; background:transparent; color:#9fb3d1; border:1px solid rgba(74,144,226,.32);
  border-radius:11px; font-size:12px; cursor:pointer; transition:.12s; }
.ci-cat-btn:hover { background:rgba(74,144,226,.12); color:#fff; }
.ci-cat-btn.active { background:#4a90e2; color:#fff; border-color:#4a90e2; }
.ci-cat-btn .ci-cat-count { opacity:.7; margin-left:3px; font-size:12px; }