:root { color-scheme: dark; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
       background: #1c1a17; color: #f5f1ea;
       font: 15px/1.5 -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.karte { width: 100%; max-width: 380px; padding: 24px; box-sizing: border-box; }
h1 { font-size: 20px; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.leise { opacity: .7; font-size: 13px; }
.code { font-size: 22px; letter-spacing: 4px; color: #c8a24a; }
label { display: block; margin-bottom: 10px; }
input { width: 100%; box-sizing: border-box; margin-top: 3px; padding: 9px; border-radius: 8px;
        border: 1px solid #4a443c; background: #26231f; color: inherit; font: inherit; }
.knopf { width: 100%; padding: 11px; border: 0; border-radius: 999px; background: #c8a24a; color: #1c1a17;
         font: inherit; font-weight: 600; cursor: pointer; margin: 4px 0 12px; }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-leise { width: 100%; padding: 8px; border: 0; background: none; color: #f5f1ea; opacity: .6;
               font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.status { padding: 9px; border-radius: 8px; background: #26231f; }
.meldung { padding: 9px; border-radius: 8px; background: #5a2b28; color: #ffd9d4; }