/* ============================================================
   Login-Rahmen – vollflächiges Markenbild + dunkle Glas-Karte
   Gilt für: login.php, passwort-reset.php, passwort-aendern.php (Erst-Modus)
   Eigenes, festes Layout: NICHT vom Hell/Dunkel-Umschalter betroffen.
   Icons: Phosphor (<span class="i i-…">, assets/icons/icons.css)
   ============================================================ */

/* ── TOKENS (feste Werte nur hier) ─────────────────────────── */
.login-screen {
    --lg-brand:        #a7074f;
    --lg-brand-dark:   #8a0640;
    --lg-neon:         #e0409e;
    --lg-pink:         #f5a3c8;
    --lg-pink-hover:   #ffc1db;
    --lg-white:        #ffffff;

    --lg-card-1:       rgba(40, 7, 28, .62);
    --lg-card-2:       rgba(20, 4, 14, .58);
    --lg-card-1-m:     rgba(40, 7, 28, .74);
    --lg-card-2-m:     rgba(20, 4, 14, .72);
    --lg-card-line:    rgba(255, 255, 255, .16);
    --lg-scrim-1:      rgba(20, 2, 12, .35);
    --lg-scrim-2:      rgba(20, 2, 12, .62);

    --lg-text-sub:     rgba(255, 255, 255, .62);
    --lg-text-muted:   rgba(255, 255, 255, .55);
    --lg-text-faint:   rgba(255, 255, 255, .45);
    --lg-text-foot:    rgba(255, 255, 255, .40);
    --lg-text-notme:   rgba(255, 255, 255, .70);
    --lg-label:        rgba(255, 213, 232, .85);

    --lg-input-bg:     rgba(255, 255, 255, .08);
    --lg-input-bg-f:   rgba(255, 255, 255, .13);
    --lg-input-line:   rgba(255, 255, 255, .20);
    --lg-placeholder:  rgba(255, 255, 255, .42);
    --lg-ring:         0 0 0 3px rgba(224, 64, 158, .22);
    --lg-line:         rgba(255, 255, 255, .14);
    --lg-hover:        rgba(255, 255, 255, .10);

    --lg-err-bg:       rgba(192, 28, 76, .28);
    --lg-err-line:     rgba(255, 138, 173, .55);
    --lg-err-text:     #ffd5e2;
    --lg-err-icon:     #ff9bbb;
    --lg-ok-bg:        rgba(46, 125, 50, .22);
    --lg-ok-line:      rgba(140, 220, 150, .45);
    --lg-ok-text:      #c9f5cd;
    --lg-ok-icon:      #8cdc96;
    --lg-ok-soft:      rgba(140, 220, 150, .75);
    --lg-warn:         #e67e00;

    --lg-btn-grad:     linear-gradient(135deg, #e0409e 0%, #a7074f 60%, #8a0640 100%);
    --lg-btn-line:     rgba(255, 255, 255, .18);
    --lg-btn-glow:     0 8px 24px rgba(224, 64, 158, .45), 0 0 22px rgba(224, 64, 158, .35);
    --lg-btn-glow-h:   0 10px 30px rgba(224, 64, 158, .60), 0 0 32px rgba(224, 64, 158, .50);
    --lg-btn2-bg:      rgba(255, 255, 255, .06);
    --lg-btn2-line:    rgba(245, 163, 200, .40);
    --lg-btn2-hover:   rgba(224, 64, 158, .16);
    --lg-step-cur:     rgba(224, 64, 158, .25);
    --lg-step-line:    rgba(255, 255, 255, .30);
    --lg-tip-bg:       rgba(20, 4, 14, .92);
    --lg-shadow:       0 24px 70px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .08) inset, 0 0 40px rgba(224, 64, 158, .10);
    --lg-font:         'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Rahmen ────────────────────────────────────────────────── */
.login-screen {
    position: fixed;
    inset: 0;
    /* 'contain' => komplettes Bild immer sichtbar (Titel oben, Astronaut unten).
       Ränder werden mit dem Marken-Magenta gefüllt. Bild wird nie verzerrt. */
    background: var(--lg-brand) url('login-bg.png') center top / contain no-repeat;
    display: flex;
    /* Karte in die offene Magenta-Fläche rechts neben dem Astronauten */
    align-items: flex-end;
    justify-content: center;
    /* top | right | bottom | left – großes linkes Padding schiebt die Achse aus dem Astronauten heraus */
    padding: 24px clamp(40px, 10vw, 160px) clamp(48px, 11vh, 130px) clamp(200px, 28%, 560px);
    overflow-y: auto;
    color: var(--lg-white);
    font-family: var(--lg-font);
}
/* Scrim: auf Desktop unsichtbar, auf Mobil dezentes Abdunkeln für Lesbarkeit */
.login-screen::before {
    content: '';
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    transition: background .3s;
}

/* Dunkle Glas-Karte */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 372px;
    background: linear-gradient(160deg, var(--lg-card-1) 0%, var(--lg-card-2) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--lg-card-line);
    border-radius: 22px;
    box-shadow: var(--lg-shadow);
    padding: 38px 34px 32px;
    box-sizing: border-box;
    animation: loginIn .5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes loginIn {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.login-intro {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--lg-white);
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}
.login-sub {
    font-size: 0.82rem;
    color: var(--lg-text-sub);
    margin: 0 0 24px;
}

/* Hinweise (Fehler / Erfolg) */
.login-error, .login-reset-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 0.83rem;
    line-height: 1.45;
    margin-bottom: 18px;
}
.login-error { background: var(--lg-err-bg); border: 1px solid var(--lg-err-line); color: var(--lg-err-text); }
.login-error .i { font-size: 1rem; color: var(--lg-err-icon); }
.login-reset-msg { background: var(--lg-ok-bg); border: 1px solid var(--lg-ok-line); color: var(--lg-ok-text); justify-content: center; text-align: center; margin-bottom: 14px; }
.login-reset-msg .i { font-size: 1rem; color: var(--lg-ok-icon); }

/* Felder */
.login-field { margin-bottom: 16px; }
.login-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lg-label);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.login-input-wrap { position: relative; }
.login-input-wrap > .i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--lg-pink); opacity: .75;
    font-size: 0.95rem;
    pointer-events: none;
}
.login-field input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    border: 1.5px solid var(--lg-input-line);
    border-radius: 11px;
    font-family: var(--lg-font);
    font-size: 0.92rem;
    color: var(--lg-white);
    background: var(--lg-input-bg);
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.login-field input::placeholder { color: var(--lg-placeholder); opacity: 1; }
.login-field input:focus {
    border-color: var(--lg-neon);
    background: var(--lg-input-bg-f);
    box-shadow: var(--lg-ring);
}
/* Autofill: dunkler Look beibehalten */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-white);
    transition: background-color 9999s ease-in-out 0s;
}
.login-hint { margin-top: 5px; font-size: 0.72rem; color: var(--lg-text-muted); }

.login-forgot { text-align: right; margin: -4px 0 18px; }
.login-forgot a {
    color: var(--lg-pink);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.login-forgot a:hover { text-decoration: underline; color: var(--lg-pink-hover); }

/* Primärer Button – gefülltes Magenta mit Neon-Glow (auch als Link) */
.btn-login {
    width: 100%;
    background: var(--lg-btn-grad);
    color: var(--lg-white);
    border: 1px solid var(--lg-btn-line);
    padding: 13px;
    border-radius: 11px;
    font-family: var(--lg-font);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s, box-shadow .2s, filter .2s;
    box-shadow: var(--lg-btn-glow);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login .i { font-size: 1.05rem; }
.btn-login:hover { filter: brightness(1.12); box-shadow: var(--lg-btn-glow-h); color: var(--lg-white); text-decoration: none; }
.btn-login:active { transform: scale(.985); }
.btn-login:focus-visible { outline: none; box-shadow: var(--lg-ring), var(--lg-btn-glow); }
.btn-login:disabled { filter: grayscale(.6) brightness(.8); box-shadow: none; cursor: not-allowed; }
.btn-login:disabled:hover { filter: grayscale(.6) brightness(.8); box-shadow: none; }

/* Sekundär-Button (dezent, dunkel; auch als Link) */
.btn-reset {
    width: 100%;
    background: var(--lg-btn2-bg);
    color: var(--lg-pink);
    border: 1.5px solid var(--lg-btn2-line);
    padding: 11px;
    border-radius: 11px;
    font-family: var(--lg-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: border-color .18s, background .18s, color .18s;
}
.btn-reset:hover { border-color: var(--lg-neon); background: var(--lg-btn2-hover); color: var(--lg-pink-hover); text-decoration: none; }
.btn-reset:focus-visible { outline: none; box-shadow: var(--lg-ring); }

.login-divider {
    margin: 20px 0 16px;
    border: 0;
    border-top: 1px solid var(--lg-line);
}
.login-card-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--lg-text-foot);
}

/* ---------- Responsive: Karte mittig + Abdunkeln ---------- */
@media (max-width: 820px) {
    .login-screen { align-items: center; justify-content: center; padding: 24px; }
    .login-screen::before { background: linear-gradient(180deg, var(--lg-scrim-1) 0%, var(--lg-scrim-2) 100%); }
    .login-card { background: linear-gradient(160deg, var(--lg-card-1-m) 0%, var(--lg-card-2-m) 100%); }
}
@media (max-width: 420px) {
    .login-card { padding: 30px 22px 26px; border-radius: 18px; }
}

/* ============================================================
   Passwort-Seiten im Login-Rahmen
   (passwort-aendern.php Erst-Modus, passwort-reset.php)
   ============================================================ */
.pw-erst-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
}
/* Desktop: Karte unterhalb des Schriftzugs im Hintergrundbild (Bild skaliert mit der Breite) */
@media (min-width: 821px) {
    .login-screen.pw-screen { align-items: flex-start; padding-top: calc(11.5vw + 16px); padding-bottom: 32px; }
}
.pw-erst-wrap .login-card { max-width: none; }

/* Schritt-Anzeige: ① Angemeldet ✓ → ② Passwort festlegen → ③ Los geht's */
.pw-steps {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 20px;
    padding: 0;
    font-size: 0.7rem;
    color: var(--lg-text-faint);
    flex-wrap: wrap;
}
.pw-steps li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pw-steps li + li::before {
    content: '\2192';
    color: var(--lg-step-line);
    margin-right: 1px;
}
.pw-step-num {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--lg-step-line);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700;
}
.pw-step-num .i { font-size: 0.62rem; }
.pw-steps li.is-done { color: var(--lg-ok-text); }
.pw-steps li.is-done .pw-step-num { border-color: var(--lg-ok-soft); }
.pw-steps li.is-current { color: var(--lg-white); font-weight: 700; }
.pw-steps li.is-current .pw-step-num { border-color: var(--lg-neon); background: var(--lg-step-cur); }

/* Auge-Button im Eingabefeld */
.login-field .login-input-wrap input.pw-has-eye { padding-right: 42px; }
.pw-eye {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--lg-pink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.pw-eye:hover, .pw-eye:focus-visible { background: var(--lg-hover); color: var(--lg-pink-hover); outline: none; }

/* Stärke-Anzeige: 4 Stufen */
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter span { height: 4px; border-radius: 2px; background: var(--lg-line); transition: background .2s; }
.pw-meter[data-level="1"] span:nth-child(-n+1) { background: var(--lg-err-icon); }
.pw-meter[data-level="2"] span:nth-child(-n+2) { background: var(--lg-warn); }
.pw-meter[data-level="3"] span:nth-child(-n+3) { background: var(--lg-ok-soft); }
.pw-meter[data-level="4"] span:nth-child(-n+4) { background: var(--lg-ok-icon); }
.pw-meter-text { margin-top: 5px; font-size: 0.72rem; color: var(--lg-text-muted); }

/* Regeln mit Icons: grau ○ → grün ✓ (JS wechselt i-circle ↔ i-check-circle) */
.pw-checks { list-style: none; margin: 2px 0 18px; padding: 0; font-size: 0.8rem; }
.pw-checks li { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--lg-text-muted); }
.pw-checks li > .i { font-size: 0.95rem; }
.pw-checks li.is-ok { color: var(--lg-ok-text); }
.pw-checks li.is-ok > .i { color: var(--lg-ok-icon); }
.pw-checks li.pw-check-server > .i, .pw-checks .pw-tip .i { color: var(--lg-pink); }

/* Tooltip (Hover + Tastatur-Fokus) */
.pw-tip { position: relative; display: inline-flex; align-items: center; cursor: help; outline: none; }
.pw-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%; bottom: calc(100% + 8px); top: auto; right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--lg-tip-bg);
    border: 1px solid var(--lg-card-line);
    color: var(--lg-white);
    font-size: 0.72rem;
    padding: 5px 9px;
    border-radius: 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.pw-tip:hover::after, .pw-tip:focus-visible::after { opacity: 1; }

/* "Nicht {Vorname}? Abmelden" unter der Karte */
.pw-not-me { margin: 14px 0 0; text-align: center; font-size: 0.8rem; color: var(--lg-text-notme); }
.pw-not-me button {
    background: none; border: none; padding: 0;
    color: var(--lg-pink); font: inherit; font-weight: 600; cursor: pointer;
}
.pw-not-me button:hover, .pw-not-me button:focus-visible { text-decoration: underline; color: var(--lg-pink-hover); outline: none; }