/* Gästecode-Seite: schlicht, passend zur Einladung */
:root {
  --ivory: #F7F3EB;
  --paper: #FCFAF5;
  --text: #302B27;
  --muted: #6B625A;
  --gold: #A88A58;
  --danger: #8E2F25;
  --f-script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-text: 'EB Garamond', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--ivory); color: var(--text);
  font: 1.125rem/1.6 var(--f-text);
}
.gate {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  gap: 1.5rem;
}
.langs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1rem .15rem; color: var(--muted); }
.langs button {
  font: 500 1rem/1 var(--f-display); letter-spacing: .03em; color: var(--muted);
  background: none; border: 0; border-bottom: 1px solid transparent;
  min-height: 48px; min-width: 48px; padding: 0 .45rem; cursor: pointer;
}
.langs button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--gold); }
.card { width: 100%; max-width: 26rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mono {
  margin: 0; font: 500 2.6rem/1 var(--f-display); letter-spacing: .02em;
  display: inline-flex; align-items: baseline;
}
.mono i { font-family: var(--f-script); font-style: normal; font-size: .62em; margin: 0 .08em; transform: translateY(-.08em); }
.rule { display: block; width: 3.5rem; height: 1px; background: var(--gold); margin: 1.4rem auto; }
.names { margin: 0; font: 400 clamp(2.6rem, 13vw, 3.6rem)/1.15 var(--f-script); }
.date { margin: .6rem 0 0; font: 500 1.15rem/1 var(--f-display); letter-spacing: .28em; padding-left: .28em; }
form { width: 100%; }
.intro { margin: 0 0 1.4rem; font-size: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.field span { font: 600 .85rem/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#code {
  width: 100%; min-height: 56px; padding: .6rem 1rem;
  font: 500 1.5rem/1.2 var(--f-display); letter-spacing: .22em; text-align: center; text-transform: uppercase;
  color: var(--text); background: var(--paper);
  border: 1px solid #D9CDB8; border-radius: 10px;
}
#code[aria-invalid="true"] { border-color: var(--danger); }
.msg { min-height: 1.6em; margin: .6rem 0 .4rem; color: var(--danger); font-size: 1rem; }
.msg.info { color: var(--muted); }
.btn {
  width: 100%; min-height: 56px; padding: .7rem 1.2rem;
  font: 600 1.05rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory); background: var(--text); border: 1px solid var(--text); border-radius: 999px; cursor: pointer;
}
.btn:hover { background: #463F39; }
.btn[disabled] { opacity: .6; cursor: progress; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .card { animation: fade .6s ease-out both; } }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }