/* /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/AdminContentEdit.razor.rz.scp.css */
/* Wrapper: trägt den Scope dieser Datei als echter Vorfahre, layout-neutral
   (Muster aus AdminCourseEdit.razor.css). */
.acedit[b-elbwdej1oc] {
    display: contents;
}

.acedit__card[b-elbwdej1oc] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    max-width: 44rem;
}

.acedit__buttons[b-elbwdej1oc] {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

.acedit__delete-summary[b-elbwdej1oc] {
    margin: 0 0 var(--sp-4);
    color: var(--text-body);
}

.acedit__dialog-actions[b-elbwdej1oc] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

.acedit__confirm-delete[b-elbwdej1oc] {
    background: var(--danger);
    color: var(--white);
}
/* /Components/Pages/Admin/AdminCourseEdit.razor.rz.scp.css */
/* Wrapper: trägt den Scope dieser Datei als echter Vorfahre, layout-neutral. */
.acedit[b-fwtl04l39s] {
    display: contents;
}

/* ::deep: class steht auf EditForm/InputTextArea (Blazor-Komponenten) — das
   rendernde <form>/<textarea> stammt aus deren eigenem Code, nicht aus dieser
   Datei, und trägt daher nicht deren CSS-Isolation-Scope (vgl. Kommentar in
   AdminMenu.razor.css). `.acedit` als Vorfahre gibt ::deep einen Scope-Anker
   (Muster aus AdminCourses.razor.css). */
.acedit[b-fwtl04l39s]  .acedit__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

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

.acedit__dialog-actions[b-fwtl04l39s] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

.acedit__confirm-delete[b-fwtl04l39s] {
    background: var(--danger);
    color: var(--white);
}

.acedit__delete-summary[b-fwtl04l39s] {
    margin: 0 0 var(--sp-4);
    color: var(--text-body);
}

/* Kein max-width mehr (Befund A) — Abschnittsbereich nutzt die volle
   Inhaltsbreite wie die Listen der übrigen Admin-Seiten (Kurse, Nutzerinnen);
   sonst wirkt „+ Abschnitt" mittig statt rechtsbündig, rechts bleibt totes Weiß. */
.acedit__lessons-head[b-fwtl04l39s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.acedit__empty[b-fwtl04l39s] {
    color: var(--text-muted);
    margin: 0 0 var(--sp-5);
}

/* Erklärtext unter einem Eingabefeld (Standard-Laufzeit, #97). */
.pm-field__hint[b-fwtl04l39s] {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Abschnittsblock: eine Karte je Abschnitt, Inhalte darunter (#98). */
.acedit__section[b-fwtl04l39s] {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
}

.acedit__section-head[b-fwtl04l39s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.acedit__section-title[b-fwtl04l39s] {
    font: var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-display);
    margin: 0;
}

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

.acedit__empty[b-fwtl04l39s],
.acedit__error[b-fwtl04l39s] {
    margin: var(--sp-3) 0;
    font-size: var(--fs-sm);
}

.acedit__error[b-fwtl04l39s] {
    color: var(--accent);
    font-weight: var(--fw-heavy);
}

/* Befund C: mobil darf der Titel mehrzeilig umbrechen und Typ/Status
   darunter stehen, aber das ⋯-Menü bleibt oben rechts in der Zeile
   verankert statt darunter abzureißen. Nur diese Seite betroffen —
   .acont__row & Co. sind zwar global in app.css definiert, aber diese
   <li>/<span>-Elemente werden direkt von dieser Komponente gerendert und
   tragen daher deren CSS-Isolation-Scope; kein ::deep nötig, kein Leck
   auf die Dokumente-Seite. */
.acont__row[b-fwtl04l39s] {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.acont__info[b-fwtl04l39s] {
    flex: 1 1 auto;
}

.acont__actions[b-fwtl04l39s] {
    flex: 0 0 auto;
}
/* /Components/Pages/Admin/AdminCourses.razor.rz.scp.css */
/* Wrapper: mobil layout-neutral, ab 900 px zweispaltig. */
.acourses[b-c03fzy0qy8] {
    display: contents;
}

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

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

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

.acourses__dialog-actions[b-c03fzy0qy8] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

.acourses__confirm-delete[b-c03fzy0qy8] {
    background: var(--danger);
    color: var(--white);
}

.acourses__delete-summary[b-c03fzy0qy8] {
    margin: 0 0 var(--sp-4);
    color: var(--text-body);
}

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

.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;
}

/* flex-basis 0 statt auto: bei flex-wrap zählt sonst die max-content-Breite
   einer langen Beschreibung, und die Aktionen brechen unter den Text nach
   links um — das Menü-Panel (right: 0) ragt dann links aus dem Viewport. */
.acourses__info[b-c03fzy0qy8] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 0;
    min-width: 0;
}

.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);
}

/* Gleiches Trefferfeld und Hover-Verhalten wie der Menü-Toggle (.amenu__toggle). */
.acourses__edit[b-c03fzy0qy8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--fs-h3);
    line-height: 1;
    text-decoration: none;
}

