/* /Components/Dashboard/KpiCard.razor.rz.scp.css */
/* KPI-Karte: padding 20px, Zahl 600/28px tabular-nums (ds-stat), Label uppercase 12px
   (ds-stat-label) -- Handoff §6.3/§11. */

.kpi-card[b-bfokek8zfk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-10);
    text-decoration: none;
    color: inherit;
}

.kpi-card--clickable[b-bfokek8zfk] {
    cursor: pointer;
}

.kpi-card--clickable:hover[b-bfokek8zfk] {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.kpi-card__value[b-bfokek8zfk] {
    display: block;
}

/* "Aktion bei dir": Zahl in Warnfarbe (Auftrag A Punkt 2). */
.kpi-card__value--warning[b-bfokek8zfk] {
    color: var(--warning-fg);
}
/* /Components/Dashboard/OnboardingProgressCard.razor.rz.scp.css */
/* "Onboarding-Fortschritt" (Handoff §6.3 Punkt 4): 6px Balken + Meilenstein-Spalten
   (18px Nummernkreis, Titel 500/12,5px, Datum darunter eingerueckt). */

.progress-card__body[b-yniyi3bt94] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.progress-card__bar[b-yniyi3bt94] {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.progress-card__bar-fill[b-yniyi3bt94] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-500);
    transition: width 260ms ease;
}

.progress-card__milestones[b-yniyi3bt94] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-8);
}

.milestone[b-yniyi3bt94] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.milestone__head[b-yniyi3bt94] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.milestone__circle[b-yniyi3bt94] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10px var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.milestone__circle--done[b-yniyi3bt94] {
    background: var(--success-bg);
    color: var(--success-fg);
}

.milestone__circle--in-progress[b-yniyi3bt94] {
    background: var(--brand-primary-500);
    color: var(--text-on-brand);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.milestone__circle--planned[b-yniyi3bt94] {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.milestone__title[b-yniyi3bt94] {
    font: var(--type-label);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Datum darunter, um Nummernkreis + Gap (18px + 8px) eingerueckt -- Handoff §6.3 Punkt 4. */
.milestone__date[b-yniyi3bt94] {
    padding-left: 26px;
    font: var(--type-label-hint);
    color: var(--text-muted);
}
/* /Components/Dashboard/RecentlyUpdatedCard.razor.rz.scp.css */
/* "Zuletzt aktualisiert" (Handoff §6.3 Punkt 5): Titel + Bereichs-Pill + Status-Pill +
   Zeitangabe (88px, rechtsbuendig). Keine Mono-Nummernspalte (siehe Kommentar in .razor). */

.recent-card__rows[b-2594g0i25c] {
    display: flex;
    flex-direction: column;
}

.recent-card__row[b-2594g0i25c] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-10);
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.recent-card__row:first-child[b-2594g0i25c] {
    border-top: none;
}

.recent-card__row:hover[b-2594g0i25c] {
    background: var(--surface-hover);
}

.recent-card__title[b-2594g0i25c] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-label);
    color: var(--text-primary);
}

.recent-card__time[b-2594g0i25c] {
    flex-shrink: 0;
    width: 88px;
    text-align: right;
    font: var(--type-label-hint);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/Dashboard/WaitingForYouCard.razor.rz.scp.css */
/* "Diese Punkte warten auf dich" (Handoff §6.3 Punkt 3): Zeilen 14x20px, Bereichs-Pill +
   Titel (Ellipsis) + Chevron. Keine Prioritaets-Spalte (siehe Kommentar in der .razor-Datei). */

.waiting-card__hint[b-tvsbl6smxd] {
    font: var(--type-body-sm);
    color: var(--text-muted);
    text-align: right;
}

.waiting-card__rows[b-tvsbl6smxd] {
    display: flex;
    flex-direction: column;
}

.waiting-card__row[b-tvsbl6smxd] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-7) var(--space-10);
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.waiting-card__row:first-child[b-tvsbl6smxd] {
    border-top: none;
}

.waiting-card__row:hover[b-tvsbl6smxd] {
    background: var(--surface-hover);
}

.waiting-card__title[b-tvsbl6smxd] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-label);
    color: var(--text-primary);
}

.waiting-card__chevron[b-tvsbl6smxd] {
    flex-shrink: 0;
    color: var(--text-muted);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App-Shell: Sidebar 240px + Topbar 64px + Content (Handoff §5, §11). */

/* Feste Rahmenhöhe statt min-height: nur so wird .app-content tatsächlich zum
   Scroll-Container (dort steht bereits overflow-y: auto, was ohne begrenzte Höhe nie greift).
   Vorher scrollte das Dokument, wodurch Sidebar und Topbar mit weggescrollt sind und das
   haftende Detailpanel keinen verlässlichen Bezugspunkt hatte. */
.app-shell[b-dn1ivf9g75] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-app);
}

.app-shell__sidebar[b-dn1ivf9g75] {
    flex-shrink: 0;
    width: 240px;
    height: 100%;
    overflow-y: auto;
}

.app-shell__main[b-dn1ivf9g75] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* --- Topbar (64px, Handoff §5/§11) ------------------------------------- */

.app-topbar[b-dn1ivf9g75] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-8);
    height: 64px;
    /* Zwingend, seit .app-shell eine feste Höhe hat: als Flex-Element in einer Spalte mit
       begrenzter Höhe wäre die Topbar sonst schrumpfbar und wurde auf 37px gequetscht. */
    flex-shrink: 0;
    padding: 0 var(--space-16);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-topbar__firm[b-dn1ivf9g75] {
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-card-header);
    color: var(--text-primary);
}

.app-topbar__phase[b-dn1ivf9g75] {
    justify-self: center;
}

.app-topbar__phase-dot[b-dn1ivf9g75] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--brand-accent);
}

.app-topbar__actions[b-dn1ivf9g75] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    justify-self: end;
}

/* --- Content (padding 32px, max-width 1920px, zentriert) --------------- */

.app-content[b-dn1ivf9g75] {
    flex: 1 1 auto;
    /* Ohne min-height: 0 wächst ein Flex-Element mit seinem Inhalt und overflow greift nicht. */
    min-height: 0;
    overflow-y: auto;
}

.app-content__inner[b-dn1ivf9g75] {
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
}

/* --- Framework-Fehlerbanner (#blazor-error-ui), an Tokens angepasst ----- */

#blazor-error-ui[b-dn1ivf9g75] {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
    padding: var(--space-8) var(--space-16);
    box-shadow: var(--shadow-md);
}

    #blazor-error-ui .reload[b-dn1ivf9g75] {
        color: var(--danger-text);
        font-weight: 600;
        text-decoration: underline;
        margin-left: var(--space-6);
    }

    #blazor-error-ui .dismiss[b-dn1ivf9g75] {
        cursor: pointer;
        float: right;
        color: var(--danger-text);
    }

/* --- Mobil (< 900px, Requirements §7): nicht zusammenbrechen, nur ausblenden --- */

