/* heyKumpel PWA – Offline-/Install-UI + Installations-Anleitung
   Wird auf App-Seiten (via includes/pwa_head.php) und auf der Landingpage geladen. */

/* ── Offline-Balken (unten) ─────────────────────────────────────── */
.pwa-offline-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #b45309; color: #fff;
  font: 600 13.5px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  transform: translateY(110%); transition: transform .28s ease;
}
.pwa-offline-bar.show { transform: translateY(0); }
.pwa-offline-bar svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── Toast (kurze Meldung, z. B. „offline – nicht gespeichert") ──── */
.pwa-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 18px); z-index: 1600;
  display: flex; align-items: center; gap: 9px; max-width: min(440px, calc(100vw - 32px));
  background: #1a1a2e; color: #fff;
  font: 600 13.5px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.pwa-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pwa-toast svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── Installations-Hinweis (unten, eigenständige Karte) ─────────── */
.pwa-install-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1400;
  display: flex; align-items: center; gap: 12px;
  background: #fff; color: #1a1a2e;
  border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 12px 12px 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 12px 34px rgba(15,23,42,.18);
  transform: translateY(140%); transition: transform .3s ease;
  max-width: 520px; margin: 0 auto;
}
.pwa-install-bar.show { transform: translateY(0); }
.pwa-install-icon { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; }
.pwa-install-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pwa-install-txt b { font-size: 14px; }
.pwa-install-txt span { font-size: 12px; color: #64748b; }
.pwa-install-go {
  margin-left: auto; flex-shrink: 0;
  background: #2563eb; color: #fff; border: none; cursor: pointer;
  font: 700 13.5px/1 inherit; text-decoration: none;
  padding: 10px 14px; border-radius: 9px; white-space: nowrap;
}
.pwa-install-go:hover { background: #1d4ed8; }
.pwa-install-x {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: #94a3b8; font-size: 22px; line-height: 1; padding: 2px 6px;
}
.pwa-install-x:hover { color: #475569; }

/* ── Installations-Anleitung (Landingpage + /anleitung.php) ─────── */
.pwa-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .pwa-guide { grid-template-columns: 1fr; } }

.pwa-guide-card {
  background: #fff; border: 1px solid #e6eaf0; border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 6px 22px rgba(15,23,42,.05);
  text-align: left;
}
.pwa-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pwa-guide-logo {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0B1D34; color: #fff;
}
.pwa-guide-logo svg { width: 26px; height: 26px; }
.pwa-guide-head h3 { font-size: 17px; font-weight: 800; color: #0B1D34; margin: 0; }
.pwa-guide-head p { font-size: 12.5px; color: #94a3b8; margin: 2px 0 0; }

.pwa-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pwa-steps li {
  position: relative; counter-increment: step;
  padding: 12px 0 12px 44px; min-height: 30px;
  border-top: 1px solid #f1f5f9;
  font-size: 14px; line-height: 1.5; color: #374151;
}
.pwa-steps li:first-child { border-top: none; }
.pwa-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #eff6ff; color: #2563eb;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pwa-steps b { color: #0B1D34; font-weight: 700; }
.pwa-glyph {
  display: inline-flex; vertical-align: -5px; margin: 0 2px;
  width: 21px; height: 21px; padding: 2px;
  border: 1px solid #d6deea; border-radius: 6px; color: #0B1D34;
  background: #f8fafc;
}
.pwa-glyph svg { width: 100%; height: 100%; }
.pwa-guide-note {
  margin-top: 14px; font-size: 12.5px; color: #64748b;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px;
}