.acourses__edit:hover[b-c03fzy0qy8] {
    background: var(--brand-tint);
    color: var(--text-heading);
}

.acourses__edit:focus-visible[b-c03fzy0qy8] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- Desktop (ab 900 px): Liste wirkt wie eine Tabelle ---- */
@media (min-width: 900px) {
    /* Bewusst kein overflow: hidden — das würde ein absolut positioniertes
       Menü-Panel (.amenu__panel, künftig auch hier per Zeilen-Aktion)
       beschneiden, sobald es über den Rand der Liste hinausragt. Die
       runden Ecken kommen stattdessen gezielt von erster und letzter Zeile. */
    .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);
    }

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

    .acourses__row + .acourses__row[b-c03fzy0qy8] {
        border-top: 1px solid var(--border);
    }

    /* Ohne overflow: hidden auf .acourses__rows müssten erste und letzte
       Zeile ihre eigene (quadratische) Fläche sonst über die runden Ecken
       der Liste hinausschieben. Deshalb runden sie ihre Ecken selbst,
       passend zum Radius von .acourses__rows. */
    .acourses__row:first-child[b-c03fzy0qy8] {
        border-top-left-radius: var(--radius-md);
        border-top-right-radius: var(--radius-md);
    }

    .acourses__row:last-child[b-c03fzy0qy8] {
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
    }
}
/* /Components/Pages/Admin/AdminDocuments.razor.rz.scp.css */
/* Wrapper: trägt den Scope dieser Datei als echter Vorfahre, layout-neutral
   (Muster aus AdminCourseEdit.razor.css). */
.adocs[b-kieayh5iq3] {
    display: contents;
}

.adocs__delete-summary[b-kieayh5iq3] {
    margin: 0 0 var(--sp-4);
    color: var(--text-body);
}

.adocs__dialog-actions[b-kieayh5iq3] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

.adocs__confirm-delete[b-kieayh5iq3] {
    background: var(--danger);
    color: var(--white);
}

.adocs__empty[b-kieayh5iq3] {
    color: var(--text-muted);
    margin: var(--sp-4) 0 0;
}

/* Gruppierung nach Kurs und Abschnitt (#98). */
.adocs__group[b-kieayh5iq3] {
    margin-bottom: var(--sp-4);
}

.adocs__grouptitle[b-kieayh5iq3] {
    font-size: var(--fs-sm);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.adocs__section[b-kieayh5iq3] {
    font-weight: var(--fw-normal);
    text-transform: none;
    letter-spacing: normal;
}
/* /Components/Pages/Admin/AdminUserDetail.razor.rz.scp.css */
/* Wrapper: trägt den Scope dieser Datei als echter Vorfahre, layout-neutral. */
.auser[b-peszfwmolw] {
    display: contents;
}

.auser__section[b-peszfwmolw] {
    margin-top: var(--sp-6);
}

.auser__section-head[b-peszfwmolw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.auser__heading[b-peszfwmolw] {
    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: 0;
}

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

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

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

.auser__meta[b-peszfwmolw] {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.auser__expired[b-peszfwmolw] {
    color: var(--danger);
}

.auser__dialog-actions[b-peszfwmolw] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

.auser__delete-summary[b-peszfwmolw] {
    margin: 0 0 var(--sp-4);
    color: var(--text-body);
}

.auser__confirm-danger[b-peszfwmolw] {
    background: var(--danger);
    color: var(--white);
}

.auser__empty[b-peszfwmolw] {
    color: var(--text-muted);
    margin: 0 0 var(--sp-5);
}
/* /Components/Pages/Admin/AdminUsers.razor.rz.scp.css */
.ausers__dialog-actions[b-7etvulhkkr] {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-5);
}

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

/* ::deep, weil EditForm als Kindkomponente kein CSS-Scope-Attribut erhält */
.ausers[b-7etvulhkkr]  .ausers__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: flex-start;
}

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

.ausers__error[b-7etvulhkkr] {
    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);
}

