/**
 * @file        section/passwort-zuruecksetzen/passwort-zuruecksetzen.css
 * @location    /section/passwort-zuruecksetzen/passwort-zuruecksetzen.css
 * @description Password reset form styles. Prefix: pr__
 *
 *              COLORS (COLOR-GUIDE.md — all ≥ 7:1):
 *                Section BG:  C4 #f5f6f8
 *                Card BG:     C2 #ffffff
 *                Heading:     C1/C2 12.61:1 ✓
 *                Intro text:  C5/C2 14.02:1 ✓
 *                Label:       C5/C2 14.02:1 ✓
 *                Input BG:    C4 — C5/C4 12.96:1 ✓
 *                Hint:        C6/C2  8.89:1 ✓
 *                Button:      C2/C3  8.49:1 ✓
 *                Error alert: C8/c8lt 7.51:1 ✓
 *                Success:     C7/c7lt  7.1:1 ✓
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-19  Initial version.
 */

/* ── Section ──────────────────────────────────────────────────────── */
.pr__section {
    background: var(--color-page);
    padding:    var(--space-12) 0;
    flex:       1;
}

/* ── Centering wrapper ────────────────────────────────────────────── */
.pr__wrap {
    display:         flex;
    justify-content: center;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.pr__card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow:    var(--shadow-md);
    width:         100%;
    max-width:     460px;
    padding:       var(--space-8) var(--space-8);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-5);
}

/* ── Heading ──────────────────────────────────────────────────────── */
/* C1/C2 12.61:1 ✓ */
.pr__heading {
    font-size:      var(--text-2xl);
    font-weight:    var(--weight-black);
    color:          var(--color-navy);
    letter-spacing: var(--tracking-tight);
    margin:         0;
    line-height:    var(--leading-tight);
}

/* C5/C2 14.02:1 ✓ */
.pr__intro {
    font-size:   var(--text-sm);
    color:       var(--color-ink);
    line-height: var(--leading-relaxed);
    margin:      0;
}

/* ── Form ─────────────────────────────────────────────────────────── */
.pr__form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.pr__group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

/* C5/C2 14.02:1 ✓ */
.pr__label {
    font-size:   var(--text-sm);
    font-weight: var(--weight-bold);
    color:       var(--color-ink);
}
.pr__req { color: var(--color-error); margin-left: 2px; }

/* C5/C4 12.96:1 ✓ */
.pr__input {
    width:         100%;
    padding:       var(--space-3) var(--space-4);
    background:    var(--color-page);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family:   var(--font-base);
    font-size:     var(--text-base);
    color:         var(--color-ink);
    outline:       none;
    transition:    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
    box-sizing:    border-box;
}
.pr__input:focus {
    border-color: var(--color-blue);
    box-shadow:   0 0 0 3px rgba(24,72,160,.15);
}
.pr__input--error {
    border-color: var(--color-error);
    background:   var(--color-error-lt, #fdf0ee);
}

/* C6/C2 8.89:1 ✓ */
.pr__hint {
    font-size:   var(--text-xs);
    color:       var(--color-ink-soft);
    margin:      0;
}

/* ── Alerts ───────────────────────────────────────────────────────── */
.pr__alert {
    display:       flex;
    gap:           var(--space-3);
    align-items:   flex-start;
    border-radius: var(--radius-sm);
    padding:       var(--space-4);
    font-size:     var(--text-sm);
    line-height:   var(--leading-relaxed);
}
/* C8/c8lt 7.51:1 ✓ */
.pr__alert--error {
    background: var(--color-error-lt, #fdf0ee);
    border:     1px solid var(--color-error);
    color:      var(--color-error);
}
/* C7/c7lt 7.1:1 ✓ */
.pr__alert--success {
    background: var(--color-success-lt, #ecf7f0);
    border:     1px solid var(--color-success);
    color:      var(--color-success);
}
.pr__alert .bi { flex-shrink: 0; margin-top: .1rem; font-size: 1rem; }
.pr__error-list {
    margin:       0;
    padding-left: var(--space-4);
}

/* ── Button — C2/C3 8.49:1 ✓ ─────────────────────────────────────── */
.pr__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         var(--space-3) var(--space-4);
    background:      var(--color-blue);
    color:           var(--color-white);
    border:          none;
    border-radius:   var(--radius-sm);
    font-family:     var(--font-base);
    font-size:       var(--text-base);
    font-weight:     var(--weight-black);
    cursor:          pointer;
    transition:      filter var(--transition-fast);
}
.pr__btn:hover         { filter: brightness(.9); }
.pr__btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.pr__btn:disabled      { background: var(--color-ink-soft); cursor: not-allowed; filter: none; }

/* ── Back link — C3/C4 7.85:1 ✓ ─────────────────────────────────── */
.pr__back {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    color:           var(--color-blue);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-bold);
    text-decoration: none;
}
.pr__back:hover         { color: var(--color-navy); }
.pr__back:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: 2px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .pr__section { padding: var(--space-8) 0; }
    .pr__card    { padding: var(--space-6) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
    .pr__input, .pr__btn, .pr__back { transition: none; }
}