/* /Components/AdminShell.razor.rz.scp.css */
.ashell[b-x1l49szbth] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.ashell__header[b-x1l49szbth] {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5) 0;
}

.ashell__headrow[b-x1l49szbth] {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.ashell__brand[b-x1l49szbth] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    text-decoration: none;
}

.ashell__brand:hover[b-x1l49szbth] {
    text-decoration: none;
}

.ashell__title[b-x1l49szbth] {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--text-heading);
}

.ashell__exit[b-x1l49szbth] {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.ashell__nav[b-x1l49szbth] {
    max-width: var(--container);
    margin: var(--sp-3) auto 0;
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.ashell__nav[b-x1l49szbth]  .ashell__link,
.ashell__nav[b-x1l49szbth] >  a {
    flex: none;
}

/* NavLink rendert ein <a> ohne Scope-Attribut → ::deep */
.ashell__nav[b-x1l49szbth]  a {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-body);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.ashell__nav[b-x1l49szbth]  a:hover {
    color: var(--brand-pressed);
    text-decoration: none;
}

.ashell__nav[b-x1l49szbth]  a.active {
    color: var(--brand-pressed);
    border-bottom-color: var(--brand);
    background: var(--brand-tint);
}

.ashell__content[b-x1l49szbth] {
    flex: 1;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
}

/* Überblick-Tab nur Desktop — mobil führt die Kopfzeile nach /admin. */
.ashell__nav[b-x1l49szbth]  .ashell__link--overview {
    display: none;
}

/* ---- Desktop (ab 900 px): TopNav trägt die Marke, Reiter genügen ---- */
@media (min-width: 900px) {
    .ashell__headrow[b-x1l49szbth] {
        display: none;
    }

    .ashell__nav[b-x1l49szbth] {
        margin-top: 0;
    }

    .ashell__nav[b-x1l49szbth]  .ashell__link--overview {
        display: block;
    }
}
/* /Components/ForbiddenNotice.razor.rz.scp.css */
.forbidden[b-hp28vd6i04] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-5);
}

.forbidden__inner[b-hp28vd6i04] {
    max-width: 26rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

.forbidden__title[b-hp28vd6i04] {
    font-size: var(--fs-h2);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-pn4wfyw3km] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-pn4wfyw3km] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bl7lm5bc1h],
.components-reconnect-repeated-attempt-visible[b-bl7lm5bc1h],
.components-reconnect-failed-visible[b-bl7lm5bc1h],
.components-pause-visible[b-bl7lm5bc1h],
.components-resume-failed-visible[b-bl7lm5bc1h],
.components-rejoining-animation[b-bl7lm5bc1h] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-retrying[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-failed[b-bl7lm5bc1h],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bl7lm5bc1h] {
    display: block;
}


