/**
 * @file        section/anmeldung/anmeldung.css
 * @location    /section/anmeldung/anmeldung.css
 * @description Anmelden-Sektion — Login-Karte, Formular, Konflikt-Modal.
 *              Prefix: lgn__ (alle Selektoren).
 *
 *              FARBKONTRASTE (COLOR-GUIDE.md — alle ≥ 7:1, Ziel ≥ 5:1 min):
 *                Sektion BG:         --color-surface  #eef2f7
 *                Karten-Header BG:   C1 #07003D  (Navy)
 *                Eyebrow:            C10 #ddeaf5 / C1  10.3:1 ✓
 *                Karten-Titel:       C2  #ffffff  / C1  12.6:1 ✓
 *                Karten-Body BG:     C2  #ffffff
 *                Label:              C5  #1e2d3d  / C2  14.0:1 ✓
 *                Pflichtfeld *:      C8  #962012  / C2   8.4:1 ✓
 *                Input-Text:         C5  #1e2d3d  / C4  13.0:1 ✓
 *                Placeholder:        C6  #3a4c5a  / C4   8.2:1 ✓
 *                Hint / Link:        C3  #07003D  / C2   7.4:1 ✓  (min 5:1 ✓)
 *                Fehlertext:         C8  #962012  / C2   8.4:1 ✓
 *                Fehlertext auf BG:  C8  #962012  / C8L  7.5:1 ✓
 *                Submit-Btn BG:      C3  #07003D
 *                Submit-Btn Text:    C2  #ffffff  / C3   8.5:1 ✓
 *                Footer-Text:        C6  #3a4c5a  / C4   8.2:1 ✓
 *                Footer-Link:        C3  #07003D  / C4   7.9:1 ✓
 *                Checkbox-Label:     C5  #1e2d3d  / C2  14.0:1 ✓
 *                Conflict-Header BG: C9L #fef6e8
 *                Conflict-Icon:      C9  #724000  / C9L  8.0:1 ✓
 *                Conflict-Title:     C5  #1e2d3d  / C9L 13.1:1 ✓
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-30  Erstversion. Analogisch zu archive.css. (Datei: anmeldung.css)
 *                      WCAG 2.2 AA. Bootstrap 5 kompatibel.
 */

/* ═══════════════════════════════════════════════════════════════════
   SEKTION
   ═══════════════════════════════════════════════════════════════════ */
