:root { --bg:#0a0d12; --card:#111823; --muted:#9aa4b2; --text:#e6eefb; --accent:#6ee7ff; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto}
.page{min-height:100svh;display:grid;place-items:center;padding:24px}
.card{width:min(680px,92vw);background:var(--card);padding:28px;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.35)}
h1{margin:0 0 16px;font-size:22px}
label{display:block;margin:12px 0;color:var(--muted)}
input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #243248;background:#0c1420;color:var(--text)}
.btn{display:inline-block;margin-top:10px;background:#14324b;border:0;padding:12px 16px;border-radius:10px;color:#fff;text-decoration:none}
.alert{padding:10px;border-radius:8px;background:#3e0f14}
.success{padding:10px;border-radius:8px;background:#0f3e25}
.muted{color:var(--muted);font-size:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.devbox{margin-top:12px;padding:10px;border:1px dashed #4b5563;border-radius:10px;background:#0b1220}
@media (max-width:640px){ .grid-2{grid-template-columns:1fr} }

/* Normale Seiten, NICHT Auth */
body.page:not(.auth) .container,
body.page:not(.auth) .wrap{
  width: min(var(--site-width), 100%);
  margin-inline: auto;
}

/* Screenreader-only (für Labels, die ins Feld wandern) */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* === AUTH Inputs – harte Vereinheitlichung, auch bei .input/.form-control etc. === */
body.page.auth input:not([type="checkbox"]):not([type="radio"]),
body.page.auth textarea,
body.page.auth select,
body.page.auth .input,
body.page.auth .form-control,
body.page.auth .field input,
body.page.auth .form-group input,
body.page.auth .input-group > input{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}

/* Fokus-State konsistent */
body.page.auth input:focus,
body.page.auth textarea:focus,
body.page.auth select:focus,
body.page.auth .input:focus,
body.page.auth .form-control:focus{
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--input-border-focus) 30%, transparent) !important;
}

/* Platzhalter-Farbe */
body.page.auth ::placeholder{ color: var(--input-placeholder); opacity: 1; }

/* Disabled-Buttons */
body.page.auth button[disabled],
body.page.auth input[type="submit"][disabled]{
  cursor: not-allowed;
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-fg) !important;
  border-color: transparent !important;
  opacity: 1 !important;
}

/* Passwort-Richtlinie (dauerhaft sichtbar) */
.pw-policy{ margin: 10px 0 0; }
.pw-policy h4{ margin: 0 0 6px; font-size: .95rem; }
.pw-policy ul{ list-style: none; padding: 0; margin: 0; }
.pw-policy li{
  position: relative; padding-left: 1.4rem; margin: .35rem 0; opacity: .75;
}
.pw-policy li::before{ content:"✕"; position:absolute; left:0; top:.1rem; font-weight:700; }
.pw-policy li.ok{ opacity:1; }
.pw-policy li.ok::before{ content:"✓"; }

/* Falls es auf Register noch einen klappbaren alten Policy-Block gibt: ausblenden */
body.page.auth .pw-hint,                       /* falls Klasse vorhanden */
body.page.auth details.pw-hint,
body.page.auth details.password-policy{ display:none !important; }

/* === Abstände zwischen Feldern (Auth-Formulare) === */
body.page.auth .form-group{ margin-bottom: 12px; }
body.page.auth .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.page.auth .form-actions{ margin-top: 14px; }

/* === Passwort-Richtlinie: Rot (✕) bei Fehler, Grün (✓) bei OK === */
/* alten .pw-policy-Block kannst du drinlassen – dieser überschreibt ihn */
.pw-policy{ margin: 12px 0 0; }
.pw-policy h4{ margin: 0 0 6px; font-size: .95rem; }
.pw-policy ul{ list-style: none; padding: 0; margin: 0; }

.pw-policy li{
  position: relative;
  padding-left: 1.4rem;
  margin: .35rem 0;
  color: var(--policy-fail);      /* Standard: NICHT erfüllt -> Rot */
  font-weight: 500;
}
.pw-policy li::before{
  content: "✕";
  position: absolute; left: 0; top: .1rem;
  font-weight: 800;
  color: currentColor;            /* Icon in gleicher Farbe wie Text */
}

/* Erfüllt -> Grün + Häkchen */
.pw-policy li.ok{
  color: var(--policy-ok);
}
.pw-policy li.ok::before{
  content: "✓";
}