/* =====================================================================
   LADE-/FEHLERZUSTAND (siehe appStatus.js) -- nutzt nur die Design-Tokens.
   Solange body.is-loading gesetzt ist, ist alles ausser #app-status
   ausgeblendet (Seiteninhalt erscheint erst, wenn die Restaurantdaten da sind).
   ===================================================================== */
body.is-loading > :not(#app-status):not(script):not(link) { display: none !important; }

.app-status {
  min-height: 60vh;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: var(--sp-8, 40px) var(--sp-6, 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  text-align: center;
  color: var(--c-ink);
  font-family: var(--font-body);
}
.app-status[hidden] { display: none; }
.app-status-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.app-status-text { font-size: 14px; line-height: 1.5; color: var(--c-ink-soft); max-width: 320px; }
.app-status-retry {
  margin-top: var(--sp-2, 8px);
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent, #fff);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}