/* ============================================================
   Installierbare App: Hinweisleiste und Offline-Stand.
   Beide sitzen unten über der festen Leiste (Handy) bzw. am unteren
   Rand (Desktop) und verdecken nie den Inhalt dauerhaft.
   ============================================================ */
.pwa-bar, .offline-bar {
  position: fixed; left: var(--space-3); right: var(--space-3);
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 78; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius);
  background: var(--card-strong); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text);
  animation: pwaHerein 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pwaHerein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pwa-bar__ico { border-radius: 8px; flex-shrink: 0; }
.pwa-bar__t { flex: 1; min-width: 0; line-height: 1.35; }
.pwa-bar__t b { color: var(--cyan-soft); }
.pwa-bar__ok {
  flex-shrink: 0; min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); background: var(--grad-main); color: #05060a;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.6px;
}
.pwa-bar__ok:active { filter: brightness(1.08); }
.pwa-bar__x {
  flex-shrink: 0; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm);
  color: var(--text-faint); font-size: var(--text-md);
}
.pwa-bar__x:active { color: var(--text); }

/* --- Offline-Stand ---------------------------------------- */
.offline-bar { justify-content: center; color: var(--amber); font-weight: 600; }
.offline-bar[hidden] { display: none; }
.offline-bar b { color: var(--text); font-family: var(--font-mono); }
.offline-bar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px var(--amber); flex-shrink: 0;
}

/* Am Desktop gibt es keine feste Leiste unten — dort reicht der normale Rand. */
@media (min-width: 768px) {
  .pwa-bar, .offline-bar { left: auto; right: var(--space-5); bottom: var(--space-5); max-width: 460px; }
}