:root{--bg:#0f2a44;--panel:#173a5e;--text:#fff;--akzent:#f5b700;--ok:#2e9e5b}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{max-width:520px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 32px}
header{text-align:center;font-size:18px;font-weight:600;opacity:.9;margin:8px 0 16px}
.karte{background:var(--panel);border-radius:20px;padding:26px 18px;text-align:center;transition:background .4s}
.label{font-size:14px;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.nr{font-size:88px;font-weight:900;line-height:1.05;margin:6px 0 10px;color:var(--akzent);overflow-wrap:anywhere}
.status{font-size:22px;font-weight:700}
.detail{font-size:17px;opacity:.85;margin-top:8px}
.karte.dran{background:var(--akzent);color:#0a1d30;animation:puls 1.2s ease-in-out 6}
.karte.dran .nr{color:#0a1d30}
.karte.dran .status{font-size:30px}
.karte.fertig{opacity:.75}
@keyframes puls{50%{transform:scale(1.03)}}
.box{background:rgba(255,255,255,.08);border-radius:16px;padding:16px;margin-top:16px;font-size:16px;line-height:1.45}
.box.ok{background:rgba(46,158,91,.25);text-align:center}
.box ol{margin:8px 0 6px;padding-left:22px}
.gross{width:100%;font:inherit;font-size:19px;font-weight:700;padding:16px;border:0;border-radius:14px;background:var(--akzent);color:#0a1d30;cursor:pointer}
.gross:disabled{opacity:.6}
.klein{font-size:13px;opacity:.7;margin:10px 0 0}
.hinweis{background:#8a3b00;padding:10px 12px;border-radius:10px;font-size:14px;margin-top:16px}
.fuss{text-align:center;margin-top:24px}
.sym{display:inline-block;border:1px solid currentColor;border-radius:4px;padding:0 4px;font-size:12px}