/* Wrapper: Seitenkopf über volle Breite, darunter die Liste. Kein
   Zweispalten-Raster mehr — das stammte aus der Zeit, in der links ein
   Anlege-Formular stand; das Formular lebt jetzt im AdminDialog. */
.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__grants[b-7etvulhkkr] {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.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);
}

/* ---- Desktop (ab 1140 px): Liste als dreispaltige Tabelle über volle
   Breite; darunter bleibt die Karten-Ansicht. ---- */
@media (min-width: 1140px) {
    /* 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.
       Bewusst kein overflow: hidden — das würde das absolut positionierte
       Menü-Panel (.amenu__panel) einer Zeile beschneiden, sobald es über
       den Rand der Liste hinausragt (z. B. bei der letzten Zeile). Die
       runden Ecken kommen stattdessen gezielt von Kopf- und letzter Zeile. */
    .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);
    }

    /* 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);
    }

    /* Ohne overflow: hidden auf .ausers__rows müsste die letzte Zeile ihre
       eigene (quadratische) Fläche sonst über die runde untere Ecke der
       Liste hinausschieben. Deshalb rundet sie ihre unteren Ecken selbst,
       passend zum Radius von .ausers__rows. */
    .ausers__row:last-child[b-7etvulhkkr] {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
}
/* /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;
    }
}

/* Abschnittskarten als Einstieg in den Kurs (#98). */
.course__sections[b-sm66ccmnlm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.course__section-card[b-sm66ccmnlm] {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-3);
    text-decoration: none;
    color: inherit;
}

.course__section-title[b-sm66ccmnlm] {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
}

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

.course__section-bar[b-sm66ccmnlm] {
    display: block;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--bg-band);
    overflow: hidden;
}

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

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

.course__empty[b-sm66ccmnlm] {
    color: var(--text-muted);
}
/* /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);
    }
}

/* Abgelaufener Zugriff: sichtbar, aber nicht mehr zu öffnen (#97). */
.docs__item--locked[b-yeb1exymqm] {
    cursor: default;
    opacity: 0.72;
}

.docs__item-expired[b-yeb1exymqm] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}
/* /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;
    }
}

/* Abgelaufener Zugriff: Karte bleibt sichtbar, wirkt aber inaktiv (#97). */
.welcome__course--locked[b-snw51jqhpn] {
    cursor: default;
    opacity: 0.72;
}

.welcome__course-expired[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(--text-muted);
}
/* /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);
}

/* Dokument-Detail: nimmt den Platz des Videos ein, PDF öffnet per Klick. */
.player__doc[b-6axht2o2on] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-5);
}

.player__doc-ico[b-6axht2o2on] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    color: var(--text-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.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);
    }

    /* Scroll-Container um die gesamte gruppierte Liste (alle Sections) —
       begrenzt die Rail als Ganzes, damit die sticky-Positionierung bei
       mehreren Abschnitten nicht über den Viewport hinauswächst. Die
       Section-Überschriften bleiben Teil des Scrollbereichs und scrollen
       mit ihren Items statt außerhalb angepinnt zu sein. */
    .player__rail-body[b-6axht2o2on] {
        max-height: 26rem;
        overflow-y: auto;
    }

    /* Abschnittsüberschrift zwischen den Listen — dezent, kein eigener
       Rahmen; trennt die Lektionen optisch nach Abschnitt (Woche 1, 2, …). */
    .player__rail-section[b-6axht2o2on] {
        margin: 0;
        padding: var(--sp-3) var(--sp-5) var(--sp-1);
        font-size: var(--fs-xs);
        font-weight: var(--fw-heavy);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

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

    .player__rail-list + .player__rail-section[b-6axht2o2on] {
        border-top: 1px solid var(--border);
    }

    .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/SectionView.razor.rz.scp.css */
.section[b-vf87hh8k2n] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: var(--sp-4) var(--sp-3) calc(var(--sp-6) + 4rem);
}

