/* Anmelde-Seiten (Login, 2FA, Passwort) im AuPair SchnelleHilfe 365-Look wie demo1 */
:root {
  --navy: #554A4D; --navy2: #7C6D73; --amber: #887F63; --blau: #5B4B68;
  --linie: #D5CBAA; --blass: #6C6F74;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #F1F1E4;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 16px;
  padding: 36px 32px 30px; width: 100%; max-width: 380px;
  box-shadow: 0 14px 44px rgba(15,23,42,.09);
}
.logo { display: block; height: 30px; width: auto; margin: 0 auto 10px; }
.untertitel { text-align: center; color: var(--blass); font-size: .9rem; margin: 0 0 24px; }
label { display: block; font-size: .85rem; color: var(--blass); margin: 0 0 14px; }
label input {
  width: 100%; margin-top: 5px; border: 1px solid var(--linie); border-radius: 8px;
  padding: 11px 13px; font: inherit; background: #FBFBF6; color: var(--navy);
}
label input:focus { outline: 2px solid var(--navy); border-color: transparent; }
.check-remember { display: flex; gap: 9px; align-items: center; font-size: .88rem; color: #475569; margin: 2px 0 16px; }
.check-remember input { width: auto; margin: 0; }
button {
  width: 100%; border: 0; border-radius: 999px; background: var(--navy); color: #fff;
  padding: 13px; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
button:hover { background: var(--navy2); }
.alert { background: #F8E8E4; color: #A03A26; padding: 11px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 14px; }
.notice { background: #E7F1E9; color: #25703C; padding: 11px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 14px; }
.links { text-align: center; font-size: .88rem; margin: 20px 0 0; }
.links a { color: var(--blau); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.hinweis { color: var(--blass); font-size: .87rem; text-align: center; margin: 0 0 16px; }
.hint-pw { color: var(--blass); font-size: .82rem; margin: -6px 0 14px; }
.code-eingabe input { text-align: center; font-size: 1.5rem; letter-spacing: .4em; font-variant-numeric: tabular-nums; }

/* --- Passwort sichtbar machen ---------------------------------------------- */
.pw-huelle { position: relative; display: block; }
.pw-huelle input { width: 100%; padding-right: 42px; }
.pw-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 4px 6px; cursor: pointer; color: #8b959b;
  line-height: 0; border-radius: 6px; width: auto; }
.pw-auge:hover { color: #0F172A; background: rgba(0,0,0,.05); }