/* ============================================================
   262-php-07-auth-gate — Anmelde-Schranke
   ============================================================ */

.x262-gate { display: block; }

/* ---- Gesperrt (Gast) ------------------------------------- */
.x262-gate__locked {
    display: grid;
    justify-items: center;
    gap: .75rem;
    padding: 2.5rem 1.25rem;
    text-align: center;

    background: var(--surface-2, #f4f2ee);
    border: 1px dashed var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
}

.x262-gate__title {
    margin: 0;
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-h4, 1.0625rem);
    font-weight: var(--w-heading, 500);
    color: var(--text, #14171a);
}

.x262-gate__text {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.55;
    color: var(--text-2, #3d4247);
    max-width: var(--measure-lead);
}

/* ---- Schaltfläche ---------------------------------------- */
.x262-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1 var(--font-body, Roboto, sans-serif);
    color: #fff;
    background: var(--brand, #1E8A3B);
    border: 1px solid var(--brand, #1E8A3B);
    border-radius: var(--radius, 3px);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.x262-gate__btn:hover {
    background: var(--brand-strong, #15703A);
    border-color: var(--brand-strong, #15703A);
}

.x262-gate__btn--quiet {
    background: transparent;
    color: var(--text-2, #3d4247);
    border-color: var(--border, #dfdbd4);
}
.x262-gate__btn--quiet:hover {
    background: var(--surface-2, #f4f2ee);
    color: var(--text, #14171a);
    border-color: var(--faint, #a4a8ac);
}

/* ---- Statusstreifen -------------------------------------- */
.x262-authbar {
    padding: .625rem .875rem;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius, 3px);
}

.x262-authbar__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.x262-authbar__state[hidden] { display: none; }

.x262-authbar__text {
    font-size: var(--fs-small, 1rem);
    color: var(--text-2, #3d4247);
}
.x262-authbar__text strong { color: var(--text, #14171a); font-weight: var(--w-heading, 500); }

/* Ohne JavaScript bleibt der Mitglieder-Inhalt verborgen und die
   Schranke sichtbar — der sichere Ausgangszustand. */
.x262-gate__unlocked[hidden] { display: none; }