#components-reconnect-modal[b-bl7lm5bc1h] {
    background-color: white;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bl7lm5bc1h 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bl7lm5bc1h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bl7lm5bc1h 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bl7lm5bc1h]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bl7lm5bc1h 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bl7lm5bc1h {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bl7lm5bc1h {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bl7lm5bc1h {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bl7lm5bc1h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bl7lm5bc1h] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bl7lm5bc1h] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bl7lm5bc1h] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bl7lm5bc1h] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bl7lm5bc1h] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bl7lm5bc1h] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bl7lm5bc1h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bl7lm5bc1h] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bl7lm5bc1h {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/MarkdownEditor.razor.rz.scp.css */
.mde[b-fk0lyq9h8c] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mde__toolbar[b-fk0lyq9h8c] {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.mde__btn[b-fk0lyq9h8c] {
    border: 1px solid var(--border);
    background: var(--surface-card);
    color: var(--text-body);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.mde__btn:hover[b-fk0lyq9h8c] {
    background: var(--brand-tint);
    border-color: var(--brand);
}

.mde__area[b-fk0lyq9h8c] {
    /* Monospace für den Quelltext — Auszeichnungen bleiben ausgerichtet. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    resize: vertical;
    min-height: 8rem;
}

.mde__previewlabel[b-fk0lyq9h8c] {
    margin-top: var(--sp-2);
    color: var(--brand-pressed);
}

/* Vorschau spiegelt die Prosa der Player-Notiz — der Admin sieht, was die
   Kundin sieht. MarkupString-Kinder → ::deep. */
.mde__preview[b-fk0lyq9h8c] {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    padding: var(--sp-4);
    min-height: 3.5rem;
    color: var(--text-body);
    line-height: var(--lh-relaxed);
}

.mde__empty[b-fk0lyq9h8c] {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
}

.mde__preview[b-fk0lyq9h8c]  > :first-child { margin-top: 0; }
.mde__preview[b-fk0lyq9h8c]  > :last-child { margin-bottom: 0; }
.mde__preview[b-fk0lyq9h8c]  p { margin: 0 0 var(--sp-3); }
.mde__preview[b-fk0lyq9h8c]  ul,
.mde__preview[b-fk0lyq9h8c]  ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.mde__preview[b-fk0lyq9h8c]  li { margin-bottom: var(--sp-1); }
.mde__preview[b-fk0lyq9h8c]  li::marker { color: var(--brand); }
.mde__preview[b-fk0lyq9h8c]  h3,
.mde__preview[b-fk0lyq9h8c]  h4 {
    font-family: var(--font-display);
    color: var(--text-heading);
    line-height: var(--lh-snug);
    margin: var(--sp-4) 0 var(--sp-2);
}
.mde__preview[b-fk0lyq9h8c]  h3 { font-size: var(--fs-h4); }
.mde__preview[b-fk0lyq9h8c]  h4 { font-size: var(--fs-body); }
.mde__preview[b-fk0lyq9h8c]  strong { color: var(--text-heading); font-weight: var(--fw-bold); }
.mde__preview[b-fk0lyq9h8c]  a {
    color: var(--brand-pressed);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mde__preview[b-fk0lyq9h8c]  a:hover { color: var(--brand); }
.mde__preview[b-fk0lyq9h8c]  blockquote {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
    border-left: 3px solid var(--brand-tint);
    color: var(--text-muted);
    font-style: italic;
}
/* /Components/Pages/Admin/AdminAccess.razor.rz.scp.css */
.aacc__hint[b-r77077blu5] {
    font-size: var(--fs-sm);
    color: var(--text-body);
    margin-bottom: var(--sp-4);
}

.aacc__rows[b-r77077blu5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.aacc__row[b-r77077blu5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-soft);
    flex-wrap: wrap;
}

.aacc__row:hover[b-r77077blu5] {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.aacc__who[b-r77077blu5] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.aacc__name[b-r77077blu5] {
    font-weight: var(--fw-bold);
    color: var(--text-heading);
}

.aacc__email[b-r77077blu5] {
    font-size: var(--fs-sm);
    color: var(--text-body);
    overflow-wrap: anywhere;
}

.aacc__count[b-r77077blu5] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--brand-pressed);
    background: var(--brand-tint);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
}
/* /Components/Pages/Admin/AdminAccessUser.razor.rz.scp.css */
.aaccu__customer[b-h1v5r3y0rs] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-4);
}

.aaccu__email[b-h1v5r3y0rs] {
    font-weight: var(--fw-regular);
    color: var(--text-body);
    font-size: var(--fs-sm);
}

.aaccu__section[b-h1v5r3y0rs] {
    margin-bottom: var(--sp-6);
}

.aaccu__heading[b-h1v5r3y0rs] {
    font-size: var(--fs-body);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-family: var(--font-body);
    font-weight: var(--fw-heavy);
    margin-bottom: var(--sp-3);
}

.aaccu__rows[b-h1v5r3y0rs] {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.aaccu__row[b-h1v5r3y0rs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    flex-wrap: wrap;
}

.aaccu__title[b-h1v5r3y0rs] {
    font-weight: var(--fw-bold);
    color: var(--text-heading);
}

.aaccu__meta[b-h1v5r3y0rs] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.aaccu__date[b-h1v5r3y0rs] {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.aaccu__revoke[b-h1v5r3y0rs] {
    border: none;
    background: none;
    color: var(--danger);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 0;
}

.aaccu__revoke:hover[b-h1v5r3y0rs] {
    text-decoration: underline;
}

.aaccu__grant[b-h1v5r3y0rs] {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}

.aaccu__select[b-h1v5r3y0rs] {
    flex: 1;
    min-width: 14rem;
    max-width: 24rem;
}

.aaccu__grantbtn[b-h1v5r3y0rs] {
    padding: 0.7rem 1.4rem;
    font-size: var(--fs-sm);
}
/* /Components/Pages/Admin/AdminContentDelete.razor.rz.scp.css */
.acdel__card[b-uud49vtoar] {
    padding: var(--sp-5);
    max-width: 36rem;
}

.acdel__title[b-uud49vtoar] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-3);
}

.acdel__summary[b-uud49vtoar] {
    color: var(--text-body);
    margin-bottom: var(--sp-4);
}

.acdel__card[b-uud49vtoar]  .acdel__buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.acdel__card[b-uud49vtoar]  .acdel__confirm {
    background: var(--danger);
    color: var(--text-on-brand);
}

.acdel__card[b-uud49vtoar]  .acdel__confirm:hover {
    background: #8C4335;
}
/* /Components/Pages/Admin/AdminContentEdit.razor.rz.scp.css */
.acedit__card[b-elbwdej1oc] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    max-width: 44rem;
}

.acedit__back[b-elbwdej1oc] {
    align-self: flex-start;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--brand-pressed);
    text-decoration: none;
}

.acedit__back:hover[b-elbwdej1oc] {
    color: var(--brand);
    text-decoration: underline;
}

.acedit__buttons[b-elbwdej1oc] {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}
/* /Components/Pages/Admin/AdminCourseDelete.razor.rz.scp.css */
.acdel__card[b-b8bwkendz0] {
    padding: var(--sp-5);
    max-width: 36rem;
}

.acdel__title[b-b8bwkendz0] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-3);
}

.acdel__summary[b-b8bwkendz0] {
    color: var(--text-body);
    margin-bottom: var(--sp-4);
}

.acdel__card[b-b8bwkendz0]  .acdel__buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.acdel__card[b-b8bwkendz0]  .acdel__confirm {
    background: var(--danger);
    color: var(--text-on-brand);
}

.acdel__card[b-b8bwkendz0]  .acdel__confirm:hover {
    background: #8C4335;
}
/* /Components/Pages/Admin/AdminCourseEdit.razor.rz.scp.css */
.acedit__back[b-fwtl04l39s] {
    display: inline-block;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--brand-pressed);
    text-decoration: none;
}

.acedit__back:hover[b-fwtl04l39s] {
    color: var(--brand);
    text-decoration: underline;
}

.acedit__card[b-fwtl04l39s] {
    padding: var(--sp-5);
    max-width: 44rem;
    margin-bottom: var(--sp-6);
}

.acedit__card[b-fwtl04l39s]  .acedit__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.acedit__card[b-fwtl04l39s]  .acedit__textarea {
    min-height: 6rem;
    resize: vertical;
}

.acedit__card[b-fwtl04l39s]  .acedit__buttons {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.acedit__lessons[b-fwtl04l39s] {
    max-width: 44rem;
}

.acedit__subhead[b-fwtl04l39s] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-4);
}

.acedit__empty[b-fwtl04l39s] {
    color: var(--text-muted);
    margin: 0 0 var(--sp-5);
}
/* /Components/Pages/Admin/AdminCourses.razor.rz.scp.css */
/* Wrapper: mobil layout-neutral, ab 900 px zweispaltig. */
.acourses[b-c03fzy0qy8] {
    display: contents;
}

