/* Anmeldeseite und Handy-Schlüssel (Fernzugang). Immer dunkel, wie das Cockpit. */
body.zugang {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 0%, #182033, #070b13 60%); color: #e9eef8;
  font-family: var(--schrift); -webkit-font-smoothing: antialiased;
}
.zg-karte {
  width: min(560px, 100%); padding: 26px 26px 22px; border-radius: 18px; box-sizing: border-box;
  background: #0d1320; border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.zg-marke { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; color: #c9d2e3; }
.zg-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 10px var(--akzent); }
.zugang h1 { font-family: var(--schrift-titel); font-size: 24px; margin: 14px 0 6px; }
.zugang h2 { font-family: var(--schrift-titel); font-size: 18px; margin: 18px 0 8px; }
.zg-leise { color: rgba(214, 224, 245, .7); line-height: 1.5; margin: 0 0 18px; font-size: 14px; }
.zg-klein { color: rgba(214, 224, 245, .55); font-size: 12px; margin: 10px 0 0; word-break: break-all; }
.zg-klein a { color: var(--akzent); }

.zg-anmelde-reihe { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.zg-qr { width: 230px; height: 230px; border-radius: 12px; overflow: hidden; background: #fff; flex: none; transition: opacity .3s, filter .3s; }
.zg-qr svg { display: block; width: 100%; height: 100%; }
.zg-qr.abgelaufen { opacity: .2; filter: blur(3px); }
.zg-zahl-box { text-align: center; min-width: 160px; }
.zg-zahl-box small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.zg-zahl { font-family: var(--schrift-mono); font-size: 72px; font-weight: 600; line-height: 1.1; letter-spacing: .06em; }
.zg-rest { font-size: 12px; color: rgba(214, 224, 245, .55); }
.zg-status { margin: 18px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: rgba(255, 255, 255, .04); }
.zg-status.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: #b9f0c8; }
.zg-status.fehler { background: color-mix(in srgb, var(--fehler) 18%, transparent); color: #ffc4c0; }

.zg-knopf {
  display: block; width: 100%; margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 16px var(--schrift); background: var(--akzent); color: #10141c;
}
.zg-knopf:disabled { opacity: .55; cursor: progress; }
.zg-zweit { background: rgba(255, 255, 255, .07); color: #e9eef8; border: 1px solid rgba(255, 255, 255, .12); }
.zg-knopf.gefahr { background: color-mix(in srgb, var(--fehler) 22%, transparent); color: #ffd0cc; border: 1px solid color-mix(in srgb, var(--fehler) 50%, transparent); }

/* Handy-Schlüssel */
.zg-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 4px; }
.zg-zahlen button {
  padding: 18px 0; border-radius: 14px; cursor: pointer; font: 600 34px var(--schrift-mono); color: #e9eef8;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
}
.zg-zahlen button[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 18%, transparent); }
.zg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.zg-wahl button {
  padding: 11px 8px; border-radius: 10px; cursor: pointer; font: 600 13.5px var(--schrift); color: #c9d2e3;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
}
.zg-wahl button[aria-pressed="true"] { color: #e9eef8; border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.zg-feld { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 12px; border-radius: 10px; font: 15px var(--schrift);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #e9eef8; }
.zg-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; margin: 8px 0 14px; }
.zg-info dt { color: rgba(214, 224, 245, .6); }
.zg-info dd { margin: 0; }
.zg-liste { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.zg-liste li { padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 14px; }
.zg-liste small { grid-column: 1; color: rgba(214, 224, 245, .6); font-size: 12px; }
.zg-liste button { grid-row: 1 / span 2; grid-column: 2; padding: 8px 10px; border-radius: 9px; cursor: pointer; font: 600 12.5px var(--schrift);
  color: #ffd0cc; background: transparent; border: 1px solid color-mix(in srgb, var(--fehler) 45%, transparent); }