:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #f5f5f7;
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
body { display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.karte { width: 100%; max-width: 380px; text-align: center; }
.logo { border-radius: 18px; margin-bottom: 12px; }
h1 { font-size: 34px; margin: 0 0 4px; letter-spacing: -0.02em; }
.leise { color: #98989f; font-size: 15px; margin: 0 0 28px; }
.knopf { width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: #ff375f; color: #fff;
  font: 600 17px/1 inherit; font-family: inherit; cursor: pointer; }
.knopf:disabled { opacity: 0.5; }
.knopf.zweit { background: #2c2c2e; margin-top: 12px; }
details { margin-top: 28px; background: #1c1c1e; border-radius: 14px; padding: 4px 16px; text-align: left; }
summary { min-height: 44px; display: flex; align-items: center; color: #98989f; font-size: 15px; cursor: pointer; }
details[open] { padding-bottom: 16px; }
details .leise { margin: 4px 0 12px; }
code { color: #f5f5f7; font-size: 13px; }
input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid #3a3a3c; background: #000; color: #fff;
  font: 600 20px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.15em; text-align: center; text-transform: uppercase; }
.meldung { min-height: 1.4em; margin-top: 20px; font-size: 15px; color: #ff9f0a; }