@media (max-width: 899px) {
    .app-shell__sidebar[b-dn1ivf9g75] {
        display: none;
    }

    .app-topbar[b-dn1ivf9g75] {
        grid-template-columns: auto 1fr auto;
        padding: 0 var(--space-8);
    }

    .app-topbar__firm[b-dn1ivf9g75] {
        max-width: 40vw;
    }

    .app-content__inner[b-dn1ivf9g75] {
        padding: var(--space-8);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar nach Handoff §5.

   WICHTIG zu ::deep bei den Nav-Einträgen:
   Die Einträge werden von der Komponente <NavLink> gerendert. Blazors CSS-Isolation vergibt
   das Scope-Attribut (b-xxxxxxxxx) nur an HTML-Elemente, die direkt in DIESER .razor-Datei
   stehen — nicht an Elemente, die eine Kindkomponente erzeugt. Ohne ::deep trafen die Regeln
   für .ds-nav__item deshalb ins Leere: der Eintrag blieb display:inline, wodurch Icon und
   Beschriftung untereinander statt nebeneinander standen.
   Alle Selektoren, die auf von <NavLink> gerendertes Markup zielen, brauchen daher ::deep
   unterhalb eines Elements aus dieser Datei (hier .ds-nav bzw. .ds-nav__list). */

.ds-nav[b-81y9t39x1d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

/* --- Kopf: Initialen-Kachel + Kanzleiname ------------------------------- */

.ds-nav__header[b-81y9t39x1d] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-8) var(--space-6);
}

.ds-nav__logo[b-81y9t39x1d] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: var(--text-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 16px var(--font-ui);
}

.ds-nav__identity[b-81y9t39x1d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-nav__firm-name[b-81y9t39x1d] {
    font: var(--type-card-header);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-nav__firm-subtitle[b-81y9t39x1d] {
    font: var(--type-eyebrow);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Scrollbarer Mittelbereich mit den Nav-Gruppen ---------------------- */

.ds-nav__scroll[b-81y9t39x1d] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ds-nav__section-title[b-81y9t39x1d] {
    padding: 0 var(--space-6);
    margin-bottom: var(--space-3);
}

.ds-nav__list[b-81y9t39x1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-nav__list[b-81y9t39x1d]  .ds-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 36px;
    padding: 0 var(--space-6) 0 var(--space-8);
    border-radius: var(--radius-btn);
    font: var(--type-nav-item);
    color: var(--text-secondary);
    transition: background-color 120ms ease, color 120ms ease;
}

.ds-nav__list[b-81y9t39x1d]  .ds-nav__item:hover {
    background: var(--bg-subtle);
}

.ds-nav__list[b-81y9t39x1d]  .ds-nav__item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-nav__list[b-81y9t39x1d]  .ds-nav__item svg {
    flex-shrink: 0;
}

.ds-nav__list[b-81y9t39x1d]  .ds-nav__badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font: var(--type-badge);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Aktiver Eintrag (Handoff §7): Soft-Hintergrund, Primary-Text, 2px Streifen links. */
.ds-nav__list[b-81y9t39x1d]  .ds-nav__item.active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-500);
}

    .ds-nav__list[b-81y9t39x1d]  .ds-nav__item.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        border-radius: var(--radius-pill);
        background: var(--brand-primary-500);
    }

    .ds-nav__list[b-81y9t39x1d]  .ds-nav__item.active .ds-nav__badge {
        background: var(--surface);
        color: var(--brand-primary-500);
    }

/* --- Fussbereich: Wortmarke + Projektteam-Karte ------------------------- */

.ds-nav__footer[b-81y9t39x1d] {
    flex-shrink: 0;
    padding: var(--space-8);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ds-nav__wordmark[b-81y9t39x1d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
}

.ds-nav__wordmark-septeo[b-81y9t39x1d] {
    font: 700 13px var(--font-ui);
    color: var(--text-primary);
}

.ds-nav__wordmark-dot[b-81y9t39x1d] {
    width: 7px;
    height: 7px;
    background: var(--brand-accent);
}

.ds-nav__wordmark-cnee[b-81y9t39x1d] {
    font: 300 13px var(--font-ui);
    color: var(--text-muted);
}

.ds-nav__team-card[b-81y9t39x1d] {
    box-shadow: none;
}

.ds-nav__team-head[b-81y9t39x1d] {
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--border);
}

.ds-nav__team-list[b-81y9t39x1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
}

.ds-nav__team-member[b-81y9t39x1d] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ds-nav__avatar[b-81y9t39x1d] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-soft);
    color: var(--brand-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10.5px var(--font-ui);
}

.ds-nav__team-info[b-81y9t39x1d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-nav__team-name[b-81y9t39x1d] {
    font: var(--type-label);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-nav__team-role[b-81y9t39x1d] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Layout/PlainLayout.razor.rz.scp.css */
.plain-layout[b-gh3fcwjxvb] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app);
    padding: var(--space-16);
}

.plain-layout__inner[b-gh3fcwjxvb] {
    width: 100%;
    max-width: 480px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xwn7xpqx3r],
.components-reconnect-repeated-attempt-visible[b-xwn7xpqx3r],
.components-reconnect-failed-visible[b-xwn7xpqx3r],
.components-pause-visible[b-xwn7xpqx3r],
.components-resume-failed-visible[b-xwn7xpqx3r],
.components-rejoining-animation[b-xwn7xpqx3r] {
    display: none;
}

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


