:root{
  --gruen:#14532d; --gruen-hell:#16a34a; --rot:#b91c1c;
  --text:#111827; --grau:#4b5563; --rand:#d1d5db; --grund:#f6f7f5;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--grund);color:var(--text);
  font-family:'Trebuchet MS',Trebuchet,Verdana,-apple-system,sans-serif;padding:24px}
.karte{background:#fff;border:1px solid var(--rand);border-radius:14px;
  padding:32px 28px;width:100%;max-width:380px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.marke{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-hell);font-weight:700}
h1{margin:0 0 20px;font-size:22px;line-height:1.25;color:var(--gruen)}
.hinweis{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--grau)}
label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
input{width:100%;padding:11px 12px;font-size:16px;border:1px solid var(--rand);
  border-radius:8px;background:#fff;color:var(--text);font-family:inherit}
input:focus{outline:2px solid var(--gruen-hell);outline-offset:1px;border-color:var(--gruen-hell)}
#code{letter-spacing:.4em;font-size:22px;text-align:center}
button{width:100%;margin-top:16px;padding:12px;font-size:15px;font-weight:700;
  border:0;border-radius:8px;background:var(--gruen);color:#fff;cursor:pointer;font-family:inherit}
button:hover{background:var(--gruen-hell)}
button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
button[disabled]{opacity:.55;cursor:progress}
button.leise{background:transparent;color:var(--grau);font-weight:400;
  text-decoration:underline;margin-top:10px;padding:6px}
button.leise:hover{background:transparent;color:var(--gruen)}
#meldung{margin:18px 0 0;font-size:14px;line-height:1.5;min-height:1.2em}
#meldung.fehler{color:var(--rot)}
#meldung.gut{color:var(--gruen)}
@media (prefers-color-scheme:dark){
  :root{--text:#f3f4f6;--grau:#9ca3af;--rand:#374151;--grund:#111827}
  .karte{background:#1f2937}
  input{background:#111827;color:var(--text)}
  h1{color:#4ade80} .marke{color:#4ade80}
}