/* ============================================================
   KONTO — Zugangs-Schirm (Gate) und Konto-Sheet
   Runde 2, 06.09.2026. Archetyp wie der Rest der App: Luxus-Minimal,
   warmes Off-White gegen Fast-Schwarz, keine Akzentfarbe, Prata nur fuer
   die Wortmarke. Tokens aus css/app.css, immer mit Rueckfallwert — diese
   Datei muss auch dann richtig aussehen, wenn app.css sich weiterdreht.
   ============================================================ */

.gate{
  position:fixed; inset:0;
  /* ueber dem Sheet (z-index 85) und der Kamera (88), unter dem Toast (95) */
  z-index:90;
  background:var(--bg,#F5F2EB); color:var(--ink,#1A1A18);
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t,0px) + 22px) 20px calc(var(--safe-b,0px) + 22px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
/* Ein sehr ruhiger, warmer Lichtschein — der Schirm ist das erste, was man sieht */
.gate::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%, rgba(26,26,24,.055), transparent 62%);
}
[data-theme="dark"] .gate::before{background:radial-gradient(120% 70% at 50% -10%, rgba(245,242,235,.07), transparent 62%)}

.gate__card{
  position:relative; width:100%; max-width:390px; margin:auto;
  animation:gate-in 520ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes gate-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gate__card{animation:none}}

/* ---------- Wortmarke ---------- */
.gate__brand{text-align:center; margin-bottom:26px}
.gate__mark{
  display:block;
  font-family:var(--serif,Georgia,serif); font-weight:400; font-synthesis:none;
  font-size:clamp(1.75rem,1.4rem + 1.6vw,2.25rem); line-height:1;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--ink,#1A1A18);
}
.gate__claim{
  margin:14px 0 0; font-size:var(--fs-small,.8125rem); line-height:1.5;
  color:var(--ink-2,#4A4842); max-width:26ch; margin-inline:auto;
}

/* ---------- Anmelden / Registrieren ---------- */
.gate__tabs{
  display:flex; gap:3px; padding:3px; margin:0 0 4px;
  background:var(--surface-2,#EFEBE1); border:1px solid var(--line,#DCD7C9); border-radius:13px;
}
.gate__tab{
  flex:1; min-height:42px; border:none; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--ink-2,#4A4842);
  font:600 var(--fs-small,.8125rem)/1 var(--sans,system-ui); letter-spacing:.01em;
  transition:background 240ms cubic-bezier(.22,1,.36,1), color 240ms cubic-bezier(.22,1,.36,1);
}
.gate__tab[aria-selected="true"]{background:var(--surface,#FBF9F4); color:var(--ink,#1A1A18); box-shadow:var(--sh-1,0 1px 2px rgba(26,26,24,.06))}
.gate__tab:hover{color:var(--ink,#1A1A18)}

.gate__form{display:block}
.gate__form .lbl{margin-top:16px}
.gate__form .field{width:100%}

/* Kennwortfeld mit Anzeige-Umschalter */
.gate__pw{position:relative}
.gate__pw .field{padding-right:52px}
.gate__eye{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  color:var(--faint,#8F8B80); border-radius:50%;
  transition:color 160ms cubic-bezier(.22,1,.36,1);
}
.gate__eye:hover{color:var(--ink,#1A1A18)}
.gate__eye svg{width:19px;height:19px}

.gate__hint{margin:8px 0 0; font-size:var(--fs-caption,.75rem); line-height:1.45; color:var(--ink-3,#6E6A60)}

/* Fehler und Bestaetigungen — konkret, nie rot schreiend */
.gate__msg{
  margin:14px 0 0; padding:10px 12px; border-radius:12px;
  font-size:var(--fs-caption,.75rem); line-height:1.45; font-weight:600;
  background:var(--surface-2,#EFEBE1); color:var(--ink-2,#4A4842);
  border:1px solid var(--line,#DCD7C9);
}
.gate__msg.is-warn{background:var(--danger-wash,#F2E4E0); color:var(--danger,#8C3A2B); border-color:transparent}
.gate__msg.is-ok{background:var(--ok-wash,#E6EBE5); color:var(--ok,#3F5F4A); border-color:transparent}

.gate__go{margin-top:18px}
.gate__go[disabled]{opacity:.6}
.gate__go.is-busy{position:relative;color:transparent}
.gate__go.is-busy::after{
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:var(--bg,#F5F2EB); animation:gate-spin 700ms linear infinite;
}
@keyframes gate-spin{to{transform:rotate(360deg)}}

.gate__link{
  display:block; width:100%; margin:12px 0 0; padding:8px 0;
  background:none; border:none; cursor:pointer;
  font:600 var(--fs-caption,.75rem)/1.4 var(--sans,system-ui);
  color:var(--ink-3,#6E6A60); text-decoration:underline; text-underline-offset:3px;
}
.gate__link:hover{color:var(--ink,#1A1A18)}

.gate__terms{
  margin:14px 0 0; font-size:var(--fs-caption,.75rem); line-height:1.5;
  color:var(--ink-3,#6E6A60); text-align:center;
}
.gate__terms a{color:var(--ink-2,#4A4842); text-underline-offset:3px}

/* ---------- Trenner und Gast-Weg ---------- */
.gate__or{display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--faint,#8F8B80)}
.gate__or::before,.gate__or::after{content:''; height:1px; flex:1; background:var(--line,#DCD7C9)}
.gate__or span{font:600 var(--fs-eyebrow,.6875rem)/1 var(--sans,system-ui); letter-spacing:.14em; text-transform:uppercase}

.gate__note{margin:10px 0 0; font-size:var(--fs-caption,.75rem); line-height:1.5; color:var(--ink-3,#6E6A60); text-align:center}

.gate__legal{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line,#DCD7C9);
  font-size:var(--fs-caption,.75rem); color:var(--ink-3,#6E6A60);
}
.gate__legal a{color:var(--ink-3,#6E6A60); text-decoration:none; padding:4px 2px}
.gate__legal a:hover{color:var(--ink,#1A1A18); text-decoration:underline; text-underline-offset:3px}

/* ---------- Ab Tablet: der Schirm bekommt eine Karte ---------- */
@media (min-width:720px){
  .gate__card{
    max-width:428px; padding:40px 40px 32px;
    background:var(--surface,#FBF9F4); border:1px solid var(--line,#DCD7C9);
    border-radius:24px; box-shadow:var(--sh-2,0 24px 44px -20px rgba(26,26,24,.28));
  }
  .gate__brand{margin-bottom:30px}
}

/* Der Schirm liegt vor der App; solange er offen ist, wird dahinter nicht gescrollt */
html.gate-on, html.gate-on body{overflow:hidden}