.acourses__create[b-c03fzy0qy8] {
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.acourses__heading[b-c03fzy0qy8] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-3);
}

.acourses__create[b-c03fzy0qy8]  .acourses__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: flex-start;
}

.acourses__create[b-c03fzy0qy8]  .pm-field {
    width: 100%;
}

.acourses__create[b-c03fzy0qy8]  .acourses__textarea {
    min-height: 5rem;
    resize: vertical;
}

.acourses__rows[b-c03fzy0qy8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.acourses__row[b-c03fzy0qy8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    flex-wrap: wrap;
}

.acourses__info[b-c03fzy0qy8] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.acourses__title[b-c03fzy0qy8] {
    font-weight: var(--fw-bold);
    color: var(--text-heading);
}

.acourses__desc[b-c03fzy0qy8] {
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.acourses__actions[b-c03fzy0qy8] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.acourses__move[b-c03fzy0qy8] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--text-heading);
    cursor: pointer;
    font-size: var(--fs-body);
}

.acourses__move:hover[b-c03fzy0qy8] {
    background: var(--brand-tint);
    border-color: var(--brand);
}

.acourses__action[b-c03fzy0qy8] {
    padding: 0.5rem 1rem;
    font-size: var(--fs-xs);
}

.acourses__delete[b-c03fzy0qy8] {
    font-size: var(--fs-sm);
    color: var(--danger);
}

/* ---- Desktop (ab 900 px): Formular links, Liste als Tabelle rechts ---- */
@media (min-width: 900px) {
    .acourses[b-c03fzy0qy8] {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        gap: var(--sp-6);
        align-items: start;
    }

    .acourses__create[b-c03fzy0qy8] {
        margin-bottom: 0;
    }

    .acourses__rows[b-c03fzy0qy8] {
        gap: 0;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .acourses__row[b-c03fzy0qy8] {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .acourses__row + .acourses__row[b-c03fzy0qy8] {
        border-top: 1px solid var(--border);
    }
}
/* /Components/Pages/Admin/AdminDocuments.razor.rz.scp.css */
.adocs__lead[b-kieayh5iq3] {
    color: var(--text-body);
    max-width: 44rem;
    margin: 0 0 var(--sp-5);
    line-height: var(--lh-normal);
}

.adocs__empty[b-kieayh5iq3] {
    color: var(--text-muted);
    margin: var(--sp-4) 0 0;
}
/* /Components/Pages/Admin/AdminUsers.razor.rz.scp.css */
.ausers__create[b-7etvulhkkr] {
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.ausers__heading[b-7etvulhkkr] {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-2);
}

.ausers__hint[b-7etvulhkkr] {
    font-size: var(--fs-sm);
    color: var(--text-body);
    margin-bottom: var(--sp-4);
}

.ausers__create[b-7etvulhkkr]  .ausers__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: flex-start;
}

.ausers__create[b-7etvulhkkr]  .ausers__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-4);
    width: 100%;
}

/* Banner erscheinen im Formular (::deep nötig) UND in der Liste */
.ausers__error[b-7etvulhkkr],
.ausers__create[b-7etvulhkkr]  .ausers__error {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    width: 100%;
    margin-bottom: var(--sp-3);
}

.ausers__success[b-7etvulhkkr],
.ausers__create[b-7etvulhkkr]  .ausers__success {
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    width: 100%;
    margin-bottom: var(--sp-3);
}

/* Wrapper: mobil layout-neutral, ab 900 px zweispaltig. */
.ausers[b-7etvulhkkr] {
    display: contents;
}

.ausers__rows[b-7etvulhkkr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Spaltenköpfe: nur Desktop. */
.ausers__cols[b-7etvulhkkr] {
    display: none;
}

/* Mobil: Karte mit Name, E-Mail und Status untereinander gestapelt.
   Der „Erneut einladen"-Button passt neben einem Namen nicht auf eine
   schmale Handy-Zeile — deshalb bekommt jedes Feld seine eigene Zeile,
   statt die Namensspalte auf einzelne Buchstaben zu quetschen. */
.ausers__row[b-7etvulhkkr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
}

.ausers__name[b-7etvulhkkr] {
    min-width: 0;
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    /* Lange Namen (oder E-Mail-artige Namen aus den Seed-Daten) müssen
       umbrechen, statt in die Nachbarspalte zu ragen. */
    overflow-wrap: anywhere;
}

.ausers__email[b-7etvulhkkr] {
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--text-body);
    overflow-wrap: anywhere;
}

.ausers__actions[b-7etvulhkkr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.ausers__badge[b-7etvulhkkr] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
}

.ausers__badge--active[b-7etvulhkkr] {
    background: var(--success-bg);
    color: var(--success);
}

.ausers__badge--invited[b-7etvulhkkr] {
    background: var(--warning-bg);
    color: var(--warning);
}

.ausers__badge--admin[b-7etvulhkkr] {
    background: var(--brand-tint);
    color: var(--brand-pressed);
}

.ausers__reinvite[b-7etvulhkkr] {
    padding: 0.5rem 1rem;
    font-size: var(--fs-xs);
}

/* ---- Desktop (ab 1140 px): Formular links, Liste als Tabelle rechts.
   Erst ab hier ist neben der 380-px-Spalte genug Platz für eine
   dreispaltige Tabelle; darunter bleibt die Karten-Ansicht. ---- */
