/* Gemeinsames Layout für Anmelden, Passwort vergessen und Passwort setzen.
   Farben und Formen entsprechen der App (index.php). */
:root{
  --ink:#101828; --ink-soft:#5B6472; --paper:#F5F8FC; --paper-deep:#EAF0F7; --card:#FFFFFF; --line:#E3E8F0;
  --brass:#3E7CC4; --brass-dark:#2B4E8C; --brand-light:#7FCBEA; --brand-deep:#2B4E8C;
  --debit:#D6483F; --debit-bg:#FCEAE8; --credit:#1E9E6C; --credit-bg:#E5F7EE;
  --ring:0 0 0 3px rgba(62,124,196,.18);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.4;
  position:relative; overflow-x:hidden;
  background:
    radial-gradient(700px 500px at 10% 0%, rgba(127,203,234,.55), transparent 60%),
    radial-gradient(600px 480px at 100% 100%, rgba(127,203,234,.25), transparent 60%),
    linear-gradient(150deg, #4A8BD0 0%, #2B4E8C 50%, #15223B 100%);
  background-attachment:fixed;
}
/* Deko-Ringe im Hintergrund */
body::before, body::after{
  content:""; position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  border:70px solid rgba(255,255,255,.06);
}
body::before{ width:520px; height:520px; right:-160px; bottom:-180px; }
body::after{ width:340px; height:340px; left:-150px; top:-120px; border-width:50px; border-color:rgba(255,255,255,.07); }
*:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

.auth{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.auth-card{
  width:100%; max-width:400px; padding:36px 32px 32px;
  background:var(--card); border-radius:22px;
  box-shadow:0 2px 6px rgba(13,22,39,.12), 0 40px 80px -30px rgba(13,22,39,.65);
  animation:cardIn .3s ease;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .auth-card{ animation:none; } }

.card-brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.card-brand img{ width:34px; height:auto; }
.card-brand strong{ font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.01em; }

h1{ font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0 0 24px; }
.lead{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:-16px 0 24px; }

.field{ margin-bottom:16px; }
.label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.field > label{ margin-bottom:7px; }
.label-row a{ font-size:13px; font-weight:600; color:var(--brass-dark); text-decoration:none; }
.label-row a:hover{ text-decoration:underline; }
input[type="text"], input[type="password"], input[type="email"]{
  width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
  color:var(--ink); font-family:inherit; font-size:16px; /* < 16px löst in iOS Safari Auto-Zoom aus */
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:hover{ border-color:#CBD5E3; }
input:focus{ outline:none; border-color:var(--brass); box-shadow:var(--ring); }

/* Passwort anzeigen/verbergen */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:92px; }
.pw-toggle{
  position:absolute; right:5px; top:50%; transform:translateY(-50%); height:36px; padding:0 12px;
  border:none; border-radius:9px; background:transparent; color:var(--ink-soft);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.pw-toggle:hover{ background:var(--paper-deep); color:var(--ink); }

.btn-primary{
  width:100%; height:46px; margin-top:8px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--brass), var(--brand-deep));
  box-shadow:0 8px 18px -12px rgba(43,78,140,.8);
  transition:filter .15s ease, transform .1s ease;
}
.btn-primary:hover{ filter:brightness(1.07); }
.btn-primary:active{ transform:translateY(1px); }

.alert{ font-size:13.5px; line-height:1.55; padding:11px 14px; border-radius:12px; margin-bottom:20px; }
.alert.error{ background:var(--debit-bg); color:var(--debit); }
.alert.notice{ background:var(--credit-bg); color:var(--credit); }

.foot-link{ text-align:center; margin-top:20px; font-size:14px; }
.foot-link a{ color:var(--brass-dark); font-weight:600; text-decoration:none; }
.foot-link a:hover{ text-decoration:underline; }

@media (max-width:480px){
  .auth{ align-items:flex-start; padding-top:10vh; }
  .auth-card{ padding:28px 22px 24px; }
}