/* Seiten für Gäste: Anmeldung und Handy-Karte */

.gast-kopf {
  padding-bottom: var(--space-xl);
}

.gast-titel {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-m) max(var(--space-m), env(safe-area-inset-left)) 0;
}

.gast-titel h1 {
  margin-bottom: var(--space-s);
}

.lead {
  font-size: var(--fs-body);
  max-width: 30rem;
  margin: 0;
}

.gast-raster {
  display: grid;
  gap: var(--space-xl);
  margin-top: calc(-1 * var(--space-xl));
}

.vorschau {
  margin-top: 0;
}

.geburtstag {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-s);
}

.geburtstag legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
}

.gast-fuss {
  padding-top: 0;
}

.fuss-links {
  display: flex;
  gap: var(--space-m);
}

#ohne-wallet {
  margin-top: var(--space-s);
}

.wallet-knoepfe {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-m) 0 0;
}

.wallet-knoepfe .btn {
  min-height: 52px;
}

.wallet-knoepfe svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.bereit {
  border-radius: var(--radius-m);
  background: var(--color-khaki);
  padding: var(--space-m);
}

.bereit h2 {
  margin-bottom: var(--space-2xs);
}

dialog {
  border: 0;
  border-radius: var(--radius-m);
  padding: var(--space-m);
  max-width: min(26rem, calc(100vw - 2 * var(--space-m)));
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

dialog::backdrop {
  background: var(--color-overlay);
}

@media (min-width: 900px) {
  .gast-titel,
  .gast-raster {
    max-width: 64rem;
  }

  .gast-raster {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .gast-raster > .vorschau {
    position: sticky;
    top: var(--space-l);
  }
}