:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --line:#D9DFE8; --ink:#16202E; --muted:#5B6778;
  --accent:#1E5AA0; --accent-soft:#E3ECF7; --card-a:#1E5AA0; --card-b:#16406F;
  --good:#1C7A4A; --good-soft:#E2F3EA; --bad:#B3261E; --bad-soft:#FBE7E5;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F141C; --surface:#18202B; --line:#2A3443; --ink:#E7ECF3; --muted:#9AA6B6;
  --accent:#7FB0EA; --accent-soft:#1C2D45; --card-a:#24548D; --card-b:#132F52;
  --good:#6FD39D; --good-soft:#163024; --bad:#FF8A80; --bad-soft:#3A1A18; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--font);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  -webkit-text-size-adjust:100%}
main{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
main.wide{max-width:900px}
h1{font-size:24px;margin:0}
h2{font-size:18px;margin:0}
p{margin:0}
.muted{color:var(--muted);font-size:14px}
button,.btn{font:600 17px/1 var(--font);border-radius:14px;padding:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;width:100%;text-align:center;text-decoration:none;display:block}
button.primary{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
@media (prefers-color-scheme: dark){button.primary{color:#0F141C}}
button.link{background:none;border:0;color:var(--muted);font-size:14px;padding:8px;text-decoration:underline}
button:disabled{opacity:.5}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input{font:600 22px var(--mono);letter-spacing:.15em;text-align:center;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
/* Karte */
.pass{border-radius:20px;padding:20px;color:#FFFFFF;background:linear-gradient(160deg,var(--card-a),var(--card-b));display:flex;flex-direction:column;gap:16px}
.pass-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pass-shop{font-size:22px;font-weight:800}
.pass small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.stamp{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.45);display:grid;place-items:center;font-weight:800;font-size:14px}
.stamp.on{border:2px solid #FFFFFF;background:rgba(255,255,255,.2)}
.stamp.on svg{width:60%;height:60%}
.pass-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.pass-row .right{text-align:right}
.count{font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ready{background:#FFFFFF;color:var(--card-b);border-radius:12px;padding:10px;font-weight:700;text-align:center}
.pass-id{font:12px var(--mono);opacity:.75}
.toast{border-radius:14px;padding:14px;font-weight:600}
.toast.ok{background:var(--good-soft);color:var(--good)}
.toast.no{background:var(--bad-soft);color:var(--bad)}
.code{font:800 40px var(--mono);letter-spacing:.2em;text-align:center}
.center{text-align:center}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
footer{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);font-size:14px}
/* Scanner */
.scanner{position:fixed;inset:0;background:#000000;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.scanner video{width:100%;max-width:460px;border-radius:16px}
.scanner p{color:#FFFFFF}
.scanner button{max-width:460px}
.confirm{display:flex;gap:8px}
/* Kasse */
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pad button{font-size:34px;font-weight:800;padding:26px 0;background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.qrwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.qrwrap img{width:min(320px,80vw);height:auto;image-rendering:pixelated;background:#FFFFFF;border-radius:12px;padding:8px}
.big{font-size:22px;font-weight:800}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border:1px solid var(--line);border-radius:12px;padding:10px}
.stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;gap:6px;font-size:14px;max-height:340px;overflow:auto}
.list > div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.list span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.topbar button{width:auto;padding:10px 14px;font-size:14px}
.timer{font:600 16px var(--mono);font-variant-numeric:tabular-nums}
.timer.low{color:var(--bad)}
.doc{line-height:1.6}
.doc h2{margin-top:12px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack[hidden]{display:none}
[hidden]{display:none!important}