.section__topnav[b-vf87hh8k2n] {
    margin-bottom: var(--sp-2);
}

.section__back-top[b-vf87hh8k2n] {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.section__hero[b-vf87hh8k2n] {
    margin-bottom: var(--sp-4);
}

.section__title[b-vf87hh8k2n] {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    margin: 0;
}

.section__list[b-vf87hh8k2n] {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.section__item[b-vf87hh8k2n] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    text-decoration: none;
    color: inherit;
}

.section__item-index[b-vf87hh8k2n] {
    font-family: var(--font-display);
    color: var(--accent);
}

.section__item-body[b-vf87hh8k2n] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section__item-type[b-vf87hh8k2n],
.section__item-done[b-vf87hh8k2n] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

.section__empty[b-vf87hh8k2n] {
    color: var(--text-muted);
}

@media (min-width: 900px) {
    .section[b-vf87hh8k2n] {
        max-width: 60rem;
        margin: 0 auto;
        padding-bottom: var(--sp-6);
    }
}
/* /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/Shared/AdminBanner.razor.rz.scp.css */
.abanner[b-u7r8btpgiv] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font: var(--fw-medium) var(--fs-sm)/var(--lh-normal) var(--font-body);
}

.abanner--ok[b-u7r8btpgiv] {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--sage-700);
}

.abanner--err[b-u7r8btpgiv] {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.abanner__icon[b-u7r8btpgiv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--white);
    font-weight: var(--fw-bold);
}

.abanner__text[b-u7r8btpgiv] {
    flex: 1 1 auto;
}

.abanner__close[b-u7r8btpgiv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* 44px Tap-Target auch auf dem Handy. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 0;
    color: inherit;
    text-decoration: none;
}
/* /Components/Shared/AdminDialog.razor.rz.scp.css */
/* Serverseitig gerendertes <dialog open> ist nicht modal — die Fixierung
   übernimmt deshalb das CSS, nicht der Browser. */
.adlg[open][b-fm73daaix1] {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: none;
    /* Deckt den Schleier allein ab: das Element selbst ist immer positioniert (fixed,
       volle Fläche), egal ob showModal() lief oder nicht. Kein zusätzlicher Schleier auf
       ::backdrop — der käme nur zustande, wenn JavaScript den Dialog modal geöffnet hat,
       und würde sich mit diesem hier zu spürbar dunklerer Optik aufaddieren (~0.70 statt
       0.45 Deckkraft) — der Dialog sähe je nach JS-Zustand unterschiedlich dunkel aus. */
    background: var(--scrim-modal);
}

.adlg:not([open])[b-fm73daaix1] {
    display: none;
}

