/* auth.css — der Formularlook von register und login.
 *
 * Herausgeloest am 26.08.2026 aus den <style>-Bloecken beider Seiten.
 * Die beiden hatten 32 Selektoren gemeinsam, 30 davon wortgleich. Hier
 * steht registers Fassung; die zwei Stellen, an denen login abweicht,
 * ueberschreibt css/login.css — login benutzt <button> statt <a> und
 * braucht darum background, cursor und font-family ausdruecklich.
 * 
 * club-claim.html bindet diese Datei bewusst NICHT ein. Es teilt nur
 * vier Regeln (.reg-page, .reg-page::before, .reg-wrap, .reg-card) und
 * hat mit einem Formular nichts zu tun.
 */

.reg-page{
  min-height:calc(100vh - var(--nav-h));
  background:var(--navy);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px;
}

.reg-page::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 80% 30%, var(--accent-t05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 80%, var(--accent-t05) 0%, transparent 60%);
  pointer-events:none;
}

.reg-page::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--accent-t05) 1px,transparent 1px),
    linear-gradient(90deg,var(--accent-t05) 1px,transparent 1px);
  background-size:56px 56px;pointer-events:none;
}

.reg-wrap{
  position:relative;z-index:1;
  width:100%;max-width:440px;
  display:flex;flex-direction:column;align-items:center;
}

.reg-type-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--accent-t30);
  background:var(--accent-t10);padding:4px 14px;border-radius:var(--r-full);
  margin-bottom:20px;
}

.reg-type-badge i{font-size:12px;}

.reg-title{
  font-size:clamp(26px,5vw,36px);font-weight:800;color:#fff;
  text-align:center;letter-spacing:-.02em;margin-bottom:8px;line-height:1.15;
}

.reg-subtitle{
  font-size:15px;color:var(--text-muted-dark-bg);text-align:center;
  line-height:1.65;margin-bottom:36px;max-width:360px;
}

.reg-card{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl);
  padding:32px;
}

.reg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}

.reg-label{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted-dark-bg);
}

.reg-input{
  padding:13px 16px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:15px;font-family:var(--font-base);
  outline:none;width:100%;
  transition:border-color .2s,background .2s,box-shadow .2s;
}

.reg-input:focus{
  border-color:var(--accent-t45);
  background:var(--accent-t05);
  box-shadow:0 0 0 3px var(--accent-t10);
}

.reg-input::placeholder{color:var(--text-muted-dark-bg);}

.reg-submit{
  width:100%;padding:14px;border-radius:var(--r-xl);
  background:var(--grad-green);color:var(--navy);
  font-size:15px;font-weight:800;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s,transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px var(--accent-t20);
  margin-top:8px;
}

.reg-submit:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 8px 28px var(--accent-t30);}

.reg-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.reg-divider{
  display:flex;align-items:center;gap:12px;
  margin:20px 0;color:var(--text-muted-dark-bg);font-size:12px;
}

.reg-divider::before,.reg-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);}

.reg-footer{
  margin-top:24px;text-align:center;
  font-size:13px;color:var(--text-muted-dark-bg);
}

.reg-footer a{color:var(--green);text-decoration:none;font-weight:600;}

.reg-footer a:hover{text-decoration:underline;}

.reg-success{display:none;flex-direction:column;align-items:center;text-align:center;}

.reg-success.visible{display:flex;}

.reg-success-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--accent-t10);border:2px solid var(--accent-t30);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:var(--green);margin-bottom:20px;
  animation:pop-in .4s cubic-bezier(.34,1.56,.64,1);
}

.reg-success-title{
  font-size:24px;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:10px;
}

.reg-success-body{
  font-size:15px;color:var(--text-muted-dark-bg);line-height:1.7;max-width:340px;
}

.reg-success-email{
  display:inline-block;margin:16px 0;
  padding:8px 18px;border-radius:var(--r-full);
  background:var(--accent-t10);border:1px solid var(--accent-t20);
  color:var(--green);font-family:var(--font-mono);font-size:14px;font-weight:700;
  word-break:break-all;
}

.reg-back{
  margin-top:28px;
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.6);font-size:13px;font-weight:600;
  text-decoration:none;transition:border-color .2s,color .2s;
}

.reg-back:hover{border-color:rgba(255,255,255,.3);color:#fff;}