/* Standalone-Handbuch (public/handbuch.php) — eigenstaendiges Layout im
   App-Look, BEWUSST nur hell (kein Dark-Mode vor dem Login: weder ui-prefs.js
   noch data-theme=dark). Farben aus tokens.css (Light-Default); die
   Artikel-Typografie kommt aus hilfe.css (.hilfe-article), damit der Inhalt
   nur EINMAL gepflegt wird. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--c-fg);
    background: var(--c-bg);
}

.hb-wrap { display: flex; align-items: stretch; min-height: 100vh; }

/* ---------- Sidebar (Look wie das Hauptmenue) -------------------------- */
.hb-sidebar {
    flex: 0 0 250px;
    background: var(--theme-sidebar-bg, #1f2933);
    color: #e6ebf0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.hb-brand {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--theme-sidebar-border, rgba(255, 255, 255, 0.08));
    background: var(--theme-sidebar-brand-bg, #1a222b);
    flex-shrink: 0;
}
/* Logo-Plakette wie in der App (.nav-brand-logo): feste quadratische, HELLE
   Platte, Logo eingepasst (contain) -> klar lesbar auf der dunklen Sidebar. */
.hb-brand-logo {
    width: 76px; height: 76px;
    box-sizing: border-box;
    padding: 9px;
    display: block;
    object-fit: contain;
    background: var(--theme-sidebar-logo-plate, #ffffff);
    border-radius: 16px;
}
.hb-brand-text { font-weight: 700; font-size: 18px; color: #fff; }

.hb-toc { flex: 1; overflow-y: auto; padding: 6px 0; }
.hb-grouplabel {
    cursor: pointer; user-select: none; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 16px;
    font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
    color: #9aa7b4; font-weight: 600;
}
.hb-grouplabel::-webkit-details-marker { display: none; }
.hb-grouplabel::after { content: '\25B8'; font-size: 10px; transition: transform .15s ease; }
.hb-group[open] > .hb-grouplabel::after { transform: rotate(90deg); }
.hb-grouplabel:hover { color: #e6ebf0; }
.hb-toc ul { list-style: none; margin: 0 0 4px; padding: 0; }
.hb-link {
    display: block; padding: 7px 16px 7px 22px;
    text-decoration: none; font-size: 13.5px; line-height: 1.35;
    border-left: 3px solid transparent;
}
.hb-link:link, .hb-link:visited { color: #c4d1dc; }
.hb-link:hover { background: var(--theme-sidebar-hover-bg, #2c3640); color: #fff; }
.hb-link.is-active,
.hb-link.is-active:link,
.hb-link.is-active:visited {
    background: var(--theme-sidebar-hover-bg, #2c3640); color: #fff; font-weight: 600;
    border-left-color: var(--c-identity, #c8102e);
}

.hb-backlogin {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 16px; flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.hb-backlogin:link, .hb-backlogin:visited { color: #c4d1dc; }
.hb-backlogin:hover { background: var(--theme-sidebar-hover-bg, #2c3640); color: #fff; }

/* Tastatur-Fokus: der globale rote Ring (--c-primary #c8102e) waere auf der
   dunklen Sidebar zu kontrastarm (<3:1) -> hier ein WEISSER Ring (>14:1). */
.hb-brand:focus-visible,
.hb-grouplabel:focus-visible,
.hb-link:focus-visible,
.hb-backlogin:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* ---------- Inhalt (Breite wie die Linksammlung) ---------------------- */
.hb-main {
    flex: 1; min-width: 0;
    padding: 26px max(20px, calc((100% - var(--content-max-width, 1500px)) / 2 + 20px)) 64px;
}
.hb-pagehead {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}
.hb-category {                       /* H1-Ebene: die Handbuch-Kategorie */
    margin: 0;
    font-size: 30px; line-height: 1.15; font-weight: 700;
    color: var(--c-fg);
}
.hb-pagetitle {                      /* Titelebene: die Seitenueberschrift */
    margin: 6px 0 0;
    font-size: 17px; font-weight: 500;
    color: var(--c-muted);
}

/* Artikel-Typografie stammt aus hilfe.css (.hilfe-article); hier nur die
   880px-Lesebreite aufheben, damit der Inhalt die volle Spalte nutzt. */
.hb-main .hilfe-article { max-width: none; }

/* ---------- Mobil: Sidebar oben, Inhalt darunter ---------------------- */
@media (max-width: 760px) {
    .hb-wrap { flex-direction: column; }
    .hb-sidebar { flex-basis: auto; position: static; height: auto; }
    .hb-toc { max-height: 55vh; }
    .hb-category { font-size: 25px; }
}