/* Standort – Vollbild-Karte mit Glass-Overlays. */

.app { position: fixed; inset: 0; overflow: hidden; }
.map { position: absolute; inset: 0; background: #0d1424; }

/* Leaflet-Anpassungen */
.leaflet-container { background: #0d1424; font-family: var(--font); }
.leaflet-div-icon { background: transparent; border: none; }
.leaflet-control-attribution { background: rgba(0, 0, 0, .4) !important; color: rgba(255, 255, 255, .6) !important; font-size: 10px; }
.leaflet-control-attribution a { color: rgba(255, 255, 255, .8) !important; }

.map-pin {
  width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid #fff;
  display: grid; place-items: center; font-size: 18px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

/* Header */
.hdr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-5) var(--sp-3);
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.hdr-title { font-size: var(--fs-t2); font-weight: var(--fw-heavy); letter-spacing: -.02em; }
.hdr-status { font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--r-pill); background: var(--card2); color: var(--text-muted); white-space: nowrap; }
.hdr-status--ok { color: #34d399; background: rgba(52, 211, 153, .14); }
.hdr-status--locating { color: var(--accent); background: rgba(var(--accent-rgb), .14); }
.hdr-status--denied, .hdr-status--error, .hdr-status--unsupported { color: #f87171; background: rgba(248, 113, 113, .14); }

/* Zentrier-Button */
.locate-btn {
  position: absolute; right: var(--sp-4); bottom: calc(116px + env(safe-area-inset-bottom)); z-index: 1200;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--accent); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s var(--ease-spring);
}
.locate-btn:active { transform: scale(.93); }

/* Mitglieder-Leiste */
.members {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border); border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
}
.member {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); cursor: pointer; text-align: left;
  transition: transform .12s var(--ease-spring);
}
.member:active { transform: scale(.98); }
.member--off { opacity: .6; }
.member-emoji { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; font-size: 20px; }
.member-info { min-width: 0; display: flex; flex-direction: column; }
.member-name { font-weight: var(--fw-bold); }
.member-sub { font-size: var(--fs-cap); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-live { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-left: auto; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* Standort-Freigabe ist jetzt ein nicht-blockierendes Banner (siehe pair.css). */

/* „Veraltete" (länger nicht aktualisierte) Positionen abgeschwächt darstellen. */
.map-pin--stale { opacity: .55; filter: grayscale(.45); }
.member--stale { opacity: .72; }
.member--stale .member-sub { font-style: italic; }

/* Profilbild-Marker */
.map-pin--img { width: 40px; height: 40px; padding: 0; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c), 0 3px 10px rgba(0, 0, 0, .5); }
.map-pin--img img { width: 100%; height: 100%; object-fit: cover; }