/* LoginShield 1.2.1
 * Eigenständige, layoutneutrale Darstellung des Loginbereichs.
 */

.ls-box,
.ls-box * {
    box-sizing: border-box;
}

.ls-box {
    --ls-accent: var(--clr-primary, #245ea8);
    --ls-accent-strong: var(--clr-primary-dark, #174678);
    --ls-surface: var(--clr-surface, #f7f9fc);
    --ls-text: var(--clr-text, #182230);
    --ls-muted: var(--clr-muted, #52606d);
    --ls-border: var(--clr-border, #cbd5e1);
    --ls-error: #a52626;
    --ls-error-bg: #fff3f2;
    --ls-success: #18734a;
    inline-size: min(100%, 44rem);
    margin: 0 0 1.25rem;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--ls-text);
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-inline-start: .32rem solid var(--ls-accent);
    border-radius: .8rem;
    box-shadow: 0 .45rem 1.25rem rgb(15 23 42 / .09);
    font: inherit;
}

.ls-box__header,
.ls-box__status {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.ls-box__icon,
.ls-box__status-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.15rem;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    color: #fff;
    background: var(--ls-accent);
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
}

.ls-box__title {
    margin: 0;
    color: var(--ls-text);
    font: inherit;
    font-size: clamp(1.1rem, 1rem + .35vw, 1.35rem);
    font-weight: 650;
    line-height: 1.25;
}

.ls-box__intro {
    margin: .25rem 0 0;
    color: var(--ls-muted);
    line-height: 1.45;
}

.ls-form {
    margin: 1rem 0 0;
}

.ls-form__label {
    display: block;
    margin: 0 0 .4rem;
    color: var(--ls-text);
    font-weight: 600;
}

.ls-form__controls {
    display: block;
}

.ls-password {
    position: relative;
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.ls-form__input {
    display: block;
    inline-size: 100%;
    min-block-size: 2.75rem;
    margin: 0;
    padding: .65rem 3.1rem .65rem .8rem;
    color: var(--ls-text);
    background: #fff;
    border: 1px solid var(--ls-border);
    border-radius: .55rem;
    font: inherit;
    line-height: 1.25;
}

.ls-form__input:hover {
    border-color: var(--ls-accent);
}

.ls-form__input:focus {
    outline: .18rem solid rgb(36 94 168 / .24);
    outline-offset: .08rem;
    border-color: var(--ls-accent);
}

.ls-password__toggle {
    position: absolute;
    inset-block: .28rem;
    inset-inline-end: .28rem;
    display: inline-grid;
    place-items: center;
    inline-size: 2.2rem;
    min-inline-size: 2.2rem;
    padding: .3rem;
    color: var(--ls-accent-strong);
    background: transparent;
    border: 0;
    border-radius: .38rem;
    font: inherit;
    cursor: pointer;
}

.ls-password__toggle:hover {
    background: rgb(36 94 168 / .09);
}

.ls-password__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ls-password__icon--hide,
.ls-password__toggle[aria-pressed="true"] .ls-password__icon--show {
    display: none;
}

.ls-password__toggle[aria-pressed="true"] .ls-password__icon--hide {
    display: block;
}

.ls-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ls-button {
    min-block-size: 2.75rem;
    margin: 0;
    padding: .62rem 1rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.ls-form__controls > .ls-button {
    margin-block-start: .65rem;
}

.ls-button:hover {
    transform: translateY(-1px);
}

.ls-button--primary {
    color: #fff;
    background: var(--ls-accent);
    border-color: var(--ls-accent);
}

.ls-button--primary:hover {
    background: var(--ls-accent-strong);
    border-color: var(--ls-accent-strong);
}

.ls-button--secondary {
    color: var(--ls-accent-strong);
    background: transparent;
    border-color: var(--ls-border);
}

.ls-button--secondary:hover {
    background: rgb(36 94 168 / .08);
    border-color: var(--ls-accent);
}

.ls-password__toggle:focus-visible,
.ls-button:focus-visible {
    outline: .18rem solid rgb(36 94 168 / .28);
    outline-offset: .15rem;
}

.ls-message {
    --ls-error: #a52626;
    --ls-error-bg: #fff3f2;
    margin: 1rem 0 0;
    padding: .75rem .85rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    line-height: 1.4;
}

.ls-message--error {
    color: var(--ls-error, #a52626);
    background: var(--ls-error-bg, #fff3f2);
    border-color: #edb9b4;
}

.ls-message__title,
.ls-message__detail {
    display: block;
}

.ls-message__detail {
    margin-block-start: .18rem;
    font-size: .94em;
}

.ls-box--authenticated {
    display: block;
    padding-block: .85rem;
    border-inline-start-color: var(--ls-success);
}

.ls-box__status {
    align-items: center;
}

.ls-box__status-icon {
    color: #fff;
    background: var(--ls-success);
    font-size: 1rem;
    font-weight: 700;
}

.ls-box__status-title,
.ls-box__status-text {
    display: block;
}

.ls-box__status-title {
    line-height: 1.3;
}

.ls-box__status-text {
    margin-block-start: .12rem;
    color: var(--ls-muted);
    font-size: .92em;
}

.ls-logout {
    margin: .75rem 0 0;
}

@media (max-width: 32rem) {
    .ls-button,
    .ls-logout,
    .ls-logout .ls-button {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ls-button {
        transition: none;
    }

    .ls-button:hover {
        transform: none;
    }
}