@media (min-width: 1140px) {
    .ausers[b-7etvulhkkr] {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        gap: var(--sp-6);
        align-items: start;
    }

    .ausers__create[b-7etvulhkkr] {
        margin-bottom: 0;
    }

    /* Karten-Rahmen; die Zeilen selbst sind das Raster.
       Kopf und jede Zeile teilen dieselbe feste Spaltendefinition —
       deshalb fluchten die Spalten ganz ohne subgrid, das auf
       manchen (mobilen) Webviews fehlt und die Tabelle kollabieren
       ließ (Overlaps). Die Status-Spalte ist fest breit, damit alle
       Zeilen unabhängig vom Inhalt gleich ausgerichtet sind. */
    .ausers__rows[b-7etvulhkkr] {
        gap: 0;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    /* Kopf und Zeilen teilen dieselbe Spaltendefinition — dadurch
       fluchten die Spalten in Quellreihenfolge: Name → Spalte 1,
       E-Mail → Spalte 2, Aktionen → Spalte 3. */
    .ausers__cols[b-7etvulhkkr],
    .ausers__row[b-7etvulhkkr] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 18rem;
        column-gap: var(--sp-4);
        align-items: center;
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }

    .ausers__actions[b-7etvulhkkr] {
        justify-self: stretch;
        justify-content: flex-start;
    }

    .ausers__cols[b-7etvulhkkr] {
        display: grid;
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
        border-bottom: 1px solid var(--border);
        font-size: var(--fs-xs);
        font-weight: var(--fw-heavy);
        letter-spacing: var(--ls-eyebrow);
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .ausers__row[b-7etvulhkkr] {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .ausers__row + .ausers__row[b-7etvulhkkr] {
        border-top: 1px solid var(--border);
    }
}
/* /Components/Pages/AdminDashboard.razor.rz.scp.css */
.admin__heading[b-vatwaewxjk] {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-4);
}

.admin__grid[b-vatwaewxjk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--sp-4);
}

.admin__card[b-vatwaewxjk] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-soft);
}

.admin__card:hover[b-vatwaewxjk] {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.admin__card-title[b-vatwaewxjk] {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--text-heading);
}

.admin__card-desc[b-vatwaewxjk] {
    font-size: var(--fs-sm);
    color: var(--text-body);
}
/* /Components/Pages/CourseView.razor.rz.scp.css */
.course[b-sm66ccmnlm] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Platz für die fixe Bottom-Nav (nur mobil); Desktop setzt es zurück. */
    padding-bottom: 7rem;
}

/* Cover-Fallback laut Spec: warmer Verlauf (Foto-Cover kommt mit CoverStorageKey) */
.course__hero[b-sm66ccmnlm] {
    background: linear-gradient(160deg, var(--caramel-700), var(--caramel-500) 60%, var(--caramel-300));
    color: var(--text-on-brand);
    padding: var(--sp-8) var(--sp-5) var(--sp-6);
}

.course__hero-inner[b-sm66ccmnlm] {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.course__eyebrow[b-sm66ccmnlm] {
    color: var(--caramel-100);
}

.course__title[b-sm66ccmnlm] {
    color: var(--text-on-brand);
    font-size: var(--fs-h1);
    margin: var(--sp-2) 0 0;
}

.course__description[b-sm66ccmnlm] {
    color: var(--caramel-100);
    font-size: var(--fs-lead);
    margin: var(--sp-3) 0 0;
    max-width: 38rem;
}

.course__content[b-sm66ccmnlm] {
    flex: 1;
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5);
}

.course__section[b-sm66ccmnlm] {
    font-size: var(--fs-h4);
    color: var(--text-muted);
    margin: var(--sp-5) 0 var(--sp-3);
}

.course__list[b-sm66ccmnlm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.course__item[b-sm66ccmnlm] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
}

.course__item--link[b-sm66ccmnlm] {
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-soft);
}

.course__item--link:hover[b-sm66ccmnlm] {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.course__item-index[b-sm66ccmnlm] {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-pressed);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

.course__item-body[b-sm66ccmnlm] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.course__item-title[b-sm66ccmnlm] {
    font-weight: var(--fw-bold);
    color: var(--text-heading);
}

.course__item-done[b-sm66ccmnlm] {
    margin-left: auto;
    flex: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--success);
    background: var(--success-bg);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
}

.course__item-type[b-sm66ccmnlm] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
}

.course__footer[b-sm66ccmnlm] {
    padding: 0 var(--sp-5) var(--sp-7);
    max-width: var(--container-narrow);
    margin: 0 auto;
    width: 100%;
}

/* Zurück-Link oben links — nur Desktop; mobil führt der Footer-Button zurück. */
.course__topnav[b-sm66ccmnlm] {
    display: none;
}

/* Wrapper für Liste + Fortschritts-Karte: mobil layout-neutral. */
.course__body[b-sm66ccmnlm] {
    display: contents;
}

.course__rail[b-sm66ccmnlm] {
    display: none;
}