.lgn__section {
    background:  var(--color-surface, #eef2f7);
    padding:     var(--pad-section, 4rem 0);
    min-height:  100vh;
    display:     flex;
    align-items: center;
}

.lgn__inner {
    width:     100%;
    max-width: var(--max-content, 1200px);
    margin:    0 auto;
    padding:   0 var(--page-padding-x, 1rem);
    display:   flex;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN-READER ONLY
   ═══════════════════════════════════════════════════════════════════ */
.lgn__sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN-KARTE
   ═══════════════════════════════════════════════════════════════════ */
.lgn__card {
    width:            100%;
    max-width:        440px;
    background:       var(--c2, #ffffff);
    border-radius:    6px;
    overflow:         hidden;
    box-shadow:       0 4px 24px rgba(0,0,0,.12);
}

/* ── Karten-Header (Navy) ─────────────────────────────────────────── */
.lgn__card-header {
    background: var(--c1, #07003D);
    padding:    1.5rem 1.75rem;
    display:    flex;
    align-items: center;
    gap:        1rem;
}

/* C2/#fff auf C1/#07003D — 12.6:1 ✓ */
.lgn__card-logo {
    font-size: 2rem;
    color:     var(--c2, #ffffff);
    flex-shrink: 0;
    line-height: 1;
}

.lgn__card-brand {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
}

/* C10/#ddeaf5 auf C1/#07003D — 10.3:1 ✓ */
.lgn__card-eyebrow {
    font-size:      .7rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--c10, #ddeaf5);
    margin:         0;
    line-height:    1;
}

/* C2/#fff auf C1/#07003D — 12.6:1 ✓ */
.lgn__card-title {
    font-size:   1.5rem;
    font-weight: 800;
    color:       var(--c2, #ffffff);
    margin:      0;
    line-height: 1.2;
}

/* ── Karten-Body ──────────────────────────────────────────────────── */
.lgn__card-body {
    padding: 1.75rem 1.75rem 1.25rem;
}

/* ── Karten-Footer ────────────────────────────────────────────────── */
.lgn__card-footer {
    background: var(--c4, #f5f6f8);
    padding:    .875rem 1.75rem;
    text-align: center;
}

/* C6/#3a4c5a auf C4/#f5f6f8 — 8.2:1 ✓ */
.lgn__card-footer-text {
    font-size: .875rem;
    color:     var(--c6, #3a4c5a);
    margin:    0;
}

/* C3/#07003D auf C4/#f5f6f8 — 7.9:1 ✓ */
.lgn__card-footer-link {
    color:           var(--c3, #07003D);
    font-weight:     600;
    text-decoration: none;
    transition:      text-decoration .15s;
}
.lgn__card-footer-link:hover,
.lgn__card-footer-link:focus {
    text-decoration: underline;
    outline:         none;
}
.lgn__card-footer-link:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERT
   ═══════════════════════════════════════════════════════════════════ */
/* C8/#962012 auf C8L/#fdf0ee — 7.5:1 ✓  |  C5/#1e2d3d auf C8L — 12.6:1 ✓ */
.lgn__alert {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    border-radius: 4px;
    padding:       .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size:     .875rem;
    line-height:   1.4;
}
.lgn__alert[hidden] { display: none; }

.lgn__alert--error {
    background:   var(--c8-lt, #fdf0ee);
    border-left:  3px solid var(--c8, #962012);
    color:        var(--c8, #962012);
}
.lgn__alert-icon {
    font-size:  1rem;
    flex-shrink: 0;
    margin-top: .05rem;
}
.lgn__alert-msg {
    flex:  1;
    color: var(--c5, #1e2d3d);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULARFELDER
   ═══════════════════════════════════════════════════════════════════ */
.lgn__form {
    display:        flex;
    flex-direction: column;
    gap:            1.1rem;
}

.lgn__field {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
}

/* C5/#1e2d3d auf C2/#fff — 14.0:1 ✓ */
.lgn__label {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--c5, #1e2d3d);
    line-height: 1.3;
}

/* C8/#962012 auf C2/#fff — 8.4:1 ✓ */
.lgn__required {
    color:       var(--c8, #962012);
    margin-left: .2rem;
}

/* ── Input ────────────────────────────────────────────────────────── */
.lgn__input-wrap {
    position: relative;
}

.lgn__input-icon {
    position:  absolute;
    left:      .875rem;
    top:       50%;
    transform: translateY(-50%);
    font-size: 1rem;
    /* C6/#3a4c5a auf C4/#f5f6f8 — 8.2:1 ✓ */
    color:     var(--c6, #3a4c5a);
    pointer-events: none;
    line-height: 1;
}

/* C5/#1e2d3d auf C4/#f5f6f8 — 13.0:1 ✓  |  Placeholder C6/C4 — 8.2:1 ✓ */
.lgn__input {
    width:         100%;
    background:    var(--c4, #f5f6f8);
    border:        1.5px solid var(--border, #d1dce8);
    border-radius: 4px;
    padding:       .625rem .875rem .625rem 2.625rem;
    font-size:     .9375rem;
    color:         var(--c5, #1e2d3d);
    line-height:   1.4;
    transition:    border-color .15s, box-shadow .15s;
    box-sizing:    border-box;
}
.lgn__input::placeholder {
    color: var(--c6, #3a4c5a);
}
.lgn__input:focus {
    outline:      none;
    border-color: var(--c3, #07003D);
    box-shadow:   0 0 0 3px rgba(24,72,160,.18);
}
.lgn__input[aria-invalid="true"] {
    background:   var(--c8-lt, #fdf0ee);
    border-color: var(--c8, #962012);
}

/* Passwort: Platz für Toggle-Button rechts */
.lgn__input--pw {
    padding-right: 3rem;
}

/* ── Passwort-Toggle ─────────────────────────────────────────────── */
.lgn__pw-toggle {
    position:   absolute;
    right:      .625rem;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    padding:    .25rem .375rem;
    cursor:     pointer;
    /* C6/#3a4c5a auf C4/#f5f6f8 — 8.2:1 ✓ */
    color:      var(--c6, #3a4c5a);
    font-size:  1.05rem;
    line-height: 1;
    border-radius: 3px;
    transition: color .15s;
}
.lgn__pw-toggle:hover {
    /* C1/#07003D auf C4/#f5f6f8 — 11.7:1 ✓ */
    color: var(--c1, #07003D);
}
.lgn__pw-toggle:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 1px;
}
.lgn__pw-toggle[aria-pressed="true"] {
    color: var(--c3, #07003D);
}

/* ── Feldfehler ──────────────────────────────────────────────────── */
/* C8/#962012 auf C2/#fff — 8.4:1 ✓ */
.lgn__field-error {
    font-size:  .8rem;
    color:      var(--c8, #962012);
    margin:     0;
    line-height: 1.3;
}
.lgn__field-error[hidden] { display: none; }

/* ── Optionen-Zeile ──────────────────────────────────────────────── */
.lgn__options {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .5rem;
    margin-top:      -.25rem;
}

.lgn__checkbox-wrap {
    display:     flex;
    align-items: center;
    gap:         .45rem;
}

.lgn__checkbox {
    width:         1rem;
    height:        1rem;
    accent-color:  var(--c3, #07003D);
    cursor:        pointer;
    flex-shrink:   0;
}
.lgn__checkbox:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
}

/* C5/#1e2d3d auf C2/#fff — 14.0:1 ✓ */
.lgn__checkbox-label {
    font-size: .875rem;
    color:     var(--c5, #1e2d3d);
    cursor:    pointer;
    line-height: 1.3;
}

/* C3/#07003D auf C2/#fff — min 5:1 ✓ (7.4:1) */
.lgn__forgot-link {
    font-size:       .875rem;
    color:           var(--c3, #07003D);
    text-decoration: none;
    font-weight:     500;
    white-space:     nowrap;
    transition:      text-decoration .15s;
}
.lgn__forgot-link:hover,
.lgn__forgot-link:focus {
    text-decoration: underline;
    outline:         none;
}
.lgn__forgot-link:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBMIT-BUTTON
   ═══════════════════════════════════════════════════════════════════ */
/* C2/#fff auf C3/#07003D — 8.5:1 ✓ */
.lgn__submit-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    width:           100%;
    background:      var(--c3, #07003D);
    color:           var(--c2, #ffffff);
    border:          none;
    border-radius:   4px;
    padding:         .75rem 1.25rem;
    font-size:       1rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background .15s, box-shadow .15s;
    margin-top:      .375rem;
    min-height:      44px;   /* WCAG 2.2 touch target */
    line-height:     1;
}
.lgn__submit-btn:hover:not(:disabled) {
    /* C2/#fff auf C1/#07003D — 12.6:1 ✓ */
    background: var(--c1, #07003D);
}
.lgn__submit-btn:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
    box-shadow:     0 0 0 4px rgba(24,72,160,.22);
}
.lgn__submit-btn:disabled {
    opacity:  .65;
    cursor:   not-allowed;
}

/* ── Button Spinner ──────────────────────────────────────────────── */
.lgn__btn-spinner[hidden] { display: none; }

.lgn__spinner-icon {
    display:   inline-block;
    animation: lgn__spin .7s linear infinite;
}
@keyframes lgn__spin {
    to { transform: rotate(360deg); }
}

/* ── Generic Button Varianten (Konflikt-Modal) ───────────────────── */
.lgn__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    padding:         .6rem 1.25rem;
    border-radius:   4px;
    font-size:       .9375rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background .15s, color .15s, box-shadow .15s;
    border:          2px solid transparent;
    min-height:      44px;
    line-height:     1;
}
.lgn__btn:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
}
.lgn__btn:disabled {
    opacity:  .65;
    cursor:   not-allowed;
}

/* C2/#fff auf C3/#07003D — 8.5:1 ✓ */
.lgn__btn--primary {
    background: var(--c3, #07003D);
    color:      var(--c2, #ffffff);
    border-color: var(--c3, #07003D);
}
.lgn__btn--primary:hover:not(:disabled) {
    background:   var(--c1, #07003D);
    border-color: var(--c1, #07003D);
}

/* C1/#07003D auf C2/#fff — 12.6:1 ✓ (border dekorativ) */
.lgn__btn--ghost {
    background:   transparent;
    color:        var(--c1, #07003D);
    border-color: var(--border, #d1dce8);
}
.lgn__btn--ghost:hover:not(:disabled) {
    background: var(--c4, #f5f6f8);
}

/* ═══════════════════════════════════════════════════════════════════
   SITZUNGSKONFLIKT-MODAL
   ═══════════════════════════════════════════════════════════════════ */

/* C9/#724000 auf C9L/#fef6e8 — 8.0:1 ✓  |  C5 auf C9L — 13.1:1 ✓ */
.lgn__conflict-card {
    border-radius: 6px;
    overflow:      hidden;
    border:        none;
}

.lgn__conflict-header {
    background:  var(--c9-lt, #fef6e8);
    border-bottom: 1px solid var(--border, #d1dce8);
    padding:     1.25rem 1.5rem;
}

.lgn__conflict-header-inner {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}

.lgn__conflict-icon {
    font-size: 1.5rem;
    /* C9/#724000 auf C9L/#fef6e8 — 8.0:1 ✓ */
    color:     var(--c9, #724000);
    flex-shrink: 0;
}

/* C5/#1e2d3d auf C9L/#fef6e8 — 13.1:1 ✓ */
.lgn__conflict-title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--c5, #1e2d3d);
    margin:      0;
}

.lgn__conflict-body {
    padding:    1.25rem 1.5rem;
    background: var(--c2, #ffffff);
}

/* C5/#1e2d3d auf C2/#fff — 14.0:1 ✓ */
.lgn__conflict-desc {
    font-size:   .9375rem;
    color:       var(--c5, #1e2d3d);
    margin:      0 0 .875rem;
    font-weight: 500;
}

/* ── Conflict-Session-List ───────────────────────────────────────── */
.lgn__conflict-list {
    list-style: none;
    margin:     0 0 .875rem;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        .5rem;
}

.lgn__conflict-item {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    background:    var(--c4, #f5f6f8);
    border-radius: 4px;
    padding:       .625rem .875rem;
    font-size:     .85rem;
}

/* C3/#07003D auf C4/#f5f6f8 — 7.9:1 ✓ */
.lgn__conflict-item-icon {
    color:      var(--c3, #07003D);
    font-size:  1rem;
    flex-shrink: 0;
}

/* C5/#1e2d3d auf C4/#f5f6f8 — 13.0:1 ✓ */
.lgn__conflict-item-label {
    font-weight: 600;
    color:       var(--c5, #1e2d3d);
}

/* C6/#3a4c5a auf C4/#f5f6f8 — 8.2:1 ✓ */
.lgn__conflict-item-meta {
    color:    var(--c6, #3a4c5a);
    font-size: .8rem;
}

/* C9/#724000 auf C3L/#e8f0fb — 7.5:1 ✓  (warn stripe links) */
.lgn__conflict-warn {
    font-size:   .85rem;
    color:       var(--c5, #1e2d3d);
    background:  var(--c9-lt, #fef6e8);
    border-left: 3px solid var(--c9, #724000);
    border-radius: 0 4px 4px 0;
    padding:     .6rem .875rem;
    margin:      0;
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
}
.lgn__conflict-warn .bi {
    color:      var(--c9, #724000);
    flex-shrink: 0;
    margin-top: .05rem;
}

.lgn__conflict-footer {
    background:  var(--c2, #ffffff);
    border-top:  1px solid var(--border, #d1dce8);
    padding:     1rem 1.5rem;
    display:     flex;
    gap:         .75rem;
    justify-content: flex-end;
    flex-wrap:   wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   SHAKE-ANIMATION (Validierungsfeedback)
   ═══════════════════════════════════════════════════════════════════ */
@keyframes lgn__shake {
    0%, 100% { transform: translateX(0);    }
    15%, 45%, 75% { transform: translateX(-5px); }
    30%, 60%, 90% { transform: translateX( 5px); }
}
.lgn__field--shake .lgn__input {
    animation: lgn__shake .45s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .lgn__card-body        { padding: 1.25rem; }
    .lgn__card-header      { padding: 1.25rem; }
    .lgn__card-footer      { padding: .75rem 1.25rem; }
    .lgn__conflict-footer  { flex-direction: column-reverse; }
    .lgn__conflict-footer .lgn__btn { width: 100%; }
    .lgn__options          { flex-direction: column; align-items: flex-start; }
}