/**
 * auth.css — Anmeldeseiten (Login, Registrierung, Passwort vergessen/zurück-
 * setzen, E-Mail bestätigen/bestätigt, AGB annehmen).
 *
 * Vorlage docs/design/GlareCheck-UI-Vorlage.html, Abschnitt 07: „Dieselben
 * Felder und Buttons wie in der App — nur zentriert und mit mehr Luft. Kein
 * zweites Formular-System." Deshalb bildet diese Datei die vorhandenen Klassen
 * der Seiten (auth-card, form-control, btn-primary …) auf die Maße der
 * Primitive ab (u-panel, u-input, u-label, u-btn--primary --lg --block) —
 * das Markup und das JavaScript der Formulare bleiben unverändert.
 *
 * Laden nach variables.css und primitives.css (Token kommen von dort). Bis
 * 13.10.2026 hatte jede Seite einen eigenen :root mit Altwerten (#333/#666)
 * und ~40–300 Zeilen eingebettetes CSS, davon der größte Teil doppelt.
 * Seitenspezifisches (Registrierung: Herkunftsfrage, Passwortregeln; AGB:
 * Dokumentkarten) bleibt in der jeweiligen Seite.
 */

body {
    font-family: var(--font-family-base);
    background: var(--bg-sunken);
    color: var(--text);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* ── Rahmen: zentrierte Karte ─────────────────────────────────────────── */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-10) var(--s-5);
}
.auth-container { width: 100%; max-width: 420px; }
.auth-container--breit { max-width: 540px; }   /* Registrierung: zwei Spalten */

.auth-card {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
    padding: var(--s-8);
}
.auth-card--mitte { text-align: center; }       /* Bestätigungsseiten */

.auth-title {
    font-size: var(--fs-lg);           /* Vorlage 07 */
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--n-900);
    text-align: center;
    margin: 0 0 var(--s-1);
}
.auth-subtitle {
    font-size: var(--fs-sm);           /* Vorlage 07 */
    line-height: 1.5;
    color: var(--text-3);
    text-align: center;
    margin: 0 0 var(--s-6);
}

/* ── Felder = u-label / u-input ───────────────────────────────────────── */
.auth-card .form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: var(--s-1);
}
.auth-card .form-control {
    padding: 7px 11px;                 /* = u-input; „mehr Luft“ (Vorlage 07) gibt der Kartenrahmen */
    border: 1px solid var(--bd);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    line-height: 1.4;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--t), box-shadow var(--t);
}
.auth-card .form-control:hover { border-color: var(--bd-strong); }
.auth-card .form-control:focus {
    border-color: var(--b-500);
    box-shadow: 0 0 0 3px rgba(66, 116, 165, .15);
    outline: none;
}
.auth-card .form-control::placeholder { color: var(--deco); }
.auth-card .form-text,
.auth-card .password-hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-1); }
/* Erklärsatz über dem Formular (Passwort vergessen) */
.auth-card .info-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); margin-bottom: var(--s-6); }
/* Kleiner Hinweis unter den Knöpfen (E-Mail bestätigen) — war #999 */
.auth-card .hint-text { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-4); }

/* Passwort zeigen/verbergen: Symbolknopf im Feld */
.password-toggle {
    position: absolute;
    right: var(--s-2);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
    padding: var(--s-1) var(--s-2);
    line-height: 1;
}
.password-toggle:hover { color: var(--b-500); }
.position-relative > .form-control[type="password"],
.position-relative > .form-control[type="text"] { padding-right: 40px; }

/* „Passwort vergessen?" rechts neben dem Feldnamen */
.forgot-password {
    float: right;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--b-500);
    text-decoration: none;
}
.forgot-password:hover { text-decoration: underline; }

.auth-card .form-check { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.5; }   /* Zeilenhöhe = die des Labels (s. Kästchen unten) */
.auth-card .form-check-label { color: var(--text-2); }
/* Kästchen mittig zur ERSTEN Textzeile, auch bei zweizeiligem Text (UX-Nachtest
   14.10.2026: die Einwilligung saß 2 px zu tief): Zeilenhöhe minus Kästchen, halbiert. */
.auth-card .form-check { padding-left: 26px; }
.auth-card .form-check .form-check-input { width: 16px; height: 16px; margin-left: -26px;
    margin-top: calc((var(--fs-sm) * 1.5 - 16px) / 2); }
.auth-card .form-check-label a { color: var(--b-500); }   /* AGB-/Datenschutz-Links: Hausblau statt Bootstrap-Blau */
.auth-card .form-check-input:checked { background-color: var(--b-500); border-color: var(--b-500); }
.auth-card .form-check-input:focus { box-shadow: 0 0 0 3px rgba(66, 116, 165, .25); border-color: var(--b-500); }

/* ── Knöpfe = u-btn--primary --lg --block ─────────────────────────────── */
.auth-card .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 20px;
    font-size: var(--fs-md);
    font-weight: 500;
    background: var(--b-500);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: background var(--t), box-shadow var(--t);
}
.auth-card .btn-primary:hover:not(:disabled) { background: var(--b-600); }
.auth-card .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(66, 116, 165, .25); }
.auth-card .btn-primary:disabled { opacity: .55; background: var(--b-500); }
.auth-card .btn-outline-secondary {
    width: 100%;
    padding: 9px 20px;
    border-radius: var(--r-md);
    border-color: var(--bd-strong);
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: 500;
}
.auth-card .btn-outline-secondary:hover { background: var(--n-100); color: var(--text); border-color: var(--n-400); }

/* ── Hinweise (Bootstrap-.alert in der Formensprache von u-info) ──────── */
.auth-card .alert,
.acc-main .alert {
    font-size: var(--fs-sm);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-5);
}

/* ── Fußzeile der Karte ───────────────────────────────────────────────── */
.auth-footer {
    text-align: center;
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--bd);
    font-size: var(--fs-sm);
    color: var(--text-3);
}
.auth-footer a { color: var(--b-500); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

/* ── Bestätigungsseiten (E-Mail bestätigt) ────────────────────────────── */
.auth-logo { display: block; height: 32px; margin: 0 auto var(--s-6); }
.auth-erfolg {
    width: 64px; height: 64px; margin: 0 auto var(--s-5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ok-bg); color: var(--ok); font-size: var(--fs-2xl);
}
.auth-mail,
.email-highlight { color: var(--n-900); font-weight: 600; }
.email-icon { font-size: 3rem; color: var(--b-500); margin-bottom: var(--s-4); }   /* E-Mail bestätigen */

@media (max-width: 480px) {
    .auth-main { padding: var(--s-6) var(--s-4); }
    .auth-card { padding: var(--s-6) var(--s-5); }
}