/* ---- Desktop (ab 900 px): zweispaltig mit sticky Fortschritts-Karte ---- */
@media (min-width: 900px) {
    .course[b-sm66ccmnlm] {
        padding-bottom: 0;
    }

    .course__topnav[b-sm66ccmnlm] {
        display: block;
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: var(--sp-5) var(--sp-5) 0;
    }

    .course__back-top[b-sm66ccmnlm] {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--text-muted);
    }

    .course__back-top:hover[b-sm66ccmnlm] {
        color: var(--brand-pressed);
        text-decoration: none;
    }

    .course__hero-inner[b-sm66ccmnlm] {
        max-width: var(--container);
    }

    .course__body[b-sm66ccmnlm] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--sp-6);
        align-items: start;
        flex: 1;
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: var(--sp-6) var(--sp-5) var(--sp-8);
    }

    .course__content[b-sm66ccmnlm] {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .course__rail[b-sm66ccmnlm] {
        position: sticky;
        top: var(--sp-5);
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        padding: var(--sp-5);
    }

    .course__rail-count[b-sm66ccmnlm] {
        font-family: var(--font-display);
        font-size: 2rem;
        color: var(--text-heading);
        font-variant-numeric: tabular-nums;
        line-height: var(--lh-tight);
    }

    .course__rail-count small[b-sm66ccmnlm] {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
    }

    .course__rail-bar[b-sm66ccmnlm] {
        height: 8px;
        border-radius: var(--radius-pill);
        background: var(--bg-band);
        overflow: hidden;
    }

    .course__rail-fill[b-sm66ccmnlm] {
        display: block;
        height: 100%;
        border-radius: var(--radius-pill);
        background: var(--accent);
    }

    .course__rail-next[b-sm66ccmnlm] {
        margin-top: var(--sp-2);
    }

    .course__rail-done[b-sm66ccmnlm] {
        margin-top: var(--sp-2);
        padding: var(--sp-2) var(--sp-4);
        border-radius: var(--radius-pill);
        background: var(--success-bg);
        color: var(--success);
        font-weight: var(--fw-bold);
        text-align: center;
    }

    /* Zurück-Button unten entfällt nur, wenn die Karte ihn übernimmt. */
    .course__footer--railed[b-sm66ccmnlm] {
        display: none;
    }
}
/* /Components/Pages/DeleteAccount.razor.rz.scp.css */
.delacc[b-00s7cjwsdn] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) 7rem;
}

.delacc__inner[b-00s7cjwsdn] {
    margin: auto 0;
    width: 100%;
    max-width: 30rem;
    padding: var(--sp-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.delacc__eyebrow[b-00s7cjwsdn] {
    color: var(--danger);
}

.delacc__title[b-00s7cjwsdn] {
    font-size: var(--fs-h3);
    margin: var(--sp-2) 0 0;
}

.delacc__text[b-00s7cjwsdn] {
    color: var(--text-body);
    margin: var(--sp-3) 0 0;
    line-height: 1.6;
}

.delacc__actions[b-00s7cjwsdn] {
    margin-top: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.delacc__confirm[b-00s7cjwsdn] {
    background: var(--danger);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-sm);
}

.delacc__confirm:hover[b-00s7cjwsdn] {
    filter: brightness(0.93);
}

@media (min-width: 900px) {
    .delacc[b-00s7cjwsdn] {
        padding-bottom: var(--sp-7);
    }
}
/* /Components/Pages/Documents.razor.rz.scp.css */
.docs[b-yeb1exymqm] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-7) var(--sp-5) 7rem;
}

.docs__inner[b-yeb1exymqm] {
    width: 100%;
    max-width: var(--container-narrow);
    /* drückt den globalen Footer an den unteren Rand statt direkt unter den Inhalt. */
    margin-bottom: auto;
}

.docs__title[b-yeb1exymqm] {
    font-size: var(--fs-h2);
    margin: var(--sp-2) 0 var(--sp-4);
}

.docs__list[b-yeb1exymqm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* li layout-neutral: mobil Flex-, ab 900 px Grid-Kind ist direkt der Link. */
.docs__list li[b-yeb1exymqm] {
    display: contents;
}

.docs__item[b-yeb1exymqm] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-soft);
}

/* Kachel-Icon + „Öffnen": nur Desktop — Mobil bleibt unverändert. */
.docs__item-ico[b-yeb1exymqm],
.docs__item-open[b-yeb1exymqm] {
    display: none;
}

.docs__item-body[b-yeb1exymqm] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.docs__item:hover[b-yeb1exymqm] {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.docs__item-title[b-yeb1exymqm] {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--text-heading);
}

.docs__item-type[b-yeb1exymqm] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
}

.docs__empty[b-yeb1exymqm] {
    color: var(--text-body);
}

/* ---- Desktop (ab 900 px): zweispaltiges Raster mit PDF-Kachel ---- */
@media (min-width: 900px) {
    .docs[b-yeb1exymqm] {
        padding-bottom: var(--sp-7);
    }

    .docs__inner[b-yeb1exymqm] {
        max-width: var(--container);
    }

    .docs__list[b-yeb1exymqm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: var(--sp-4);
    }

    .docs__item[b-yeb1exymqm] {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
    }

    .docs__item-ico[b-yeb1exymqm] {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--radius-sm);
        background: var(--brand-tint);
        color: var(--brand-pressed);
        font-size: 0.68rem;
        font-weight: var(--fw-heavy);
        letter-spacing: 0.08em;
    }

    .docs__item-title[b-yeb1exymqm] {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: var(--fw-bold);
        overflow-wrap: anywhere;
    }

    /* Visually-hidden statt display:none: Screenreader behalten
       „PDF öffnen" als Teil des Linknamens. */
    .docs__item-type[b-yeb1exymqm] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .docs__item-open[b-yeb1exymqm] {
        display: block;
        margin-left: auto;
        flex: none;
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--brand-pressed);
    }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.forgot[b-ipqjnoq93g] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
}

.forgot__inner[b-ipqjnoq93g] {
    margin: auto 0;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.forgot__logo[b-ipqjnoq93g] {
    height: 7rem;
    width: auto;
}

.forgot__script[b-ipqjnoq93g] {
    margin-top: var(--sp-5);
    font-size: 1.4rem;
}

.forgot__title[b-ipqjnoq93g] {
    margin-top: var(--sp-2);
    font-size: var(--fs-h2);
}

.forgot__lead[b-ipqjnoq93g] {
    margin-top: var(--sp-2);
    color: var(--text-body);
}

/* ::deep, weil EditForm als Kindkomponente kein CSS-Scope-Attribut erhält */
.forgot__inner[b-ipqjnoq93g]  .forgot__form {
    margin-top: var(--sp-4);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    text-align: left;
}

.forgot__submit[b-ipqjnoq93g] {
    width: 100%;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.welcome[b-snw51jqhpn] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
}

.welcome__inner[b-snw51jqhpn] {
    margin: auto 0;
    max-width: 26rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome__logo[b-snw51jqhpn] {
    height: 8.5rem;
    width: auto;
}

.welcome__script[b-snw51jqhpn] {
    margin-top: var(--sp-5);
    font-size: 1.5rem;
}

.welcome__title[b-snw51jqhpn] {
    margin-top: var(--sp-2);
    font-size: var(--fs-h2);
}

.welcome__lead[b-snw51jqhpn] {
    margin-top: var(--sp-2);
    color: var(--text-body);
}

.welcome__quote[b-snw51jqhpn] {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
}

.welcome__subtitle[b-snw51jqhpn] {
    margin-top: var(--sp-5);
    font-size: var(--fs-h3);
}

.welcome__courses[b-snw51jqhpn] {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-align: left;
}

.welcome__course[b-snw51jqhpn] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease-soft);
}

