/* Tresor — Bildschirme vor der App (koppeln, warten, Fehler). Sonst gilt app.css. */
.tr { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.tr-karte { width: min(440px, 100%); background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schatten); padding: 26px 22px 22px; }
.tr-karte h1 { font-size: 21px; line-height: 1.25; margin: 10px 0 8px; }
.tr-karte p { margin: 0 0 12px; color: var(--mut); }
.tr-symbol { width: 44px; height: 44px; border-radius: 12px; display: block; }
.tr-feld { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mut); margin: 6px 0 4px; }
.tr-feld input { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--rand); background: var(--karte); color: var(--text); font: inherit; font-size: 16px; }
.tr-code { font: 700 30px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; color: var(--text) !important; background: var(--hover); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 12px; text-align: center; margin: 4px 0 14px !important; }
.tr-klein { font-size: 13px; }
.tr-klein code { font: 12.5px ui-monospace, Menlo, monospace; background: var(--hover); padding: 1px 5px; border-radius: 6px; }
.tr-fehler { color: var(--krit-x) !important; background: var(--krit-t); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.tr-puls { animation: tr-puls 1.6s ease-in-out infinite; }
@keyframes tr-puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tr-puls { animation: none; } }
.tr-karte .kf-knopf { width: 100%; justify-content: center; }