:root{--bg:#0b0a09;--ink:#f6f1e9;--muted:#b3a899;--gold-1:#ffe9b0;
  --gold-2:#e9b667;--gold-3:#c8923a;--line:rgba(246,241,233,.10);
  --ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,sans-serif;position:relative;
  overflow-x:hidden;display:flex;align-items:center;justify-content:center;padding:1.5rem}

/* --- Atmosphäre: driftende Gold-Aurora (wie Hauptseite) --- */
.aurora{position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  filter:blur(70px) saturate(125%);opacity:.9}
.aurora span{position:absolute;border-radius:50%;display:block;will-change:transform}
.aurora .a1{width:46vw;height:46vw;top:2%;left:8%;
  background:radial-gradient(circle at 30% 30%,rgba(233,182,103,.55),rgba(233,182,103,0) 70%);
  animation:drift1 26s var(--ease) infinite alternate}
.aurora .a2{width:40vw;height:40vw;bottom:0;right:4%;
  background:radial-gradient(circle at 60% 40%,rgba(200,146,58,.40),rgba(200,146,58,0) 70%);
  animation:drift2 32s var(--ease) infinite alternate}
.aurora .a3{width:34vw;height:34vw;top:38%;left:44%;
  background:radial-gradient(circle at 50% 50%,rgba(255,233,176,.22),rgba(255,233,176,0) 70%);
  animation:drift3 24s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-7vw,-5vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(-5vw,7vh,0) scale(.9)}}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(11,10,9,0) 40%,rgba(11,10,9,.55) 100%),
   linear-gradient(180deg,rgba(11,10,9,.35),rgba(11,10,9,0) 30%)}
.spot{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,233,176,.10),rgba(255,233,176,0) 60%)}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.card{position:relative;width:100%;max-width:420px;border:1px solid var(--line);
  border-radius:20px;padding:2.2rem;background:rgba(246,241,233,.025);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;margin-bottom:1.6rem}
.brand .mark{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:17px;line-height:1;
  background:linear-gradient(135deg,rgba(233,182,103,.12),rgba(200,146,58,.04))}
.brand .mark::before{content:"G";
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:1.5rem;letter-spacing:-.02em;margin:.2rem 0 1.4rem}
.accent{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;
  background:linear-gradient(105deg,var(--gold-1),var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
label{display:block;font-size:.85rem;color:var(--muted);margin:.9rem 0 .35rem}
input{width:100%;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font:inherit}
button{margin-top:1.3rem;width:100%;padding:.8rem;border:0;border-radius:10px;
  font:inherit;font-weight:600;cursor:pointer;color:#160f02;
  background:linear-gradient(105deg,var(--gold-1),var(--gold-2))}
button:disabled{opacity:.6;cursor:default}
.msg{margin-top:1rem;min-height:1.2em;font-size:.9rem}
.msg.err{color:#ff9b8a}.msg.ok{color:var(--gold-2)}
.hidden{display:none}
p{color:var(--muted);line-height:1.6}

@media (prefers-reduced-motion: reduce){
  .aurora span{animation:none!important}
  .spot{display:none}
}