/* Gate + Auswahl — eigene, neutrale Hülle vor den beiden Wal-Seiten */
@font-face{font-family:"Fraunces";font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:600;font-display:swap;src:url("fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:700;font-display:swap;src:url("fonts/fraunces-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url("fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url("fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url("fonts/figtree-latin-700-normal.woff2") format("woff2")}

:root{
  --paper:#F5F4F0; --ink:#211E1A; --muted:#6E685E; --hairline:#E2DDD2;
  --red:#C23A2B; --red-deep:#9E1B1B; --red-soft:#F0DCD7;
  --blue:#1E8BB0; --blue-deep:#15677F; --blue-soft:#D5E8EF;
  --display:"Fraunces",Georgia,serif; --body:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  min-height:100vh;display:flex;flex-direction:column;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
main{flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,6vw,56px)}
img{max-width:100%;height:auto;display:block}

/* kleine Wortmarke mit beiden Farbtupfern */
.lockup{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--display);
  font-weight:600;font-size:15px;color:var(--muted);margin-bottom:26px;letter-spacing:.01em}
.lockup .d{width:8px;height:8px;border-radius:50%;display:inline-block}
.lockup .d.r{background:var(--red)} .lockup .d.b{background:var(--blue)}

/* ---------- Gate ---------- */
.gate{width:100%;max-width:440px;text-align:center}
.gate .eyebrow{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.gate h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(36px,7vw,52px);margin-bottom:12px}
.gate p{color:var(--muted);margin-bottom:26px}
.field{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.field input{
  font-family:var(--body);font-size:17px;padding:13px 18px;width:min(240px,62vw);
  border:1px solid var(--hairline);border-radius:999px;background:#fff;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input::placeholder{color:#A8A299}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,30,26,.10)}
.field button{
  font-family:var(--body);font-weight:600;font-size:16px;color:#fff;background:var(--ink);
  border:0;border-radius:999px;padding:13px 24px;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,opacity .2s ease;
}
.field button:hover{opacity:.9} .field button:active{transform:translateY(1px)}
.error{min-height:1.4em;margin-top:14px;color:var(--red-deep);font-size:14px;font-weight:500;
  opacity:0;transition:opacity .2s ease}
.error.show{opacity:1}
.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}

/* ---------- Auswahl ---------- */
.choose{width:100%;max-width:760px;text-align:center;display:none}
body.unlocked .gate{display:none}
body.unlocked .choose{display:block}
.choose h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,40px);
  letter-spacing:-.02em;margin-bottom:6px}
.choose .hint{color:var(--muted);font-size:15px;margin-bottom:30px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,24px)}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  text-decoration:none;color:inherit;background:#fff;border:1px solid var(--hairline);
  border-radius:20px;padding:22px 20px 26px;display:flex;flex-direction:column;align-items:center;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px)}
.card .ph{width:100%;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  border-radius:14px;margin-bottom:16px}
.card.red .ph{background:var(--red-soft)} .card.blue .ph{background:var(--blue-soft)}
.card img{width:78%}
.card .ey{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.card.red .ey{color:var(--red-deep)} .card.blue .ey{color:var(--blue-deep)}
.card .nm{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em}
.card .go{margin-top:10px;font-size:14px;font-weight:600}
.card.red:hover{border-color:var(--red)} .card.red .go{color:var(--red)}
.card.blue:hover{border-color:var(--blue)} .card.blue .go{color:var(--blue)}

/* sanftes Einblenden der Auswahl */
body.unlocked .choose>*{animation:rise .55s cubic-bezier(.22,.61,.36,1) both}
body.unlocked .choose h2{animation-delay:.02s}
body.unlocked .choose .hint{animation-delay:.10s}
body.unlocked .choose .cards{animation-delay:.18s}

/* Fußzeile */
.foot{flex-shrink:0;text-align:center;padding:18px;font-size:13px;color:var(--muted)}

@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  .shake,body.unlocked .choose>*{animation:none}
  .card:hover{transform:none}
}