.sidebar-layout {
    --sidebar-width: 352px;
    padding-left: var(--sidebar-width);
    background: var(--color-surface);
}

.sidebar-layout > .site-main {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--space-3);
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: 0;
    padding: var(--space-7) var(--space-4);
}

:where(.site-main) > * { grid-column: 1 / -1; }

.site-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-4) var(--space-3);
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.site-sidebar a { text-decoration: none; }

.site-sidebar__head a {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.sidebar-nav {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.sidebar-nav__group { display: grid; gap: var(--space-1); }

.sidebar-nav__group h2 {
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border-left: 4px solid;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sidebar-nav__group > div {
    display: grid;
    gap: var(--space-1);
    padding-inline: var(--space-1);
}

.sidebar-nav__group a,
.sidebar-nav__group > div > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2);
    border-radius: 6px;
    color: var(--color-text);
    font-size: .88rem;
    font-weight: 600;
}

/* Aktiv und Hover tragen den Ton der Gruppe, die Schrift bleibt dunkel (ADR-0060). */
.sidebar-nav__group a:hover {
    background: color-mix(in srgb, var(--nav-tint) 50%, var(--color-surface));
    box-shadow: inset 3px 0 color-mix(in srgb, var(--nav-solid) 40%, var(--color-surface));
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-nav__group a[aria-current="page"] {
    background: var(--nav-tint);
    box-shadow: inset 3px 0 var(--nav-solid);
}

.sidebar-nav__group > div > span { color: var(--color-text-muted); }
.sidebar-nav__group small { font-size: .65rem; font-weight: 500; }
.sidebar-nav__group h2 { border-color: var(--nav-solid); background: var(--nav-tint); }

.sidebar-nav__group--development {
    --nav-solid: var(--color-area-authoring-solid);
    --nav-tint: var(--color-area-authoring-tint);
}
.sidebar-nav__group--education {
    --nav-solid: var(--color-area-participant-solid);
    --nav-tint: var(--color-area-participant-tint);
}
.sidebar-nav__group--research {
    --nav-solid: var(--color-area-research-solid);
    --nav-tint: var(--color-area-research-tint);
}
.sidebar-nav__group--system {
    --nav-solid: var(--color-area-system-solid);
    --nav-tint: var(--color-area-system-tint);
}

/* Der Fußslot der Seitenleiste: entweder das Konto oder das Teilnahme-Token. */
.sidebar-account,
.sidebar-token {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.sidebar-account {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: .86rem;
}

.sidebar-account__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-area-authoring-tint);
    color: var(--color-text);
    font-size: .76rem;
    font-weight: 700;
}

.sidebar-account small,
.sidebar-token small {
    display: block;
    color: var(--color-text-muted);
    font-size: .75rem;
}

.sidebar-account form { margin: 0; }
.sidebar-account button {
    padding: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.sidebar-token strong {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: .08em;
    word-break: break-all;
}

.sidebar-login {
    margin-top: auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
    text-align: center;
}

.sidebar-login:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

@media (max-width: 1050px) {
    .sidebar-layout > .site-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .sidebar-layout { padding-left: 0; }
    .site-sidebar {
        position: static;
        width: 100%;
        max-height: none;
        padding: var(--space-3);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }
    .sidebar-layout > .site-main { padding: var(--space-4) var(--space-3); }
    .sidebar-account,
    .sidebar-token,
    .sidebar-login { margin-top: var(--space-3); }
}