/* ===== Code-Seite: schlichte Karte im Stil der Startseite ===== */
body.zugang {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px 16px;
}
.zg-karte {
  width: 100%; max-width: 380px;
  padding: 30px 26px 24px; border-radius: 18px;
  background: var(--flaeche); border: 1px solid var(--rand); box-shadow: var(--schatten);
}
.zg-karte h1 { margin: 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.zg-karte h1 span { color: var(--akzent); }
.zg-text { margin: 6px 0 22px; color: var(--text-leise); }
.zg-label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
#zg-code {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--rand); background: var(--bg); color: var(--text);
  font: inherit; font-size: 1.1rem; letter-spacing: .06em;
}
#zg-code:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
#zg-knopf {
  width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--akzent); color: #fff; font-weight: 700; font-size: 1rem;
  transition: filter .15s, transform .08s;
}
#zg-knopf:hover { filter: brightness(1.08); }
#zg-knopf:active { transform: scale(.98); }
#zg-knopf:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.zg-fehler { min-height: 1.5em; margin: 10px 0 0; color: #d64545; font-weight: 600; font-size: .92rem; }
.zg-hinweis { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rand); color: var(--text-leise); font-size: .85rem; }

.wackeln { animation: zg-wackeln .35s ease; }
@keyframes zg-wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }