/* =====================================================================================================
   static/css/auth.css: Geruest der Anmelde-Seiten (templates/auth_base.html), seit 23.10.2026.
   Praefix auth-. Seiten: Anmelden (index.html), Registrierung (register.html), Passwort vergessen,
   Passwort zuruecksetzen und festlegen (reset_password.html fuer beide Mail-Links), Erfolgsseite.

   Ein dunkles Panel (nv-panel aus app.css) mittig unter dem Logo, darunter die Rechtstexte.
   Bewusste Abweichung vom Massstab: Felder und Hauptknopf 44 px hoch, Schrift im Feld immer 16 px
   (Erstkontakt, meist am Handy aus einer Anzeige; iOS zoomt unter 16 px ins Feld).
   .auth             body: Grundflaeche wie die App (statischer Verlauf), Schrift Inter
   .auth-main        Spalte 460 px (Registrierung mit .auth--breit 540 px)
   .auth-card        das Panel; .auth-head mit h1 und einem Satz
   .auth-form        Felder untereinander (16 px Abstand); .auth-field fuer 44 px / 16 px
   .auth-pw          Passwortfeld mit Auge (.auth-pw__auge, aria-pressed)
   .auth-reg         Registrierung: Feld-Klassen aus dem Formular vom 04.10.2026 (field, field-row,
                     field-hint, field-error, pw-wrap, pw-toggle, check-row, captcha-row, reg-extra);
                     auch "Fast fertig" nach der Anmeldung mit Google (sso_fertig.html)
   .auth-sso         Knoepfe "Mit Google/Discord fortfahren" (.auth-sso-knopf mit .auth-google, .auth-discord)
                     bzw. Hinweis fuer In-App-Browser, darunter die Trennlinie .auth-oder (seit 24.10.2026)
   ===================================================================================================== */

.auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) fixed; /* unslop-ignore: Grundflaeche wie base.css */
    color: var(--nv-fg2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* unslop-ignore: Hausschrift */
    line-height: 1.5;
}

.auth-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 48px 16px 24px;
}

.auth--breit .auth-main { max-width: 540px; }

.auth-logo {
    align-self: center;
    display: inline-flex;
    border-radius: 8px;
}

.auth-logo img { display: block; width: 132px; height: auto; }
.auth-logo:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 4px; }

.auth-card { padding: 28px; }

.auth-head { margin: 0 0 20px; }

.auth-head h1 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nv-fg);
}

.auth-head p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--nv-fg3);
}

.auth-head p strong { color: var(--nv-fg2); font-weight: 600; overflow-wrap: anywhere; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.auth-field.nv-field { min-height: 44px; font-size: 16px; }

.auth-label-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.auth-label-zeile .nv-link { font-size: 0.8rem; }

.auth-pw { position: relative; }
.auth-pw .nv-field { padding-right: 48px; }

.auth-pw__auge {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: var(--nv-fg3);
    font-size: 1.1rem;
    cursor: pointer;
}

.auth-pw__auge:hover { color: #fff; }

.auth-pw__auge:focus-visible {
    outline: 2px solid var(--nv-focus);
    outline-offset: -2px;
}

.auth-submit.nv-btn { min-height: 44px; font-size: 0.95rem; }

.auth-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 0.875rem;
    color: var(--nv-fg3);
}

.auth-links p { margin: 0; }

.auth-note { margin: 0; }
.auth-note a { color: var(--nv-tint); }

.auth-status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.auth-status p { margin: 0; }

.auth-foot {
    padding: 16px 16px 24px;
    font-size: 0.8rem;
    color: var(--nv-fg3);
    text-align: center;
}

.auth-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.auth-foot a { color: var(--nv-fg2); text-decoration: none; border-radius: 4px; }
.auth-foot a:hover { color: #fff; text-decoration: underline; }
.auth-foot a:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }

.auth-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-dreh 0.8s linear infinite;
}

@keyframes auth-dreh { to { transform: rotate(360deg); } }

/* ── Mit Google / Discord fortfahren (includes/sso_knopf.html, seit 24.10.2026) ─────────────────────
   Ghost-Knopf der App (nv-btn aus app.css), Hoehe 44 px wie die Felder hier. Bis 24.10.2026 abends die dunkle
   Google-Flaeche (#131314, Roboto); Marko fand sie zu auffaellig. Farbiges G und Discord-Logo in Blurple bleiben
   (einziger Ort fuer Discord-Blau ausser dem Discord-Knopf im Rahmen). */

.auth-sso { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }

.auth-sso-knopf.nv-btn { gap: 10px; min-height: 44px; font-size: 0.95rem; }
.auth-sso-knopf:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
.auth-google__logo { flex: 0 0 auto; width: 20px; height: 20px; }
.auth-discord .bi { font-size: 20px; line-height: 1; color: #5865f2; } /* unslop-ignore: Markenfarbe Discord */

.auth-sso__hinweis { margin: 0; }

/* Trennlinie "oder" zwischen Knopf und Formular */
.auth-oder {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--nv-fg3);
}

.auth-oder::before,
.auth-oder::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(255, 255, 255, 0.1); }

.auth-form + .auth-oder { margin: 16px 0; }

.auth-hilfe { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--nv-fg2); }

/* ── Registrierung (Markup vom 04.10.2026, IDs und Klassen bleiben fuer Tests und Rybbit) ───────── */

.auth-reg .auth-lead {
    margin: 8px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--nv-fg2);
}

/* Hinweis auf den gewaehlten Plan: Tint-Rahmen (unslop-ignore: Navigator-Lila als einziger Akzent) */
.auth-reg .plan-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--nv-acc-line);
    border-radius: 12px;
    background: rgba(139, 124, 246, 0.1); /* unslop-ignore */
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--nv-fg);
}

.auth-reg .plan-note p { margin: 0 0 6px; font-size: inherit; color: inherit; }
.auth-reg .plan-note a { font-size: 0.85rem; color: var(--nv-tint); }

.auth-reg .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.auth-reg .field + .field,
.auth-reg .field-row + .field,
.auth-reg .field + .field-row,
.auth-reg .reg-extra + .field { margin-top: 16px; }

/* Haekchen-Zeilen enger, damit der Knopf auf dem Handy ohne Scrollen sichtbar bleibt */
.auth-reg .field:has(.check-row) + .field:has(.check-row) { margin-top: 4px; }
.auth-reg .field:has(.check-row) { margin-top: 12px; }

/* Vorname und Nachname nebeneinander, auch auf dem Handy */
.auth-reg .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-reg .field-row + .field-row { margin-top: 16px; }
.auth-reg .field-row > .field { margin-top: 0; }

.auth-reg .field > label:not(.check-row) {
    display: block;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nv-fg2);
}

.auth-reg .field-hint { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--nv-fg3); }

.auth-reg .field-error {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--nv-bad);
}

.auth-reg .field-error:empty { display: none; }

/* Passwort: Eingabe laeuft immer von links, das Auge sitzt deshalb fest rechts */
.auth-reg .pw-wrap { position: relative; }
.auth-reg .pw-wrap .nv-field { padding-right: 48px; }

.auth-reg .pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: var(--nv-fg3);
    font-size: 1.1rem;
    cursor: pointer;
}

.auth-reg .pw-toggle:hover { color: #fff; }
.auth-reg .pw-toggle:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: -2px; }

/* Fuer Menschen unsichtbares Feld gegen automatische Anmeldungen */
.auth-reg .reg-extra {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.auth-reg .captcha-row { display: flex; align-items: center; gap: 8px; }
.auth-reg .captcha-row img { max-width: calc(100% - 52px); height: auto; border-radius: 8px; }

.auth-reg .check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--nv-fg2);
    cursor: pointer;
}

.auth-reg .check-row input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--nv-acc);
    color-scheme: dark;
    cursor: pointer;
}

.auth-reg .check-row input:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
.auth-reg .check-row input[aria-invalid="true"] { outline: 2px solid rgba(248, 113, 113, 0.8); outline-offset: 2px; }

.auth-reg .auth-submit { margin-top: 20px; }

/* Rechtstext-Fenster der Registrierung: dunkles Modal (nv-modal), Inhalt aus /agb?embed=1 */
.auth-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.auth-modal .legal-text { max-width: none; }

/* ── Schmale Bildschirme ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    .auth-main { padding: 16px 12px 16px; gap: 12px; }
    .auth-logo img { width: 96px; }
    .auth-card.nv-panel { padding: 20px 16px; }
    .auth-head { margin-bottom: 16px; }
    .auth-head h1 { font-size: 1.3rem; }
    .auth-reg .auth-lead,
    .auth-reg .plan-note { font-size: 0.875rem; }
    .auth-modal .modal-body { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-spinner { animation: none; border-right-color: #fff; }
}