#components-reconnect-modal[b-xwn7xpqx3r] {
    background-color: white;
    width: 20rem;
    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-xwn7xpqx3r 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-xwn7xpqx3r {
    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/Pages/Benutzer.razor.rz.scp.css */
.page-head[b-v0j6l35mbf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- Kopf (Handoff §6.8): Titel/Subline links, Aktionen rechts. ----------------------- */
.benutzer-head[b-v0j6l35mbf] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.benutzer-head__intro[b-v0j6l35mbf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.benutzer-head__actions[b-v0j6l35mbf] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* --- Status-/Leerzustandskarten ------------------------------------------------------- */
.benutzer-status-card__body[b-v0j6l35mbf],
.empty-state__body[b-v0j6l35mbf] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.empty-state__body .ds-h2[b-v0j6l35mbf] {
    margin-top: var(--space-2);
}

.benutzer-status-card__body .ds-btn[b-v0j6l35mbf],
.empty-state__body .ds-btn[b-v0j6l35mbf] {
    margin-top: var(--space-8);
}

/* --- Fusshinweis (Handoff §6.8): Infobox --brand-primary-soft. ------------------------ */
.benutzer-footnote[b-v0j6l35mbf] {
    background: var(--brand-primary-soft);
    border-color: transparent;
}

.benutzer-footnote__body[b-v0j6l35mbf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.benutzer-footnote__icon[b-v0j6l35mbf] {
    flex: 0 0 auto;
    color: var(--brand-primary-500);
    margin-top: 2px;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page__body[b-til8xlwuix] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.error-page__request-id[b-til8xlwuix] {
    margin-top: var(--space-2);
}

.error-page__body .ds-btn[b-til8xlwuix] {
    margin-top: var(--space-8);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Login-Screen (Handoff §6.1, Requirements §5/§6/§7).

   position:fixed + inset:0 ueberlagert bewusst das gesamte Viewport:
   PlainLayout.razor (Elternlayout, siehe Components/Layout/PlainLayout.razor)
   zentriert seinen Inhalt mit max-width:480px -- passend fuer die schlichten
   Karten von /melden und /unbekannter-zugang, aber zu schmal fuer die
   Zweispalten-Markenflaeche dieses Screens. PlainLayout.razor liegt
   ausserhalb des Besitzbereichs dieses Auftrags und wird deshalb nicht
   geaendert; position:fixed loest das Platzproblem, ohne den Elternrahmen
   anzufassen (siehe Antwort-Report fuer die Einordnung als Abweichung).
   ============================================================ */
.login-screen[b-u59l67vm7j] {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-app);
}

/* --- Linke Spalte: Markenflaeche ---------------------------------------- */
.login-screen__brand[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px;
    background: var(--brand-primary);
    color: var(--text-on-brand);
    overflow-y: auto;
}

.login-screen__brand-top[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-screen__wordmark[b-u59l67vm7j] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.login-screen__wordmark-septeo[b-u59l67vm7j] {
    font: 700 20px/1.2 var(--font-ui);
}

.login-screen__wordmark-dot[b-u59l67vm7j] {
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--brand-accent);
}

.login-screen__wordmark-cnee[b-u59l67vm7j] {
    font: 300 20px/1.2 var(--font-ui);
}

.login-screen__eyebrow[b-u59l67vm7j] {
    font: 600 12px/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7d78a8; /* Handoff §6.1: Literalfarbe fuer die Eyebrow auf der Markenflaeche */
}

.login-screen__brand-middle[b-u59l67vm7j] {
    max-width: 440px;
}

.login-screen__headline[b-u59l67vm7j] {
    font: 600 32px/1.15 var(--font-ui);
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-12);
}

.login-screen__lead[b-u59l67vm7j] {
    font: var(--type-wizard-desc);
    color: #c7c3e0; /* Handoff §6.1: Literalfarbe fuer den Fliesstext auf der Markenflaeche */
    margin: 0 0 var(--space-12);
}

.login-screen__bullets[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.login-screen__bullets li[b-u59l67vm7j] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    font: var(--type-body-sm);
    color: #c7c3e0; /* siehe .login-screen__lead */
}

.login-screen__bullet-dot[b-u59l67vm7j] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--brand-accent);
}

.login-screen__footnote[b-u59l67vm7j] {
    max-width: 440px;
    font-size: 13px;
    line-height: 1.4;
    color: #7d78a8; /* siehe .login-screen__eyebrow */
}

/* --- Rechte Spalte: Formular --------------------------------------------- */
.login-screen__form-side[b-u59l67vm7j] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    overflow-y: auto;
}

.login-screen__form-wrap[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
    max-width: 390px;
}

.login-screen__identity[b-u59l67vm7j] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.login-screen__identity-tile[b-u59l67vm7j] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-btn);
    background: var(--brand-primary);
    color: var(--text-on-brand);
    font: 700 16px/1 var(--font-ui);
}

.login-screen__identity-name[b-u59l67vm7j] {
    font: var(--type-card-header);
    color: var(--text-primary);
}

.login-screen__identity-subtitle[b-u59l67vm7j] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-screen__pill[b-u59l67vm7j] {
    align-self: flex-start;
}

.login-screen__title[b-u59l67vm7j] {
    font: var(--type-h2-content);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.login-screen__subline[b-u59l67vm7j] {
    font: var(--type-page-subtitle);
    color: var(--text-muted);
}

.login-screen__form[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.login-screen__field[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.login-screen__code-input[b-u59l67vm7j] {
    height: 42px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
}

.login-screen__hint[b-u59l67vm7j] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.login-screen__error[b-u59l67vm7j] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.login-screen__error svg[b-u59l67vm7j] {
    flex: none;
    margin-top: 2px;
}

.login-screen__submit[b-u59l67vm7j] {
    width: 100%;
}

/* --- Hinweistext unter dem Primärbutton (Handoff §6.1, Auftrag Punkt 6b). ------------- */
.login-screen__code-lost-hint[b-u59l67vm7j] {
    font: var(--type-body-sm);
    color: var(--text-muted);
}

.login-screen__no-code[b-u59l67vm7j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-12);
    border-top: 1px solid var(--border);
}

.login-screen__no-code-title[b-u59l67vm7j] {
    font: var(--type-label);
    color: var(--text-secondary);
}

.login-screen__no-code-btn[b-u59l67vm7j] {
    width: 100%;
}

/* --- Responsive: < 900 px (Requirements §7) -----------------------------
   Markenflaeche wird auf einen schlanken Kopf reduziert (nur Wortmarke +
   Eyebrow), das Formular nimmt die volle Breite. Muss bis 375 px bedienbar
   bleiben. */
@media (max-width: 900px) {
    .login-screen[b-u59l67vm7j] {
        grid-template-columns: 1fr;
        grid-auto-rows: auto 1fr;
        overflow-y: auto;
    }

    .login-screen__brand[b-u59l67vm7j] {
        padding: var(--space-14) var(--space-16);
        overflow-y: visible;
    }

    .login-screen__brand-middle[b-u59l67vm7j],
    .login-screen__footnote[b-u59l67vm7j] {
        display: none;
    }

    .login-screen__form-side[b-u59l67vm7j] {
        align-items: flex-start;
        padding: var(--space-16);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found__body[b-d29ayd6z5n] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.not-found__body .ds-btn[b-d29ayd6z5n] {
    margin-top: var(--space-8);
}
/* /Components/Pages/OeffentlichMelden.razor.rz.scp.css */
.public-report[b-jmo6zqcn17] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    max-width: 680px;
    padding: 48px 24px;
}

.public-report__header[b-jmo6zqcn17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.public-report__identity[b-jmo6zqcn17] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.public-report__tile[b-jmo6zqcn17] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-input);
    background: var(--brand-primary);
    color: var(--text-on-brand);
    font-weight: 700;
    font-size: 16px;
}

.public-report__name[b-jmo6zqcn17] {
    font: var(--type-card-header);
    color: var(--text-primary);
}

.public-report__slug[b-jmo6zqcn17] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.public-report__form[b-jmo6zqcn17] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.public-report__row[b-jmo6zqcn17] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.report-field[b-jmo6zqcn17] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.report-field__error[b-jmo6zqcn17] {
    font: var(--type-label-hint);
    color: var(--danger-fg);
}

.public-report__hint[b-jmo6zqcn17] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.public-report__submit-error[b-jmo6zqcn17] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.public-report__footer[b-jmo6zqcn17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}

.public-report__footer-hint[b-jmo6zqcn17] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    text-align: right;
}

.public-report__done-body[b-jmo6zqcn17] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-24);
}

