/* =============================================================================
   rauMKult — App-Bausteine (Spec 013, 01.10.2026): Hinweis „Neue Version“, Eintrag „App installieren“, Offline-Seite
   Version: 1.1 | 2026-10-01 | Spec 014: feste Abstände, Schriftgröße und -stärke der Offline-Seite und des Update-Hinweises auf Token
   Version: 1.0 | 2026-10-01
   Nur Anordnung; Farben, Radien, Schatten, Schrift und Knöpfe kommen aus den Token und aus .rk-btn / .rk-dialog (main-v2.css).
   ============================================================================= */

/* Hinweis „Neue Version verfügbar“: oben, unter Kopfzeile bzw. Statusleiste; Tab-Leiste, Widerrufsknopf und Schwebeknöpfe
   liegen unten und werden nie berührt. rk-pwa.js setzt --rk-pwa-oben (Unterkante der Kopfzeile, 0 in der App-Ansicht). */
.rk-pwa-update {
  position: fixed;
  top: calc(var(--rk-sicher-oben, 0px) + var(--rk-pwa-oben, 0px) + var(--rk-space-2, 8px));
  left: 50%;
  z-index: 9050;
  width: min(440px, calc(100vw - 2 * var(--rk-fab-gap, 16px)));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-space-2, 8px) var(--rk-space-3, 12px);
  padding: var(--rk-space-3, 12px) var(--rk-space-4, 16px);
  border: 1px solid var(--rk-line-strong, var(--rk-line));
  border-radius: var(--rk-radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--rk-shadow-hover);
  font-family: var(--rk-font);
  animation: rk-pwa-update-in .25s var(--rk-ease);
}
.rk-pwa-update__text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--rk-fs-input); font-weight: var(--rk-fw-medium); line-height: 1.35; }
.rk-pwa-update__knoepfe { display: flex; gap: var(--rk-space-2, 8px); flex: 0 0 auto; }
.rk-pwa-update .rk-btn { min-height: var(--rk-touch-comfort, 48px); padding: 0 var(--rk-space-4, 16px); }
@keyframes rk-pwa-update-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rk-pwa-update { animation: none; } }
html.no-motion .rk-pwa-update, [data-motion="reduced"] .rk-pwa-update { animation: none; }

/* „App installieren“ im Menü-Blatt: feste Zeile über den Kontakt-Kurzwegen, nur sichtbar, wenn Installation möglich ist */
.rk-mm__install { flex: 0 0 auto; border-top: 1px solid var(--rk-mm-line); background: var(--rk-mm-bg); padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.rk-mm__install[hidden] { display: none; }
.rk-mm__install .rk-mm__row { min-height: var(--rk-touch-comfort, 48px); color: var(--text-primary); justify-content: space-between; }

/* Anleitung für iPhone/iPad (Fenster im Stil von .rk-dialog) */
.rk-pwa-blatt__schritte { margin: 0 0 var(--rk-space-3, 12px); padding-left: 1.4em; font-size: var(--rk-fs-input); line-height: 1.55; color: var(--text-secondary); }
.rk-pwa-blatt__schritte li { margin: 0 0 var(--rk-space-2, 8px); }

/* Offline-Seite (/offline/): schlank, im Seitenstil */
.rk-offline { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: var(--rk-space-6, 32px) var(--rk-space-5, 24px); }
.rk-offline__inhalt { width: 100%; max-width: 520px; text-align: center; color: var(--text-primary); }
.rk-offline__eyebrow { margin: 0 0 var(--rk-space-4, 16px); font-size: var(--rk-fs-eyebrow); letter-spacing: var(--rk-ls-eyebrow); text-transform: uppercase; color: var(--rk-gold-text); font-weight: var(--rk-fw-medium); }
.rk-offline__titel { margin: 0 0 var(--rk-space-3, 12px); font-size: var(--rk-fs-h2); font-weight: var(--rk-fw-medium); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.rk-offline__text { margin: 0 0 var(--rk-space-5, 24px); font-size: var(--rk-fs-body); line-height: 1.65; color: var(--text-secondary); }
.rk-offline__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rk-space-3, 12px); }
@media (max-width: 640px) { .rk-offline__knoepfe .rk-btn { width: 100%; } }