.welcome__course:hover[b-snw51jqhpn] {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.welcome__course-title[b-snw51jqhpn] {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--text-heading);
}

.welcome__course-desc[b-snw51jqhpn] {
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.welcome__course-progress[b-snw51jqhpn] {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
}

/* Fortschrittsbalken: nur Desktop — Mobil bleibt unverändert. */
.welcome__course-bar[b-snw51jqhpn] {
    display: none;
}

/* ::deep, weil AuthorizeView als Kindkomponente rendert */
.welcome__inner[b-snw51jqhpn]  .welcome__admin {
    margin-top: var(--sp-5);
}

.welcome__logout[b-snw51jqhpn] {
    margin-top: var(--sp-3);
}

.welcome[b-snw51jqhpn] {
    padding-bottom: 7rem;
}

/* ---- Desktop (ab 900 px): Header trägt die Marke, Kurse als Raster ---- */
@media (min-width: 900px) {
    .welcome[b-snw51jqhpn] {
        padding: var(--sp-7) var(--sp-5) var(--sp-5);
    }

    .welcome__logo[b-snw51jqhpn] {
        display: none;
    }

    .welcome__inner--wide[b-snw51jqhpn] {
        /* margin-bottom:auto drückt den globalen Footer an den unteren Rand,
           statt ihn direkt unter den Inhalt zu setzen (sonst schwebt er mittig). */
        margin: 0 auto auto;
        max-width: var(--container);
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .welcome__inner--wide .welcome__script[b-snw51jqhpn] {
        margin-top: 0;
        font-size: 1.6rem;
    }

    .welcome__inner--wide .welcome__courses[b-snw51jqhpn] {
        margin-top: var(--sp-5);
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--sp-4);
    }

    .welcome__course[b-snw51jqhpn] {
        border-radius: var(--radius-lg);
        transition: box-shadow var(--dur-fast) var(--ease-soft),
                    transform var(--dur-fast) var(--ease-soft);
    }

    .welcome__course:hover[b-snw51jqhpn] {
        transform: translateY(-2px);
    }

    .welcome__course-desc[b-snw51jqhpn] {
        flex: 1;
    }

    .welcome__course-bar[b-snw51jqhpn] {
        display: block;
        margin-top: var(--sp-2);
        height: 6px;
        border-radius: var(--radius-pill);
        background: var(--bg-band);
        overflow: hidden;
    }

    .welcome__course-fill[b-snw51jqhpn] {
        display: block;
        height: 100%;
        border-radius: var(--radius-pill);
        background: var(--accent);
    }

    .welcome__course-fill--done[b-snw51jqhpn] {
        background: var(--success);
    }

    /* Verwaltung steckt im Header; das Logo entfällt — Mobil zeigt beides weiter. */
    .welcome__inner[b-snw51jqhpn]  .welcome__admin {
        display: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login[b-50nm4317qe] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
}

.login__inner[b-50nm4317qe] {
    margin: auto 0;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.login__logo[b-50nm4317qe] {
    height: 7rem;
    width: auto;
}

.login__script[b-50nm4317qe] {
    margin-top: var(--sp-5);
    font-size: 1.4rem;
}

.login__title[b-50nm4317qe] {
    margin-top: var(--sp-2);
    font-size: var(--fs-h2);
}

.login__note[b-50nm4317qe] {
    margin-top: var(--sp-4);
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    width: 100%;
}

/* ::deep, weil EditForm als Kindkomponente kein CSS-Scope-Attribut erhält */
.login__inner[b-50nm4317qe]  .login__form {
    margin-top: var(--sp-5);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    text-align: left;
}

.login__error[b-50nm4317qe] {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
}

/* ::deep, weil die Zeile innerhalb der EditForm liegt */
.login__inner[b-50nm4317qe]  .login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.login__inner[b-50nm4317qe]  .login__remember {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.login__inner[b-50nm4317qe]  .login__forgot {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.login__submit[b-50nm4317qe] {
    width: 100%;
}

/* /Components/Pages/PlayerView.razor.rz.scp.css */
.player[b-6axht2o2on] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Bottom: Platz für die fixe Bottom-Nav (nur mobil); Desktop überschreibt. */
    padding: var(--sp-5) var(--sp-5) 7rem;
}

.player__inner[b-6axht2o2on] {
    width: 100%;
    max-width: var(--container-narrow);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.player__nav[b-6axht2o2on] {
    padding-top: var(--sp-2);
}

.player__back[b-6axht2o2on] {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.player__video[b-6axht2o2on] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--black);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.player__title[b-6axht2o2on] {
    font-size: var(--fs-h3);
    margin: 0;
}

/* Begleittext zur Lektion. Hairline trennt ihn vom Titel; Prosa mit warmer
   Zeilenhöhe. Der Body ist eine gerenderte MarkupString → ::deep nötig,
   damit die Isolation die injizierten Kinder erreicht. */
.player__notes[b-6axht2o2on] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

.player__notes-label[b-6axht2o2on] {
    color: var(--brand-pressed);
}

.player__notes-body[b-6axht2o2on] {
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

.player__notes-body[b-6axht2o2on]  > :first-child { margin-top: 0; }
.player__notes-body[b-6axht2o2on]  > :last-child { margin-bottom: 0; }

.player__notes-body[b-6axht2o2on]  p {
    margin: 0 0 var(--sp-4);
}

.player__notes-body[b-6axht2o2on]  ul,
.player__notes-body[b-6axht2o2on]  ol {
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-5);
}

.player__notes-body[b-6axht2o2on]  li {
    margin-bottom: var(--sp-2);
}

.player__notes-body[b-6axht2o2on]  li::marker {
    color: var(--brand);
}

.player__notes-body[b-6axht2o2on]  h3,
.player__notes-body[b-6axht2o2on]  h4 {
    font-family: var(--font-display);
    color: var(--text-heading);
    line-height: var(--lh-snug);
    margin: var(--sp-5) 0 var(--sp-2);
}

.player__notes-body[b-6axht2o2on]  h3 { font-size: var(--fs-h4); }
.player__notes-body[b-6axht2o2on]  h4 { font-size: var(--fs-body); }

.player__notes-body[b-6axht2o2on]  strong {
    color: var(--text-heading);
    font-weight: var(--fw-bold);
}

.player__notes-body[b-6axht2o2on]  a {
    color: var(--brand-pressed);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.player__notes-body[b-6axht2o2on]  a:hover {
    color: var(--brand);
}

.player__notes-body[b-6axht2o2on]  blockquote {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
    border-left: 3px solid var(--brand-tint);
    color: var(--text-muted);
    font-style: italic;
}

/* Kicker + Lektionsliste: nur Desktop — Mobil bleibt unverändert. */
.player__kicker[b-6axht2o2on] {
    display: none;
}

.player__rail[b-6axht2o2on] {
    display: none;
}

/* ---- Desktop (ab 900 px): Video groß links, Lektionsliste rechts ---- */
@media (min-width: 900px) {
    .player[b-6axht2o2on] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--sp-6);
        align-items: start;
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: var(--sp-6) var(--sp-5) var(--sp-8);
    }

    .player__inner[b-6axht2o2on] {
        max-width: none;
    }

    .player__kicker[b-6axht2o2on] {
        display: block;
        margin-bottom: calc(-1 * var(--sp-3));
    }

    .player__rail[b-6axht2o2on] {
        position: sticky;
        top: var(--sp-5);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .player__rail-head[b-6axht2o2on] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--sp-4) var(--sp-5) var(--sp-3);
        border-bottom: 1px solid var(--border);
    }

    .player__rail-course[b-6axht2o2on] {
        font-family: var(--font-display);
        font-size: var(--fs-h4);
        color: var(--text-heading);
    }

    .player__rail-list[b-6axht2o2on] {
        list-style: none;
        margin: 0;
        padding: var(--sp-2);
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: 26rem;
        overflow-y: auto;
    }

    .player__rail-item[b-6axht2o2on] {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-body);
    }

    .player__rail-item:hover[b-6axht2o2on] {
        background: var(--surface-inset);
        text-decoration: none;
    }

    .player__rail-idx[b-6axht2o2on] {
        flex: none;
        width: 1.75rem;
        height: 1.75rem;
        display: grid;
        place-items: center;
        border-radius: var(--radius-pill);
        background: var(--bg-band);
        color: var(--text-muted);
        font-weight: var(--fw-bold);
        font-size: var(--fs-xs);
    }

    .player__rail-name[b-6axht2o2on] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
    }

    .player__rail-tag[b-6axht2o2on] {
        margin-left: auto;
        flex: none;
        font-size: 0.62rem;
        font-weight: var(--fw-heavy);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .player__rail-item--done .player__rail-idx[b-6axht2o2on] {
        background: var(--success-bg);
        color: var(--success);
    }

    .player__rail-item--done .player__rail-name[b-6axht2o2on] {
        color: var(--text-muted);
    }

    .player__rail-item--now[b-6axht2o2on] {
        background: var(--brand-tint);
    }

    .player__rail-item--now:hover[b-6axht2o2on] {
        background: var(--brand-tint);
    }

    .player__rail-item--now .player__rail-idx[b-6axht2o2on] {
        background: var(--brand);
        color: var(--text-on-brand);
    }

    .player__rail-item--now .player__rail-name[b-6axht2o2on] {
        color: var(--brand-pressed);
        font-weight: var(--fw-bold);
    }

    .player__rail-item--now .player__rail-tag[b-6axht2o2on] {
        color: var(--brand);
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profil[b-sh6gf5b5n2] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) 7rem;
}

.profil__inner[b-sh6gf5b5n2] {
    margin: auto 0;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profil__name[b-sh6gf5b5n2] {
    font-size: var(--fs-h2);
    margin: var(--sp-2) 0 0;
}

.profil__email[b-sh6gf5b5n2] {
    color: var(--text-body);
    margin: var(--sp-1) 0 0;
    overflow-wrap: anywhere;
}

.profil__success[b-sh6gf5b5n2] {
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    margin-top: var(--sp-4);
    width: 100%;
}

.profil__error[b-sh6gf5b5n2] {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    margin-top: var(--sp-4);
    width: 100%;
}

.profil__actions[b-sh6gf5b5n2] {
    margin-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
}

.profil__btn[b-sh6gf5b5n2] {
    width: 100%;
}

/* Zurückhaltend, nicht rot: destruktiv, aber kein Alarm auf der Profilseite. */
.profil__delete[b-sh6gf5b5n2] {
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profil__delete:hover[b-sh6gf5b5n2],
.profil__delete:focus-visible[b-sh6gf5b5n2] {
    color: var(--danger);
}

/* ---- Desktop (ab 900 px): bleibt zentriert, ohne Bottom-Nav-Freiraum ---- */
@media (min-width: 900px) {
    .profil[b-sh6gf5b5n2] {
        padding-bottom: var(--sp-7);
    }

    .profil__inner[b-sh6gf5b5n2] {
        max-width: 28rem;
    }

    .profil__actions[b-sh6gf5b5n2] {
        flex-direction: row;
    }

    .profil__actions form[b-sh6gf5b5n2] {
        flex: 1;
    }
}
/* /Components/Pages/SetPassword.razor.rz.scp.css */
.setpw[b-23p6zgtae3] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
}

.setpw__inner[b-23p6zgtae3] {
    margin: auto 0;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.setpw__logo[b-23p6zgtae3] {
    height: 7rem;
    width: auto;
}

.setpw__script[b-23p6zgtae3] {
    margin-top: var(--sp-5);
    font-size: 1.4rem;
}

.setpw__title[b-23p6zgtae3] {
    margin-top: var(--sp-2);
    font-size: var(--fs-h2);
}

.setpw__lead[b-23p6zgtae3] {
    margin-top: var(--sp-2);
    color: var(--text-body);
}

/* ::deep, weil EditForm als Kindkomponente kein CSS-Scope-Attribut erhält */
.setpw__inner[b-23p6zgtae3]  .setpw__form {
    margin-top: var(--sp-4);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    text-align: left;
}

.setpw__error[b-23p6zgtae3] {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
}

.setpw__submit[b-23p6zgtae3] {
    width: 100%;
}
/* /Components/SiteFooter.razor.rz.scp.css */
.site-footer[b-f9lkydpd16] {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.site-footer__legal[b-f9lkydpd16] {
    display: flex;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.site-footer__legal a[b-f9lkydpd16] {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__legal a:hover[b-f9lkydpd16] {
    color: var(--text-body);
}

.site-footer__heart[b-f9lkydpd16] {
    color: #E5847A;
}
/* /Components/TopNav.razor.rz.scp.css */
/* Mobil unsichtbar — dort navigiert die Bottom-Nav (ViewerNav). */
.topnav[b-ew1jq5p14x] {
    display: none;
}

@media (min-width: 900px) {
    .topnav[b-ew1jq5p14x] {
        display: block;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border);
    }

    .topnav__inner[b-ew1jq5p14x] {
        max-width: var(--container);
        margin: 0 auto;
        padding: var(--sp-3) var(--sp-5);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-6);
    }

    .topnav__logo[b-ew1jq5p14x] {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        text-decoration: none;
    }

    .topnav__logo:hover[b-ew1jq5p14x] {
        text-decoration: none;
    }

    /* Emblem aus dem Marken-Lockup, rund maskiert. */
    .topnav__logo-img[b-ew1jq5p14x] {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        object-fit: cover;
        object-position: center 42%;
        flex-shrink: 0;
    }

    .topnav__logo-words[b-ew1jq5p14x] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .topnav__script[b-ew1jq5p14x] {
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .topnav__eyebrow[b-ew1jq5p14x] {
        font-size: 0.6rem;
        font-weight: var(--fw-heavy);
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .topnav__links[b-ew1jq5p14x] {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .topnav__link[b-ew1jq5p14x] {
        padding: 0.55rem 1.15rem;
        border-radius: var(--radius-pill);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--text-muted);
        text-decoration: none;
    }

    .topnav__link:hover[b-ew1jq5p14x] {
        color: var(--brand-pressed);
        text-decoration: none;
    }

    .topnav__link--on[b-ew1jq5p14x] {
        background: var(--brand-tint);
        color: var(--brand-pressed);
    }

    /* ::deep, weil AuthorizeView als Kindkomponente rendert */
    .topnav__links[b-ew1jq5p14x]  .topnav__admin {
        padding: 0.5rem 1.15rem;
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--sage-300);
        color: var(--sage-700);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        text-decoration: none;
        margin-left: var(--sp-2);
    }

    .topnav__links[b-ew1jq5p14x]  .topnav__admin:hover {
        background: var(--accent-tint);
        text-decoration: none;
    }

    .topnav__links[b-ew1jq5p14x]  .topnav__admin--on,
    .topnav__links[b-ew1jq5p14x]  .topnav__admin--on:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-on-brand);
    }
}
/* /Components/UploadBox.razor.rz.scp.css */
.ubox[b-202eu72rmq] {
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: flex-start;
}

.ubox__heading[b-202eu72rmq] {
    font-size: var(--fs-h4);
    margin: 0;
}

.ubox__error[b-202eu72rmq] {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    width: 100%;
}

.ubox__fields[b-202eu72rmq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-4);
    width: 100%;
}

.ubox__file[b-202eu72rmq] {
    padding: 0.6rem 1rem;
}
/* /Components/ViewerNav.razor.rz.scp.css */
.vnav[b-sd0vqlb2df] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    background: var(--surface-card);
    border-top: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(60, 44, 28, 0.06);
}

/* NavLink rendert <a> ohne Scope-Attribut → ::deep */
.vnav[b-sd0vqlb2df]  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 5.5rem;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    text-decoration: none;
}

.vnav[b-sd0vqlb2df]  a:hover {
    color: var(--brand-pressed);
    text-decoration: none;
}

.vnav[b-sd0vqlb2df]  a.active {
    color: var(--brand-pressed);
    background: var(--brand-tint);
}

.vnav[b-sd0vqlb2df]  .vnav__icon {
    width: 1.4rem;
    height: 1.4rem;
}

/* Ab 900 px übernimmt die TopNav — Bottom-Nav ist rein mobil.
   Nach den Basis-Regeln, damit die Ausblendung im Cascade gewinnt. */
@media (min-width: 900px) {
    .vnav[b-sd0vqlb2df] {
        display: none;
    }
}