.public-report__success-icon[b-jmo6zqcn17] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--success-bg);
    color: var(--success-fg);
    margin-bottom: var(--space-2);
}

.public-report__done-actions[b-jmo6zqcn17] {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

/* Requirements §7: Login und Meldeformular sind die einzigen mobil optimierten Ansichten --
   diese Seite muss auf 375 px Breite vollstaendig bedienbar sein. */
@media (max-width: 480px) {
    .public-report[b-jmo6zqcn17] {
        padding: 24px 16px;
    }

    .public-report__row[b-jmo6zqcn17] {
        grid-template-columns: 1fr;
    }

    .public-report__footer[b-jmo6zqcn17] {
        flex-direction: column;
        align-items: stretch;
    }

    .public-report__footer-hint[b-jmo6zqcn17] {
        text-align: left;
    }

    .public-report__done-actions[b-jmo6zqcn17] {
        flex-direction: column;
    }

    .public-report__done-actions .ds-btn[b-jmo6zqcn17] {
        width: 100%;
    }
}
/* /Components/Pages/Plan.razor.rz.scp.css */
.page-head[b-qqqazhm2uh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- Lade-/Fehler-/Leerzustand ------------------------------------------ */

.status-card__body[b-qqqazhm2uh] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.status-card__body--error[b-qqqazhm2uh] {
    color: var(--danger-text);
}

.status-card__icon[b-qqqazhm2uh] {
    color: var(--danger-fg);
}

.status-card__body .ds-h2[b-qqqazhm2uh] {
    margin-top: var(--space-2);
}

.status-card__body .ds-btn[b-qqqazhm2uh] {
    margin-top: var(--space-8);
}

/* --- Plan-Inhalt: linke Spalte max. 820px (Handoff §6.7) ----------------- */

.plan-shell[b-qqqazhm2uh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    max-width: 820px;
}

.plan-header[b-qqqazhm2uh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.plan-header__progress[b-qqqazhm2uh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    min-width: 200px;
}

.plan-header__percent[b-qqqazhm2uh] {
    font: 600 22px var(--font-ui);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.plan-header__label[b-qqqazhm2uh] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.plan-header__bar[b-qqqazhm2uh] {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.plan-header__bar-fill[b-qqqazhm2uh] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-500);
    transition: width 260ms ease;
}

/* Phasenliste: keine Luecke zwischen den Zeilen, damit die Verbindungsschiene
   (siehe PhaseTimelineItem.razor.css) optisch nahtlos in die naechste Phase uebergeht. */
.plan-list[b-qqqazhm2uh] {
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/Themen.razor.rz.scp.css */
.page-head[b-stvmtalqy6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- Kopf (Handoff §6.4): Titel/Subline links, Suche + Umschalter rechts. ------------ */
.themen-head[b-stvmtalqy6] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.themen-head__intro[b-stvmtalqy6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.themen-head__actions[b-stvmtalqy6] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* --- Suchfeld: Hoehe 30px, Breite 230px, Lupe links 14px, X rechts wenn befuellt. ----- */
.themen-search[b-stvmtalqy6] {
    position: relative;
    display: flex;
    align-items: center;
    width: 230px;
    height: 30px;
}

.themen-search__input[b-stvmtalqy6] {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 30px;
    border-radius: var(--radius-input);
    border: 1px solid var(--border);
    background: var(--surface);
    font: var(--type-input);
    color: var(--text-primary);
}

.themen-search__input[b-stvmtalqy6]::placeholder {
    color: var(--text-faint);
}

.themen-search__icon[b-stvmtalqy6] {
    position: absolute;
    left: var(--space-6);
    color: var(--text-faint);
    pointer-events: none;
}

.themen-search__clear[b-stvmtalqy6] {
    position: absolute;
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.themen-search__clear:hover[b-stvmtalqy6] {
    background: var(--bg-subtle);
    color: var(--danger-fg);
}

/* --- Umschalter Tabelle/Karten -------------------------------------------------------- */
.themen-view-toggle[b-stvmtalqy6] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-input);
    background: var(--bg-subtle);
}

.themen-view-toggle__btn[b-stvmtalqy6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 26px;
    padding: 0 var(--space-6);
    border: none;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--text-muted);
    font: var(--type-btn-sm);
    cursor: pointer;
}

.themen-view-toggle__btn.is-active[b-stvmtalqy6] {
    background: var(--surface);
    color: var(--brand-primary-500);
    box-shadow: var(--shadow-xs);
}

/* --- Liste innerhalb von TopicDetailHost (Components/Topics/TopicDetailHost.razor.css) --
   das Split-/Overlay-Layout selbst steckt dort, gemeinsam mit Plan.razor genutzt. ---------*/
.themen-layout__list[b-stvmtalqy6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

/* --- Status-/Leerzustandskarten -------------------------------------------------------- */
.themen-status-card__body[b-stvmtalqy6],
.themen-empty__body[b-stvmtalqy6] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.themen-empty__body .ds-btn[b-stvmtalqy6] {
    margin-top: var(--space-8);
}

/* /Components/Pages/Uebersicht.razor.rz.scp.css */
.uebersicht[b-ntenqbf0it] {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
}

.page-head[b-ntenqbf0it] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- KPI-Karten (Handoff §6.3 Punkt 2) ---------------------------------- */

.kpi-grid[b-ntenqbf0it] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

@media (max-width: 899px) {
    .kpi-grid[b-ntenqbf0it] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Lade-/Fehler-/Leerzustand ------------------------------------------ */

.status-card__body[b-ntenqbf0it] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.status-card__body--error[b-ntenqbf0it] {
    color: var(--danger-text);
}

.status-card__icon[b-ntenqbf0it] {
    color: var(--danger-fg);
}

.status-card__body .ds-h2[b-ntenqbf0it] {
    margin-top: var(--space-2);
}

.status-card__body .ds-btn[b-ntenqbf0it] {
    margin-top: var(--space-8);
}
/* /Components/Pages/UnbekannterZugang.razor.rz.scp.css */
.unknown-access__body[b-2qqq9vni7p] {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.unknown-access__icon[b-2qqq9vni7p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--warning-bg);
    color: var(--warning-fg);
    margin-bottom: var(--space-2);
}

.unknown-access__body .ds-btn[b-2qqq9vni7p] {
    margin-top: var(--space-8);
}
/* /Components/Plan/PhaseTimelineItem.razor.rz.scp.css */
/* Phase im Onboarding-Plan (Handoff §6.7): Grid 34px minmax(0,1fr), gap 14px. */

.phase-row[b-ej3tdk8jbd] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-7);
}

/* --- Links: Nummernkreis (30px) + Verbindungsschiene (2px) -------------- */

.phase-row__rail[b-ej3tdk8jbd] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phase-row__circle[b-ej3tdk8jbd] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.phase-row__circle--done[b-ej3tdk8jbd] {
    background: var(--success-bg);
    color: var(--success-fg);
}

.phase-row__circle--in-progress[b-ej3tdk8jbd] {
    background: var(--brand-primary-500);
    color: var(--text-on-brand);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.phase-row__circle--planned[b-ej3tdk8jbd] {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.phase-row__line[b-ej3tdk8jbd] {
    flex: 1 1 auto;
    width: 2px;
    min-height: var(--space-10);
    margin-top: var(--space-2);
    background: var(--border);
}

.phase-row__line--done[b-ej3tdk8jbd] {
    background: var(--success-fg);
}

/* --- Rechts: aufklappbare Karte ------------------------------------------ */

.phase-row__card[b-ej3tdk8jbd] {
    min-width: 0;
}

.phase-row__header[b-ej3tdk8jbd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.phase-row__header:hover[b-ej3tdk8jbd] {
    background: var(--bg-subtle);
}

.phase-row__header-main[b-ej3tdk8jbd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.phase-row__title-line[b-ej3tdk8jbd] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.phase-row__meta[b-ej3tdk8jbd] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.phase-row__dot[b-ej3tdk8jbd] {
    color: var(--text-faint);
}

.phase-row__mini-bar[b-ej3tdk8jbd] {
    display: inline-block;
    width: 64px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
    margin-left: var(--space-2);
}

.phase-row__mini-bar-fill[b-ej3tdk8jbd] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-500);
    transition: width 260ms ease;
}

.phase-row__chevron[b-ej3tdk8jbd] {
    flex-shrink: 0;
    color: var(--text-muted);
    margin-top: var(--space-2);
    transition: transform 140ms ease;
}

.phase-row__chevron--open[b-ej3tdk8jbd] {
    transform: rotate(90deg);
}

/* --- Aufgeklappter Bereich: Beschreibung + Schrittliste ------------------ */

.phase-row__body[b-ej3tdk8jbd] {
    padding: 0 16px 16px;
    padding-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    border-top: 1px solid var(--border);
}

.phase-row__description[b-ej3tdk8jbd] {
    font: var(--type-body-sm);
    color: var(--text-secondary);
}

.phase-row__steps[b-ej3tdk8jbd] {
    display: flex;
    flex-direction: column;
}

.phase-row__step[b-ej3tdk8jbd] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-6) var(--space-8);
    border: none;
    border-left: 2px solid var(--border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

.phase-row__step:hover[b-ej3tdk8jbd] {
    background: var(--bg-subtle);
}

.phase-row__step--done[b-ej3tdk8jbd] {
    border-left-color: var(--success-fg);
}

/* Aktuell im Detailpanel geoeffneter Schritt (Festlegung des Auftraggebers vom 29.07.2026):
   dieselbe 2px linke Markierungskante, hier in der Primaerfarbe -- per Reihenfolge im
   Stylesheet gewinnt sie auch bei einem gleichzeitig erledigten Schritt. */
.phase-row__step--selected[b-ej3tdk8jbd] {
    border-left-color: var(--brand-primary-500);
}

.phase-row__step-check[b-ej3tdk8jbd] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phase-row__step-check--done[b-ej3tdk8jbd] {
    background: var(--brand-primary-500);
    border-color: var(--brand-primary-500);
    color: var(--text-on-brand);
}

.phase-row__step-check-icon[b-ej3tdk8jbd] {
    width: 11px;
    height: 11px;
}

.phase-row__step-text[b-ej3tdk8jbd] {
    flex: 1 1 auto;
    min-width: 0;
    font: var(--type-body-sm);
    color: var(--text-primary);
}

.phase-row__step--done .phase-row__step-text[b-ej3tdk8jbd] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.phase-row__step-assignee[b-ej3tdk8jbd] {
    flex-shrink: 0;
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.phase-row__step-assignee--you[b-ej3tdk8jbd] {
    color: var(--brand-primary-500);
    font-weight: 600;
}

/* Faelligkeitsdatum rechts neben dem Verantwortlichen (Festlegung vom 29.07.2026). Farbe kommt
   aus der Hervorhebungsklasse (ds-due--muted/--overdue/--today, tokens.css). */
.phase-row__step-due[b-ej3tdk8jbd] {
    flex-shrink: 0;
    font: var(--type-label-hint);
}
/* /Components/Shared/UploadZone.razor.rz.scp.css */
.upload-zone[b-t5zh7u76f9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    padding: 26px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-input);
    background: var(--surface);
    cursor: pointer;
}

.upload-zone--dragover[b-t5zh7u76f9] {
    border-color: var(--brand-primary-500);
    background: var(--brand-primary-soft);
}

.upload-zone__input[b-t5zh7u76f9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone__icon[b-t5zh7u76f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.upload-zone__text[b-t5zh7u76f9] {
    font: var(--type-body);
    color: var(--text-primary);
}

.upload-zone__hint[b-t5zh7u76f9] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.upload-zone__errors[b-t5zh7u76f9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.upload-zone__error[b-t5zh7u76f9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--danger-fg);
    font: var(--type-body-sm);
}

.upload-zone__files[b-t5zh7u76f9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-10);
}

.upload-zone__file[b-t5zh7u76f9] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    background: var(--surface);
}

.upload-zone__file-icon[b-t5zh7u76f9] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.upload-zone__file-name[b-t5zh7u76f9] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.upload-zone__file-size[b-t5zh7u76f9] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.upload-zone__file-remove[b-t5zh7u76f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-btn);
}

.upload-zone__file-remove:hover[b-t5zh7u76f9] {
    color: var(--danger-fg);
    background: var(--bg-subtle);
}
/* /Components/Topics/AttachmentList.razor.rz.scp.css */
/* Anlagen-Zeilen (Handoff §6.5 Punkt 5, §7 Größenformat). */

.attachment-list[b-okta4pky0i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.attachment-list__empty[b-okta4pky0i] {
    padding: var(--space-2) 0;
}

.attachment-list__row[b-okta4pky0i] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.attachment-list__icon[b-okta4pky0i] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.attachment-list__name[b-okta4pky0i] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--brand-primary-500);
}

.attachment-list__name:hover[b-okta4pky0i] {
    text-decoration: underline;
}

.attachment-list__size[b-okta4pky0i] {
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Topics/ReportTopicDialog.razor.rz.scp.css */
.report-dialog-backdrop[b-s8lnp2qsjw] {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    background: rgba(15, 17, 26, 0.45);
    backdrop-filter: blur(6px);
}

.report-dialog[b-s8lnp2qsjw] {
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: calc(100vh - 64px);
    background: var(--surface);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Visuell verborgene Sentinels fuer den Fokus-Trap ohne JS-Interop: erhalten Fokus per Tab
   an den jeweiligen Enden des Dialogs und lenken ihn zurueck an das andere Ende. */
.dialog-sr-sentinel[b-s8lnp2qsjw] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.report-dialog__header[b-s8lnp2qsjw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.report-dialog__close[b-s8lnp2qsjw] {
    width: 36px;
    padding: 0;
}

.report-dialog__body[b-s8lnp2qsjw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: 18px;
    overflow-y: auto;
}

.report-dialog__field[b-s8lnp2qsjw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.report-dialog__hint[b-s8lnp2qsjw] {
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.report-dialog__error[b-s8lnp2qsjw] {
    font: var(--type-label-hint);
    color: var(--danger-fg);
}

.report-dialog__submit-error[b-s8lnp2qsjw] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.report-dialog__footer[b-s8lnp2qsjw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-app);
}
/* /Components/Topics/SubtaskList.razor.rz.scp.css */
/* Teilaufgaben-Zeilen (Handoff §6.5 Punkt 3, Auftrag Punkt 3). */

.subtask-list[b-lht9fw1227] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.subtask-list__empty[b-lht9fw1227] {
    padding: var(--space-2) 0;
}

.subtask-list__row[b-lht9fw1227] {
    display: flex;
}

/* Nicht interaktiv: Teilaufgaben werden nur angezeigt, das Erledigen ist im Portal
   deaktiviert (siehe Kopfkommentar in SubtaskList.razor). */
.subtask-list__item[b-lht9fw1227] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-4) var(--space-2);
    color: inherit;
    text-align: left;
}

.subtask-list__box[b-lht9fw1227] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-on-brand);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.subtask-list__box--done[b-lht9fw1227] {
    background: var(--brand-primary-500);
    border-color: var(--brand-primary-500);
}

.subtask-list__title[b-lht9fw1227] {
    flex: 1 1 auto;
    font: var(--type-body-sm);
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.subtask-list__title--done[b-lht9fw1227] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.subtask-list__assignee[b-lht9fw1227] {
    flex-shrink: 0;
    white-space: nowrap;
}
/* /Components/Topics/TopicCards.razor.rz.scp.css */
.topic-cards[b-rma4j5fd1s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-8);
}

.topic-cards__card[b-rma4j5fd1s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    /* .ds-card liefert Radius/Rahmen/Schatten bereits; hier nur Button-Reset + Innenabstand. */
}

.topic-cards__card:hover[b-rma4j5fd1s] {
    background: var(--surface-hover);
}

/* Ausgewaehlte Karte: Rahmen --brand-primary-500 (Handoff §6.4). */
.topic-cards__card.is-selected[b-rma4j5fd1s] {
    border-color: var(--brand-primary-500);
}

.topic-cards__head[b-rma4j5fd1s] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topic-cards__title[b-rma4j5fd1s] {
    font: var(--type-label);
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.topic-cards__source[b-rma4j5fd1s] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-cards__updated[b-rma4j5fd1s] {
    margin-top: auto;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Farbe kommt aus der Hervorhebungsklasse (ds-due--muted/--overdue/--today, tokens.css). */
.topic-cards__due[b-rma4j5fd1s] {
    font-size: 12.5px;
}
/* /Components/Topics/TopicCommentList.razor.rz.scp.css */
/* Verlauf-Einträge (Handoff §6.5 Punkt 6, Auftrag Punkt 5). */

.comment-list[b-f1863k7stv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.comment-list__empty[b-f1863k7stv] {
    padding: var(--space-2) 0;
}

.comment-list__row[b-f1863k7stv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
}

.comment-list__avatar[b-f1863k7stv] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-soft);
    color: var(--brand-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10.5px var(--font-ui);
}

.comment-list__body[b-f1863k7stv] {
    flex: 1 1 auto;
    min-width: 0;
}

.comment-list__head[b-f1863k7stv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.comment-list__author[b-f1863k7stv] {
    font: var(--type-label);
    color: var(--text-primary);
}

.comment-list__portal-tag[b-f1863k7stv] {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font: 500 10px var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-list__meta[b-f1863k7stv] {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--text-muted);
    margin-top: 1px;
}

.comment-list__text[b-f1863k7stv] {
    font: var(--type-body-sm);
    color: var(--text-primary);
    margin-top: var(--space-3);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Topics/TopicDetailHost.razor.rz.scp.css */
/* Gemeinsame Layout-Mechanik fuer Themenliste und Plan (Handoff §10, Breakpoint 1300px):
   einspaltig, ab Viewport >=1300px zweispaltig (eigener Inhalt + Panel in zweiter Grid-Spalte),
   darunter als Overlay mit Backdrop. Die Breite wird per JS-Interop ermittelt (siehe
   TopicDetailHost.razor, Feld "_isWide"). ------------------------------------------------- */
.topic-detail-host[b-k8spawpnw4] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-16);
}

.topic-detail-host--split[b-k8spawpnw4] {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
}

.topic-detail-host__list[b-k8spawpnw4] {
    min-width: 0;
}

/* --- Ersatz-Panel fuer "Thema wird geladen"/"nicht verfuegbar", solange kein echtes
   Thema vorliegt. Verhaelt sich wie das Detailpanel: >=1300px als zweite Spalte,
   darunter als Overlay mit Backdrop (Handoff §7: rgba(0,0,0,0.4) + blur(8px)). -----------*/
.topic-detail-host__slot--overlay[b-k8spawpnw4] {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    justify-content: flex-end;
}

.topic-detail-host__backdrop[b-k8spawpnw4] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.topic-detail-host__slot--overlay .topic-detail-host__card[b-k8spawpnw4] {
    position: relative;
    width: min(420px, 100%);
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
}

/* Ersatzkarte haftet wie das echte Panel, damit der Wechsel zwischen "wird geladen",
   "nicht verfügbar" und den Details keinen Sprung erzeugt. Maße identisch zu
   .topic-detail--inline (TopicDetailPanel.razor.css). */
.topic-detail-host__slot--panel .topic-detail-host__card[b-k8spawpnw4] {
    position: sticky;
    top: var(--space-16);
    max-height: calc(100vh - 64px - 2 * var(--space-16));
    overflow-y: auto;
}

.topic-detail-host__missing-body[b-k8spawpnw4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: flex-start;
}
/* /Components/Topics/TopicDetailPanel.razor.rz.scp.css */
/* Themen-Detailpanel (Handoff §6.5, §7, §10). */

.topic-detail-backdrop[b-5k1uujueq6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 45;
}

@media (prefers-reduced-motion: reduce) {
    .topic-detail-backdrop[b-5k1uujueq6] {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.topic-detail[b-5k1uujueq6] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    min-height: 0;
}

/* --- Variante: Overlay (< 1300px, Handoff §10) -------------------------- */
.topic-detail--overlay[b-5k1uujueq6] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    z-index: 50;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

/* --- Variante: Inline in zweiter Grid-Spalte (>= 1300px, Handoff §10) --- */
.topic-detail--inline[b-5k1uujueq6] {
    /* Haftet beim Scrollen, damit die Aufgabe im Blick bleibt, egal wie weit die Liste bzw.
       der Plan nach unten reicht (Festlegung des Auftraggebers vom 29.07.2026).
       Scroll-Container ist .app-content (MainLayout), dessen oberer Rand direkt unter der
       64px-Topbar liegt — top ist daher relativ dazu gemessen und hält mit 32px denselben
       Abstand wie das Content-Padding.
       Die Höhe ist auf den sichtbaren Bereich begrenzt; der Panel-Körper
       (.topic-detail__body) scrollt bei längeren Inhalten in sich. */
    position: sticky;
    top: var(--space-16);
    max-height: calc(100vh - 64px - 2 * var(--space-16));
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* --- Kopf ---------------------------------------------------------------- */
.topic-detail__header[b-5k1uujueq6] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.topic-detail__header-main[b-5k1uujueq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.topic-detail__badges[b-5k1uujueq6] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topic-detail__title[b-5k1uujueq6] {
    overflow-wrap: anywhere;
}

.topic-detail__header-actions[b-5k1uujueq6] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.topic-detail__copy-btn[b-5k1uujueq6] {
    height: 28px;
}

.topic-detail__close-btn[b-5k1uujueq6] {
    width: 28px;
    height: 28px;
    padding: 0;
}

/* --- Körper (scrollbar, Abschnitte mit border-top getrennt) ------------- */
.topic-detail__body[b-5k1uujueq6] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.topic-detail__section[b-5k1uujueq6] {
    padding-top: var(--space-10);
}

.topic-detail__section:first-child[b-5k1uujueq6] {
    padding-top: 0;
}

.topic-detail__section + .topic-detail__section[b-5k1uujueq6] {
    border-top: 1px solid var(--border);
}

.topic-detail__section-head[b-5k1uujueq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.topic-detail__section-count[b-5k1uujueq6] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Aktions-Banner (nur bei "Wartet auf dich") ------------------------- */
.topic-detail__action-banner[b-5k1uujueq6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    background: var(--brand-accent-soft);
    border-radius: var(--radius-input);
    padding: var(--space-8) var(--space-10);
}

.topic-detail__action-icon[b-5k1uujueq6] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--warning-fg);
}

.topic-detail__action-text[b-5k1uujueq6] {
    font: var(--type-body-sm);
    color: var(--text-primary);
}

/* --- Beschreibung -------------------------------------------------------- */
.topic-detail__description[b-5k1uujueq6] {
    margin-top: var(--space-6);
    font: var(--type-body-sm);
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Metadaten-Grid (Handoff §6.5 Punkt 4) ------------------------------ */
.topic-detail__meta-grid[b-5k1uujueq6] {
    margin-top: var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-10);
}

.topic-detail__meta-item dt[b-5k1uujueq6] {
    margin: 0;
}

.topic-detail__meta-item dd[b-5k1uujueq6] {
    margin: 2px 0 0;
}

.topic-detail__meta-item--wide[b-5k1uujueq6] {
    grid-column: 1 / -1;
}

/* --- Fußleiste (Antwortformular, Handoff §6.5 Punkt 6) ------------------ */
.topic-detail__footer[b-5k1uujueq6] {
    flex-shrink: 0;
    background: var(--bg-app);
    border-top: 1px solid var(--border);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}

.topic-detail__textarea[b-5k1uujueq6] {
    min-height: 56px;
}

/* --- Anlagen im Kommentar-Footer (Auftrag 1, 29.07.2026) ---------------- */
.topic-detail__compose[b-5k1uujueq6] {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
}

.topic-detail__compose .topic-detail__textarea[b-5k1uujueq6] {
    flex: 1 1 auto;
    min-width: 0;
}

.topic-detail__attach-zone[b-5k1uujueq6] {
    position: relative;
    flex: 0 0 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-input);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
}

.topic-detail__attach-input[b-5k1uujueq6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.topic-detail__attach-icon[b-5k1uujueq6] {
    color: var(--text-muted);
}

.topic-detail__attach-text[b-5k1uujueq6] {
    font: var(--type-label-hint);
    color: var(--text-primary);
}

.topic-detail__attach-hint[b-5k1uujueq6] {
    margin-top: var(--space-3);
    color: var(--text-muted);
}

.topic-detail__attach-errors[b-5k1uujueq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.topic-detail__attach-files[b-5k1uujueq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.topic-detail__attach-file[b-5k1uujueq6] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    background: var(--surface);
}

.topic-detail__attach-file-icon[b-5k1uujueq6] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.topic-detail__attach-file-name[b-5k1uujueq6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--text-primary);
}

.topic-detail__attach-file-size[b-5k1uujueq6] {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.topic-detail__attach-file-remove[b-5k1uujueq6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-btn);
}

.topic-detail__attach-file-remove:hover[b-5k1uujueq6] {
    color: var(--danger-fg);
    background: var(--bg-subtle);
}

.topic-detail__hint[b-5k1uujueq6] {
    margin-top: var(--space-3);
}

.topic-detail__error[b-5k1uujueq6] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.topic-detail__footer-actions[b-5k1uujueq6] {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

/* --- Mobil (Requirements §7: Detailpanel nicht mobil-optimiert, aber die
   Overlay-Variante darf auf schmalen Bildschirmen wenigstens die volle
   Breite nutzen, statt seitlich abgeschnitten zu werden). -------------------- */
@media (max-width: 520px) {
    .topic-detail--overlay[b-5k1uujueq6] {
        width: 100vw;
        border-left: none;
    }

    .topic-detail__compose[b-5k1uujueq6] {
        flex-direction: column;
    }

    .topic-detail__attach-zone[b-5k1uujueq6] {
        flex: 0 0 auto;
        flex-direction: row;
        padding: var(--space-6) var(--space-8);
    }
}
/* /Components/Topics/TopicFilterBar.razor.rz.scp.css */
.topic-filter-bar[b-f3hiaqmn5c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.topic-filter-bar__chips[b-f3hiaqmn5c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Chip im Ruhezustand: wie ein sekundaerer Ghost-Button, Hoehe an .ds-btn--sm angelehnt. */
.topic-filter-bar__chip[b-f3hiaqmn5c] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: var(--type-btn-sm);
    cursor: pointer;
    white-space: nowrap;
}

.topic-filter-bar__chip:hover[b-f3hiaqmn5c] {
    background: var(--bg-subtle);
}

/* Aktiver Chip: --brand-primary-soft Hintergrund, --brand-primary-500 Text (Handoff §6.4). */
.topic-filter-bar__chip.is-active[b-f3hiaqmn5c] {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-500);
}

.topic-filter-bar__area[b-f3hiaqmn5c] {
    width: auto;
    min-width: 160px;
    height: 30px;
}
/* /Components/Topics/TopicTable.razor.rz.scp.css */
/* Tabellenansicht als Karte (Handoff §6.4). Grid auf 4 Spalten angepasst -- siehe
   Kommentar in TopicTable.razor fuer die Begruendung der Abweichung (keine Nr./Prio).
   Fuenfte Spalte "Faellig" ergaenzt (Festlegung vom 29.07.2026, Aenderung 2d), gleiche
   Breite wie "Aktualisiert" -- min-width entsprechend um Spalte + Gap erhoeht. */
.topic-table[b-3x8gwoop49] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.topic-table__scroll[b-3x8gwoop49] {
    overflow-x: auto;
}

.topic-table__row[b-3x8gwoop49] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 116px 120px 88px 88px;
    align-items: center;
    gap: var(--space-6);
    min-width: 860px;
    width: 100%;
}

.topic-table__row--header[b-3x8gwoop49] {
    padding: var(--space-6) var(--space-8);
    background: var(--bg-subtle);
}

.topic-table__body[b-3x8gwoop49] {
    display: flex;
    flex-direction: column;
}

button.topic-table__row[b-3x8gwoop49] {
    padding: var(--space-6) var(--space-8);
    border: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

button.topic-table__row:hover[b-3x8gwoop49] {
    background: var(--surface-hover);
}

button.topic-table__row.is-selected[b-3x8gwoop49] {
    background: var(--bg-subtle);
}

.topic-table__cell[b-3x8gwoop49] {
    min-width: 0;
    overflow: hidden;
}

.topic-table__cell--title[b-3x8gwoop49] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.topic-table__title[b-3x8gwoop49] {
    font: var(--type-label);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-table__source[b-3x8gwoop49] {
    font: var(--type-label-hint);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-table__cell--updated[b-3x8gwoop49] {
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: right;
    white-space: nowrap;
}

/* Farbe kommt aus der Hervorhebungsklasse (ds-due--muted/--overdue/--today, tokens.css) --
   hier nur Ausrichtung/Breite, analog zu topic-table__cell--updated. */
.topic-table__cell--due[b-3x8gwoop49] {
    font-size: 12.5px;
    text-align: right;
    white-space: nowrap;
}
/* /Components/Users/ImportPanel.razor.rz.scp.css */
/* Massenimport-Karte (Handoff §6.8): Dropzone, Zusammenfassung, Zeilenliste mit Zustandsfarben. */

.import-panel__body[b-6uoipu9prh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.import-panel__hint[b-6uoipu9prh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.import-panel__hint--warning[b-6uoipu9prh] {
    color: var(--warning-fg);
}

.import-panel__error[b-6uoipu9prh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.import-panel__summary[b-6uoipu9prh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- Zeilenliste: Checkbox · Name · E-Mail · Rolle · Status ------------------------ */
.import-panel__rows[b-6uoipu9prh] {
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    overflow: hidden;
}

.import-panel__row[b-6uoipu9prh] {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) minmax(160px, 1.4fr) 160px 100px;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-8);
    font: var(--type-table-cell);
    color: var(--text-primary);
}

.import-panel__row:not(:last-child)[b-6uoipu9prh] {
    border-bottom: 1px solid var(--border);
}

.import-panel__row--header[b-6uoipu9prh] {
    background: var(--bg-subtle);
}

.import-panel__row--invalid[b-6uoipu9prh] {
    background: var(--danger-bg);
}

.import-panel__row--duplicate[b-6uoipu9prh] {
    background: var(--warning-bg);
}

.import-panel__role-select[b-6uoipu9prh] {
    height: 32px;
    padding: 0 var(--space-6);
}

.import-panel__actions[b-6uoipu9prh] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

/* --- Erfolgsbox nach dem Import ---------------------------------------------------- */
.import-panel__success[b-6uoipu9prh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.import-panel__success-icon[b-6uoipu9prh] {
    color: var(--success-fg);
}

@media (max-width: 720px) {
    .import-panel__row[b-6uoipu9prh] {
        grid-template-columns: 24px minmax(100px, 1fr) minmax(140px, 1.2fr) 130px 90px;
    }
}
/* /Components/Users/InvitePanel.razor.rz.scp.css */
/* Einladen-Karte (Handoff §6.8): Felder Name/E-Mail/Typ/Rolle/(Asana-User-ID) + Ergebnisblock. */

.invite-panel__body[b-c9rx9zgxfc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.invite-panel__field[b-c9rx9zgxfc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.invite-panel__field-row[b-c9rx9zgxfc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

.invite-panel__error[b-c9rx9zgxfc] {
    font: var(--type-body-sm);
    color: var(--danger-fg);
}

.invite-panel__submit-error[b-c9rx9zgxfc] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-input);
    background: var(--danger-bg);
    color: var(--danger-text);
    font: var(--type-body-sm);
}

.invite-panel__actions[b-c9rx9zgxfc] {
    display: flex;
    justify-content: flex-end;
}

/* --- Ergebnisblock nach dem Anlegen ------------------------------------------------ */
.invite-panel__result[b-c9rx9zgxfc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.invite-panel__result-row[b-c9rx9zgxfc] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-input);
    background: var(--bg-subtle);
}

.invite-panel__result-label[b-c9rx9zgxfc] {
    flex: 0 0 auto;
    min-width: 90px;
}

.invite-panel__code[b-c9rx9zgxfc] {
    letter-spacing: 0.12em;
    color: var(--text-primary);
}

.invite-panel__link[b-c9rx9zgxfc] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.invite-panel__hint[b-c9rx9zgxfc] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font: var(--type-label-hint);
    color: var(--text-muted);
}

.invite-panel__hint--warning[b-c9rx9zgxfc] {
    color: var(--warning-fg);
}

@media (max-width: 640px) {
    .invite-panel__field-row[b-c9rx9zgxfc] {
        grid-template-columns: 1fr;
    }

    .invite-panel__result-row[b-c9rx9zgxfc] {
        flex-wrap: wrap;
    }
}
/* /Components/Users/UserTable.razor.rz.scp.css */
/* Benutzertabelle (Handoff §6.8). Grid-Spalten: Name · E-Mail · Rolle · Status ·
   Letzter Zugang · Aktionen. Horizontal scrollbar ab min-width, analog topic-table. */

.user-table[b-lhswr41qkt] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.user-table__scroll[b-lhswr41qkt] {
    overflow-x: auto;
}

.user-table__row[b-lhswr41qkt] {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(200px, 1.6fr) 160px 140px 140px 120px;
    align-items: center;
    gap: var(--space-8);
    min-width: 820px;
    padding: var(--space-6) var(--space-8);
}

.user-table__row--header[b-lhswr41qkt] {
    background: var(--bg-subtle);
    padding: var(--space-6) var(--space-8);
}

.user-table__body .user-table__entry:not(:last-child) .user-table__row[b-lhswr41qkt] {
    border-bottom: 1px solid var(--border);
}

.user-table__cell[b-lhswr41qkt] {
    font: var(--type-table-cell);
    color: var(--text-primary);
    min-width: 0;
}

.user-table__cell--name[b-lhswr41qkt] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.user-table__name[b-lhswr41qkt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-table__role-select[b-lhswr41qkt] {
    height: 32px;
    padding: 0 var(--space-6);
}

.user-table__actions[b-lhswr41qkt] {
    display: flex;
    justify-content: flex-end;
}

.user-table__row-error[b-lhswr41qkt] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-8) var(--space-6);
    color: var(--danger-fg);
    font: var(--type-body-sm);
}