.adlg__panel[b-fm73daaix1] {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: var(--sp-5);
    background: var(--surface-card);
    /* Mobil als Sheet von unten, ab Tablet als zentrierte Karte. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
}

.adlg__head[b-fm73daaix1] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.adlg__title[b-fm73daaix1] {
    flex: 1 1 auto;
    margin: 0;
    font: var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-display);
    color: var(--text-heading);
}

.adlg--danger .adlg__title[b-fm73daaix1] {
    color: var(--danger);
}

.adlg__close[b-fm73daaix1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: calc(var(--sp-2) * -1);
    color: var(--text-muted);
    text-decoration: none;
}

@media (min-width: 700px) {
    .adlg[open][b-fm73daaix1] {
        align-items: center;
    }

    .adlg__panel[b-fm73daaix1] {
        max-width: 32rem;
        border-radius: var(--radius-lg);
    }
}
/* /Components/Shared/AdminMenu.razor.rz.scp.css */
.amenu[b-6m5it70clg] {
    position: relative;
}

.amenu__toggle[b-6m5it70clg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.amenu__toggle[b-6m5it70clg]::-webkit-details-marker {
    display: none;
}

.amenu__toggle:hover[b-6m5it70clg] {
    background: var(--brand-tint);
    color: var(--text-heading);
}

.amenu__toggle:focus-visible[b-6m5it70clg] {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.amenu__panel[b-6m5it70clg] {
    position: absolute;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: var(--sp-2);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Einträge sind Links oder Buttons in Mini-Formularen — beide gleich gestalten.
   ::deep ist hier Pflicht: der ChildContent kommt von außen (aus der Seite, die
   AdminMenu einbindet) und trägt deshalb nicht das CSS-Isolation-Scope-Attribut
   von AdminMenu. Ohne ::deep würde Blazor es an "a"/"button" anhängen und die
   Regel liefe ins Leere — sichtbar am ungestylten "Erneut einladen"-Button.

   Bewusst ohne Test (Punkt 4 im Abschluss-Review): Blazor stempelt das Scope-
   Attribut auf ausgelieferte Elemente unabhängig davon, ob eine Regel ::deep
   nutzt oder nicht — ein HTML-Test kann also weder "Scope-Attribut vorhanden"
   noch "::deep steht im Quelltext" ehrlich als Beleg für "die Regel greift
   tatsächlich" verwenden. Ob ::deep wirkt, ist CSS-Selektor-Semantik, die nur
   ein echter Browser/CSS-Parser beantworten kann, kein Regex über Markup oder
   Quelltext. Die vormals vorhandenen zwei Tests (Scope-Vergleich per Regex,
   Quelltext-Grep auf "::deep") wurden deshalb ersatzlos gestrichen statt durch
   eine neue, gleichermaßen unehrliche Markup-Prüfung ersetzt. */
.amenu__panel[b-6m5it70clg]  a,
.amenu__panel[b-6m5it70clg]  button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--sp-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-body);
    font: var(--fw-medium) var(--fs-sm)/1 var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.amenu__panel[b-6m5it70clg]  a:hover,
.amenu__panel[b-6m5it70clg]  button:hover {
    background: var(--surface-inset);
    color: var(--text-heading);
}

/* Noch ohne Konsumenten und ohne Testabdeckung (Stand Admin-UX-Bausteine): der einzige
   bisherige Menüeintrag ist "Erneut einladen" auf der Nutzerinnen-Liste, und der ist
   bewusst NICHT danger — er ist nicht destruktiv. Der erste echte Konsument (ein
   "Löschen"-Eintrag) kommt mit der Kurs-Arbeitsseite (Schritt 2); ihn hier künstlich
   vorwegzunehmen würde nur einen Fake-Test rechtfertigen, keinen echten. */
.amenu__panel[b-6m5it70clg]  .amenu__danger {
    color: var(--danger);
}
/* /Components/Shared/AdminPageHeader.razor.rz.scp.css */
.apghead[b-qprruzu5d2] {
    margin-bottom: var(--sp-5);
}

.apghead__crumb[b-qprruzu5d2] {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

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

.apghead__title[b-qprruzu5d2] {
    flex: 1 1 12rem;
    margin: 0;
    font: var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-display);
    letter-spacing: var(--ls-tight);
    color: var(--text-heading);
}

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

.apghead__lead[b-qprruzu5d2] {
    margin: var(--sp-3) 0 0;
    max-width: var(--container-narrow);
    color: var(--text-body);
}
/* /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;
    /* Schmalerer gap/Padding seit dem 4. Tab (Verwaltung): 4 × 5.5rem
       min-width + alter gap/padding sprengten 390px knapp (~400px). */
    gap: var(--sp-1);
    background: var(--surface-card);
    border-top: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-2) 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;
    /* 4.5rem statt vorher 5.5rem: passt 4 Tabs samt Icon+Label
       verlässlich unter 390px (Tap-Target bleibt ≥44px hoch). */
    min-width: 4.5rem;
    padding: var(--sp-2) var(--sp-1);
    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;
    }
}