/* RailRewards Prototyp - Ergänzungen zum Stitch-Design (Layout-Spalte, Sheet, Toast, Demo-Knopf). */
html { background: #e4e9e3; -webkit-text-size-adjust: 100%; }
body { max-width: 480px; margin: 0 auto; background: #f6fbf5; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
header.fixed, nav.fixed { left: 50% !important; right: auto !important; width: 100%; max-width: 480px; transform: translateX(-50%); }
img { max-width: 100%; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Toast */
#rr-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 32px); max-width: 448px;
  transform: translate(-50%, 140px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-radius: 12px;
  background: var(--rr-primary, #5b0218); color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); z-index: 100;
}
#rr-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* Bottom Sheet */
#rr-sheet { position: fixed; inset: 0; z-index: 90; }
#rr-sheet .rr-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); animation: rrfade .2s ease; }
#rr-sheet .rr-panel {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff;
  border-radius: 24px 24px 0 0; padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; box-shadow: 0 -8px 32px rgba(0, 0, 0, .2); animation: rrup .25s ease;
}
@keyframes rrup { from { transform: translate(-50%, 40px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rrfade { from { opacity: 0; } to { opacity: 1; } }

/* Demo-Knopf und Glocken-Punkt */
#rr-fab {
  position: fixed; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: max(12px, calc(50% - 228px)); z-index: 45;
  width: 48px; height: 48px; border-radius: 9999px; background: #ffddb8; color: #2a1700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
#rr-fab:active { transform: scale(.94); }
.rr-dot { position: absolute; top: 9px; right: 11px; width: 9px; height: 9px; border-radius: 9999px; background: #ba1a1a; box-shadow: 0 0 0 2px #f6fbf5; }

/* Nutzer sollen nicht versehentlich Text markieren / zoomen */
button, [role="button"], nav a { user-select: none; -webkit-user-select: none; touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Beispieldaten aus dem Entwurf nie sichtbar machen, bevor das Konto geladen ist */
.rr-pending main, .rr-pending nav, .rr-pending #rr-fab { visibility: hidden; }